js的数组方法整理

时间:2023-03-09 20:03:43
js的数组方法整理

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]