关于javascript:Array数组常用方法含es6介绍

数组中提供了一系列的 API 操作，其中有

三个动态 api：

• Array.from()
• Array.isArray()
• Array.of()

三十一个原型 api：

• Array.prototype.concat()
• Array.prototype.copyWithin()
• Array.prototype.entries()
• Array.prototype.every()
• Array.prototype.fill()
• Array.prototype.filter()
• Array.prototype.find()
• Array.prototype.findIndex()
• Array.prototype.flat()
• Array.prototype.flatMap()
• Array.prototype.forEach()
• Array.prototype.includes()
• Array.prototype.indexOf()
• Array.prototype.join()
• Array.prototype.keys()
• Array.prototype.lastIndexOf()
• Array.prototype.map()
• Array.prototype.pop()
• Array.prototype.push()
• Array.prototype.reduce()
• Array.prototype.reduceRight()
• Array.prototype.reverse()
• Array.prototype.shift()
• Array.prototype.slice()
• Array.prototype.some()
• Array.prototype.sort()

本文整顿了本人所用过的数组办法，包含新增的 es6 语法。

1、Array.from()

将一个类数组或可遍历对象，转换成一个新的浅拷贝的数组实例。

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
}
let arr2 = Array.from(arrayLike)
console.log(arr2) //['a', 'b', 'c']

console.log(Array.from('foo')) // ["f", "o", "o"]

该办法还能够接管第二个参数，作用相似于数组的 map 办法，用来对每个元素进行解决，将解决后的值放入返回的数组。

let arrayLike = {
    '0': 1,
    '1': 2,
    length: 2
}
let newArr = Array.from(arrayLike, item => item * 2)
console.log(newArr) //[2, 4]

2、Array.isArray()

用于检测是否是一个 Array。

语法：Array.isArray(obj)
参数：obj 须要检测的值
返回值：如果检测的值是 Array，则返回 true，否则返回 false

Array.isArray([1, 2, 3]) // true

Array.isArray({foo: 123}) // false

3、concat()

合并两个或多个数组。此办法不会更改原数组，而是返回一个新数组。

const arr1 = ['a', 'b', 'c']
const arr2 = arr1.concat(['d', 'e', 'f'])

console.log(arr2) // ["a", "b", "c", "d", "e", "f"]

4、entries()

遍历数组的键和值。

const arr = ['a', 'b', 'c'];
const iterator = arr.entries();
for (let e of iterator) {console.log(e);   // [0,'a'] [1,'b'] [2,'c']
}

5、every()

所有的，每一个。检测数组中的所有元素是否满足指定条件，如果有一个元素不满足，则整个表达式返回 false，且残余的元素不会再进行检测，要所有的元素都返回了 true，后果才是 true。every 办法也不会扭转原数组。

留神：如果检测的是一个空数组，在任何状况下返回的都是 false

const arr = [1, 30, 39, 29, 10, 13]
const fn = (currentValue) => currentValue < 40

console.log(arr.every(fn)) // true

6、filter()

过滤数组，返回一个满足条件的新数组。

语法：

arr.filter((item，index，arr) => { // value 以后元素，index 索引，arr 原数组
    // statements
})

例：

// 及格的留下来，没及格的出门右拐
const students = [{ name: 'zs', score: 90},
    {name: 'ls', score: 30},
    {name: 'ww', score: 10},
    {name: 'zl', score: 100},
    {name: 'tq', score: 70},
    {name: 'wb', score: 60}
]

const result = students.filter(item => {return item.score >= 60})
console.log(result)

7、find()

找到第一个满足条件的元素。没有则返回 undefined。

const arr = [5,12,8,130,44]
const found = arr.find(item => item > 10)

console.log(found) // 12

8、findIndex()

返回第一个满足条件的元素的索引。没找到则返回 -1。

const arr = [5,12,8,130,44]
const isExist = (element) => element > 13

console.log(arr.findIndex(isExist)) // 3

9、forEach()

遍历数组，而后执行一次给定的函数。

留神：forEach() 没有返回值，实质上等同于 for 循环

const arr = ['毛利兰', '柯南', '小五郎', '灰原哀']

const newArr = []
arr.forEach(item => {const temp = <h5>{item}</h5>
    newArr.push(temp)
})

10、includes()

判断数组中是否蕴含指定的值，如果蕴含则返回 true，否则返回 false。

const pets = ['cat', 'dog', 'bat']

console.log(pets.includes('cat')) // true
console.log(pets.includes('at')) // false

11、indexOf()

返回数组中找到的给定元素的第一个索引，如果不存在，则返回 -1。

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison']

console.log(beasts.indexOf('bison')) // 1

// start from index 2
console.log(beasts.indexOf('bison', 2)) // 4

console.log(beasts.indexOf('giraffe')) // -1

12、lastIndexOf()

同 indexOf()性能一样，只不过从数组的前面向前查找，即返回在数组中最初一个的索引。

const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo']
console.log(animals.lastIndexOf('Dodo')) // 3

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

13、join()

将数组中的元素连接成一个字符串并返回。

const elements = ['Fire', 'Air', 'Water']

console.log(elements.join()) // "Fire,Air,Water"
console.log(elements.join('-')) // "Fire-Air-Water"

14、keys()

遍历数组元素的键名。

const arr = ['a', 'b', 'c']
const iterator = arr.keys()

