1、Array .of

　　关于奇怪的 Array 函数，众所周知，我们可以通过Array函数做以下事情。

　　初始化指定长度的数组;设置数组的初始值。

　　// 1. Initialize an array of the specified length

　　const array1 = Array(3) // [ , , ]

　　// 2. Set the initial value of the array

　　const array2 = Array() // []

　　const array3 = Array(undefined) // [ undefined ]

　　const array4 = Array(1. 2. 3) // [ 1. 2. 3 ]

　　传递给Array函数的参数个数不一样，其作用也不一样。这常常让我感到困惑。

　　幸运的是，我们可以使用 Array.of 来弥补 Array 的不足。

　　// it's not initializing an array of length 3

　　const array1 = Array.of(3) // [ 3 ]

　　const array2 = Array.of() // []

　　const array3 = Array.of(undefined) // [ undefined ]

　　const array4 = Array.of(1. 2. 3) // [ 1. 2. 3 ]

　　2、 Array.from

　　from 方法中，我们可以通过 Array.from 方法将类数组对象、arguments 对象、NodeList 对象转换为真正的数组。

　　1）、类数组对象

　　const arrayLike = {

　　0: 'fatfish',

　　1: 'medium',

　　length: 2

　　}

　　const array1 = [].slice.call(arrayLike) // ['fatfish', 'medium']

　　// A more convenient way

　　const array2 = Array.from(arrayLike) // ['fatfish', 'medium']

　　2）、节点列表

　　const domsNodeList = document.querySelectorAll('div')

　　const domsArray = Array.from(domsNodeList) // [ dom, dom, dom, ... ]

　　3）、 Arguments

　　const logInfo = function () {

　　console.log('arguments', arguments)

　　console.log('Array.from arguments', Array.from(arguments))

　　}

　　logInfo('fatfish', 100)

　　logInfo('fatfish')

　　4）、Array.from的第二个参数

　　我们可以使用 Array.from 方法，如“[].map”。

　　const array = [ 1. 2. 3 ]

　　const array2 = array.map((num) => num * 2) // [2. 4. 6]

　　const array3 = Array.from(array, (num) => num * 2) // [2. 4. 6]

　　3、 includes

　　当满足其中一个条件时，我们经常会写这样的判断语句来做某事。

　　const num = 1

　　if (num === 1 || num === 2 || num === 3 || num === 4) {

　　console.log(num) // 1

　　}

　　其实可以通过include方法来简化代码。

　　const nums = [ 1. 2. 3. 4 ]

　　const num = 1

　　if (nums.includes(num)) {

　　console.log(num) // 1

　　}

　　4、使用“at方法”读取数组的尾部元素

　　你如何读取数组的尾部元素?是的，我们需要以“array.length-1”作为下标来读取。

　　const array = [ 1. 2. 3. 4. 5 ]

　　const lastEle = array[ array.length - 1 ] // 5

　　// You can't read like that

　　const lastEle = array[ - 1 ] // undefined

　　还有其他方法吗?

　　是的，“at”方法将成为您的魔法。当然，您也可以读取数组中其他位置的元素。

　　const array = [ 1. 2. 3. 4. 5 ]

　　const lastEle = array.at(-1) // 5

　　const ele1 = array.at(0) // 1

　　5、 flat

　　flat() 方法创建一个新数组，其中所有子数组元素递归连接到指定深度。

　　const array = [ 1. [ 2. [ 3. [ 4. [ 5 ] ] ] ] ]

　　// The default depth is 1

　　const flat1 = array.flat() // [ 1. 2. [ 3. [ 4. [ 5 ] ] ] ]

　　const flat2 = array.flat(2) // [ 1. 2. 3. [ 4. [ 5 ] ] ]

　　const flatAll = array.flat(Infinity) // [ 1. 2. 3. 4. 5 ]

　　6、 findIndex

　　“findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。否则，它返回 -1.表示没有元素通过测试。”

　　const array = [ -1. 0. 10. 10.  20. 100 ]

　　const index1 = array.findIndex((num) => num < 0) // 0

　　const index2 = array.findIndex((num) => num >= 10) // 2

下一篇

9个有用又有趣的CSS属性