JavaScript 数组中的常用方法 数组方法

1. concat()，不改变原数组

arr1.concat(arr2) 连接两个或多个数组，返回一个新的数组

const arr1 = [1, 2, 3]
const arr2 = [4, 5]
const newArr = arr1.concat(arr2)
console.log(newArr) // [1, 2, 3, 4, 5]

2. join()，不改变原数组

join(str) 数组转字符串，方法只接受一个参数，默认为逗号分隔符

conat arr = [1, 2, 3]
console.log(arr) // [1, 2, 3]
console.log(arr.join()) // 1,2,3
console.log(arr.join(:)) // 1:2:3

• tips: join() 实现重复字符串

const str = new Array(4).join('啦')
console.log(str) // 啦啦啦

1. 长度为4的数组,有三个空格,所以是三个啦啦啦

3. push() & unshift() 添加元素操作，改变了原数组

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

const arr = [1, 2]
console.log(arr.push(3)) // 3
console.log(arr) // [1, 2, 3]

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

const arr = [1, 2]
console.log(arr.unshift(3)) // 3
console.log(arr) // [3, 1, 2]

4. shift() & pop() 删除元素操作，改变了原数组

shift() 删除并返回数组第一个元素

const arr = [1, 2, 3]
const deleteItem = arr.shift()
console.log(arr) // [2, 3]
console.log(deleteItem) // 1

pop() 删除并返回数组最后一个元素

const arr = [1, 2, 3]
const deleteItem = arr.pop()
console.log(arr) // [1, 2]
console.log(deleteItem) // 3

5. sort() 数组排序，改变原数组

sort() 对数组的元素进行排序

const arr = [2, 4, 3, 1]
console.log(arr.sort()) // [1, 2, 3, 4]
console.log(arr) // [1, 2, 3, 4]
 
 

自定义排序

• tips: sort() 不按照数组元素数值的大小对数字进行排序，是按照字符编码的顺序进行排序，那怎么样根据元素数值大小进行排序呢？

const arr = [2, 4, 3, 1]
const arr1 = [...arr].sort((a, b) => a - b)
const arr2 = [...arr].sort((a, b) => b - a)
console.log(arr1) // [1, 2, 3, 4]
console.log(arr2) // [4, 3, 2, 1]
 
 

6. reverse() 反转数组，改变原数组

reverse() 颠倒数组中元素的顺序

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

7. slice() 截取数组，不改变原数组

arr.slice(start, end) 从 start 处开始选取（不包括该元素），从 end 处结束选取，如果为空的话，那么选取从 start 到数组结束的所有元素。负数代表方向，从数组尾部开始计算位置

const arr = [1, 2, 3, 4, 6]
console.log(arr.slice(1)) // [2, 3, 4, 6]
console.log(arr.slice(1, -2)) // [2, 3]
console.log(arr.slice(-3, 1)) // [2]
console.log(arr) // [1, 2, 3, 4, 6]

8. splice() 更新数组，改变原数组

arr.splice(index, howmany, item1, ..., itemX) 向 / 从数组中添加 / 删除项目，然后返回被删除的项目，返回含有被删除的元素的数组，若没有删除元素则返回一个空数组。

• [index] 必传项，整数，规定添加 / 删除项目的位置，负数表示从数组结尾处规定位置
• [howmany] 必传项，要删除的项目数量。如果设置为 0，则不会删除项目
• [item1, ..., itemX] 可选。向数组添加的新项目。

const arr = [1, 2, 3]
const arr1 = arr.splice(2, 1)
console.log(arr1) // [3]
console.log(arr) // [1, 2]
 
const arr2 = arr.splice(1, 0, 'ss')
console.log(arr2) // ['ss']
console.log(arr) // [1,'ss', 2]

9. indexOf() & lastIndexOf() 索引方法，不改变原数组

两个方法都是返回要查找的项所在数组中首次出现的位置，没找到的话就返回 - 1。

arr.indexOf(item, start) 从数组的开头开始向后寻找。

arr.lastIndexOf(item, start) 从数组的末尾开始向前查找。

• [item] 必须项，查找的元素
• [start] 可选，在数组中开始检索的位置，默认 0

const arr = [2, 4, 1, 9, 1, 2];
console.log(arr.indexOf(2)); // 0
console.log(arr.lastIndexOf(1)); // 4
console.log(arr.indexOf(3)); // -1

10. find() & findIndex() 根据函数内的判断返回找到的数组内的第一个元素。不改变原数组。 （es6 新增方法）

arr.find((currentValue, index, arr) => {}) 返回通过测试函数内判断的数组的第一个元素的值。当数组中的元素在测试函数中返回 true 时，返回符合条件的元素，之后不再调用测试函数判断剩下的元素，如果每个元素都执行了测试函数，没有符合的元素，则返回 undefined。

