首页手记数组方法整理

数组方法整理

标签：

前端工具

操作数组的方法

子曾经曰过，这是基本功，就和练武的马步一样！

数组的基本方法

一、原数组改变

1.push()

释义：向数组的末尾添加内容；
参数：一个或多个元素；(多个居然也可以)
原数组：改变；

返回值：新数组的长度。

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

2.pop()

释义：从数组中删除最后一个元素；
参数：无；
原数组：改变；

返回值：删除的元素。

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

3.unshift()

释义：向数组的开头添加内容；
参数：一个或多个元素；
原数组：改变；

返回值：新数组的长度。

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

4.shift()

释义：从数组中删除第一个元素；
参数：无；
原数组：改变；

返回值：删除的元素。

var arr = [1, 2, 3]var el = arr.shift()console.log(arr) // [2, 3]console.log(el) // 1

5.splice( x, y, z )

释义：从 x 位置开始，删除长度为 y 的元素，并用 z 替换；
参数：x 表示开始位置（如果是负值，则表示从数组末位开始的第几位）， y 表示删除元素的个数，z 表示替换元素（可多个）；
原数组：改变；
返回值：由删除内容组成的新数组。
用法：由传入参数的不同可以分别处理删除，添加，修改；

splice( x )：一个参数，表示删除，从 x 位置，删除到最后，即默认 y=arr.length - x；

var arr = [1, 2, 3, 4]var newArr = arr.splice(2)console.log(arr) // [1, 2]console.log(newArr) // [3, 4]

splice( x, y )：两个参数，表示删除，从 x 位置，删除 y 个元素；

var arr = [1, 2, 3, 4]var newArr = arr.splice(2, 1)console.log(arr) // [1, 2, 4]console.log(newArr) // [3]

splice( x, 0, z )：三个参数，且删除长度为0，表示添加，在 x 位置前添加元素；返回空数组（因为没删除）
```
var arr = [1, 2, 3, 4]var newArr = arr.splice(0, 0, 0)console.log(arr) // [0, 1, 2, 3, 4]console.log(newArr) // []
```

splice( x, y, z )：三个参数，表示修改，从 x 位置开始，删除长度为 y 的元素，并用 z 替换；

var arr = [1, 2, 3, 4]var newArr = arr.splice(3, 1, 5)console.log(arr) // [1, 2, 3, 5]console.log(newArr) // [4]

6.reverse()

释义：将数组中元素的位置颠倒
参数：无
原数组：改变；

返回值：该数组的引用地址。

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

7.sort()

释义：sort() 方法在适当的位置对数组的元素进行排序，默认排序顺序是根据字符串Unicode码点。
参数：compareFunction（可选）
原数组：改变；

返回值：该数组的引用地址

/*
 如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前；
 如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变；
 如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前。
 */var arr = [1, 3, 2, 50, 23];
arr.sort();// 根据字符Unicode码点 [1, 2, 23, 3, 50]arr.sort(function(a,b) {return a - b ;});// 从小到大 [1, 2, 3, 23, 50]arr.sort(function(a,b) {return b - a ;});// 从大到小 [50, 23, 3, 2, 1]

二、原数组不变

1.toString()

释义：将数组转为字符串；
参数：无；
原数组：不变；

返回值：新字符串。

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

2.join()

释义：将数组按指定分隔符转为字符串；
参数：separator分隔符；
原数组：不变；

返回值：用分隔符连接的新字符串。

// 根据参数不同返回不同结果var arr = [1, 2, 3]var str1 = arr.join()var str2 = arr.join('-')var str3 = arr.join('')console.log(arr) // [1, 2, 3]console.log(str1) // "1,2,3"console.log(str2) // "1-2-3"console.log(str3) // "123"

3.concat()

释义：拼接两个或多个数组；
参数：可以是一个或多个数值或字符串或数组；
原数组：不变；

返回值：新数组。

// 传入不同参数，原数组不变var arr = [1, 2, 3]var newArr1 = arr.concat(4)var newArr2 = arr.concat(5, 6, 7)var newArr3 = arr.concat([5, 6, 7])var newArr4 = arr.concat([5], [6], [7])console.log(arr) // [1, 2, 3]console.log(newArr1) // [1, 2, 3, 4]console.log(newArr2) // [1, 2, 3, 5, 6, 7]console.log(newArr3) // [1, 2, 3, 5, 6, 7]console.log(newArr4) // [1, 2, 3, 5, 6, 7]

