JavaScript ES6 - 数组扩展

本章节的主要内容是: 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 方法之前的遍历:  <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. 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基础" 的相关专栏; 不积跬步，无以至千里, 戒焦戒躁。

JavaScript ES6 - 数组扩展

JavaScript ES6 - 数组扩展

本章节的主要内容是: ES6 数组扩展

1. ES6 Array.from()

2. ES6 Array.of()

3. ES6 fill

4. ES6 keys() / values() / entries()

5. ES6 copyWithin()

6. ES6 find() / findIndex()

7. ES6 includes()

如果对大家有所帮助，可以点个关注、点个赞; 文章会持续打磨。

有什么想要了解的前端知识, 可以在评论区留言, 会及时分享所相关内容。

JavaScript ES6 - 数组扩展

本章节的主要内容是: ES6 数组扩展

1. ES6 Array.from()

2. ES6 Array.of()

3. ES6 fill

4. ES6 keys() / values() / entries()

5. ES6 copyWithin()

6. ES6 find() / findIndex()

7. ES6 includes()

如果对大家有所帮助，可以点个关注、点个赞; 文章会持续打磨 。

有什么想要了解的前端知识, 可以在评论区留言, 会及时分享所相关内容 。

如果对大家有所帮助，可以点个关注、点个赞; 文章会持续打磨。

有什么想要了解的前端知识, 可以在评论区留言, 会及时分享所相关内容。