ES6之新增的内置对象及已有对象的扩展

一、字符串的扩展⽅法及模板字符串

• ES5处理Unicode的缺陷

• 加强了对Unicode的⽀持

  在ES5中我们知道JavaScript 允许采⽤\uxxxx形式表示⼀个字符，其中xxxx表示字符的 Unicode 码点。这种表示法只限于码点在\u0000_{\uFFFF之间的字符。超出这个范围的字符，必须⽤两个双字节的形式表示，但是ES5却⽆法正确的识别这个有两个字节组成的字符。ES6中，JavaScript增加了对超出\u0000}\uFFFF Unicode范围的字符⽀持。
  ES6的⽅案：将超过两个字节的组成的字符的码点放在⼀对花括号⾥就可以正确的识别。

  {
    var str1 = "a";
    var str2 = "\u20BB7";
    console.log(str2); //₻7
  }
  
  {
    var str3 = "\u{20bb7}";
    console.log("str3", str3); //str3 𠮷
  }
  

• 字符串的遍历接⼝

  {
    // for of
    // 在es6中，尽量使用for of 循环，它支持的比for循环更多
    const str3 = "\u{20bb7}";
    for (let i = 0; i < str3.length; i++) {
      console.log("for", str3[i]); //for �
    }
    for (let word of str3) {
      console.log("for-of", word); //for-of 𠮷
    }
  }
  

• 扩展的API

  ⽅法	描述
  includes(string,position)	判断字符串中是否包含指定字符串，返回值是布尔值
  startsWith(string,position)	判断字符串的开头是否包含指定字符串，返回值是布尔值
  endsWith(string,position)	判断字符串的尾部是否包含指定字符串，返回值是布尔值
  repeat(n)	repeat() ⽅法返回⼀个新字符串，表示将院字符串重复n 次。
  字符串补全	第⼀个参数是补全后的字符串⻓度，第⼆个参数是⽤于补全的字符串
  padStart(length, str)	⽤于头部补全
  padEnd(length, str)	⽤于尾部补全

  // 判断字符串是否包含指定字符串的几个方法
  {
    let str = "123Azi456";
    console.log("includes", str.includes("Azi")); //includes true
    console.log("startsWith", str.startsWith("Azi", 3)); //startsWith true
    console.log("endsWidth", str.endsWith("Azi", 6)); //endsWidth true
    console.log("repeat", str.repeat(3)); //repeat 123Azi456123Azi456123Azi456
  }
  // 字符串补全
  {
    let str = "Azi";
    console.log("padStart", str.padStart(5, "超勇")); //padStart 超勇Azi
    console.log("padEnd", str.padEnd(5, "超勇")); //padEnd Azi超勇
  }
  

• 模板字符串

  • 使⽤模板字符串的注意事项：

    • 在模板字符串中如需使⽤反引号，反引号前要⽤反斜杠转义
    • 使⽤模板字符串表示多⾏字符串时，所有的空格和缩进都会被保留在输出之中
    • 模板字符串中引⼊变量，要⽤ ${变量名} 这样的形式引⼊才可以
    • ⼤括号中的值不是字符串时，将按照⼀般的规则转为字符串。⽐如，⼤括号中是⼀个对象，将默认调⽤对象的toString⽅法
    • 模板字符串中的${.......} ⼤括号内部可以放⼊任意的 JavaScript 表达式，可以进⾏运算、可以引⽤对象属性、可以调⽤函数、可以甚⾄还能嵌套，甚⾄还能调⽤⾃⼰本身

  {
    const name = "Azi";
    const age = 27;
    const str = "我叫" + name + "，我今年" + age + "岁。";
    console.log("es5-str", str); //es5-str 我叫Azi，我今年27岁。
    const str2 = `我叫${name}，我今年${age}岁。`;
    console.log("es6-str", str2); //es6-str 我叫Azi，我今年27岁。
  }
  

二、ES6和ES7之数组的扩展⽅法及扩展运算符的使⽤

• 扩展运算符的使用

  • 复制数组
  • 分割数组
  • 将数组转化为参数传递给函数

  {
    let list = [1, 2, 3, 4, 5];
    let list2 = [...list]; // 相当于了一个浅拷贝的操作。
    list.push(6);
    console.log(list); // [1,2,3,4,5,6]
    console.log(list2); // [1,2,3,4,5]
  
    //分割数组
    let totalList = [1, "a", "b", "c"];
    let [, ...strList] = totalList; // 这里借助了占位符和扩展运算符，就进行了分割数组的操作
    console.log("strList", strList); // strList ['a', 'b', 'c']
  
    //给函数传递参数
    function add(x, y) {
      return x + y;
    }
    let addList = [1, 2];
    console.log(add(...addList)); // 3
  }
  