4.slice( x, y )

释义：选取从位置 x 到位置 y 的数组的的一部分（[ x, y) => 包含x，不包含y）；
参数：起始位置 x （可选，省略时为0）；终点位置 y （可选，省略时为arr.length-1）
原数组：不变；
返回值：由选取的内容组成的新数组。
注意：slice 不修改原数组，只会返回一个浅拷贝了原数组中的元素的一个新数组，即地址都指向了同一个对象。
用法：传入的参数不同

slice( )：不传参数，表示从 0 到 arr.length-1；

var arr = [1, 2, 3, 4]var newArr = arr.slice()console.log(arr) // [1, 2, 3, 4]console.log(newArr) // [1, 2, 3, 4]

slice( x )：传一个参数，表示从位置 x 到 arr.length-1；

var arr = [1, 2, 3, 4]var newArr = arr.slice(1)console.log(arr) // [1, 2, 3, 4]console.log(newArr) // [2, 3, 4]

slice( x, y )：传两个参数，表示从位置 x 到 y（不包含y）；

var arr = [1, 2, 3, 4]var newArr = arr.slice(1, 2)console.log(arr) // [1, 2, 3, 4]console.log(newArr) // [2]

ES5中的数组方法

一、迭代方法

1.forEach

释义：遍历。
使用函数遍历每一个数组项。
没有返回值。
不会改变原数组。

语法：

arr.forEach( function( value, index, arr ){  /*内容*/})//没有返回值，即使用return返回，用变量接收也是显示undefined

注意：jQuery中的each方法中回调函数的参数顺序与forEach不同

$arr.each( function( index, value, arr ){  /*内容*/})//没有返回值，即使用return返回，用变量接收也是显示undefined

补充：forEach除了接受一个必须的回调函数参数，还可以接受一个可选的上下文参数（改变回调函数里面的this指向）（第2个参数）默认指向window。map、filter、some、every都有该可选参数。
```
arr.forEach(function(currentValue, index, arr), thisValue)
```

2.map

释义：映射。
让数组中的每个元素都调用一次提供的函数。
返回每次函数调用的结果组成的新数组。
不会改变原数组。

语法：

arr.map( function( value, index, arr ){  return 改变后的数据；
})//必须要有返回值，否则返回一个全是undefined的数组var arr = [1, 2, 3]var res1 = arr.map(function(v, i, arr){return v*2})var res2 = arr.map(function(v, i, arr){v*2})console.log(arr) // [1, 2, 3]console.log(res1) // [2, 4, 6]console.log(res2) // [undefined, undefined, undefined]

注意：jQuery中的map方法中回调函数的参数顺序先index，后value。

3.filter

释义：过滤。
该方法对数组中的每一项运行给定函数，返回该函数会返回 true 的项组成的数组。
即符合规则的元素会被存放到新数组中。

语法：

arr.filter( function( value, index, arr ){  return value>n(该表达式为true的值)；
})//必须要有返回值，否则返回一个空数组var arr = [1, 2, 3, 4]var res1 = arr.filter(function(v, i, arr){return v>2})var res2 = arr.filter(function(v, i, arr){v>2})console.log(arr) // [1, 2, 3, 4]console.log(res1) // [3, 4]console.log(res2) // []

注意：jQuery中的过滤数组方法是grep
grep(array,callback,invert)
```
$.grep(arr, function( value, index ){  return value>n;
},false/true)//默认false，返回表达式为true的值的数组
```
- array：待过滤数组；
- callback：数组过滤函数，该函数包含两个参数，第一个是当前数组元素的值value，第二个是数组元素的下标index；
- invert：布尔型可选项，默认为false，即返回的是过滤函数处理以后为true的数组；选项设置为true的时候，返回的是过滤函数处理以后为false的数组。
补充：jQuery中的filter方法，参数为选择器，用于筛选元素。
```
$("a"),filter("#foo");//选择标签为“a”且其ID为“foo"的标签
```

4.some

释义：存在满足。

