ES6新特性

一、ES6新特性

1. let、const

• let 特点：
  • 变量不能重复声明
  • 块级作用域
  • 不存在变量提升
  • 不影响作用域链
• const 特点：
  • 定义时要赋初始值
  • 一般常量使用大写（潜规则）
  • 变量不能重复声明
  • 常量值不能修改
  • 不存在变量提升
  • 块级作用域
  • 对于数组和对象的元素修改，不算做对常量的修改，不会报错

2. 解构赋值

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

• 数组解构

		const arr = ['张学友', '刘德华', '黎明', '郭富城'];
		let [zhang, liu, li, guo] = arr;

• 对象解构

		const lin = {
			 name: '林志颖',
			 tags: ['车手', '歌手', '小旋风', '演员']
		};
		let {name, tags} = lin;
		
		// 复杂解构
		let wangfei = {
			 name: '王菲',
			 age: 18,
			 songs: ['红豆', '流年', '暧昧', '传奇'],
			 history: [
			 {name: '窦唯'},
			 {name: '李亚鹏'},
			 {name: '谢霆锋'}
			 ]
		};
		let {songs: [one, two, three], history: [first, second, third]} = wangfei;

3. 模板字符串

ES6 引入新的声明字符串的方式 『 `` 』 ‘’ “”
语法：`${ 内容 }`

• 作用：
  • 内容中可以直接出现换行符
  • 变量拼接

		// 内容中可以直接出现换行符
		let str = `<ul>
			          <li>沈腾</li>
			          <li>玛丽</li>
			          <li>魏翔</li>
			          <li>艾伦</li>
		           </ul>`;
		// 变量拼接      
		let lovest = '魏翔';
		let out = `${lovest}是我心目中最搞笑的演员!!`;
		console.log(out);  

4. 简化对象写法

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

		let name = '尚硅谷';
		let change = function(){
		    console.log('我们可以改变你!!');
		}
		
		const school = {
		    name,   // name : name, 简化
		    change,
		    improve(){   // improve: function(){  简化如下
		        console.log("我们可以提高你的技能");
		    }
		}
		
		console.log(school);

5. 箭头函数

语法： () => { }

• 特点：
  • this 是静态的. this 始终指向函数声明时所在作用域下的 this 的值
    • 注：不能通过call、applay、bind方法直接修改它的 this 指向
  • 不能作为构造实例化对象
  • 不能使用 arguments 变量
  • 没有原型属性
• 箭头函数的简写：
  • 当形参有且只有一个的时，可省略小括号
  • 当代码体只有一条语句的时候，可省略花括号, 此时 return 必须省略，而且语句的执行结果就是函数的返回值

6. 函数参数默认值

• 形参初始值 具有默认值的参数, 一般位置要靠后(潜规则)
• 与解构赋值结合

		//ES6 允许给函数参数赋值初始值
        //1. 形参初始值 具有默认值的参数, 一般位置要靠后(潜规则)
        function add(a,b,c=10) {
            return a + b + c;
        }
        let result = add(1,2);
        console.log(result);

        //2. 与解构赋值结合
        function connect({host="127.0.0.1", username,password, port}){
            console.log(host)
            console.log(username)
            console.log(password)
            console.log(port)
        }
        connect({
            host: 'atguigu.com', // 若无参数传递，将使用默认值
            username: 'root',
            password: 'root',
            port: 3306
        })

7. rest参数

ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments

		// ES5 获取实参的方式
        function date(){
            console.log(arguments);
        }
        date('白芷','阿娇','思慧');

        // rest 参数
        function date(...args){
            console.log(args);// 数组 filter some every map 
        }
        date('阿娇','柏芝','思慧');

        // rest 参数必须要放到参数最后
        function fn(a,b,...args){
            console.log(a);
            console.log(b);
            console.log(args);
        }
        fn(1,2,3,4,5,6);

8. 扩展运算符

『 … 』 扩展运算符能将『数组』转换为逗号分隔的『参数序列』

        //声明一个数组 ...
        const tfboys = ['易烊千玺','王源','王俊凯'];
        // ...tfboys => '易烊千玺','王源','王俊凯'

        // 声明一个函数
        function chunwan(){
            console.log(arguments);
        }

        chunwan(...tfboys);// chunwan('易烊千玺','王源','王俊凯')
        
		// 应用
		//1. 数组的合并 
        const kuaizi = ['王太利','肖央'];
        const fenghuang = ['曾毅','玲花'];
        // const zuixuanxiaopingguo = kuaizi.concat(fenghuang);
        const zuixuanxiaopingguo = [...kuaizi, ...fenghuang];
        console.log(zuixuanxiaopingguo);

        //2. 数组的克隆
        const sanzhihua = ['E','G','M'];
        const sanyecao = [...sanzhihua];//  ['E','G','M']
        console.log(sanyecao);

        //3. 将伪数组转为真正的数组
        const divs = document.querySelectorAll('div');
        const divArr = [...divs];
        console.log(divArr);

9. Symbol

ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。
其中数据类型：undefined、string、symbol、object、null、number、boolean

• 特点：
  • Symbol 的值是唯一的，用来解决命名冲突的问题
  • Symbol 值不能与其他数据进行运算
  • Symbol 定义的对象属性不能使用 for…in 循环遍 历 ,但是可以使用Reflect.ownKeys 来获取对象的所有键名

		//创建Symbol
        let s = Symbol();
        console.log(s, typeof s);
        let s2 = Symbol('尚硅谷');
        let s3 = Symbol('尚硅谷');
        console.log(s2 === s3); // false
        //Symbol.for 创建
        let s4 = Symbol.for('尚硅谷');
        let s5 = Symbol.for('尚硅谷');
        console.log(s4 === s5); // true

        //不能与其他数据进行运算
        let result = s + 100;
        let result = s > 100;
        let result = s + s;
注：和 Symbol()不同的是，用Symbol.for()方法创建的的 symbol 会被放入一个全局 symbol 注册表中。
Symbol.for() 并不是每次都会创建一个新的 symbol，它会首先检查给定的 key 是否已经在注册表中了。假
如是，则会直接返回上次存储的那个。否则，它会再新建一个。

关于Symbol的更多信息@点击了解更多

10. 迭代器