ES6类型扩展

项目环境搭建。

let：和var的区别：块级定义，规范

const：声明的是常量，类似let，使用时需要代码规范。

 

2、本次课程内

2.1、数组类型扩展

在ES5中，如果想创建一个数组，主要通过两种方法：

1. 通过[ ] 来创建
2. 通过 new Array() 来创建

   let arr = [1,2,3,4,5,6,7,8,9];
   
   let arr2 = new Array(2,3,5,6,7,8,9);
   
   console.log(arr);
   console.log(arr2);
   

   ES6中还提供了两种创建数组的语法，其中第一种是为了解决在new Array()创建数组时容易出现误会的问题。

   通过Array.of()可以创建数组。

   还可以通过Array.from()将一个伪数组转换为数组类型。

   例如：通过document.getElementsByTagName()或querySelectorAll()返回的一组元素，就是伪数组。

   在ES5中，为数组提供了一个forEach()的语法，可以遍历数组中的每一个元素，并为这个元素提供一个操作。

   let arr = [1,2,3,4,5,6,7,8,9];
   
   let arr2 = new Array(2,3,5,6,7,8,9);
   
   console.log(arr);
   console.log(arr2);
   

   ES6中还提供了两种创建数组的语法，其中第一种是为了解决在new Array()创建数组时容易出现误会的问题。

   通过Array.of()可以创建数组。

   还可以通过Array.from()将一个伪数组转换为数组类型。

   例如：通过document.getElementsByTagName()或querySelectorAll()返回的一组元素，就是伪数组。

   在ES5中，为数组提供了一个forEach()的语法，可以遍历数组中的每一个元素，并为这个元素提供一个操作。

   // let arr = [1,2,3,4,5,6,7,8,9];
   
   // arr.forEach(function(item){
   //     console.log(item*3);
   // });
   
   let allCheckbox = document.querySelectorAll("input");
   
   let allReadbox = Array.from([1,...allCheckbox]);
   
   allReadbox.forEach(function(item){
     console.log(item);
   });
   

   在vscode单独运行不行，要在浏览器下

3. 对于数组，最重要的一个ES6的新增特性就是解构。

   可以通过简单的方式将数组中的元素取得，并赋值到某个变量中。

   let arr = [2,3,4,5];
   
   // let a = arr[0];
   // let b = arr[1];
   // let c=  arr[2];
   
   let [a,b,c] = arr;
   
   console.log(a,b,c);
   

   解构操作也支持嵌套处理。

   let arr = [2,3,4,[6,7],5,[8,[9,0]]];
   
   // let a = arr[0];
   // let b = arr[1];
   // let c=  arr[2];
   
   let [a,b,c,[d,e],f] = arr;
   
   console.log(d,f);
   

   空白处理

   let arr = [2,3,4,5,6,7];
   
   // let a = arr[0];
   // let b = arr[1];
   // let c=  arr[2];
   
   // 如果不提供对应的数据，则默认按照undefined来处理
   // let [a,b,c,d,e] = arr;
   
   let [a,,b,,,c] = arr;
   
   console.log(b,c);
   //运行出 4  7

   可变参数

4. let arr = [2,3,4,5,6,7,8,9];
   
   // let a = arr[0];
   // let b = arr[1];
   // let c=  arr[2];
   
   // 如果不提供对应的数据，则默认按照undefined来处理
   // let [a,b,c,d,e] = arr;
   
   let [a,b,...c] = arr;
   
   console.log(c);
   //运行出[ 4, 5, 6, 7, 8, 9 ]

   //默认值设置
   let arr = [2,3,4,5];
   
   let [a,b,c,d = 0] = arr;
   
   console.log(d);
   // 5
   

   注意使用可变参数时，必须保证… 之后没有任何单独的变量否则报错
   let arr = [2,3,4,5];
   
   let [...a,c] = arr;
   
   console.log(c);
   //报错

   数组新增方法：

