【无标题】

ES6简介

ES全程ECMAScript,是脚本语言的规范，而平时经常写的JavaScript是ECMAScript的实现，所以ES新特性其实指的是JavaScript的新特性。ES6是其中很重要的一个版本，变动内容最多具有里程碑的意义，加入了许多新的语法特性，就业必备。

let变量声明以及声明特性

  //1、变量不能重复声明
  let str="123";
  let str="345";//变量已存在，再次声明会报错

    //2、块级作用域
    {
        let num = 123;
    }
    console.log(num);//undefined   let是块级作用域，所以会报错
    {
        var num = 123;
    }
    console.log(num);//var是函数作用域，所以在整个函数内都是有效的

    //3、声明变量不会提升到代码块顶部，即不存在变量提升
    console.log(song);
    var song="恋爱达人";//undefined
    console.log(str);
    let str = "123";//报错，不存在变量提升

    //4、不影响作用域链
    {
        let str = "hello,world";
    function fn() {
        console.log(str);
        //会先在该作用域下寻找变量str,若没有找到，则到它的上层作用域寻找
    }
        fn();
    }

const声明常量以及特点

const常量(不能修改的常量)

    const STR='hello,world';
    //1、一定要赋初始值
    //2、一般常量使用大写
    //3、常量的值不能修改
    //4、块级作用域
    //5、对于数组和对象的元素修改，不算作对常量的修改，不会报错
    const TEAM=['UZI','MXLG','Ming','Letme'];
    TEAM.push('Meiko');
    //常量地址没有改变
    TEAM=100;//这样就会报错

变量的解构赋值

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

    <script>
	    let node = {
	        type: "iden",
	        name: "foo"
	    }
	    let {type, name} = node;//完全解构
	    console.log(type, name);//iden foo
	
	    let obj = {
	        a: {
	            name: "张三"
	        },
	        b: [],
	        c: "hello,world"
	    }
	    let {a} = obj;//不完全解构
	    console.log(a);//{name: '张三'}
	
	    // 对数组解构
	    let arr = [1, 2, 3];
	    let [x, y, z] = arr;//完全解构
	    console.log(x, y, z);//1 2 3
	
	
	    //可嵌套
	    let arr1 = [2, [3], 4];
	    let [m, [n], k] = arr1;
	    console.log(m, n, k);//2 3 4
    </script>

模板字符串

ES6引入了新的声明字符串的方式

    // 1、声明
    let string=`hello,world!`;
    console.log(string);
    // 2、内容中可以直接出现换行符
    let str=`<ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            </ul>`;
    // 3、变量拼接
    let lovest='杜兰特';
    let output=`${lovest}是我心目中最伟大的球员`;
    console.log(output);

对象的简化写法

    // ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法
    // 这样的书写更加简洁
    let name = '张三';
    let change = function () {
        console.log("我们可以改变你！")
    }
    const study = {
        name,
        change,
        improve() {
            console.log("我们可以提高你的技能！");
        }
    };
    study.change();//我们可以改变你！
    study.improve();//我们可以提高你的技能！

箭头函数以及声明特点

    //箭头函数
    let add1 = (a, b) => {
        return a + b;
    }
    // 调用函数
    let result = add1(1, 2);
    console.log(result);

    // 1、箭头函数this是静态的，this始终指向函数声明时所在作用域下的this的值
    function getName() {
        console.log(this.name);
    }

    let getName2 = () => {
        console.log(this.name);
    }
    window.name = '戴尔';
    // 直接调用(上面两个例子this指的都是window)
    getName();// 戴尔
    getName2();//戴尔

    const school = {
        name: "品牌"
    }

    // call方法调用  使用 call() 方法，可以编写能够在不同对象上使用的方法。
    getName.call(school);//品牌
    getName2.call(school);//戴尔

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

    // 1.形参初始值，具有默认值的参数，一般位置靠后
    function add(a,b,c = 10){
        return a + b + c;
    }
    let result = add(5,6);
    console.log(result);

    // 2.与解构赋值结合
    function fn1(opt){
        name = opt.name;
        age = opt.age;
    }
    // 简化后
    function fn1({name,age}){
        name = name;
        age = age;
    }

    fn1({
        name: "张三",
        age: 21
    });

拓展运算符

    // [...]拓展运算符能将【数组】转换为逗号分隔的【参数序列】
    // 声明一个数组...
    const people=['熊大',"熊二","光头强"];
    function chunwan(){
        console.log(arguments);
    }
    chunwan(people);
    chunwan(...people);

    // 拓展运算符的应用
    // 1、数组的合并
    const kuaizi=['王太利','肖央'];
    const fenghuang=['曾毅','玲花'];
    const zuixuanxiaopingguo=[...kuaizi,...fenghuang];
    console.log(zuixuanxiaopingguo);//['王太利', '肖央', '曾毅', '玲花']
    // 2、数组的克隆
    const sanzhihua=['E','G','M'];
    const sanyecao=[...sanzhihua];
    console.log(sanyecao);
    // 3、将伪数组转换为真正的数组
    const divs=document.querySelectorAll('div');
    const divArr=[...divs];
    console.log(divArr);