JavaScript数组中常用API汇总

不会改变原数组的方法

1.slice

定义：

• slice()方法通过索引位置获取新的数组，该方法不会修改原数组，只是返回一个新的子数组。

用法：slice(start,end)

• start：必填；设定新数组的起始位置；如果是负数，则表示从数组尾部开始算起（-1指最后一个元素，-2 指倒数第二个元素，以此类推）
• end：可选；设定新数组的结束位置（不包括结束位置）；如果不填写该参数，默认到数组结尾；如果是负数，则表示从数组尾部开始算起（-1 指最后一个元素，-2指倒数第二个元素，以此类推）

var arr=[1,2,3,4,5]
console.log(arr.slice(1)) //  [ 2, 3, 4, 5 ]
console.log(arr.slice(1,3)) // [ 2, 3 ]
console.log(arr.slice(-1))  // [ 5 ]
console.log(arr.slice(1,-1))  // [ 2, 3, 4 ] 这种情况下 -1会和数组长度相加 等价于arr.slice(1,4)
console.log(arr.slice(1,4))   // [ 2, 3, 4 ]

2.map

定义：

• map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，并且按照原始数组元素顺序依次处理元素。

用法：array.map(function(currentValue,index,arr))

• currentValue：必填；当前元素的值
• index：可选；当前元素的索引值
• arr：可选；当前元素属于的数组对象

var obj = [
  {name:'小明',age:16,sex:'男'},
  {name:'小红',age:17,sex:'女'},
  {name:'小白',age:18,sex:'女'},
]
function getter(obj){
  obj.map( item => {
    console.log(item.age);
  })
}

getter(obj);
//16
//17
//18

var arr1 = [1,2,3,4,5]
//将原数组进行平方
var arr2 = arr1.map((item)=>{
    return item*item
})
console.log(arr1) // [ 1, 2, 3, 4, 5 ] 原生数组不变
console.log(arr2) // [ 1, 4, 9, 16, 25 ]

3.forEach

定义：

• forEach()方法为数组中的每个元素调用一个函数。

用法：forEach(function(value,index,array))

• value：必填；当前元素的值
• index：可选；当前元素的索引值
• array：可选；当前元素属于的数组对象

var array = ['a', 'b', 'c'];

array.forEach(function(element,index) {
  console.log(element,index);
});
//a 0
//b 1
//c 2

4.every

定义：

• every()是对数组中每一项运行给定函数，如果该函数对每一项返回true,则返回true。

用法：every(function(value,index,array))

• value：必填；当前元素的值
• index：可选；当前元素的索引值
• array：可选；当前元素属于的数组对象

var arr = [1, 2, 3, 4, 5, 6];

console.log(arr.every(function (item, index, array) {
    console.log('item=' + item + ',index=' + index + ',array=' + array);
    return item > 3;
}));
//false

5.some

定义：

• some()是对数组中每一项运行给定函数，如果该函数对任一项返回true，则返回true。

用法：some(function(value,index,array))

• value：必填；当前元素的值
• index：可选；当前元素的索引值
• array：可选；当前元素属于的数组对象

var arr = [1, 2, 3, 4, 5, 6];

console.log(arr.some(function (item, index, array) {
    console.log('item=' + item + ',index=' + index + ',array=' + array);
    return item > 3;
}));
//true

6.filter

定义：

• filter()方法会创建一个新数组，原数组的每个元素传入回调函数中，回调函数中有return返回值，若返回值为true，这个元素保存到新数组中；若返回值为false，则该元素不保存到新数组中；原数组不发生改变。

用法：array.filter(function(currentValue,index,arr),)

• currentValue：必填；当前元素的值
• index：可选；当前元素的索引值
• array：可选；当前元素属于的数组对象

var arr1 = [1, 2, 4, 5, 6, 9, 10, 15]
//过滤掉偶数
var arr2 = arr1.filter(function (x) {
    return x % 2 !== 0;
});
console.log(arr2) // [ 1, 5, 9, 15 ]
console.log(arr1) // [ 1, 2, 4, 5, 6, 9, 10, 15 ] 原数组不变

7.reduce

定义：

• reduce() 方法接收一个函数作为累加器,reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，。

用法：arr.reduce(callback,[initialValue])
callback:函数中包含四个参数

• previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
• currentValue （数组中当前被处理的元素）
• index （当前元素在数组中的索引)
• array （调用的数组）

initialValue （作为第一次调用 callback 的第一个参数）

const arr = [1, 2, 3, 4, 5]
const sum = arr.reduce((pre, item) => {
    return pre + item
})
console.log(sum) // 15

8.entries

定义：

• entries()方法可以把一个对象的键值以数组的形式遍历出来，结果和 for…in 一致，但不会遍历原型属性。

用法：array.entries(obj)

• obj：必填；要传入的对象

const obj = { name: '小红', age: '23' }; 
console.log(Object.entries(obj));  // [['name', '小红'], ['age', '23']]

9.find

定义：

• find()方法为数组中的每个元素都调用一次函数执行：如果当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数，如果没有符合条件的元素返回 undefined

用法：array.find(function(currentValue,index,arr),)

• currentValue：必填；当前元素的值
• index：可选；当前元素的索引值
• array：可选；当前元素属于的数组对象

var test = [1, 2, 3, 4, 5];
var arr1 = test.find(item => item > 3);
console.log(arr1); //4

var arr2 = test.find(item => item == 0);
console.log(arr2); //undefined

