es6数组和对象怎么用（JavaScriptES6-）

一: 数组扩展: 1. 数组新增特性 <10个API> 1. Array.from() 2. Array.of() 3. copyWithin() 4. find/findIndex 5. fill() 6. entries() / keys() / values() 7. includes()

如图所示:

/** 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 方法之前的遍历: <p>•数组扩展•</p>• // 没有使用 Array.from 方法之前的遍历: <p>•Array.from() -- 1•</p>• // 没有使用 Array.from 方法之前的遍历: <p>•Array.from() -- 2•</p>• // 没有使用 Array.from 方法之前的遍历: <p>•Array.from() -- 3•</p>• }) let pArr = Array.from(pAll) console.log(pArr); // 打印结果: // (4) [p, p, p, p] pArr.forEach(function(item) { console.log(item); // 打印结果: // <p>数组扩展</p> // <p>Array.from() -- 1</p> // <p>Array.from() -- 2</p> // <p>Array.from() -- 3</p> 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. 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. 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. 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. 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. 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. 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 }

以上代码执行结果, 如图所示:

之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题是 "前端ES6基础" 的相关专栏; 不积跬步，无以至千里, 戒焦戒躁 。