for (const key of iterator) {console.log(key) // 0, 1, 2
}

15、values()

遍历数组元素的键值。

const arr = ['a', 'b', 'c']
const iterator = arr.values()

for (const value of iterator) {console.log(value) // 'a', 'b', 'c'
}

16、map()

遍历数组，并返回一个新数组，新数组中蕴含每次回调函数返回的后果，一比一的失去一个新数组。

语法：

arr.map((value，index，arr) => { //value 以后元素，index 索引，arr 原数组
    // statements
})

例：

const arr = ['毛利兰', '柯南', '小五郎', '灰原哀']

// const newArr = arr.map(item => <h5>{item}</h5>)
const newArr = arr.map(item => {return <h5>{item}</h5>
})

17、pop()

删除数组中最初一个元素，并返回该元素的值。此办法会更改原数组。

const plants = ['broccoli', 'cabbage', 'kale', 'tomato']

console.log(plants.pop()) // "tomato"

console.log(plants) // ["broccoli", "cabbage", "kale"]

18、push()

在数组的开端增加一个或多个元素，并返回增加后的数组长度。该办法会扭转原数组。

const animals = ['pigs', 'goats', 'sheep']
const count = animals.push('cows')

console.log(count) // 4
console.log(animals) // ["pigs", "goats", "sheep", "cows"]

19、reduce()

办法对数组中的每个元素执行提供的 reducer 函数，并将其后果计算为一个返回值。更多具体用法请点这里

const arr = [1, 2, 3, 4]
const reducer = (accumulator, currentValue) => accumulator + currentValue

console.log(arr.reduce(reducer)) // 10 = 1 + 2 + 3 + 4

console.log(arr.reduce(reducer, 5)) // 15 = 5 + 1 + 2 + 3 + 4

20、reverse()

将数组中的元素反转，并返回该数组。该办法会扭转原数组。

const arr = ['one', 'two', 'three']
const reversed = arr.reverse()

console.log(reversed) // ["three", "two", "one"]

21、shift()

删除数组中的第一个元素，并返回该元素的值。此办法会扭转原数组。

const arr = [1, 2, 3]
const firstElement = arr.shift()

console.log(arr) // [2, 3]
console.log(firstElement) // 1

22、slice()

该办法返回一个新数组，由 begin 和 end 决定的原数组的浅拷贝（包含 begin，不包含 end）。不扭转原数组。

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']

console.log(animals.slice(2)) // ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4)) // ["camel", "duck"]

23、some()

检测数组中满足指定条件的元素，只有回调函数中有一个或以上返回了 true，整个后果就是 true。

留神：如果检测的是一个空数组，在任何状况下返回的都是 true。

const array = [1, 2, 3, 4, 5]
const even = (element) => element % 2 === 0

console.log(array.some(even)) // true

24、sort()

用原地算法对数组元素进行排序，并返回新数组。默认排列程序是在将元素转换为字符串，而后比拟它们的 UTF-16 代码单元值序列时构建的。

const months = ['March', 'Jan', 'Feb', 'Dec']
console.log(months.sort()) // ["Dec", "Feb", "Jan", "March

const arr = [1, 30, 4, 21, 100000]
console.log(arr.sort()) // [1, 100000, 21, 30, 4]

25、splice()

删除指定索引值之后的一个或多个元素或增加新元素。此办法会扭转原数组。

// 删除：第一个参数是从下标为几的元素开始删除，第二个参数为删除几个元素
var arr = [1, 2, 3, 4, 5]
var res = arr.splice(1, 2) // 从索引为 1 开始删除两个
console.log(arr) // [1,4,5]
console.log(res) // [2,3]


// 增加：第二个参数设为 0，增加第三个参数，示意再插入一个数在指定下标数后面，返回值是空数组
var arr = [1, 2, 3, 4, 5]
var res = arr.splice(2, 0, 6) // 第二个参数为 0，在索引为 2 的后面增加 6
console.log(arr) // [1,2,6,3,4,5]
console.log(res) // []


// 替换：先删再加，示意替换，返回值是被删除的元素组成的数组
var arr = [1, 2, 3, 4, 5]
var res = arr.splice(1, 2, 100, 200, 300, 400, 500) // 从索引为 1 开始删除两个，再增加前面的数据
console.log(arr) //[1,100,200,300,400,500,4,5]
console.log(res) //[2,3]

26、unshift()

在数组的后面增加一个或多个元素，返回值为增加后的新数组长度。该办法会批改原数组。

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

27、toString()

将数组元素转换成一个字符串并返回

const arr = [1, 2, 'a', '1a']
console.log(arr.toString()) // "1,2,a,1a"

总结：

• 会扭转原数组的办法：push()、pop()、reverse()、sort()、splice()、shift()、unshift()…
• forEach()：让每一个元素执行一次函数，没有返回值，相当于 for 循环。不会占用全局变量，联合箭头函数贼难受
• map()：返回一个新数组，长度和原数组一样。
• filter()：返回一个新数组，保留那些满足条件的（即返回值是 true 的元素）
• some()：失去一个布尔值，只有函数中有一个返回 true，整体后果就是 true
• every()：失去一个布尔值，所有的函数都返回 true，后果就是 true
• includes()：返回一个布尔值，如果蕴含指定值，则返回 true
• indexOf()，findIndex()：失去一个数值，返回找到的第一个元素的索引值，不存在则返回 -1