10.concat

定义：

• concat()方法用于连接两个或多个数组，并且该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

用法：array.concat(arrayX,arrayX,…,arrayX)

• arrayX：必填；该参数可以是具体的值，也可以是数组对象。可以是任意多个

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

会改变原数组的方法

1.pop

定义：

• pop() 方法用于删除并返回数组的最后一个元素。

用法：arrayObject.pop()

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

// 5
// 4
// 3
// [ 1, 2 ]

2.push

定义：

• push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。

用法：arrayObject.push(newelement1,newelement2,…,newelementX)

• newelement1：必填；要添加到数组的第一个元素
• newelement2：可选；要添加到数组的第二个元素
• newelementX 可选；可添加多个元素

var arr = []
console.log(arr.push(1))
console.log(arr.push(2))
console.log(arr.push(3))
console.log(arr)

// 1
// 2
// 3
// [ 1, 2, 3 ]

3.shift

定义：

• shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

用法：arrayObject.shift()

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

// 1
// 2
// 3
// [ 4, 5 ]

4.unshift

定义：

• unshift()方法可向数组的开头添加一个或更多元素，并返回新的长度。

用法：arrayObject.unshift(newelement1,newelement2,…,newelementX)

• newelement1：必填；要添加到数组的第一个元素
• newelement2：可选；要添加到数组的第二个元素
• newelementX 可选；可添加多个元素

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

// 3
// 4
// 5
// [ 5, 4, 3, 1, 2 ]

5.sort

定义：
-sort() 方法用于对数组的元素进行排序。如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下
-若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值

• 若 a 等于 b，则返回 0
• 若 a 大于 b，则返回一个大于 0 的值

用法：arrayObject.sort(sortby)

• sortby：可选；规定排序顺序。必须是函数

var arr = [1,3,5,7,9]
console.log(arr.sort())  //默认升序
console.log(arr.sort((a,b)=>a-b))  //升序
console.log(arr.sort((a,b)=>b-a))  //降序
console.log(arr)

// [ 1, 3, 5, 7, 9 ]
// [ 1, 3, 5, 7, 9 ]
// [ 9, 7, 5, 3, 1 ]
// [ 9, 7, 5, 3, 1 ]

6.reverse

定义：

• reverse() 方法用于颠倒数组中元素的顺序

用法：arrayObject.reverse()

var arr = [1,3,5,7,9]
console.log(arr.reverse()) // [ 9, 7, 5, 3, 1 ]

7.fill

定义：

• fill() 方法用于将一个固定值替换数组的元素。

用法：array.fill(value, start, end)

• value：必填；填充的值
• start：可选；开始填充位置。
• end可选；可选；停止填充位置 (默认为 array.length)

//填充是从 start 位置开始，到 end-1 位置结束，不包含end位置.直接修改原数组
var arr1 = [1, 2, 3, 4, 56, 7, 7, 8, 9];
arr1.fill(4, 2, 5);
console.log(arr1)  //   [1, 2, 4, 4, 4, 7, 7, 8, 9]
var arr2 = [1, 2, 3, 4, 56, 7, 7, 8, 9];
arr2.fill(4);
console.log(arr2)  //  [4, 4, 4, 4, 4, 4, 4, 4, 4]

7.copyWithin

定义：

• copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中

用法：array.copyWithin(target, start, end)

• target：必选；复制到指定目标索引位置
• start：可选；元素复制的起始位置
• end可选；停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数

var arr = [1,3,5,7,9]
console.log(arr.copyWithin(2,1)) // [ 1, 3, 3, 5, 7 ]
console.log(arr.copyWithin(2,1,4)) // [ 1, 3, 3, 3, 5 ]
console.log(arr.copyWithin(2,1,-2)) // [ 1, 3, 3, 3, 5 ]

8.splice

定义：

• arr.splice(str)方法是处理数组的利器，利用它可以实现在指定位置删除、替换、插入指定数量的元素

用法看以下代码：

// 1、删除功能，第一个参数为第一项位置，第二个参数为要删除几个。
// array.splice(index,num)，返回值为删除内容，array为结果值。
var array = ['a', 'b', 'c', 'd'];
var removeArray = array.splice(0, 2);
console.log(removeArray) //[ 'a', 'b' ]
console.log(array) // [ 'c', 'd' ]

//2.插入功能， 第一个参数（插入位置），第二个参数（0），第三个参数（插入的项）
//array.splice(index,0,insertValue)，返回值为空数组，array值为最终结果值
var array = ['a', 'b', 'c', 'd'];
var removeArray = array.splice(1, 0, 'insert');
console.log(removeArray); // []
console.log(array); //[ 'a', 'insert', 'b', 'c', 'd' ]

//3.替换功能， 第一个参数（起始位置），第二个参数（删除的项数），第三个参数（插入任意数量的项）
//array.splice(index,num,insertValue)，返回值为删除内容，array为结果值。
var array = ['a','b','c','d'];
var removeArray = array.splice(1,1,'insert');
console.log(removeArray) //[ 'b' ]
console.log(array) // [ 'a', 'insert', 'c', 'd' ]

join

定义：

• join() 方法用于把数组中的所有元素放入一个字符串

用法：arrayObject.join(separator)

• separator：可选；指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

var arr = [1,2,3,4,5]
console.log(arr.join())
console.log(arr.join('-'))

// 1,2,3,4,5
// 1-2-3-4-5