正文

js的数组方法整理

IP云
IP云V管理员/5 阅读
08/26
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

slice

从已有的数组中返回选定的元素。该方法不会修改数组，而是返回一个子数组。

语法：arr.slice(start,end)

start: 必须，规定从何处开始选取。如果是负数，就是从尾部开始算起的位置（-1指最后一个元素，-2指倒数第二个元素）；

end:   可选，规定从何处结束选取。如果没有指定，则切分的数组包含从start到数组结束的所有元素。

示例：

var arr = [0, 4, 5, 4, 7, 6, 9];
arr.slice(2, 4); //[5,4]
arr.slice(-3, 6); //[7,6]
arr.slice(5); //[6,9]

可以使用slice快速将伪数组转为数组：

function f() {
var arr = Array.prototype.slice.call(arguments);
}

splice

向数组中添加或删除项目，并返回被删除的项目。该方法会改变原来的数组。

语法：arr.splice(index,howmany,item1,item2,...,itemX)

index: 必需。规定添加或删除的位置，使用负数可从数组结尾处规定位置；

howmany: 必需。要删除的数量。如果设置为0，则不会删除项目。

itemX： 可选。向数组添加的新项目。

示例：

var arr = [0, 4, 5, 4, 7, 6, 9];
console.log(arr.splice(2, 2)); //[5,4]
console.log(arr); //[0, 4, 7, 6, 9]
console.log(arr.splice(2, 0, 8, 10)); //[]
console.log(arr); //[0, 4, 8, 10, 7, 6, 9]

join

将所有元素放入一个字符串，元素是通过指定的分隔符进行分隔的。返回字符串。该方法不会修改原数组。

语法：arr.join(separator)

separator: 可选，指定要使用的分隔符。如果省略，则使用逗号作为分隔符。

示例：

var arr = [0, 1, 2, 3];
console.log(arr.join()); //'0,1,2,3'
console.log(arr.join('.')); //'0.1.2.3'

push

向数组的末尾添加或删除一个或多个元素，并返回数组的新长度。该方法会改变原数组。

语法：arr.push(newelement1,newelement2,...,newelementX)

newelement1: 必需。要添加到数组的第一个元素。

newelementX: 可选，可添加多个元素。

示例：

var arr = [0, 1, 2, 3];
console.log(arr.push(1)); //
console.log(arr); //[0, 1, 2, 3, 1]

pop

删除数组的最后一个元素，并返回它删除的元素的值。如果数组已经是空，则不改变数组，并返回undefined。该方法会改变原数组。

语法：arr.pop()

示例：

var arr = [0, 1, 2, 3];
console.log(arr.pop()); //
console.log(arr); //[0, 1, 2]

shift

删除数组的第一个元素，并返回它删除元素的值。如果数组已经是空，则不改变数组，并返回undefined。该方法会改变原数组。

语法：arr.shift()

示例：

var arr1 = [0, 1, 2, 3];
console.log(arr1.shift()); //
console.log(arr1); //[1, 2, 3] var arr2 = [];
console.log(arr2.shift()); //undefined
console.log(arr2); //[]

unshift

向数组的开头添加或删除一个或多个元素，并返回数组的新长度。该方法会改变原数组。

语法：arr.unshift(newelement1,newelement2,...,newelementX)

newelement1: 必需。要添加到数组的第一个元素。

newelementX: 可选，可添加多个元素。

示例：

var arr = [0, 1, 2, 3];
console.log(arr.unshift(4, 5)); //
console.log(arr); //[4, 5, 0, 1, 2, 3]

reverse

颠倒数组中元素的顺序。该方法会改变原来数组。

语法：arr.reverse()

示例：

var arr = [0, 1, 2, 3];
console.log(arr.reverse()); //[3, 2, 1, 0]
console.log(arr); //[3, 2, 1, 0]

sort

对数组的元素进行排序。该方法会改变原数组。

语法：arr.sort(sortby)

sortby: 可选。规定排序顺序。必须是比较函数，有两个参数a和b，如果a小于b，在排序后a应该出现在b之前（从小到大排），则返回一个小于0的值。如果没有参数，则按照字符编码顺序对数组中的元素进行排序。

示例：

var arr1 = ['a', 'b', 'z', 'A', 'Z'];
console.log(arr1.sort()); //["A", "Z", "a", "b", "z"]
console.log(arr1); // ["A", "Z", "a", "b", "z"] var arr2 = [1, 5, 10, 1000];
console.log(arr2.sort()); //[1, 10, 1000, 5] function sortNumber1(a, b) {
return a - b;
}
function sortNumber2(a, b) {
return b - a;
}
console.log(arr2.sort(sortNumber1)); //[1, 5, 10, 1000]
console.log(arr2.sort(sortNumber2)); //[1000, 10, 5, 1]

concat

连接两个或多个数组。返回被连接数组的一个副本。该方法不会修改原来的数组。

语法：arr.concat(arrX,arrX,...,arrX)

arrX: 必需。可以是具体的值，也可以是数组对象，可以是任意多个。

示例：

var arr1 = [1, 2, 3];
console.log(arr1.concat(4, 5)); //[1, 2, 3, 4, 5]
console.log(arr1); //[1, 2, 3] var arr2 = [4, 5];
console.log(arr1.concat(arr2)); //[1, 2, 3, 4, 5] var arr3 = [6, [7, 8]];
console.log(arr1.concat(arr2, arr3)); // [1, 2, 3, 4, 5, 6, [7, 8]]
console.log(arr1.concat(arr2, 6, [7, 8])); //[1, 2, 3, 4, 5, 6, 7, 8]

toString

将数组转换为字符串并返回结果。返回值与没有参数参与的join()方法返回的字符串相同。

