JS-Array常用方法总结

677

创建数组

不要用 new Array()创建 , 直接用字面量创建:

var arr=[];
var array=[1,2,3,4];
var arry1=['a','b','c','d']

索引

索引访问数组

array[0];// 1
array[array.length-1];// 4

找出某个元素在数组中的索引

array.indexOf(2)// 1

基础增删数组

末尾添加:array.push(5)(返回数组长度,返回的就是你在控制台输入后直接蹦出来的东西)// array:[1,2,3,4,5]

头部添加:array.unshift(0)(返回数组长度)// array:[0,1,2,3,4,5]

末尾删除:array.pop() (返回被删除的值) // array:[0,1,2,3,4]

头部删除:array.shift()(返回被删除的值) // array:[1,2,3,4]

复制数组5种方法

友情链接:js-最通俗的深浅拷贝 方法1:

var a1=array.slice();// 浅拷贝

方法2:

var a2=[].concat(array);// 浅拷贝

方法3:

var a3=JSON.parse(JSON.stringify(array));// 深拷贝

方法4:

// es6方法:
var a4=Object.assign([],array);// 浅拷贝

方法5:

// es6方法:
var a5=[...array];// 浅拷贝

Array.prototype.concat()

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

语法:var array2 = array1.concat(value1,value2,...,valueN])

  • array1:必选,且必须是个数组

  • valueN:可选。 数组或值,将被合并到一个新的数组中。如果省略了所有 valueN 参数,则 concat 会返回调用此方法的现存数组的一个浅拷贝。

var arr=[1,3,4].concat([1,3,8],['a','b'],1,true,'5',()=>{console.log(1)},{1:1,2:'a'})
// arr:[1, 3, 4, 1, 3, 8, "a", "b", 1, true, "5", ()=>{console.log(1)}, {1:1,2:'a'}]

Array.prototype.filter()

filter() 方法创建一个新数组, 其包含符合所提供函数里的筛选条件的所有元素。 此方法不会更改现有数组,而是返回一个新数组。

语法:var array2 = array1.filter(function callback(element, index, array){return x;}, thisArg)

  • array1:必选,且必须是个数组
  • callback:filter 为数组中的每个元素调用一次 callback 函数 callback 被调用时传入三个参数:元素的值|元素的索引|被遍历的数组本身

element:元素的值,数组中当前正在处理的元素。【必选】

index:元素的索引,正在处理的元素在数组中的索引。【可选】

array:被遍历的数组本身,调用了 filter 的数组本身。【可选】

x: callback必须return一个筛选条件——比如element>10这样的值为true或false的筛选条件。

  • thisArg: 如果为 filter 提供一个 thisArg 参数,则它会被作为 callback 被调用时的 this 值。(否则,callback 的 this 值在非严格模式下将是全局对象,严格模式下为 undefined。和this规则里介绍的规则一样)。【可选】注意:如果callback是个箭头函数,那thisArg就失效了呦,因为箭头函数本身的this等价于父级的this,跟自己的this无关。
var arr=[1,2,3,4].filter(  function callback(element,index){ console.log(this);return element!==this.test}  ,  {test:3}  )
// arr:[1, 2, 4]

Array.prototype.map()

map() 方法创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。此方法不会更改现有数组,而是返回一个新数组。

语法:var array2 = array1.map(function callback(element, index, array){return x;}, thisArg)

与filter语法十分相似,只是作用不同。参数里唯一不同的是callback 里的x:x是经过处理过后的对应位置的元素。

因为map生成一个新数组,当你不打算使用返回的新数组却使用map是违背设计初衷的,请用forEach或者for-of替代。

不该使用map的情况: A:你不打算使用返回的新数组 B: 你没有从回调函数中返回值。

var arr=[1,2,3].map((item)=>{return item+100})
// arr:[101, 102, 103]

Array.prototype.forEach()

forEach() 方法对数组的每个元素执行一次给定的函数。

除改变原数组和callback里不一定非要有返回值外,均与map()相同。

['a','b','c'].forEach(element => console.log(element));
// expected output: "a"
// expected output: "b"
// expected output: "c"

Array.prototype.flatMap()

flatMap()方法多用于数组降维,如果数组是一维数组,那用map和flatMap没有任何差别。但如果数组是多维数组,用了flatMap会自动降一维,只降一维。

语法和map()完全一致

var arr=[1,2,[3,4],[5,[6]]].flatMap(x=>x);
// arr:[1, 2, 3, 4, 5, [6]]

var a=[1,2,[3,4],[5,[6]]].flatMap(x=>[x]);
// a: [1, 2, [3,4], [5,[6]]]

Array.prototype.reduce()

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。

语法:

arr.reduce(function callback(accumulator, currentValue ,index, array]){return x;}, initialValue)

  • callback

    accumulator:每一次累积的值

    currentValue | index(可选) | array (可选) : 当前元素 | 当前元素的索引 | 被遍历的数组本身

    x:函数累计处理的结果

  • initialValue(可选):初始值

解释:

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
  return accumulator + currentValue;
});
// 返回:10

callback 被调用四次,每次调用的参数和返回值如下表:

image.png 添加初始值(initialValue)后:

[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => {
    return accumulator + currentValue
}, 10)
// 返回:20

callback 被调用五次,每次调用的参数和返回值如下表:

image.png

Array.prototype.reverse()

reverse() 方法将数组中元素的位置颠倒,并返回颠倒后的数组。该方法会改变原数组。

语法:arr.reverse()

[1,2,3,4].reverse()
// 返回:[4,3,2,1]

Array.prototype.indexOf()

indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。

语法:arr.indexOf(searchElement, fromIndex)

searchElement : 要查找的元素

fromIndex :【可选】开始查找的位置。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即-1表示从最后一个元素开始向后查找,-2表示从倒数第二个元素开始向后查找 ,以此类推。不提供此参数则默认从头找。

var array = [2, 5, 9];
array.indexOf(2);     // 0
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0

Array.prototype.splice()

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,此方法会改变原数组。

语法:array.splice(start, deleteCount, item1, item2, ...)

start:指定修改的开始位置(从0计数)。

deleteCount 【可选】 整数,表示要移除的数组元素的个数。如果 deleteCount 被省略了,或者它的值大于等于array.length - start(也就是说,如果它大于或者等于start之后的所有元素的数量),那么start之后数组的所有元素都会被删除。 如果 deleteCount 是 0 或者负数,则不移除元素。这种情况下,至少应添加一个新元素。

item1, item2, ... 【可选】 要添加进数组的元素,从start 位置开始。如果不指定,则 splice() 将只删除数组元素。

var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
var removed = myFish.splice(2, 1, "trumpet");

// 运算后的 myFish: ["angel", "clown", "trumpet", "sturgeon"]
// 被删除的元素: ["drum"]

Array.prototype.slice()

slice() 方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。 语法:arr.slice(begin, end)

begin 可选 提取起始处的索引(从 0 开始),从该索引开始提取原数组元素。

end 可选 提取终止处的索引(从 0 开始),在该索引处结束提取原数组元素。

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);

// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus contains ['Orange','Lemon']