判断数组中的每一个元素，只要有一个符合回调函数的要求，就返回true。

var arr = [1, 2, 3, 4]var res = arr.some(function(v, i, arr){return v>2})console.log(arr) // [1, 2, 3, 4]console.log(res) // true

5.every

释义：全部满足。

判断数组中的每一个元素，所有元素都符合回调函数的要求，就返回true。

var arr = [1, 2, 3, 4]var res = arr.every(function(v, i, arr){return v>2})console.log(arr) // [1, 2, 3, 4]console.log(res) // false

二、索引方法

1.indexOf

释义：从数组的开头开始向后查找数组中某个元素第一次出现的索引位置，如果找不到，返回-1

语法：

arr.indexOf( item, start );//参数一：查找的元素//参数二：开始查找的下标index，不选默认从0索引开始

常用：

//常用于操作数组中的元素，没有就添加。var index=arr.indexOf( item );if ( index ===  -1 ){
  arr.push( item );
}

注意：
在比较第一个参数与数组中的每一项时，会使用全等操作符，要求必须完全相等,否则返回-1。

2.lastIndexOf

释义：从数组的末尾开始向前查找数组中某个元素第一次出现的位置，如果找不到，返回-1

三、归并方法

1.reduce

释义：不断的减少数组元素，最终的到一个结果，类似于递归
该方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

语法：

array.reduce ( function( total, currentValue, currentIndex, arr){  return total
}, initialValue)//参数一：回调函数
    //回调函数的参数1：初始值或之前值（必须）
    //回调函数的参数2：当前值（必须）
    //回调函数的参数3：当前索引值（可选）
    //回调函数的参数4：当前函数（可选）
    //回调函数返回值：返回的值作为下一次迭代的初始值//参数二：初始值（可选）如果缺省，初始值为数组的第一项

举个栗子：

var arr = [ 1, 2, 3, 4 ];//不设置初始值，默认从数组第一项开始var sum1 = arr.reduce( function ( total, curr ){  return total+curr;
});console.log( sum1 );//10//设置初始值5，会比不设初始值多执行一次var sum2 = arr.reduce( function ( total, curr ){  return total+curr;
},5);console.log( sum2 );//15

利用此方法，可以快速将二维数组转换为一维数组

var arrMix = [
    [ 1, 2 ],
    [ 3, 4 ],
    [ 5, 6 ]
]var arr = arrMix.reduce( function( total, curr ){    return total.concat( curr );
});console.log( arr );//[1, 2, 3, 4, 5, 6]

再举个栗子：

//将cookie和search以对象的形式显示var cookie = "k1=v1; k2=v2; k3=v3; k4=v4";var search = "k1=v1&k2=v2&k3=v3&k4=v4";var res = cookie.split( "; " ).reduce(function ( res, kvstr ) {    var kv = kvstr.split( "=" );    var key = kv[ 0 ];    var value = kv[ 1 ];

    res[ key ] = value;//设置对象的键=值

    return res;
}, {} );//设置初始值为一个空对象var res2 = search.split( "&" ).reduce(function ( res, kvstr ) {    var kv = kvstr.split( "=" );    var key = kv[ 0 ];    var value = kv[ 1 ];

    res[ key ] = value;//设置对象的键=值

    return res;
}, {} );//设置初始值为一个空对象console.log(res) // {k1: "v1", k2: "v2", k3: "v3", k4: "v4"}console.log(res2) // {k1: "v1", k2: "v2", k3: "v3", k4: "v4"}

2.reduceRight

释义：该方法接收一个函数作为累加器，数组中的每个值（从右到左）开始缩减，最终计算为一个值。使用方法与reduce相同。

ES6中的数组方法

1.扩展运算符（...）

释义：它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。
```
console.log(...[1, 2, 3]) // 1 2 3console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5
```

该运算符主要用于函数调用，如替代数组的 apply 方法

function add(a, b, c) {  console.log(a + b + c);
}let arr = [1, 2, 3];
add.apply(null, arr); // 6 ==> es5add(...arr); // 6 ==> es6Math.max.apply(null, [1, 2, 3]); // 3 ==> es5 写法Math.max(...[1, 2, 3]); // 3 ==> ES6 写法

应用

