ES6-ES13常用语法记录

一、检测是否为数组

         1、instanceof 方法

               const arr = new Array() // const arr = []

               arr instanceof Array //true

         2、constructor 属性

                返回对象相对应的构造函数。

         3、isArray() 方法

               const arr = new Array()

               Array.isArray(arr) //true

二、数组与字符串相互转换

          1、数组转字符串：join()

           const arr = ["1","2","3"]

           const arrToString = arr.join(',')

           console.log(arrToString) //1，2，3

          2、字符串转数组：split()

           const str = '1,2,3'

           const stringToArr = str.split(',')

           console.log(stringToArr) //["1","2","3"]

三、数组反转

     reverse()对原数组操作并返回经过处理后的原数组

            const arr = ["1","2","3"]

            const arrReverse = arr.reverse()

            console.log(arrReverse) //["3","2","1"]

四、数组去重

            [...new Set(arr)]

            const arr = ["1","2","3","1"]

            const newArr = [...new Set(arr)]

            console.log(newArr) //["2","3","1"]

五、数组排序

     arr.sort():对原数组操作并返回经过处理后的原数组

          sort()方法用于对数组的元素进行排序，并返回原数组。如果不带参数，按照字符串UniCode码的顺序进行排序   

         //不带参数
         const arr = ["a","c","b","d"]
         const newArr = arr.sort()
         console.log(newArr)    //["a", "b", "c", "d"]

        //带参数
       const arr2 = [1,3,2,0]
       let ASCarr = arr2.sort((a, b) => a - b);

       let arrs = [1, 10, 2, 12];

       let DESarr = arrs.sort((a, b) => b - a) // 降序排列 [12,10,2,1]
      console.log(ASCarr) //[0,1,2,3]
      console.log(DESarr) //[12,10,2,1]

六、元素在数组中的位置

          1、find():找出第一个符合条件的数组元素,满足true即返回,不再执行

                [1,-2,-3].find(v=>v<0)//-2

          2、includes()：是否包含指定的值，同样适用于字符串

                [1,-2,-3].includes(1) //true

          3、startsWith()：是否以指定的值开头

               'hellow'.startsWith('he') //true

          4、endsWith()：是否以指定的值结尾

                'hellow'.endsWith('ow')

七、数组的遍历与迭代

          1、arr.filter():返回符合条件的新数组

          const arr = [1,2,3,4,5]

          const filterArr = arr.filter(v=>v>3)

          console.log(filterArr) //[4,5]

         2、arr.every():判断所有元素是否满足条件，只有全部为true才返回true

         const arr = [1,2,3,4,5]

         const everyArr = arr.every(v=>v>0)

         console.log(everyArr) //true

         3、arr.some():判断是否存在元素满足条件，只要有一个为true就返回true

        const arr = [1,2,3,4,5]

        const someArr = arr.some(v=>v>4)

        console.log(someArr) //true

   4、arr.map():循环数组，每个元素经过回调函数操作后的返回值组成一个新的数组返回

         const arr = [1,2,3,4,5]

         const mapArr = arr.map(v=>v+1) 

         console.log(mapArr) //[2,3,4,5,6]

5、array.forEach(callbak)为数组的每个元素执行对应的方法。

      let a = [1, 2, 3, 4, 5];

      let b = [];

     a.forEach((item) => { b.push(item + 1); });

     console.log(b); // [2,3,4,5,6]

八、扩展运算符

     ...：将一个数组转为用逗号分隔的参数序列。

          console.log(...[1,2,3]); // 1 2 3

八、Object.values()、Object.keys()、Object.entries()；

     Object.values():对象转数组

            Object.values({a:1,b:2,c:3})===>[1,2,3]

            Object.entries():对象转数组

            Object.entries({a:1,b:2,c:3})===>[[a,1],[b,2],[c,3]]

            Object.keys()的用法 

               // 1. 定义一个对象
              var obj = { 0:'熊大',1:'熊二',2:'光头强' }
              // 2. 使用Object.keys()方法
              var keyValue = Object.keys(obj)
              // 3. 打印结果
              console.log(keyValue)  // 得到是：["0","1","2"]

八、修改了正则表达式的一些属性

           const reg = /(year[0-9]{4})-(month[0-9]{2})-(day[0-9]{2})/;

           const match = reg.exec(2021-02-23);

九、增加字符串的replactAll方法，之前要实现替换全部，需要使用正则表达式

           const str = 'hello world';
           str.replaceAll(l, );  // heo word

           // 之前
           const str = '2-4-6-8-10';
           const newStr = str.replace(/\-/g, '+');
           console.log(newStr); //2+4+6+8+10

           // 现在可以
           const str = '2-4-6-8-10';
           const newStr = str.replaceAll('-', '+');
           console.log(newStr); //2+4+6+8+10

十、增加字符串的replactAll方法，之前要实现替换全部，需要使用正则表达式

           

• 逻辑或赋值（||= ），
  逻辑或赋值运算符 (x ||= y) 是在 x 是 false时对其赋值.

• const a = { duration: 50, title: '' };

  a.duration ||= 10;
  console.log(a.duration); // 50

  a.title ||= 'title is empty.';
  console.log(a.title ); // "title is empty"

• 逻辑空赋值（??=）
  逻辑空赋值运算符 (x ??= y) 仅在 x 是 (null 或 undefined) 时对其赋值。

• 逻辑与赋值（&&=）
  (x &&= y) 仅仅当x为true时起作用，对其赋值

          let a = 1;

          let b = 0;

          a &&= 2;

          console.log(a); // expected output: 2

           b &&= 2;

          console.log(b); // expected output: 0

• 空值合并操作符（??）
  当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。不能与 AND 或 OR 操作符共用

• const foo = null ?? 'default string';
  console.log(foo);
  // expected output: "default string"

  const baz = 0 ?? 42;
  console.log(baz);
  // expected output: 0

  
  const foo2 = '' ?? 'default string';
  // ''
   

• 可选链式操作符（?.）
  允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined