ES6

留白& 2021-04-25 我要评论

ES6新特性

1.1 let关键字

let关键字用来声明变量，使用let声明的变量有几个特点

不允许重复使用
块级作用域
不存在变量提升
不影响作用域链

       {
            let school = '尚硅谷';
            function fn(){
                console.log(school);
            }
            fn();
        }

应用场景：以后声明变量使用 let 就对了

1.2 const关键字

const关键字用来声明常量，有几个特点

一定要赋初值
一般常量是用大写（潜规则）
常量的值不能修改
块级作用域
对于数组和对象的元素修改，不算是对常量的修改，不会报错

 const TEAM = ['UZI','MXLG','Ming','Letme'];
 TEAM.push('Meiko');

注意: 对象属性修改和数组元素变化不会触发 const 错误

应用场景：声明对象类型使用 const，非对象类型声明选择 let

1.3 变量的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。

// 1.数组的解构赋值
    const xiao=['ss','sss','aaa'];
    let [s,d,f] = xiao;
    console.log(s);  //ss
    console.log(d);  //sss
    console.log(f);  // aaa

//  2.对象的解构赋值
    const people={
        name: '小明',
        age: 18,
        el: function () {
            console.log('你好啊');
        }
    }
    let {name,age,el} = people
    console.log(name); //小明
    console.log(age);  //18
    el()  //你好啊

1.4 模板字符串

模板字符串是增强版的自负床，用反引号``标识，特点：

字符串可以出现换行符
可以使用 $( 常量/变量 ) 形式输出变量

// 1.声明
    let str = `我也是一个字符串哦`
    console.log(str, typeof str);
    // 2.内容中可以直接换行
    let str1 = `
        <ul>
           <li>aaa</li>
           <li>bbb</li>
           <li>ccc</li>
        </ul>
    `
    // 3.变量拼接
    let lovest = '赵丽颖'
    let out = `${lovest}是我最喜欢的演员`
    console.log(out);  //赵丽颖是我最喜欢的演员

注意：当遇到字符串与变量拼接的情况使用模板字符串

1.5 简化对象写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

let name = '小明';
let slogon = '加油
 console.log('可以提高你的技能');
}
//属性和方法简写
let atguigu = {
 name,
 slogon,
 change() {
 console.log('可以改变你')
 }
};

1.6 箭头函数

注意：

如果形参只有一个，则小括号可以省略
函数体如果只有一条语句，则花括号可以省略，不写return，函数的返回值为该条语句的执行结果
箭头函数this指向声明时所在作用于下this的值(当前层的外层作用域的this值)
箭头函数不能作为构造函数实例化
不能使用arguments

//省略小括号和花括号
let fn3 = score => score * 20

//不能作为构造实例化对象
let Person = (name, age) => {
    this.name = name;
    this.age = age;
}
let me = new Person('xiao',30);
console.log(me); //错误

//this 指向
let school = {
   name: '尚硅谷',
   getName(){

        let fn5 = () => {
            console.log(this); //指向school
        }
        fn5();
    }
};

箭头函数适合与this无关的回调。定时器、数组的方法回调

不适合与this有关的回调。事件回调，对象的方法

const arr = [1,6,9,10,12,17];
const result = arr.filter(item => item%2===0);
console.log(result)  //[6,10,12]

1.7 ES6允许给函数参数赋初始值

 // 1.形参初始值，具有默认值的参数，一般为只要靠后（潜规则）
    function add(a,b,c=10) {
        return a+b+c;
    }
    console.log(add(1, 2, 3))
    // 2.与解构赋值结合
    //普通写法
    // function connect(options) {
    //     let host = options.host;
    //     let username = options.username;
    //     console.log(host);
    //     console.log(username);
    // }

    //ES6与解构赋值结合写法
    function connect({host,username}){
        console.log(host);
        console.log(username);
    }
    connect({
        host: 'localhost',
        username: 'root',
    })

ES6