Js日常笔记之数组
1、Array
构造函数有一个很大的问题,就是不同的参数,会导致它的行为不一致,es6好像专门为此对数组有升级
因此,不建议使用new Array生成新数组,直接使用数组字面量[...]是更好的做法。
2、Array.isArray
方法用来判断一个值是否为数组。它可以弥补typeof
运算符的不足
var a = [1, 2, 3]; typeof a // "object" Array.isArray(a) // true
3、push()和pop() 结合使用,就构成了“后进先出”的栈结构(stack)
push
方法用于在数组的末端添加一个或多个元素,并返回添加新元素后的数组长度,
pop
方法用于删除数组的最后一个元素,并返回该元素。
4、join()方法以参数作为分隔符,将所有数组成员组成一个字符串返回。如果不提供参数,默认用逗号分隔。
如果数组成员是undefined
或null
或空位,会被转成空字符串
[undefined, null].join('#') // '#' ['a',, 'b'].join('-') // 'a--b'
通过call
方法,这个方法也可以用于字符串
Array.prototype.join.call('hello', '-') // "h-e-l-l-o"
5、concat()方法用于多个数组的合并。返回一个新数组,原数组不变。
concat
也可以接受其他类型的值作为参数。它们会作为新的元素,添加数组尾部。
[1, 2, 3].concat(4, 5, 6) // [1, 2, 3, 4, 5, 6] // 等同于 [1, 2, 3].concat(4, [5, 6]) [1, 2, 3].concat([4], [5, 6])
注意:concat
方法返回当前数组的一个浅拷贝,如果数组中存在复合类型数据(比如对象),原数据改变,数组元素也会随之改变;
let d={a:1} a=a.concat(d) //(8) [{…}, 2, "a", "b", true, 4, 5, {…}] a[7]//{a: 1} d.a=3//3 a[7]//{a: 3}
6、shift()和unshift()
shift
方法用于删除数组的第一个元素,并返回该元素。push
和shift
结合使用,就构成了“先进先出”的队列结构(queue)
unshift
方法用于在数组的第一个位置添加一个或多个元素,并返回添加新元素后的数组长度
var arr = [ 'c', 'd' ]; arr.unshift('a', 'b') // 4 arr // [ 'a', 'b', 'c', 'd' ]
7、slice()和splice()
slice
方法用于提取原数组的一部分,返回一个新数组,原数组不变。
// 格式 arr.slice(start_index, upto_index); // 用法 var a = ['a', 'b', 'c']; a.slice(0) // ["a", "b", "c"] a.slice(1) // ["b", "c"] a.slice(1, 2) // ["b"] a.slice() // ["a", "b", "c"] ///如果slice方法的参数是负数,则表示倒数计算的位置。 var a = ['a', 'b', 'c']; a.slice(-2) // ["b", "c"] a.slice(-2, -1) // ["b"]
splice
方法用于删除原数组的一部分成员,并可以在被删除的位置添加入新的数组成员,返回值是被删除的元素。
splice
的第一个参数是删除的起始位置,第二个参数是被删除的元素个数。如果后面还有更多的参数,则表示这些就是要被插入数组的新元素。
var a = ['a', 'b', 'c', 'd', 'e', 'f']; a.splice(4, 2, 1, 2) // ["e", "f"]//从e开始删除2个元素,再插入后面的参数 a // ["a", "b", "c", "d", 1, 2] ///起始位置如果是负数,就表示从倒数位置开始删除。 var a = ['a', 'b', 'c', 'd', 'e', 'f']; a.splice(-4, 2) // ["c", "d"] ///常见用法,第二个参数给0,在指定位置插入新元素 var a = [1, 1, 1]; a.splice(1, 0, 2) // [] a // [1, 2, 1, 1]
8、reverse()和sort(),之所以两个一起说,是因为二者都是封装了一个常用的遍历算法
reverse
方法用于颠倒数组中元素的顺序,返回改变后的数组。
sort
方法对数组成员进行排序,默认是按照字典顺序排序。数值会被先转成字符串,再按照字典顺序进行比较
sort
方法可以传入一个函数作为参数,表示按照自定义方法进行排序
[ { name: "张三", age: 30 }, { name: "李四", age: 24 }, { name: "王五", age: 28 } ].sort(function (o1, o2) { return o1.age - o2.age;//a>b则调换位置,实现从小到大的排序 }) // [ // { name: "李四", age: 24 }, // { name: "王五", age: 28 }, // { name: "张三", age: 30 } // ]
9、forEach()和map()
相同点:都是遍历数组的所有成员,依次调用一个函数,执行某种操作
区别:map
方法会根据函数结果返回一个新数组,而forEach没有返回值
注意:forEach
方法无法中断执行,总是会将所有成员遍历完
///map用法 [1, 2, 3].map(function(elem, index, arr) { return elem * index; }); // [0, 2, 6] ///forEach用法 function log(element, index, array) { console.log('[' + index + '] = ' + element); } [2, 5, 9].forEach(log); // [0] = 2 // [1] = 5 // [2] = 9
map
方法还可以接受第二个参数,表示回调函数执行时this
所指向的对象。
var arr = ['a', 'b', 'c']; [1, 2].map(function(e){ return this[e]; }, arr) // ['b', 'c']
对应的,forEach
方法也可以接受第二个参数,用来绑定回调函数的this
关键字。这个参数对于多层this
非常有用,因为多层this
通常指向是不一致的
var obj = { name: '张三', times: [1, 2, 3], print: function () { this.times.forEach(function (n) { console.log(this.name); }, this);//如果不加this参数,函数内部的this会指向全局而不是obj对象本身 } }; obj.print() // 张三 // 张三 // 张三
10、filter(),过滤出满足某种条件的元素
参数是一个函数,所有数组成员依次执行该函数,返回结果为true
的成员组成一个新数组返回
[1, 2, 3, 4, 5].filter(function (elem) { return (elem > 3); }) // [4, 5]
11、some()和every()这两个方法类似“断言”(assert),用来判断数组成员是否部分或者全部符合某种条件。
它们接受一个函数作为参数,所有数组成员依次执行该函数,返回一个布尔值
some
方法是只要有一个数组成员的返回值是true
,则整个some
方法的返回值就是true
,否则false
。
every
方法则是所有数组成员的返回值都是true
,才返回true
,否则false
。
var arr = [1, 2, 3, 4, 5]; arr.some(function (elem, index, arr) { return elem >= 3; }); // true arr.every(function (elem, index, arr) { return elem >= 3; }); // false
some
和every
方法还可以接受第二个参数,用来绑定函数中的this
关键字。
12、reduce()和reduceRight()
依次处理数组的每个成员,最终累计为一个值。
它们的差别是,reduce
是从左到右处理(从第一个成员到最后一个成员),reduceRight
则是从右到左(从最后一个成员到第一个成员),其他完全一样。
[1, 2, 3, 4, 5].reduce(function(x, y){ console.log(x, y) return x + y; }); // 1 2 // 3 3 // 6 4 // 10 5 //最后结果:15 [1, 2, 3, 4, 5].reduce(function(x, y){ return x + y; }, 10); // 25
13、indexOf()和lastIndexOf()
分别返回给定元素在数组中第一次和最后一次出现的位置,如果没有出现则返回-1
['a', 'b', 'c'].indexOf('a', 1) // -1 //indexOf方法还可以接受第二个参数,表示搜索的开始位置
注意,如果数组中包含NaN
,这两个方法不适用,即无法确定数组成员是否包含NaN
这是因为这两个方法内部,使用严格相等运算符(===
)进行比较,而NaN
是唯一一个不等于自身的值