数组这一数据结构在任何编程语言中都是十分重要的,不同的编程语言都会有一些数组的方法或者类,来方便使用者进行操作,这篇文章就主要介绍在JavaScript当中数组的一些方法。
这篇文章结合MDN完成。
ES5-
这一部分讲述在ES5及其以下版本JS所规定的函数。支持ES5的浏览器看这里
Array.isArray()
介绍
在JS中我们是不能使用 typeof
来区分数组和对象,因为 typeof [] === 'object'
而 Array.isArray() 函数可以帮助我们来判断这个对象是否为数组。
语法
Array.isArray(obj)
参数
参数名 | 参数描述 |
---|---|
obj | 需要检测的对象 |
返回
返回Boolean值,如果对象为数组则返回 true
,否则返回 false
案例
1 |
|
注意
isArray() 函数只有在Array对象上才能使用,因为该函数不在数组对象的原型链上,所以普通的数组对象会报错。
1 |
|
Array.of()
介绍
Array.of()函数是用来创建一个新的数组的方法。
语法
Array.of(element0[, element1[, …[, elementN]]])
参数
参数名 | 参数描述 |
---|---|
elementN | 构成数组的参数,按顺序排列 |
返回
返回构建好的新的数组实例
案例
1 |
|
注意
Array.of()和Array()存在区别,Array.of()输入一个数值时只是将参数当作一个元素,而Array()会将这个数值当为数组的长度
1
2
3
4
5
6
7
8
9
let arr1=Array(5);
let arr2=Array.of(5);
console.log(arr1);//[undefined,undefined,undefined,undefined,undefined]
console.log(arr1.length);//5
console.log(arr2);//[5]
console.log(arr2.length);//1
Array.prototype.concat()
介绍
这个方法主要是将两个或多个值或数组合并为一个 新 的数组,他不会改变原有数组
语法
array.concat(value1[, value2[, …[, valueN]]])
参数
参数名 | 参数描述 |
---|---|
valueN | 需要与原数组合并的数组或值 |
返回
返回按顺序合并的新数组。
案例
1 |
|
注意
1.这个函数是返回的新数组
2.这个函数是进行浅拷贝
1
2
3
4
5
6
7
8
let arr1=[{x:1},{x:2},{x:3}];
let arr2=arr1.concat(arr1);
console.log(arr2);//[{x:1},{x:2},{x:3},{x:1},{x:2},{x:3}]
arr1[0].x=4;
console.log(arr2);//[{x:4},{x:2},{x:3},{x:4},{x:2},{x:3}]
Array.prototype.every()
介绍
Array.prototype.every() 方法测试数组的所有元素是否都通过了指定函数的测试。
语法
array.every(callback[, thisArg])
参数
参数名 | 参数描述 |
---|---|
callback | 用来检测每个值的回调函数,callback 被调用时传入三个参数:元素值,元素的索引,原数组。 |
thisArg | 执行 callback 时使用的 this 值。 |
返回
返回检测的结果,为布尔值
案例
1 |
|
Array.prototype.some()
介绍
Array.prototype.some() 方法测试数组的是否有元素通过了指定函数的测试,与 Array.prototype.every() 方法相对。
语法
array.some(callback[, thisArg])
参数
参数名 | 参数描述 |
---|---|
callback | 用来检测每个值的回调函数,callback 被调用时传入三个参数:元素值,元素的索引,原数组。 |
thisArg | 执行 callback 时使用的 this 值。 |
返回
返回检测的结果,为布尔值
案例
1 |
|
Array.prototype.filter()
介绍
filter() 方法使用指定的函数测试所有元素,并返回一个包含所有通过测试的元素的新数组。
语法
array.filter(callback[, thisArg])
参数
参数名 | 参数描述 |
---|---|
callback | 用来检测每个值的回调函数,callback 被调用时传入三个参数:元素值,元素的索引,原数组。 |
thisArg | 执行 callback 时使用的 this 值。 |
返回
返回由满足函数的元素组成的新的数组。
案例
1 |
|
Array.prototype.map()
介绍
Array.prototype.map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。
语法
array.map(callback[, thisArg])
参数
参数名 | 参数描述 |
---|---|
callback | 用来计算每个值的回调函数,callback 被调用时传入三个参数:元素值,元素的索引,原数组。 |
thisArg | 执行 callback 时使用的 this 值。 |
返回
返回由每个元素根据函数的出的值组成的新数组。
案例
1 |
|
Array.prototype.reduce()
介绍
Array.prototype.reduce() 方法对累加器的数值和数组的每个值应用一个函数 (从左到右),计算出最终的一个值。
语法
array.reduce(callback,[initialValue])
参数
参数名 | 参数描述 |
---|---|
callback | 用来计算最终值的回调函数,callback 被调用时传入四个参数:上一次调用回调返回的值(或者初始值),数组中将要处理的元素,数据中将要处理的元素索引,原数组。 |
initialValue | 其值用于第一次调用 callback 的第一个参数,如果没有,reduce将会从第二个元素开始 |
返回
返回计算的结果
案例
1 |
|
注意
1.当没有 initialValue 时,函数会直接从第二个元素开始。
2.当数组只有一个元素时,且有 initialValue 时,函数直接返回那个元素,所以建议都加上 initialValue
Array.prototype.reduceRight()
介绍
Array.prototype.reduceRight() 方法对累加器的数值和数组的每个值应用一个函数 (从右到左,与reduce()相反),计算出最终的一个值。
语法
array.reduceRight(callback[, initialValue])
参数
参数名 | 参数描述 |
---|---|
callback | 用来计算最终值的回调函数,callback 被调用时传入四个参数:上一次调用回调返回的值(或者初始值),数组中将要处理的元素,数据中将要处理的元素索引,原数组。 |
initialValue | 其值用于第一次调用 callback 的第一个参数,如果没有,reduceRight()将会从倒数第二个元素开始 |
返回
返回计算出的值
案例
1 |
|
注意
1.当没有 initialValue 时,函数会直接从第二个元素开始。
2.当数组只有一个元素时,且有 initialValue 时,函数直接返回那个元素,所以建议都加上 initialValue
Array.prototype.forEach()
介绍
forEach() 方法对数组的每个元素执行一次提供的函数。
语法
array.forEach(callback[, thisArg])
参数
参数名 | 参数描述 |
---|---|
callback | 对每个参数进行处理的函数,callback 被调用时传入三个参数:元素值,元素的索引,原数组。 |
thisArg | 执行 callback 时使用的 this 值。 |
返回
返回 undefined
案例
1 |
|
注意
1.forEach 遍历的范围在第一次调用 callback 前就会确定。调用forEach 后添加到数组中的项不会被 callback 访问到。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function add(element,index,array){
array.push(index+'a');
console.log(element);
}
let arr1=[1,2,3];
console.log(arr1.forEach(add));
//1
//2
//3
//undefined
console.log(arr1);//[1, 2, 3, "0a", "1a", "2a"]
2.如果已经存在的值被改变,则传递给 callback 的值是 forEach 遍历到他们那一刻的值。已删除的项不会被遍历到。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function del(element,index,array){
console.log(element);
// delete array[index];
}
let arr1=[1,2,3];
delete arr1[1];
console.log(arr1.forEach(del));
//1
//3
//undefined
console.log(arr1);//[1, 2:, 3]
Array.prototype.sort()
介绍
Array.prototype.sort() 方法在适当的位置对数组的元素进行排序,并返回数组。 sort 排序不一定是稳定的。默认排序顺序是根据字符串Unicode码点。
语法
array.sort(compareFunction)
参数
参数名 | 参数描述 |
---|---|
compareFunction | 用来排序的函数,传入相互比较的a、b对象,通过返回数字进行排序:负数表示不交换(a前b后),正数表示交换(b前a后),0表示不变。 |
返回
返回排序后的数组
案例
1 |
|
注意
1.当不输入compareFunction时,函数默认采用Unicode位点进行排序。
1
2
3
4
5
let arr1=[11,22,3,1,323,443,5];
console.log(arr1.sort());//[1, 11, 22, 3, 323, 443, 5]
//这里将数字类型转化为了字符串进行比较
Array.prototype.pop()
介绍
Array.prototype.pop() 方法从数组中删除最后一个元素,并返回该元素。该方法会将数组视为一个堆栈,pop为出栈函数。
语法
arr.pop()
返回
返回弹出的栈顶元素
案例
1 |
|
Array.prototype.push()
介绍
push() 方法将一个或多个元素添加到数组的末尾,并返回数组的新长度。该方法会将数组视为一个堆栈,push为入栈函数。
语法
arr.push(element1, …, elementN)
参数
参数名 | 参数描述 |
---|---|
elementN | 需要入栈的元素,按顺序入栈 |
返回
返回改变后的数组的长度
案例
1 |
|
Array.prototype.shift()
介绍
Array.prototype.shift() 方法从数组中弹出第一个元素,并返回该元素的值。这个方法类似于pop()函数。
语法
array.shift()
返回
返回弹出的元素
案例
1 |
|
Array.prototype.unshift()
介绍
Array.prototype.unshift() 方法将一个或多个元素添加到数组的开头,并返回新数组的长度。
语法
array.unshift(element1, …, elementN)
参数
参数名 | 参数描述 |
---|---|
elementN | 需要入栈的元素,按倒序入栈,像是两个数组拼接 |
返回
返回改变后的数组的长度
案例
1 |
|
Array.prototype.reverse()
介绍
Array.prototype.reverse() 方法会颠倒数组中元素的位置。
语法
array.reverse()
返回
返回该数组
案例
1 |
|
Array.prototype.indexOf()
介绍
Array.prototype.indexOf()方法返回在数组中可以找到给定元素的第一个索引,如果不存在,则返回-1。
语法
arr.indexOf(searchElement[, fromIndex = 0])
参数
参数名 | 参数描述 |
---|---|
searchElement | 需要查找的元素值。 |
fromIndex | 从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0 |
返回
返回首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1
案例
1 |
|
Array.prototype.lastIndexOf()
介绍
Array.prototype.lastIndexOf()方法返回在数组中可以找到给定元素的最后一个索引,如果不存在,则返回-1。
语法
array.lastIndexOf(searchElement[, fromIndex = array.length - 1])
参数
参数名 | 参数描述 |
---|---|
searchElement | 需要查找的元素值。 |
fromIndex | 从该索引处开始逆向查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 array.length - 1 |
返回
返回首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1
案例
1 |
|
Array.prototype.join()
介绍
Array.prototype.join() 方法将数组(或一个类数组对象)的所有元素连接到一个字符串中。
语法
array.join(separator)
参数
参数名 | 参数描述 |
---|---|
separator | 元素间间隔需要插入的字符串,默认为逗号(,) |
返回
返回拼接好的字符串
案例
1 |
|
Array.prototype.slice()
介绍
Array.prototype.slice() 方法将数组的一部分浅拷贝, 返回到从开始到结束(不包括结束)选择的新数组对象。原始数组不会被修改。
语法
array.slice(start,end)
参数
参数名 | 参数描述 |
---|---|
start | 浅拷贝的开始索引,默认为0 |
end | 浅拷贝的结束索引,不会提取在结束索引位置的元素,默认为length |
返回
返回提取出来的元素组成的新数组
案例
1 |
|
Array.prototype.splice()
介绍
Array.prototype.splice() 方法通过删除现有元素和/或添加新元素来更改数组的内容。
语法
array.splice(start[, deleteCount[, [item1, [item2,[itemN …]]]]])
参数
参数名 | 参数描述 |
---|---|
start | 修改的开始位置,如果是负值,则表示从数组末位开始的第几位。 |
deleteCount | 整数,表示要移除的数组元素的个数。默认为arr.length - start |
itemN | 需要从开始位置插入的元素,按顺序插入 |
返回
由被删除的元素组成的一个数组。
案例
1 |
|
Array.prototype.toString()
介绍
toString() 返回一个字符串,表示指定的数组及其元素。
Array 对象覆盖了 Object 的 toString 方法。对于数组对象,toString 方法返回一个字符串,该字符串由数组中的每个元素的 toString() 返回值经调用 join() 方法连接(由逗号隔开)组成。
语法
array.toString()
返回
返回表示数组内容的字符串
案例
1 |
|
Array.prototype.toLocaleString()
介绍
Array.prototype.toLocaleString() 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 “,”)隔开。
语法
array.toLocaleString();
返回
返回表示数组内容的使用一个特定语言环境的字符串。
案例
1 |
|
ES6+
这一部分讲述在ES6及其以后版本JS所规定的函数。ES6的特性支持表看这里
Array.from()
介绍
Array.from() 方法从类似数组或可迭代对象创建一个新的数组实例。
语法
Array.from(arrayLike[, mapFn[, thisArg]])
参数
参数名 | 参数描述 |
---|---|
arrayLike | 想要转换成真实数组的类数组对象或可遍历对象。 |
mapFn | 可选参数,如果指定了该参数,则最后生成的数组会经过该函数的加工处理后再返回。 |
thisArg | 可选参数,执行 mapFn 函数时 this 的值。 |
返回
返回一个新的Array实例
案例
1 |
|
Array.prototype.copyWithin()
介绍
Array.prototype.copyWithin()方法会浅拷贝数组的部分元素到同一数组的不同位置,且不改变数组的大小,然后返回该数组。
语法
array.copyWithin(target[, start[, end]])
参数
参数名 | 参数描述 |
---|---|
target | 序列复制到的索引位子。如果是负数,target 将从末尾开始计算,如果 target 大于等于 arr.length,将会不发生拷贝。如果 target 在 start 之后,复制的序列将被修改以符合 arr.length。 |
start | 开始复制元素的起始位置。如果是负数,start 将从末尾开始计算。默认为0 |
end | 开始复制元素的结束位置。copyWithin 将会拷贝到该位置,但不包括 end 这个位置的元素。如果是负数, end 将从末尾开始计算。默认为array.length |
返回
返回修改后的数组
案例
1 |
|
注意
1.该函数会修改原始数组,并且不是插入,是进行的覆盖操作。
2.start所在索引必须小于end
Array.prototype.entries()
介绍
Array.prototype.entries() 方法返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对。
语法
arr.entries();
返回
返回一个新的 Array 迭代器对象。
案例
1 |
|
Array.prototype.keys()
介绍
Array.prototype.keys() 方法返回一个新的Array迭代器,它包含数组中每个索引的键。
语法
arr.keys();
返回
返回一个新的Array迭代器,它包含数组中每个索引的键。
案例
1 |
|
注意
1.与Object的keys存在一定区别,索引迭代器会包含那些没有对应元素的索引。
1
2
3
4
5
let arr = [1,,3,,5];
console.log(Object.keys(arr));//["0", "2", "4"]
console.log([...arr.keys()])//[0, 1, 2, 3, 4]
Array.prototype.values()
介绍
Array.prototype.values() 方法返回一个新的 Array Iterator 对象,该对象包含数组每个索引的值。
语法
array.values()
返回
返回一个新的 Array Iterator 对象,该对象包含数组每个索引的值。
案例
1 |
|
Array.prototype.fill()
介绍
Array.prototype.fill() 方法将一个数组的所有元素从开始索引填充到具有静态值的结束索引
语法
arr.fill(value, start, end)
参数
参数名 | 参数描述 |
---|---|
value | 需要用来填充的元素 |
start | 开始索引,默认为0,如果开始索引为负数则从后往前算 |
end | 结束索引,默认为arr.length,结束索引所在的位置不会被覆盖 |
返回
返回改变后的数组本身
案例
1 |
|
Array.prototype.find()
介绍
Array.prototype.find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
语法
array.find(callback[, thisArg])
参数
参数名 | 参数描述 |
---|---|
callback | 用来检测每个值的回调函数,callback 被调用时传入三个参数:元素值,元素的索引,原数组。 |
thisArg | 执行 callback 时使用的 this 值。 |
返回
返回第一个满足函数的元素。如果没有则返回 undefined
。
案例
1 |
|
Array.prototype.findIndex()
介绍
Array.prototype.findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
语法
array.findIndex(callback[, thisArg])
参数
参数名 | 参数描述 |
---|---|
callback | 用来检测每个值的回调函数,callback 被调用时传入三个参数:元素值,元素的索引,原数组。 |
thisArg | 执行 callback 时使用的 this 值。 |
返回
返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
案例
1 |
|
Array.prototype.includes()
介绍
Array.prototype.includes() 方法用来判断当前数组是否包含某指定的值,如果是,则返回 true,否则返回 false。
语法
array.includes(searchElement[, fromIndex = 0])
参数
参数名 | 参数描述 |
---|---|
searchElement | 需要查找的元素值。 |
fromIndex | 从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0 |
返回
返回布尔值,存在返回 true
,不存在返回 false
案例
1 |
|
注意
- 对于对象的查找依然是按照引用查找
未解决
Array.prototype@@iterator
get Array[@@species]
END
2017-02-19 完成
2017-02-13 立项