• 对于空数组不执行
• [currentValue] 必须项，当前元素
• [index] 可选。当前元素的索引值
• [arr] 可选。当前元素所属的数组对象

const arr = [1, 2, 3, 4]
const findItem = arr.find((item, index) => {
    return item > 2
})
const findItem1 = arr.find((item, index) => {
    return item > 5
})
console.log(findItem) // 3
console.log(findItem1) // undefined

findIndex((currentValue, index, arr) => {}) 用法和 find() 一样，不同的是不是返回数组内元素，而是返回符合测试函数判断的元素索引值，如果没有符合条件的元素返回 -1。

const arr = [1, 2, 3, 4]
const findItemIndex = arr.findIndex((item, index) => {
    return item > 2
})
const findItemIndex1 = arr.findIndex((item, index) => {
    return item > 5
})
console.log(findItemIndex) // 2
console.log(findItemIndex1) // -1

11. forEach()、map()、filter()、some()、every() 迭代方法，不改变原数组。

arr.forEach((currentValue , index , arr) => {}, thisValue) 对数组进行遍历循环，这个方法没有返回值。

• 对于空数组不执行
• [currentValue] 必须项，当前元素
• [index] 可选。当前元素的索引值
• [arr] 可选。当前元素所属的数组对象
• [thisValue] 可选。传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值。

const arr = [1,4,7,10];
arr.forEach((currentValue, index, arr) => {
    console.log(index + "--" + currentValue + "--" + (arr === Arr)) 
})
// 输出：
// 0--1--true
// 1--4--true
// 2--7--true
// 3--10--true  

arr.map((currentValue , index , arr) => {}, thisValue) 指 “映射”，方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。（不会改变数组长度，和原数组长度保持一致）

const arr = [1, 2, 3]
const arr1 = arr.map((currentValue) => {
    return currentValue + 1
})
console.log(arr) // [1, 2, 3]
console.log(arr1) // [2, 3, 4]
 
 

arr.filter((currentValue , index , arr) => {}, thisValue) “过滤” 功能，方法
创建一个新数组，其包含通过所提供函数实现的测试的所有元素。（可以改变数组长度，不必和原数组长度保持一致）

const arr = [1, 2, 3]
const arr1 = arr.filter((currentValue) => {
    return currentValue > 1
})
const arr2 = arr.filter((currentValue) => {
    return currentValue > '1'
})
console.log(arr) // [1, 2, 3]
console.log(arr1) // [2, 3]
console.log(arr2) // [2, 3]
 
 

• arr1 和 arr2 结果一致，可以看出函数支持弱等于，不是必须全等于

arr.some((currentValue , index , arr) => {}, thisValue) 判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回 true，不再往下执行。

const arr = [1, 2, 3]
const str = arr.some((currentValue) => {
    console.log(currentValue)
    return currentValue > 1
})
// 1
// 2
console.log(str) // true
 
 

arr.every((currentValue , index , arr) => {}, thisValue) 判断数组中的每一项是否都满足条件，全部符合就会返回 true，否则 false。

const arr = [1, 2, 3]
const str = arr.every((currentValue) => {
    return currentValue > 1
})
console.log(str) // false
 
 

12. reduce()、reduceRight() 归并方法，不改变原数组

• 这两个方法都会迭代数组中的所有项，然后生成一个最终返回值。他们都接收两个参数，第一个参数是每一项调用的函数，函数接受四个参数分别是初始值，当前值，索引值，和当前数组，函数需要返回一个值，这个值会在下一次迭代中作为初始值。第二个参数是迭代初始值，参数可选，如果缺省，初始值为数组第一项，从数组第一个项开始叠加，缺省参数要比正常传值少一次运算。
• [total] 必须项，初始值, 或者计算结束后的返回值。
• [cur] 必须项，当前元素。
• [index] 可选。当前元素的索引值
• [arr] 可选。当前元素所属的数组对象
• [initialValue] 可选。传递给函数的初始值。

arr.reduce((total , cur , index , arr) => {}, initialValue) 从数组的第一项开始，逐个遍历到最后
arr.reduceRight((total , cur , index , arr) => {}, initialValue) 从数组的最后一项开始，向前遍历到第一项

const arr = [1,2,3,4,5]
const result1 = arr.reduce((total,cur,index,arr) => {   
    console.log("total:" + total + ",cur:" + cur + ",index:" + index)
    return total + cur
})
console.log("结果：" + result1)
// 输出
// total:1,cur:2,index:1
// total:3,cur:3,index:2
// total:6,cur:4,index:3
// total:10,cur:5,index:4
// 结果：15
const result2 = arr.reduce((total,cur,index,arr) => {   
    console.log("total:" + total + ",cur:" + cur + ",index:" + index)
    return total + cur
},10)
console.log("结果：" + result2)
// 输出
// total:10,cur:1,index:0
// total:11,cur:2,index:1
// total:13,cur:3,index:2
// total:16,cur:4,index:3
// total:20,cur:5,index:4
// 结果：25
 
 

