关于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 语法。

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

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]

用于检测是否是一个 Array。

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

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

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

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

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

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

遍历数组的键和值。

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

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

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

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

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

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

语法：

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)

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

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

console.log(found) // 12

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

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

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

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

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

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

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

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

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

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

返回数组中找到的给定元素的第一个索引，如果不存在，则返回 -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

同 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

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

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

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

遍历数组元素的键名。

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

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

遍历数组元素的键值。

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

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

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

语法：

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>
})

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

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

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

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

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

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

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

办法对数组中的每个元素执行提供的 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

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

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

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

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

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

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

该办法返回一个新数组，由 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"]

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

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

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

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

用原地算法对数组元素进行排序，并返回新数组。默认排列程序是在将元素转换为字符串，而后比拟它们的 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]

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

// 删除：第一个参数是从下标为几的元素开始删除，第二个参数为删除几个元素
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]

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

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

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

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

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

1、Array.from()

2、Array.isArray()

3、concat()

4、entries()

5、every()

6、filter()

7、find()

8、findIndex()

9、forEach()

10、includes()

11、indexOf()

12、lastIndexOf()

13、join()

14、keys()

15、values()

16、map()

17、pop()

18、push()

19、reduce()

20、reverse()

21、shift()

22、slice()

23、some()

24、sort()

25、splice()

26、unshift()

27、toString()