一、Array构造函数
创建一个数组一般有两种方式,第一种就是使用Array构造函数。
当没有任何参数时,使用构造函数将会创建一个空数组。
var arr = new Array() // []
等同于
var arr = Array() // []
当传入一个数字作为参数时,将会创建一个长度为数字大小的数组,但它的每一个值都为undefined.
var arr = Array(3) // [empty x 3] 相当于[,,]
console.log(arr[0]) // undefined 此时的undefined是调用的时候才赋值
当传入一个字符串字符串作为参数时,会创建一个长度为1的数组,数组会把参数作为数组的元素。
console.log(new Array['3']) // ['3']
当传入多个参数时,无论是参数是字符串还是数字,构造函数都会创建一个数组,其中数组的元素就是传入的参数。
console.log(new Array(3, 4, 3)) // [3, 4, 3]
console.log(new Array('3', 4, '3')) // ["3", 4, "3"]
由于这种不确定性,我们更多的是使用字面量语法来创建数组。
var arr = [1] // [1]
var arr = ['1'] // ['1']
var arr = [1, 3, 4] // [1, 3, 4]
var arr = ['1', '4', '5'] // ['1', '4', '5']
另外,数组的元素可以是任意类型的值,比如,是一个对象:
var obj = {
a: '5',
b: false
}
console.log(Array(obj)) // [{a: "5", b: false}]
或者,是一个数组:
console.log([1, '2', ['3', 4]]) // [1, '2', ['3', 4]]
二、数组的方法
数组作为我们实际使用最多的数据类型,有着许多的静态方法来方便我们去处理数据。
1. Array.isArray()
这个方法常常用来判断一个数据是否是一个数组,返回一个布尔值。
Array.isArray([]) // true
Array.isArray(false) // false
Array.isArray({}) // false
2. valueOf
,toString
valueOf
返回数组本身:
var a = [1, 3, 4]
a.valueOf() // [1, 3, 4]
toString
返回数组的字符串格式
var arr = [1, 3, 4]
arr.toString() // "1,3,4"
3.push
, pop
, shift
, unshift
push
方法将会在数组末尾添加元素,返回数组的长度。注意,此方法会改变原数组。
var arr = [1, 3, 4];
arr.push(3);
console.log(arr) // [1, 3, 4, 3]
因此,push()
方法可以用来合并数组:
var arr1 = [1, 3, 4];
var arr2 = [5, 6, 7];
arr1.push.apply(arr1, arr2);
console.log(arr1); // [1, 3, 4, 5, 6, 7]
// 此处apply是一种更改函数this值得内置方法,它的第一个参数是调用方法的对象,第二个参数是一个数组,数组内容将作为参数传给调用方法。
pop()
方法的作用是从数组的末尾移除元素,返回移除的元素,也会改变原数组。
var arr = [1, 3, 4, 5, 6, 7];
arr.pop();
console.log(arr); // [1, 3, 4, 5, 6]
shift()
方法会在数组的首部移除元素,返回移除的元素,更改原数组。
var arr = [1, 3, 4, 5, 6, 7];
arr.shift();
console.log(arr); // [3, 4, 5, 6]
unshift()
方法与shift()
相反,用于在数组首部添加元素。返回数组的长度,改变原数组。
var arr = [1, 3, 4, 5, 6, 7];
arr.unshift(5);
console.log(arr); // [5, 1, 3, 4, 5, 6, 7]
4. reverse()
reverse()
方法用于颠倒数组元素的顺序,返回改变后的数组。
var arr = ['a', 'b', 'c', 'd'];
console.log(arr.reverse()) // ["d", "c", "b", "a"]
5. sort()
sort()
方法是数组的排序方法,会改变原数组。如:
var arr = ['a', 'v', 'c', 'd'];
console.log(arr.sort()) // ["a", "c", "d", "v"]
但是对于数字,排序的结果可能并不是你想的那样:
var arr = [10, 444, 2435, 78];
console.log(arr.sort()) // [10, 2435, 444, 78]
原因在于sort()
方法默认是按照字典顺序排序。如果想让数组按照数字大小来排序,可以给他传入一个函数作为参数,表示按照自定义方法进行排序。该函数本身又接受两个参数,表示进行比较的两个元素。如果返回值大于0,表示第一个元素排在第二个元素后面;其他情况下,都是第一个元素排在第二个元素前面。
var arr = [1, 3, 6, 25];
arr.sort(function(a, b){ // 递增
return a-b;
})
console.log(arr); // [1, 3, 6, 25]
arr.sort(function(a, b){ // 递减
return b-a;
})
console.log(arr); // [25, 6, 3, 1]
6. slice()
slice
方法用于从当前数组中进行截取,结果返回一个新数组。它接受最多两个可选参数,第一参数是截取的初始位置,第二个参数是截取的结束位置(不包括此位置元素)。如果不传参数,则默认从头截取至末尾,相当于数组的深度拷贝。
var arr = [25, 6, 3, 1];
arr.slice(); // [25, 6, 3, 1]
arr.slice(0); // [25, 6, 3, 1]
arr.slice(1); // [6, 3, 1]
arr.slice(0,1) // [25]
arr.slice(0,2) // [25, 6]
7. splice()
splice()
方法用于删除替换当前数组中某个位置处的元素。结果返回删除的元素。该方法会改变原数组。
当只是删除指定位置元素时,此方法需要接收两个参数,第一个参数是删除的起始位置,第二个参数是截取的元素个数。
var arr = [25, 6, 45, 'fa', 'a'];
arr.splice(1,1); // [6]
console.log(arr) // [25, 45, "fa", "a"]
arr.splice(2,3); // [45, "fa", "a"]
console.log(arr); // [25, 6]
从第三个参数开始,都会被当做替换元素插入到当前数组中:
var arr = [25, 6, 45, 'fa', 'a'];
arr.splice(2,3,'123');
console.log(arr); // [25, 6, "123"]
arr.splice(2, 3, 'a', 'b');
console.log(arr); // [25, 6, "a", "b"]
8. map()
map()
方法用于对一个数组的每一项执行某种操作,结果返回操作完成后的新数组。不会改变原数组。
map()
方法接受一个函数作为参数,这个函数可以接受三个参数,分别是当前项,当前项的索引,当前数组。
var arr = [1, 4, 5, 6];
arr.map((item, index, arr) => item + index); // [1, 5, 7, 9]
arr; // [1, 4, 5, 6]
map()
方法还可以接受第二个参数,用于指定回调函数中的this:
var arr = ['a', 'b', '5', '6'];
[1, 2].map(function(item){ return this[item]}, arr); // ["b", "5"]
9. forEach()
forEach()
方法与map()
方法类似,不同点在于此方法不返回数组,只是单纯的操作数据,并不会修改原数组。本质上,相当于for循环。
var arr = [1, 4, 5, 6];
arr.forEach((item, index, arr) => console.log(item + index));
// 依次输出 1, 5, 7, 9
arr; // [1, 4, 5, 6]
另外,forEach()
方法也可以接受第二个参数,作用同map()
方法。
10. filter()
filter()
,称为筛子方法,顾名思义,就是用来筛选元素。它接受一个用于筛选的回调函数作为参数,返回通过筛选的数组元素。不改变原数组。
var arr = [1, 4, 5, 6];
arr.filter((item, index, arr) => item > 3); // [4, 5, 6]
与上面两个相同,filter()
方法也可以接受第二个参数值,作为回调函数中this的指向。
11. every()
与some()
这两个方法都是用来判断数组是否满足某一条件,区别在于some()
在有一项返回true
时就返回true
,every()
在每一项都为true
的时候才返回true
.
var arr = [1, 4, 5, 6];
arr.some((item, index, arr) => item === 4); // true
arr.every((item, index, arr) => item === 4); // false
注意,对于空数组,some方法返回false,every方法返回true,回调函数都不会执行。
它们也可以接受第二个参数。作用同上。
12. reduce(),reduceRight()
我们通常称这两个方法为迭代方法。它们会依次处理数组的每个成员,并累积为一个值。
它们的区别在于,reduce()
是从左开始,reduceRight()
从右开始。它们接受一个回调函数作为参数,这个函数可以接受四个参数,分别为上一个值,当前值,当前位置,当前数组。其中后两个参数不是必须的。最常用的场景是进行累加。
var arr = [1, 4, 5, 6];
arr.reduce((pre, cur, index, arr) => pre + cur); // 16
arr.reduceRight((pre, cur, index, arr) => pre + cur); // 16
它们也可以接受第二个参数,作用是指定函数执行的初始值。
var arr = [1, 4, 5, 6];
arr.reduce((pre, cur, index, arr) => pre + cur, 10); // 26
13. indexOf(), lastIndexOf
这两个方法用于获取数组中某元素在数组中的索引值,indexOf()
返回第一个索引值,lastIndexOf()
返回最后一个索引值。如果查询不到,则返回-1
var arr = ['a', 'b', 'g', 'hg', 'b'];
arr.indexOf('b') // 1
arr.lastIndexOf('b') // 4
arr.indexOf('bw') // -1
完。
关于数组的基本方法就这么多,但是真的想把数组用好还需要很大的功夫,如果有兴趣,可以去我的博文专辑 js能力测评中对比题目体会js数组的强大。
参考:
《JavaScript高级程序设计》
JavaScript标准参考教程
欢迎关注微信公众号 web独白,一个有故障事的公众号。