【笔记】ES6 数组的扩展

ES6对数组也进行了一些扩展，不过很多东西我觉得平时不太常用，就粗略的了解一下。

扩展运算符...

// 简单示例
console.log(...[1, 2, 3]) // 1 2 3
function sum(a, b) {return a + b
}
sum(...[1, 2]) // 3

扩展运算符的应用

// 复制数组
const arr1 = [1, 2]
const arr2 = [...arr1]// 合并数组
const arr3 = [...arr1, ...arr2]// 与解构赋值配合使用
const [a, ...b] = [1, 2, 3]
console.log(a) // 1
console.log(b) // [2, 3]
// 如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错
const [x, ...y, z] = [1, 2, 3] // 报错// 字符串转数组
const strArr = [...'郭德纲']
console.log(strArr) // ['郭', '德', '纲']

Array.from()
将类数组对象或可迭代对象转化为数组。

// 参数为数组,返回与原数组一样的数组
console.log(Array.from([1, 2])) // [1, 2]
// 如果数组包含空位
console.log(Array.from([1, , 2])) // [1, undefined, 2]// 将类似数组的对象转为数组
const arrLike = {'0': 1,'1': 2,length: 2
}
console.log(Array.from(arrLike)) // [1, 2]// 该方法还可以接收第二个参数
// 作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组
console.log(Array.from(arrLike, item => item * 2)) // [2, 4]
console.log(Array.from({length: 2}, () => 'a')) // ['a', 'a']

Array.of()
将一组值转换为数组。

console.log(Array.of()) // []
console.log(Array.of(1, 2, 3)) // [1, 2, 3]
console.log(Array.of(undefined)) // [undefined]

实例方法find()和findIndex()
– 数组实例的find方法，用于找出第一个符合条件的数组成员
– 数组实例的findIndex方法，返回第一个符合条件的数组成员的位置

const target = ['a', 'b', 'c'].find(item => item === 'b')
console.log(target) // b
const targetIndex = ['a', 'b', 'c'].findIndex(item => item === 'b')
console.log(targetIndex) // 1// find和findIndex的回调支持三个参数，分别是：当前项、索引、原数组
['a', 'b', 'c'].find((item, index, arr) => {if (item === 'b') {console.log(item, index, arr)}
}) // b 1 ['a', 'b', 'c']// find和findIndex支持传入第二个参数，用来绑定回调函数的this对象
function func(item) {return item > this.age
}
const person = { age: 18 }
console.log([16, 17, 18, 19, 20].find(func, person)) // 19

实例方法fill()
使用给定值填充一个数组。可接收三个参数，第一个表示给定值，第二个表示替换起始位置，第三个表示替换结束位置

console.log(['a', 'b', 'c'].fill(1)) // [1, 1, 1]
console.log(new Array(3).fill(1)) // [1, 1, 1]
console.log(['a', 'b', 'c', 'd'].fill(7, 1, 3)) // ['a', 7, 7, 'd']// 注意，如果填充的是对象或数组，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象
const arr1 = new Array(3).fill({ name: '郭德纲' })
arr1[0].name = '岳云鹏'
console.log(JSON.stringify(arr1)) // [{"name":"岳云鹏"},{"name":"岳云鹏"},{"name":"岳云鹏"}]
const arr2 = new Array(3).fill([])
arr2[0].push(1)
console.log(JSON.stringify(arr2)) // [[1],[1],[1]]

实例方法entries()，keys()和values()
– keys返回一个键名的遍历器对象
– values返回一个键值的遍历器对象
– entries返回一个键值对的遍历器对象

const arr = ['a', 'b', 'c']
// 键名的遍历
for(let key of arr.keys()) {console.log(key)
}
// 0
// 1
// 2
// 键值的遍历
for(let value of arr.values()) {console.log(value)
}
// a
// b
// c
// 键值对的遍历
for (let entry of arr.entries()) {console.log(entry)
}
// [0, 'a']
// [1, 'b']
// [2, 'c']

实例方法includes()
– 判断数组上是否包含给定值。
– 第一个参数为需要判断的值。
– 第二个参数为搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

console.log([1, 2, 3].includes(2)) // true
console.log([1, 2, 3].includes(4)) // false
console.log([1, 2, NaN].includes(NaN)) // true
console.log([1, 2, 3].includes(1, 1)) // false

实例方法flat()和flatMap()
– 将多维数组拉平

// 普通用法
console.log([1, 2, [3, 4]].flat()) // [1, 2, 3, 4]
console.log([1, 2, [3, [4, 5]]].flat()) // [1, 2, 3, [4, 5]]// 传入第一个参数，表示拉平的深度
console.log([1, 2, [3, [4, 5]]].flat(1)) // [1, 2, 3, [4, 5]]
console.log([1, 2, [3, [4, 5]]].flat(2)) // [1, 2, 3, 4, 5]
// 如果不论几层都要拆成一维的，可以传入Infinity
console.log([1, 2, [3, [4, [5, 6]]]].flat(Infinity)) // [1, 2, 3, 4, 5, 6]

// flatMap()方法对原数组的每个成员执行一个函数
// 然后对返回值组成的数组执行flat()方法
// 该方法返回一个新数组，不改变原数组
console.log([1, 2, 3].flatMap(item => [item, item * 2])) // [1, 2, 2, 4, 3, 6]
// 相当于 [[1, 2], [2, 4], [3, 6]].flat()

实例方法at()
– at方法接受一个整数作为参数，返回对应位置的成员，支持负索引
– 如果参数位置超出了数组范围，at返回undefined

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

数组的空位

console.log([,,,].length) // 3// 注意，空位不是undefined，某一个位置的值等于undefined，依然是有值的。空位是没有任何值，in运算符可以说明这一点
// 第一个数组的 0 号位置是有值的，第二个数组的 0 号位置没有值
console.log(0 in [undefined, undefined, undefined]) // true
console.log(0 in [,,,]) // false// ES6会将空位转为undefined
console.log([1,,2]) // [1, undefined, 2]

【笔记】ES6 数组的扩展相关推荐

Es6学习笔记(7)----数组的扩展
参考书<ECMAScript 6入门> http://es6.ruanyifeng.com/ 数组的扩展 1.扩展运算符:可以将数组转化成逗号隔离的单个参数 ...[1,2,3] //控制 ...
【JavaScript】ES6 数组的扩展
ES5 数组基础 ES5 数组常用方法 ES5 数组方法 arr.forEach() arr.forEach(callback[, thisObj]) 简单地遍历数组 callback:回调函数,没有 ...
es6 --- 数组的扩展
经常遇到对数组的操作-下面是<ES6标准入门>(第3版)中对数组扩展的(部分)描述: 扩展运算符(-): console.log(...[1,2,3]) // 1 2 3console.l ...
ES6数组的扩展~超详细、超好理解哦
在ES5中,数组主要分为两大类:索引数组和关联数组(和对象很像). 在ES6中,对数组进行了一些扩展,跟小编一起来看看吧! 希望这篇博客可以帮助到有需要的小伙伴文章目录扩展运算符替代appl ...
ES6 数组的扩展：扩展运算符
文章目录扩展运算符应用扩展运算符扩展运算符(-)作用是将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]); // 1 2 3console.log(1, ...
ES6 -数组的扩展
1.Array.from 把类数组(获取一组元素.arguments)对象转成数组只要具备length,大多都可以转化 //3种方法转成数组 let ali=document.querySelec ...
ES6查漏补缺【数组的扩展】
我的ES6 数组的扩展 1.先简单复习一下ES5中的数组方法 2.静态方法 ES5:Array.isArray() ES6:array.from() ES6:array.of() 3.数组实例方法 i ...
ES6标准学习： 4、数组的扩展
数组的扩展一.类数组对象与可遍历对象转换为数组 Array.from()方法用于将类数组对象.可遍历对象转换为数组,其中可遍历对象包括es6新增的set和map结构所谓的类数组对象,本质特征是必须 ...
ES6的新特性（8）——数组的扩展
数组的扩展扩展运算符含义扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) / ...

【笔记】ES6 数组的扩展

【笔记】ES6 数组的扩展相关推荐

最新文章

热门文章