ES6

墨蓝 2024-02-19 17:02 86阅读 0赞

#### ES6 ####

*   *  let关键字
     *  const关键字
     *  解构赋值
     *   *  1.对象的解构赋值
         *  2.在函数中使用解构赋值
         *  3.数组的解构赋值
     *  字符串的模板语法
     *  对象的简写属性
     *  箭头函数
     *   *  箭头函数的几种形式
         *  箭头函数的this
     *  ...运算符
     *   *  方法参数位置使用...接收多个参数
         *  遍历数组
     *  形参默认值
     *  promise对象
     *  Symbol
     *  generator
     *  async函数

### let关键字 ###

let关键字定义的变量在块作用域内有效，变量不能重复定义。

{
        
    	let username = 'zs';
        // 不能重复定义变量 username has already been declared
        //let username = 'ls';
    }
    // 在块作用域中有效 username is not defined
    //console.log(username);

### const关键字 ###

const关键字定义一个常亮，在块作用域中有效，也不能重复定义。

{
        
     	const username = 'zs';
        // 不能重复定义变量 username has already been declared
        //const username = 'ls';
    }
    // 在块作用域中有效 username is not defined
    //console.log(username);

### 解构赋值 ###

#### 1.对象的解构赋值 ####

使用一个对象来接收另一个对象中对应的属性的值。

var obj = {
        
    	username: 'zhangsan',
        age: 18,
        address: 'zg'
    }
    // 用一个对象去接收obj对象中username和age中的值，这个对象中只要包含需要的对象就好
    var {
        username, age} = obj;
    console.log(username, age)

#### 2.在函数中使用解构赋值 ####

函数中使用结构赋值，可用在参数位置

var obj = {
        
    	username: 'zhangsan',
    	age: 18,
        address: 'zg'
    }
    // 在函数中使用解构赋值
    function fun({
        username, age}) {
        
    	// 直接使用属性的名字即可
        console.log(username, age);
    }
    fun(obj);

#### 3.数组的解构赋值 ####

数组中使用解构赋值，使用\[\]，会将对应数组对应位置上的值赋值到对应位置的变量上。

var arr = [1, 3, 5, 7, 9, 10];
    // 对应位置的值会赋值到对应的位置的变量上
    let [, a, b, , , c] = arr;
    console.log(a, b, c);

### 字符串的模板语法 ###