• 新增的常⽤⽅法

  • fill

    作用：fill() 方法用于将一个固定值替换数组的元素。可将一个数组中的部分或者全部内容替换为一个你想要的固定值。
    语法：array.fill(value, start, end)

    参数	描述
    value	必需。填充的固定值。
    start	可选。开始填充位置。
    end	可选。停止填充位置 (默认为 array.length)

    {
      // fill 一般使用在数据的初始化时使用，作用是替换数组里的数据
      // fill() 方法用于将一个固定值替换数组的元素。可将一个数组中的部分或者全部内容替换为一个你想要的固定值
      let list = [1, 2, 3, 4, 5];
      let list2 = [...list].fill(3);
      console.log(list2); // [3, 3, 3, 3, 3]
      let list3 = [...list].fill(3, 1, 4); //这里第二个参数时数组下标，第三个参数是所在第几个的位置。
      console.log(list3); // [1, 3, 3, 3, 5]
    }
    

  • find、findIndex

    作用：find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
    回调函数有三个参数。value：当前的数组元素。index：当前索引值。arr：被查找的数组。

    ---

    findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
    语法: array.findIndex(function(currentValue, index, arr), thisValue);
    findIndex()方法实现是通过循环遍历查找。应用场景广泛，可以查找大于等于小于，表达式可以随便写。实际上相当于一个for循环，只不过找到了你不需要自己退出。

    {
      //find findIndex
      const list = [{ title: "html" }, { title: "css" }, { title: "js", id: 2 }, { title: "js", id: 3 }];
      let result = list.find((item) => {
        return item.title == "js";
      });
      console.log(result); // {title: 'js', id: 2}
      let result2 = list.findIndex((item) => {
        return item.title == "js";
      });
      console.log(result2); // 2
    }
    

  • includes

    includes()返回布尔值，表示是否找到了参数字符串

    {
      // includes
      let list = [1, 2, 3, 4, 5, 6];
      let result = list.includes(2);
      console.log(result); // true
    }
    

  • flat

    1. 负责将多维数组--->一维数组。该方法返回一个新的数组，对原数据没有影响。
    2. flat()默认只会“拉平”一层，默认为1，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数。
    3. 如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。
       如果原数组有空位，flat()方法会跳过空位。

    {
      //flat 展开数组的操作
      let list = [1, 2, 3, ["2nd", 4, 5, 6, ["3nd", 7, 8, 9]]];
      let result = [].concat(...list);
      console.log(result); // [1, 2, 3, '2nd', 4, 5, 6, Array(4)]  这里，用concat只能展开2级的数组，需要搭配循环来完全展开（不方便）
      let result2 = list.flat(2);
      console.log(result2); // [1, 2, 3, '2nd', 4, 5, 6, '3nd', 7, 8, 9]  这里，flat里传入的2代表要展开的层级数量
    }
    

三、ES6数组中map及reduce⽅法详解

• map

  map()方法：map，映射，即原数组映射成一个新的数组；
  map方法接受一个新参数，这个参数就是将原数组变成新数组的映射关系。
  function callbackfn (value, index, array)：一个回调函数，最多可接受三个参数：

  • value：数组元素的值。
  • index：数组元素的数字索引。
  • array：包含该元素的数组对象。

  {
    const json = [
      { title: "html", status: 1 },
      { title: "css", status: 0 },
      { title: "js", status: 0 },
      { title: "webpack", status: 1 },
    ];
    const result = json.map((item, index, array) => {
      console.log(item, index, array);
      // return {
      //   title: item.title,
      //   status: item.status == 1 ? "已上线" : "未上线",
      // };
      let obj = {};
      Object.assign(obj, item);
      obj.status = item.status ? "已上线" : "未上线";
      return obj;
    });
    console.log(result);
  }
  

• reduce

  reduce()方法对数组中每个元素执行一个由我们提供的reducer函数（升序执行），将其结果汇总为单个返回值。
  reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

  callback （执行数组中每个值的函数，包含四个参数）
     1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
     2、currentValue （数组中当前被处理的元素）
     3、index （当前元素在数组中的索引）
     4、array （调用 reduce 的数组）
  initialValue （作为第一次调用 callback 的第一个参数。）
  

  reduce() 的几个强大用法：

  1. 数组求和

     {
       //reduce 求和
       let arr = [1, 2, 3, 4, 5];
       let result = arr.reduce((acc, cur) => {
         return acc + cur;
       }, 0);
       console.log(result); // 15
     }
     

  2. 二维数组转一维数组

     {
       let arr = [[1, 2, 3], 4, 5, [6, 7, 8]];
       let result = arr.reduce((acc, cur) => {
         return acc.concat(cur);
       }, []);
       console.log(result); // [1,2,3,4,5,6,7,8]
     }
     
     

  3. 计算数组中每个元素出现的次数

     {
       const letterList = "adfcscscscscwersfscsew";
       const result = letterList.split("").reduce((acc, cur) => {
         acc[cur] ? acc[cur]++ : (acc[cur] = 1);
         return acc;
       }, {});
       console.log(result); // {a: 1, d: 1, f: 2, c: 6, s: 7, w: 2}
     }
     

  4. 展开多层数组

     {
       const list = [["1st", 2, 3, ["2st", 4, 5, ["3st", 6, 7]]]];
       const deepFlat = function (list) {
         return list.reduce((acc, cur) => {
           return acc.concat(Array.isArray(cur) ? deepFlat(cur) : cur);
         }, []);
       };
       console.log(deepFlat(list)); // ['1st', 2, 3, '2st', 4, 5, '3st', 6, 7]
     }