传不传第二个参数的区别

• 从上面代码我们可以看出，
  • 当我们不给函数传递迭代初始值时初始值 total 为数组第一项，函数从数组第二项开始迭代；
  • 若我们给函数传递迭代初始值，则函数从数组第一项开始迭代。

13. keys()、values()、entries() 遍历数组方法, 不改变原数组。 （es6 新增方法）

键名

keys() 对键名的遍历

const arr = ["a","b","c","d"]
for(let i of arr.keys()){
    console.log(i)
}
//打印：
// 0
// 1
// 2
// 3

键值

values() 对键值的遍历

const arr = ["a","b","c","d"]
for(let i of arr.values()){
    console.log(i)
}
//打印：
// a
// b
// c
// d

键值对

entries() 是对键值对的遍历。

const arr = ["a","b","c","d"]
for(let i of arr.entries()){
    console.log(i)
}
//打印：
// [0, "a"]
// [1, "b"]
// [2, "c"]
// [3, "d"]
for(let [idx,item] of arr.entries()){
    console.log(idx + ":"+item)
}
//打印：
// 0:a
// 1:b
// 2:c
// 3:d

14. includes() 不改变原数组。 （es6 新增方法）

arr.includes(searchElement , fromIndex) 用来判断一个数组是否包含一个指定的值，如果是返回 true，否则 false。

• [searchElement] 可选。需要查找的元素值。
• [fromIndex] 可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

const arr = ["a","b","c","d"]
const result1 = arr.includes("b")
const result2 = arr.includes("b",2)
const result3 = arr.includes("b",-1)
const result4 = arr.includes("b",-3)
console.log(result1)  // true
console.log(result2)  // false
console.log(result3)  // flase
console.log(result4)  // true

15. Array.from() （es6 新增方法）

Array.from() 用于类似数组的对象（即有 length 属性的对象）和可遍历对象转为真正的数组。

const json ={
    '0':'喜',
    '1':'欢',
    '2':'你',
    length:3
}
const arr = Array.from(json)
console.log(arr) // ["喜", "欢", "你"] 
 

16. Array.of() （es6 新增方法）

Array.of() 将一组值转变为数组，参数不分类型，只分数量，数量为 0 返回空数组。

let arr1 = Array.of(1,2,3)
let arr2 = Array.of([1,2,3])
let arr3 = Array.of(undefined)
let arr4 = Array.of()
console.log(arr1) // [1, 2, 3]
console.log(arr2) // [[1, 2, 3]]
console.log(arr3) // [undefined]
console.log(arr4) // []
 

17. fill() 改变原数组。 （es6 新增方法）

arr.fill(value, start, end) 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

• [value] 必需。填充的值。
• [start] 可选。开始填充位置。如果这个参数是负数，那么它规定的是从数组尾部开始算起。
• [end] 可选。停止填充位置 (默认为 array.length)。如果这个参数是负数，那么它规定的是从数组尾部开始算起。

let arr = [1,2,3,4,5,6]
arr.fill(0)  // [0, 0, 0, 0, 0, 0]
arr.fill(0,1)  // [1, 0, 0, 0, 0, 0] 
arr.fill(0,1,2)  // [1, 0, 3, 4, 5, 6]
arr.fill(0,-1)  // [1, 2, 3, 4, 5, 0]
arr.fill(0,1,-1)  // [1, 0, 0, 0, 0, 6]

18. copyWithin() 不改变原数组。 （es6 新增方法）

arr.copyWithin(target, start, end) 用于从数组的指定位置拷贝元素到数组的另一个指定位置中，会覆盖原有成员。

• [target] 必需。从该位置开始替换数据。
• [start] 可选。从该位置开始读取数据，默认为 0 。如果为负值，表示倒数。
• [end] 可选。到该位置前停止读取数据 (默认为 array.length)。如果为负值，表示倒数。
  

console.log([1, 2, 3, 4, 5, 6].copyWithin(0));        // [1, 2, 3, 4, 5, 6]
console.log([1, 2, 3, 4, 5, 6].copyWithin(0, 1));     // [2, 3, 4, 5, 6, 6]
console.log([1, 2, 3, 4, 5, 6].copyWithin(1, 3, 5));  // [1, 4, 5, 4, 5, 6]
console.log([1, 2, 3, 4, 5, 6].copyWithin(1, 2, -1)); // [1, 3, 4, 5, 5, 6]
console.log([1, 2, 3, 4, 5, 6].copyWithin(1, -4, 6)); // [1, 3, 4, 5, 6, 6]