要使用字符串的模板语法，必须用\`\`将字符串包裹起来，键盘tab键上面那个按键。

// 字符串模板,要使用模板语法，字符串必须用``包裹
    let obj = {
        username: 'zhangsan', age: 18};
    let {
        username, age} = obj;
    var str = `我的名字叫${
          username},我的年龄是${
          age}`;
    console.log(str);

### 对象的简写属性 ###

之前对应对象属性的定义方式：

属性简写的方式：

### 箭头函数 ###

#### 箭头函数的几种形式 ####

写法：(参数…) => \{函数体\};

let fun = function() {
        
    	 console.log("普通函数")
     }
     fun();
     // 定义箭头函数,函数体只有一条语句，一条语句并省略的话，会在最后一条语句前添加return语句。
     let fun1 = () => console.log("箭头函数");
     fun1();
     // 剪头函数，函数体有多条语句
     let fun2 = (data) => {
        
         console.log(data);
     };
     fun2('abc');

箭头函数如果只有一个形参，()可以省略：

let fun = a => console.log(a);
    fun('abc');

#### 箭头函数的this ####

箭头函数没有自己的this，箭头函数中使用的this是定义时所处的对象。

// 情况一：如果箭头函数外面没有函数，这个this指向外层this对象，这里就是window
    let fn =  () => console.log(this);
    fn();
    // 情况二：如果箭头函数外面有其他函数，这个this执行外层函数的this
    let obj = {
        
        username: 'zs',
        hello: function() {
        
            console.log(this);
            // 这个箭头函数的外层是一个函数，所以这个箭头函数中的this就是外层函数的this
            let f = () => console.log(this);
            f();
        }
    };
    obj.hello();

### …运算符 ###

#### 方法参数位置使用…接收多个参数 ####

`…`表示接收多个参数：

// 接收多个参数到数组values中
    function fun(a, ...values) {
        
    	console.log(a);
        console.log(values);
    }
    fun("abc", 1, 2, 3);

#### 遍历数组 ####

…可以取得数组中的每一项

var arr = [1, 2, 3, 4];
    console.log(...arr);
    // 把数组每一项加到新数组
    var b = [1, ...arr, 3];
    console.log(b);

### 形参默认值 ###

如果一个函数不指定默认值，在调用这个函数时也没传入实参，那么这个形参的值是undefine。在定义一个函数时让形参等于一个值，这个值就是形参的默认值。

// 给形参x指定默认值0，y默认值1
    function fun(x = 0, y = 1) {
        
    this.x = x;
        this.y = y;
    }
    // 调用这个函数时，没有传入参数，使用的值是默认值
    let f = new fun();
    console.log(f);

### promise对象 ###

自定义函数执行结果。

### Symbol ###

Symbol是ES6新加的原始数据类型，（其他六种undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）），表示独一无二的值，使用Symbol通过Symbol函数生成。

// 通过Symbol函数生成Symbol
    let s = Symbol('fo');
    console.log(typeof s);
    console.log(s);

Symbol不能和其他任何数据类型运算，但是可以通过toString或String显示的转换成string类型的值，也可以通过Boolean转换成布尔值。

// 通过Symbol函数生成Symbol
    let s0 = Symbol();
    let s1 = Symbol("foo");
    let s2 = Symbol("foo");
    // Symbol是独一无二的，所以任何两个Symbol是不相等的
    console.log(s1 == s2); // false
    // Symbol是类字符串数据类型，可以转换成字符串
    let str = String(s1);
    let str2 = s2.toString();
    console.log(str);
    // Symbol转换成布尔值,都是true值
    let b1 = Boolean(s0);
    let b2 = Boolean(s1);
    console.log(b1, b2);
    // Symbol()函数可以接收一个参数
    let obj = {
        
       name: 'zs',
       age: 18
    }
    // 接收一个参数，参数是任意类型
    let objS = Symbol(obj);
    console.log(objS);

Symbol类型可作为对象属性存在，由于Symbol是独一无二的，可以保证属性是不会重复的，但是作为属性时需要使用\[\]运算符。

// 这个对象有一个name属性了
    let obj = {
        
        name: 'zs'
    }
    // 如果想要加一个name属性肯定是不能加的，那么可以用symbol作为这个属性的标识
    let s = Symbol("name");
    obj[s] = 'ls';
    console.log(obj);

symbol不能被for in遍历出来

let obj = {
        
       name: 'zhangsan',
       age: 18
    }
    let name = Symbol('name');
    obj[name] = 'zhangsan_18';
    // Symbol属性不能被for in遍历出来
    for (field in obj) {
        
       console.log(field);
    }

### generator ###

function* generator() {
        
     // 第一次next会执行这个yield前的代码块
        yield '1'; // 第一次next执行后会返回yield后的内容
        // 第二次next会执行这个块中的内容
        yield '2'; // 如果这是一个语句也会执行，并返回这个语句的结果
        // 最后一次执行next,会执行
        console.log('3');
        // 可以自己return 否则就是undefine
        return '3';
    }
    let g = generator();
    let result = g.next();
    console.log('第一次执行',result);
    result = g.next();
    console.log('第二次执行',result);
    result = g.next();
    console.log('第三次执行',result);

设置返回值：

function fun() {
        
      console.log("fun 函数执行");
    }
    
    // generator应用
    function* generator() {
        
      let msg = yield fun();
      yield console.log(msg);
    }
    
    let g = generator();
    let f = g.next(); // 第一次执行，next指向第一个yield
    g.next("message"); // 第二次执行，传入参数，参数将作为第一次yield的返回值

### async函数 ###