// 1.复制数组const a = [1, 2];const b = [...a];const [...c] = a;// 2.合并数组(取代concat)var a = [1, 2];var b = [3, 4];
a.concat(b); // [1,2,3,4] ==> es5 写法[...a, ...b]; // [1,2,3,4] ==> es6 写法// 3.与解构赋值结合，生成数组let [a, ...b] = [1, 2, 3, 4]
a // 1b // [2,3,4]// 4.将字符串转为真正的数组let str = "abc";
[...str] // ["a","b","c"];Array.from('abc'); // ['a','b','c'];str.split("").reverse().join(""); ==> es5 写法
[...str].reverse().join(""); ==> es6 写法

2.Array.from

释义: 将两类对象转为正真的数组
语法:
Array.from(arrayLike: ?, mapFn?: fn(elt: ?, i: number), thisArg?: ?)
参数:

arg1：类似数组的对象
arg2：map 函数
arg3：绑定 map 函数内的 this

应用:

该方法用于将两类对象转为正真的数组：类似数组的对象和遍历的对象( 包括 set 和 map )

let arrLike = {  '0': 'a',  '1': 'b',  '2': 'c',  length: 3};var arr1 = [].slice.call(arrLike); // ["a", "b", "c"] ==> es5let arr2 = Array.from(arrLike); // ["a", "b", "c"] ==> es6// 将 Set 结构转为数组let items = new Set([1, 2, 3]);let array = Array.from(items);

实际应用中，常见的类似数组的对象是 DOM 操作返回的 NodeList 集合，以及函数内部的 arguments 对象

栗子:

将字符串转为数组

Array.from('abc'); // ['a','b','c'];
[...'abc']; // ['a','b','c'];'abc'.split(''); // ['a','b','c'];

返回各种数据的类型

// 用argumentsfunction typesOf() {  return Array.from(arguments, p => typeof p)
}
typesOf(null, [], NaN, 'abc', undefined, {}); // ["object", "object", "number", "string", "undefined", "object"]// 用rest参数function typesOf(...rest) {  return Array.from(rest, p => typeof p)
}
typesOf(null, [], NaN, 'abc', undefined, {}); // ["object", "object", "number", "string", "undefined", "object"]

Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。
```
Array.from('123',x=>x+'a'); // ["1a", "2a", "3a"]//处理两次函数Array.from({length:2},()=>'a'); // ["a", "a"]
```

扩展运算符背后调用的是遍历器接口(Symbol.iterator)，如果一个对象没有部署这个接口，就无法转换。Array.from方法还支持类似数组的对象。所谓类似数组的对象，本质特征只有一点，即必须有length属性。因此，任何有length属性的对象，都可以通过Array.from方法转为数组，而此时扩展运算符就无法转换。

3.Array.of

该方法返回参数值组成的数组。如果没有参数，就返回一个空数组。
替代Array()或new Array()，并且不存在由于参数不同而导致的重载。
( 感觉没什么用,直接用中括号不就完了吗 [ ] )

4.数组实例的copyWithin

[].copyWithin(target: number, start: number, end?: number)

参数
arg1：从该位置开始替换数据
arg2：从该位置开始读取数据，默认为 0。如果为负值，表示倒数
arg3：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数
数组实例的copyWithin方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。

['a','b','c'].copyWithin(0,1); // ["b", "c", "c"];

5.数组实例的find和findIndex

找出第一个符合条件的数组成员（下标）

[].find(callback: fn(element: ?, index: number, array: [?]) : bool, thisArg?: ?)

[].findIndex(callback: fn(element: ?, index: number, array: [?]), thisArg?: ?)

6.数组实例的fill

替换、填充数组
[].fill(value: ?, start?: number, end?: number)

7.数组实例的includes

[].includes(value: ?)

返回布尔值，判断某数组是否包含某个 value 值
es5 中用 indexOf(value)===-1? 来判断是否包含

编程风格之类数组对象转数组

// 操作dom返回的NodeList集合let ps = document.querySelectorAll('p');// es5[].slice.call(ps).forEach(p=> {  console.log(p.innerText);
});// es6Array.from(ps).forEach(p=> {  console.log(p.innerText);
});
[...ps].forEach(p=>{console.log(p.innerText)});