zoukankan      html  css  js  c++  java
  • ES6 数组、对象的扩展

    8. 数组的扩展

    1. 扩展运算符(...),将一个数组转为用逗号分隔的参数序列。

      • 复制数组 const a2=[...a1]
      • 合并数组 [...arr1, ...arr2, ...arr3]; arr1.concat(arr2, arr3);// ES5 的合并数组 这是浅拷贝,如果修改了原数组的成员,会同步反映到新数组。
      • 替代函数的 apply 方法
        // ES6 的写法
        let arr1 = [0, 1, 2];
        let arr2 = [3, 4, 5];
        arr1.push(...arr2);
    2. Array.from() 方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。

      let ps = document.querySelectorAll('p');
      Array.from(ps).filter(p => {
        return p.textContent.length > 100;
      });
    3. Array.of() 方法用于将一组值,转换为数组

      Array.of(3, 11, 8) // [3,11,8]
    4. 数组实例的 copyWithin()
      【替换位置,读取数据开始位置,结束位置】,如果为负值,表示倒数。

      [1, 2, 3, 4, 5].copyWithin(0, 3)
      // [4, 5, 3, 4, 5]
    5. 数组实例的 find()findIndex()
      find()所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。
      findIndex()

    6. fill() 方法使用给定值,填充一个数组

    7. entries()keys() , values() 用于遍历数组
      keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。

      for (let [index, elem] of ['a', 'b'].entries()) {
        console.log(index, elem);
      }
      // 0 "a"
      // 1 "b"
    8. includes() 表示某个数组是否包含给定的值
      indexOf方法有两个缺点,一是不够语义化,它的含义是找到参数值的第一个出现位置,所以要去比较是否不等于-1,表达起来不够直观。二是,它内部使用严格相等运算符(===)进行判断,这会导致对NaN的误判。

    9. flat()flatMap()
      flat()用于将嵌套的数组“拉平”,变成一维的数组。该方法返回一个新数组,对原数据没有影响。可以将flat()方法的参数写成一个整数,表示想要拉平的层数,默认为1,Infinity所有层。如果原数组有空位,跳过空位。
      Array.prototype.map(),然后对返回值组成的数组执行flat()方法。该方法返回一个新数组,不改变原数组。

      // 相当于 [[2, 4], [3, 6], [4, 8]].flat()
      [2, 3, 4].flatMap((x) => [x, x * 2])
      // [2, 4, 3, 6, 4, 8]
    10. 数组的空位
      ES6 则是明确将空位转为undefined

    9. 对象的扩展

    1. 属性、方法简写

      {f} 等同于 {f:f}
      method() {
          return "Hello!";
      }
      //等同于
      method: function() {
          return "Hello!";
      }
    2. 属性名表达式
      obj['a' + 'bc'] = 123;

    3. 方法的name属性返回函数名(即方法名)

    4. Object.is() 比较两个值是否相等

    5. Object.assign方法用于对象的合并

      const target = { a: 1 };
      const source1 = { b: 2 };
      const source2 = { c: 3 };
      Object.assign(target, source1, source2);
      target // {a:1, b:2, c:3}

      Object.assign方法的第一个参数是目标对象,后面的参数都是源对象。
      注意:如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。是浅拷贝

    6. 属性的可枚举性和遍历

    7.
    8.
    9.

    1. Object.keys(),Object.values(),Object.entries()
      Object.keys() 返回一个数组,所有键名
      Object.values() 返回一个数组,所有属性的值
      Object.entries() 键值对数组 [ ["key", "value"], ["key", value] ]

    2. 对象的扩展运算符(...)
      和数组相似

  • 相关阅读:
    漫谈递归转非递归
    (转)程序猿面试需要的知识点总结
    LeetCode:4_Median of Two Sorted Arrays | 求两个排序数组的中位数 | Hard
    LeetCode: 3_Longest Substring Without Repeating Characters | 求没有重复字符的最长子串的长度 | Medium
    LeetCode: 221_Maximal Square | 二维0-1矩阵中计算包含1的最大正方形的面积 | Medium
    LeetCode: 2_Add Two Numbers | 两个链表中的元素相加 | Medium
    算法导论第十五章 动态规划
    AVL树探秘
    算法导论第十四章 数据结构的扩张
    算法导论第十三章 红黑树
  • 原文地址:https://www.cnblogs.com/conglvse/p/9759137.html
Copyright © 2011-2022 走看看