语法：arr.toString()

示例：

1 var arr=[1,2,3];
2 console.log(arr.toString()); //'1,2,3'

valueOf

返回数组对象的原始值。

语法：arr.valueOf()

示例：

1 var arr=[1,2,3];
2 console.log(arr.valueOf()); //[1, 2, 3]

some

测试数组中的某些元素是否通过回调函数实现的测试。数组中的每个元素执行一次回调函数，如果找到一个使得回调函数返回真值的值，some将会立即返回true，否则返回false。

语法：arr.some(function(item,index,arr),thisArg)

参数：item：当前元素的值。必需

index：当前元素的索引值。可选

arr：当前数组对象。可选

thisArg：执行回调函数时的用于this的值（使用时不能用箭头函数，因为箭头函数在词法上绑定了this值）。可选

示例：

测试数组中是否有元素大于10

//测试数组中是否有元素大于10
console.log([2, 5, 8, 1, 4].some(item => item > 10)) //false
console.log([2, 5, 8, 11, 4].some(item => item > 10)) //true

map（以下都是ES6方法）

返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

语法：arr.map(function(item, index, arr), thisArg)

参数：item：当前元素的值。必需。

index：当前元素的索引值。可选。

arr：当前元素属于的数组对象。也就是数组本身。可选。

thisArg：执行回调函数时的用于this的值（使用时不能用箭头函数，因为箭头函数在词法上绑定了this值）。可选

示例：

求数组中每个元素的平方根。

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
console.log(roots); //[1, 2, 3]

 反转字符串

var str = '12345';
console.log(Array.prototype.map.call(str, x => x).reverse().join('')); //'54321'

通常情况下，map方法中回调函数只需要接受一个参数，就是正在被遍历的数组元素本身。但这并不意味着只给回调函数传了一个参数。例如：

console.log(['1', '2', '3'].map(parseInt)); //[1, NaN, NaN]
//上面的语句并没有返回所期望的[1, 2, 3]，//通常使用parseInt时只需要传递一个参数，但实际上可以有两个参数，第二个参数是进制数。
//map方法在调用回调函数时，会给它传递三个参数：当前正在遍历的元素，元素索引和原数组。
//parseInt会把第三个参数忽视，但第二个参数会被当成进制数，从而返回了NaN//如果想得到所期望的结果，可以这样写
function returnInt(ele) {
return parseInt(ele, 10);
}
['1', '2', '3'].map(returnInt); //[1, 2, 3]//也可以使用简单的箭头函数
['1', '2', '3'].map(str=>parseInt(str)); //[1, 2, 3]

兼容性：IE9以下不支持。

兼容性解决代码：

if (!Array.prototype.map) {
Array.prototype.map = function (callback, thisArg) {
//判断callback是否为函数类型
if (Object.prototype.toString.call(callback) != '[object Function]') {
throw new TypeError(callback + 'is not a function');
} else {
if (this == null) { //判断map方法的调用者是否存在
throw new TypeError('this is null or not defined')
} else {
var arr = Object(this); //调用map方法的数组
var len = arr.length >>> 0; //数组长度
var k = 0;
var mappedArr = new Array(len); //map方法新产生的数组
while (k < len) { //遍历原数组，调用回调函数
if (k in arr) {
mappedArr[k] = callback.call(thisArg, arr[k], k, arr);
}
k++;
}
return mappedArr;
}
}
}
}

reduce

数组中的每个元素（从左到右）应用一个函数，将其简化为单个值。

语法：arr.reduce(function(tmp, item, index,Array) {}, initialValue )

tmp：中间结果（index为1时，tmp为arr[0]）

item：当前值

index：当前索引。 可选

Array：源数组 。可选

initialValue：第一次调用callback函数时的第一个参数的值。初始值

如果没有initialValue，回调函数第一次执行，tmp为arr[0]，item为arr[1]，index为1

如果有initialValue，回调函数第一次执行，tmp为initialValue，item为arr[0]，index为0

如果数组为空且没有提供initialValue，会抛出TypeError 。如果数组仅有一个元素（无论位置如何）并且没有提供initialValue， 或者有提供initialValue但是数组为空，那么此唯一值将被返回并且callback不会被执行。

举例：对一个数组求和

const arr = [1, 2, 3, 4]
//未加初始值
const result1 = arr.reduce((tmp, item) => tmp + item)
//添加初始值
const result2 = arr.reduce((tmp, item) => tmp + item, 10)
console.log(result1); //10
console.log(result2); //20

filter

创建一个新数组，包含通过回调函数（返回结果为true）的所有元素。

语法：arr.filter(function(item, index, arr){}, thisArg)

参数：item：当前元素

index：当前索引。可选

arr：调用filter的数组arr。可选

thisArg：执行回调函数时的用于this的值（使用时不能用箭头函数）。可选

举例：获取数组中能被3整除的数字

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
const result = arr.filter(item => item % 3 == 0)
console.log(result) //[3, 6, 9]

find

找出第一个符合条件的数组成员。

语法：arr.find(function(item, index, arr), thisArg)

举例：

console.log([1, 4, -5, 10, -2].find(n => n < 0))

findIndex

数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1

forEach

循环数组，对数组的每个元素执行一次回调函数

语法、参数与map和filter一样。

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
arr.forEach(item => {
console.log(item)
})
//等同于
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}

from

从一个类似数组或者可迭代对象创建一个新的浅拷贝数组实例

语法：arr.from(arrLike[,mapFun])

举例：

console.log(Array.from('foo')) //["f", "o", "o"]

console.log(Array.from({ 0: 'ab', 1: 'cd', length: 2 })) //["ab", "cd"]

console.log(Array.from([1, 2, 3], x => x + 1)) //[2, 3, 4]