5. 查找
   1. find：编写规则查找某个数组的值
   2. findIndex：编写规则查找某个数组中满足条件的元素下标
   3. includes：判断数组中是否包含某个值

      let arr = [2,3,4,5];
      
      // let result = arr.find(function(item){
      //   return item>5;
      // });
      
      // let result = arr.findIndex(function(item){
      //   return item>5;
      // });
      
      let result = arr.includes(5);
      
      
      console.log(result);
      //ture

      迭代

      1. keys
      2. values
      • entries

        let arr = [23,23,44,55];
        
        // for (let key of arr.keys()) {
        //   console.log(key);
        // }
        
        for (let [key,value] of arr.entries()) {
          console.log(key,value);
        }
        //得出下标和数值

        3、	复制
        a)	copyWithin
        b)	fill
        let arr = [1,2,3,4,5,7,8,9] ;
        
        console.log(arr.copyWithin(2,5,7));
        let arr = [1,2,3,4,5,7,8,9] ;
        //从下标开始将5-7的数值放入进去
        //1 2 7 8 9 4 5   7 8 9
        // console.log(arr.copyWithin(2,5,7));
        
        console.log(arr.fill(false));
        /*[
          false, false,
          false, false,
          false, false,
          false, false
        ]
        */

        //解构的典型应用案例：
        let a = 10 ;
        let b = 20 ;
        
        console.log(a,b);
        
        [a,b] = [b,a];
        
        console.log(a,b);
        

        2.2、字符串扩展

        字符串其实类似于数组，因为也有length属性，也可以通过下标来取得某个值。

        因此字符串也支持解构。

        let str = "Hello World" ;
        let [a,b,c,d,e,...f] = str ;
        
        console.log(a,d,f);
        

        //通过这种操作，可以实现字符串与数组之间的转换。
        let str = "Hello World" ;
        // 字符串 --> 数组
        let [...f] = str ;
        
        console.log(f);
        
        // 数组 --> 字符串
        console.log(f.join(''));
        /*[
        
        'H', 'e', 'l', 'l',
        
        'o', ' ', 'W', 'o',
        
        'r', 'l', 'd'
        
        ]
        
        Hello World*/

        ES6中提供的字符串操作方法查找

        1. startsWith
        2. endsWith

                                       3.includes​​​​​​​

let str = "Hello World" ;

console.log(str.startsWith("He"));
console.log(str.endsWith("dd"));
console.log(str.includes("or"));

1. Unicode编码处理

如果想使用UTF-16编码中的文字，那么就必须使用\u{编码}来进行编写

 

let str = "\u{20BB7}" ; console.log(str);

注意，这里因为UTF-16的文字占用了两个文字的位置，因此如果使用ES5的打印或循环取值方式，会出现乱码，建议通过ES6的解构或for…of循环来取得内容

let str = "𠮷abc" ; for (let s of str) {   console.log(s); }

1. 补充内容
   1. padStart
   2. padEnd
   3. repeat

 

let str = "7";   console.log(str.padStart(2,"0")); console.log(str.padEnd(10,"a"));   let str2 = "7-19" ; console.log(str2.padStart(10,"YYYY-MM-dd"));   let  str3 = "abc"; console.log(str3.repeat(3));

 

之前使用字符串时，经常会出现将变量拼接到字符串的某一个位置的功能。

let name = "张三"; let age = 20;   console.log(`姓名为：${name.repeat(3)},年龄为：${age*3}，工作地点：. ..adfasdfasdfasdfas dfas dfa sdfasdfasdfasd fasdfasdfasdfasdf.`);

 

基于模板字符串的功能，还有一个标签模板的功能时ES6提供的，针对 模板字符串进行拆分的功能。

let name = "张三"; let age = 20;   function testTemplate(arr,name,age) {   console.log(arr);   console.log(name,age); }   testTemplate`姓名为：${name},年龄为：${age}，工作地点：. ..adfasdfasdfasdfas dfas dfa sdfasdfasdfasd fasdfasdfasdfasdf.`;

 

2.3、对象扩展

对象中最重要的ES6的功能就是解构，也就是把服务器返回的JSON对象，按照自己的需要取得里面的数据。

这里的解构语法与数组的类似。

let obj = {   name:"张三" ,   age:14,   sports:[     "⚽️","🏀"   ],   card:{     id:"3456789809"   } };   // let {name,age} = obj ; // let {age,name} = obj; // let {name:age,age:name} = obj; let {sports:[a,b],card:{id}} = obj;   console.log(a,b,id);

 

创建对象也有简单的方法，可以简化之前的编写方式。

let name = "张三"; let age = 20;   // let obj = { //   name,age // };   let a = "b";   let obj = {   [a.repeat(3)]:"c" };   console.log(obj);

 

两个对象操作方法：

1. assign：复制

 

let obj1 = {   a:"a",   age:20 };   let obj2 = {   b:"b",   age:30 }; // 把后面的对象复制到前面的对象中 Object.assign(obj1,obj2);   console.log(obj1);

 

1. 循环：
   1. keys()
   2. values()
   3. entries()

 

let obj1 = {   a:"a",   age:20 };   let obj2 = {   b:"b",   age:30 }; // 把后面的对象复制到前面的对象中 Object.assign(obj1,obj2);   for (let [key,value] of Object.entries(obj1)) {   console.log(key,value); }