本章节的主要内容是: ES6 数组扩展
一: 数组扩展:
1. 数组新增特性 <10个API>
1. Array.from()
2. Array.of()
3. copyWithin()
4. find/findIndex
5. fill()
6. entries() / keys() / values()
7. includes()
如图所示:
7-1-数组扩展.png
1. ES6 Array.from()
/**
1. Array.from()
1. 用于将两类对象转化为数组
1. 类似数组的对象
2. 可遍历的对象(包含 ES6 新增的数据结构 Set 和 Map)
*/
// 类似数组
{
let obj1 = {
'0': 'a',
'1': 'b',
'2': 'c',
'3': 'dddddddddd',
// str: 'dddddddddd',
length: 4
}
let arr1 = Array.from(obj1)
console.log(arr1);
// 打印结果:
// ['a', 'b', 'c', 'dddddddddd']
}
// DOM 操作返回的 NodeList 集合
{
let pAll = document.querySelectorAll('p')
console.log(pAll);
// 打印结果:
// NodeList(4) [p, p, p, p]
/**
* 在我们没有使用 Array.from 之前我们试着去遍历一下, 看看其结果
*
* 1. 结果是可以遍历 。
* 2. 那么 妧一峰 的 《ES6标准入门》 第三版 中的解说: '只有将这个对象转为真正的数组, 才能使用 foeEach 方法 。' 这个说法怎么解释? 是因为浏览器的问题还是JS语法改变? 具体也不清楚 。
*/
pAll.forEach(function(item) {
console.log('没有使用 Array.from 方法之前的遍历: ', item);
// 打印结果:
// 没有使用 Array.from 方法之前的遍历: 数组扩展
// 没有使用 Array.from 方法之前的遍历: Array.from() -- 1
// 没有使用 Array.from 方法之前的遍历: Array.from() -- 2
// 没有使用 Array.from 方法之前的遍历: Array.from() -- 3
})
let pArr = Array.from(pAll)
console.log(pArr);
// 打印结果:
// (4) [p, p, p, p]
pArr.forEach(function(item) {
console.log(item);
// 打印结果:
// 数组扩展
// Array.from() -- 1
// Array.from() -- 2
// Array.from() -- 3
console.log(item.innerText);
console.log(item.textContent);
// 打印结果:
// 数组扩展
// Array.from() -- 1
// Array.from() -- 2
// Array.from() -- 3
})
}
// 字符串转换
{
let str1 = 'abcde'
let arr1 = Array.from(str1)
console.log('Array.from -- 字符串转换: ', arr1); // Array.from -- 字符串转换: ['a', 'b', 'c', 'd', 'e']
}
// Array.from() 可以接收第二个参数
{
let arr1 = [1, 3, 5]
let resArr1 = Array.from(arr1, function(item) {
return item * 2
})
console.log('Array.from - 接收第二个参数, 原数组: ', arr1); // Array.from - 接收第二个参数, 原数组: (3) [1, 3, 5]
console.log('Array.from - 接收第二个参数, 返回结果: ', resArr1); // Array.from - 接收第二个参数, 返回结果: (3) [2, 6, 10]
// 将数组中的布尔值为 false 的成员转为 0
let arr2 = [1, ,2, ,3]
let resArr2 = Array.from(arr2, (num) => {
return num || 0
})
console.log('Array.from - 将数组中的布尔值为 false 的成员转为 0: ', resArr2); // Array.from - 将数组中的布尔值为 false 的成员转为 0: (5) [1, 0, 2, 0, 3]
}
// Array.from() 可以将字符串转为数组, 然后返回字符串的长度
{
/**
* 因为 Array.from() 能够正确处理各种 Unicode 字符, 可以避免 JS 将大于 \uFFFF 的字符算作两个字符的 bug 。
*/
let str1 = '1234'
console.log('普通方法获取字符串长度: ', str1.length); // 普通方法获取字符串长度: 6
console.log('Array.from 将字符串转为数组, 然后返回字符串的长度: ', Array.from(str1).length); // Array.from 将字符串转为数组, 然后返回字符串的长度 5
}
2. ES6 Array.of()
/**
2. Array.of()
1. 将一组数值转化为数组 。
2. Array.of 这个方法的主要目的是为了你补数组构造函数 Array() 的不足 。
1. 不足点: Array() 会因为参数个数的不同, 导致 Array() 的行为有差异 。
2. 小知识点:
1. Array.of 肯定返回一个数组; 如果没有参数, 就返回一个空数组 。
*/
{
let arr1 = Array.of(1, 2, 3, 4, 5, 6)
console.log('Array.of() -- 纯数字: ', arr1); // Array.of() -- 纯数字: (6) [1, 2, 3, 4, 5, 6]
let arr2 = Array.of()
console.log('Array.of() -- 不放置任何参数: ', arr2); // Array.of() -- 不放置任何参数: []
let arr3 = Array.of('aaa', '2', 4, 6, NaN)
console.log('Array.of() -- 参数中有字符串与数字: ', arr3); // Array.of() -- 参数中有字符串与数字: (5) ['aaa', '2', 4, 6, NaN]
}
// 展示 Array() 不足
{
console.log('Array() 方法 没有参数: ', Array()); // Array() 方法 没有参数: []
console.log('Array() 方法 1 个参数: ', Array(3)); // Array() 方法 1 个参数: (10) [empty × 3] <此处可以理解为 [, , ,]>
console.log('Array() 方法 3 个参数: ', Array(1, 3, 5)); // Array() 方法 3 个参数: (3) [1, 3, 5]
}
3. ES6 fill
/**
3. fill
1. 用给定的值替换数组中的内容 (原本的解析是: 使用给定值填充一个数组)。
*/
{
// 当使用一个参数时:
let arr1 = [1, 2, 3, 4, 5]
let resArr1 = arr1.fill(7)
console.log('fill -- 当使用一个参数时: ', arr1, resArr1); // fill -- 当使用一个参数时 (5) [7, 7, 7, 7, 7] (5) [7, 7, 7, 7, 7]
// 当使用两个参数时
let arr2 = [1, 2, 3, 4, 5]
let resArr2 = arr2.fill(7, 1)
console.log('fill -- 当使用两个参数时: ', arr2, resArr2); // fill -- 当使用两个参数时: (5) [1, 7, 7, 7, 7] (5) [1, 7, 7, 7, 7]
// 当使用三个参数时
let arr3 = [1, 2, 3, 4, 5]
let resArr3 = arr3.fill(7, 1, 3)
console.log('fill -- 当使用三个参数时: ', arr3, resArr3); // fill -- 当使用三个参数时: (5) [1, 7, 7, 4, 5] (5) [1, 7, 7, 4, 5]
}
4. ES6 keys() / values() / entries()
/**
4. keys() / values() / entries() : 用于遍历数组
1. keys(): 对 键名 的遍历 。
2. values(): 对 键值 的遍历 。
3. entries(): 对 键值对 的遍历 。
*/
{
// keys()
let arr1 = ['a', 'b', 'c']
for (let index of arr1.keys()) {
console.log('keys() -- 对 键名 的遍历: ', index);
// 打印结果:
// keys() -- 对 键名 的遍历: 0
// keys() -- 对 键名 的遍历: 1
// keys() -- 对 键名 的遍历: 2
}
// values()
for (let index of ['aa', 'bb', 'cc'].values()) {
console.log('values() -- 对 键值 的遍历: ', index);
// 打印结果:
// values() -- 对 键值 的遍历: aa
// values() -- 对 键值 的遍历: bb
// values() -- 对 键值 的遍历: cc
}
// entries()
for (let [index, val] of ['zzz', 'xxx', 'ccc'].entries()) {
console.log('entries() -- 对 键值对 的遍历: ', index, val);
// 打印结果:
// entries() -- 对 键值对 的遍历: 0 zzz
// entries() -- 对 键值对 的遍历: 1 xxx
// entries() -- 对 键值对 的遍历: 2 ccc
}
}
5. ES6 copyWithin()
/**
5. copyWithin()
1. 在当前数组内部将指定位置的成员复制到其它位置 。
2. copyWithin(target, start, end)
1. target: 从当前位置开始替换数据 。
2. start: 从当前位置开始读取数据; 默认为 0 。
3. end: 到改位置停止读取数据(不包含当前位置); 默认等于数组长度 。
3. 注意:
1. 使用该方法会修改当前数组 。
*/
{
let arr1 = [1, 2, 3, 4, 5, 6, 7, 'aaaa', 9]
let resArr1 = arr1.copyWithin(0, 7, 8)
console.log('copyWithin - 从数组中的第 1 个值, 替换为数组中的第 8 个位置的值', 'arr1: ', arr1, 'resArr1: ', resArr1);
// 打印结果:
// copyWithin - 从数组中的第 1 个值, 替换为数组中的第 8 个位置的值 arr1: (9) ['aaaa', 2, 3, 4, 5, 6, 7, 'aaaa', 9] resArr1: (9) ['aaaa', 2, 3, 4, 5, 6, 7, 'aaaa', 9]
}
6. ES6 find() / findIndex()
/**
6. find() / findIndex()
1. find(): 用于找出 '第一个' 符合条件的数组成员 。
1. 当 find 找出第一个符合条件的数组成员后, 就会停止查询 。
2. 如果没有符合条件的成员, 则返回 undefinde 。
2. findIndex(): 返回第一个符合条件的书组成员的位置, 即数组下标 。
1. 当 findIndex 找出第一个符合条件的数组成员后, 就会停止查询 。
2. 如果所有数组成员都不符合条件, 则返回 -1 。
3. 注意: 这两个方法会对数据进行转换
*/
// find() 方法
{
let arr1 = [1, 3, 5, 7, 9]
let resMember1 = arr1.find(function(item) {
return item > 5
})
console.log('find() 强调: find 方法只返回了一个值, 并没有将符合条件的两个值都返回: ', resMember1);
// find() 强调: find 方法只返回了一个值, 并没有将符合条件的两个值都返回: 7
let arr2 = [1, 3, 5, 7, 9]
let resMember2 = arr2.find(function(item) {
return item > 10
})
console.log('find() 强调: 如果没有符合条件的成员, 则返回 undefinde: ', resMember2);
// find() 强调: 如果没有符合条件的成员, 则返回 undefinde: undefined
}
// findIndex() 方法
{
let arr1 = [2, 3, 5, 7, 8]
let resMember1 = arr1.findIndex(function(item) {
return item > 5
})
console.log('findIndex() 强调: findIndex 方法只返回了一个 下标, 并没有将符合条件的两个下标都返回: ', resMember1);
// findIndex() 强调: findIndex 方法只返回了一个 下标, 并没有将符合条件的两个下标都返回: 3
let arr2 = [1, '2', '3', '4', '5']
let resMember2 = arr2.findIndex(function(item) {
return item > 5
})
console.log('findIndex() 强调: 如果没有符合条件的成员, 则返回 -1: ', resMember2);
// findIndex() 强调: 如果没有符合条件的成员, 则返回 -1: -1
}
// 与 indexOf 对比:
{
// indexOf 无法识别 NaN 。
let res1 = [1,2,NaN].indexOf(NaN)
console.log('indexOf 无法识别 NaN: ', res1); // indexOf 无法识别 NaN: -1
/**
* findIndex 方法配合 Object.is() 方法可以识别 NaN 。
*/
let res2 = [1,2,NaN].findIndex(item => Object.is(NaN, item))
console.log('findIndex 配合 Object.is() 方法识别 NaN: ', res2); // findIndex 配合 Object.is() 方法识别 NaN: 2
let res3 = [1,2,NaN].findIndex((item) => {
return item = NaN
})
console.log('单独使用 findIndex 方法: ', res3); // 单独使用 findIndex 方法: -1
}
7. ES6 includes()
/**
7. includes()
1. 判断数组是否包含给定的值 。
2. 注意:
1. 当数组判断是否包含 NaN 时, 推荐使用 includes 方法 。
*/
{
let arr1 = [1, 2, NaN]
console.log('includes -- 普通判断: ', arr1.includes(1)); // includes -- 普通判断: true
console.log('includes -- NaN 判断: ', arr1.includes(NaN)); // includes -- NaN 判断: true
console.log('includes -- 不存在时的返回结果: ', arr1.includes(8)) // includes -- 不存在时的返回结果: false
}
以上代码执行结果, 如图所示:
7-2-数组扩展.png
7-3-数组扩展.png
之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题是 "前端ES6基础" 的相关专栏; 不积跬步，无以至千里, 戒焦戒躁 。