ES6常用语法

ES6常用语法

let命令

在ES6中新增了let命令，用来声明变量，用法与var类似，但是用let声明的变量，只在let所声明的代码块内有效，let命令可以使js的语法规则更加严格。

for(var i=0;i<3;i++){}
    console.log(i);//3
    
    for(let i=0;i<2;i++){}
    console.log(i);//3
for(let i=0;i<2;i++){}
    console.log(i);//未声明

使用let特性解决闭包副作用

var a = [];
        for (let i = 0; i < 3; i++) {
            a[i] = function() {
                console.log(i);
            };
        }
        a[0]();//0

const命令

const命令声明一个只读的常量，一旦声明，常量的值就不能够改变

使用const命令声明变量（常量）在定义时必须进行初始化

const命令的作用域与let命令一样，只在所声明的块级作用域内有效

箭头函数

在ES6中新增了：箭头（=>）语法定义函数表达式的能力。任何可以使用函数表达式都可以使用箭头函数，常用于内置匿名函数

匿名箭头函数定义格式

（参数列表）=>{代码块}

箭头函数定义格式

let a =()=>{
//箭头函数定义
conlose("aaa");
}
a();

只有一个参数时，可以不使用括号，只有多个参数或者没有参数的情况下就一定需要使用括号（参数列表）

在不使用{}时，箭头后面只能接一排语句，会隐藏返回这个语句；

let triple=(x)=>{3*x};
console.log(triple(3));//undefined
let triple=(x)=>3*x;
console.log(triple(3));//9

箭头函数虽然语法简洁，但也有很多场合不适用；

传递给箭头函数的参数不能使用arguments关键字访问，而只能通过定义的命名参数访问，但是箭头函数可以接受其他函数的arguments对象

function foo(){
            let bar=()=>{
                console.log(arguments[0])
            };
            bar();
        };
    foo(5);//5

关于箭头函数中this的使用

箭头函数中没有自己的this对象，它的this是继承而来的，默认指向定义它时所指的对象（宿主对象）

var a ={
            b:function(){
                console.log(this);//a
                var c = function(){
                    console.log(this);//windows
                };
                c();
                var d=()=>{
                    console.log(this);//a
                    
                };
                d();
            },
            name:"aaa"
        }
        a.b()

 let a = {
            name: "aaaa",
            show:() => {
            console.log(this);//windows
        }
        }
        a.show()
        a.show=function() {
                console.log(this);//a
            }
        a.show()

参数的默认值

function textfn(text = '默认值') {
            console.log(text);
        }
        textfn();//默认值
        textfn(1);//1

在使用参数默认值时，arguments对象的值不会反映参数的默认值，只会反映传给函数的参数

function textfn(text = '默认值') {
            console.log(arguments[0]);
        }
        textfn()//undefined
        textfn(1);//1

与ES5严格模式一样，修改命名参数也不会影响arguments对象，它始终以调用函数时传入的值为准。

  function textfn(text = '默认值') {
            text=3;
            console.log(arguments[0]);
        }
        textfn()//undefined
        textfn(1);//1

函数默认值只有在函数被调用时求值，而不会在函数定义时求值，而且，计算默认值的函数只有在调用函数但未传相应函数时才会被调用。

箭头函数同样可以使用默认参数值，并且必须使用括号。

    let textfn = (text = '默认值') => {
            console.log(text);
        }
        textfn()

暂时性死区

后面定义的默认值参数可以引用前面的，但前面定义的不能引用后面的。

function a(name='a',b=name){
            console.log(name,b);//a,a
        }
        a();

function a(b=name,name='a'){// 报错Cannot access 'name' before initialization
            console.log(name,b);
        }
        a();

参数存在自己的作用域中，它们不能引用函数体的作用域

function a(name=b){//报错b is not defined
            var b =12;
            console.log(name);
        }
        a();

模板字符串

新的字符串拼接方法

使用反引号  `` 表示模板字符串。并且还${}语法插入变量

$("#band")[0].innerHTML += `<div class="0"><p>${item}</p></div>`;

...操作符

“..."接受spread/rest操作符，具体是展开/收集需要看上下文语境。

当一个整体进行展开操作时，那么...的作用就是展开操作

（展开操作数组，对象）

该操作符可以将一个数组迭代转化为用逗号分隔开的参数序列

 var a1=[1,2,3];
        var a2=[4,5,6];
        var a3 = [...a1,...a2];
        console.log(a3);//[1,2,3,4,5,6]
        var a1=[1,2,3];
        var a2=[4,5,6];
        a1.push(...a2);
        console.log(a1);//[1,2,3,4,5,6]

展开操作对象

如果展开操作符操作的是一个对象，那么只会生成一个指向该对象的引用

展开运算符不会深度的递归对象的所有属性，只会拷贝可枚举的属性， 链同样也不会被拷贝。

同时存在两个对象，那么后面添加的对象会将之前对象中重复的属性覆盖掉

 var stu = {
            sname:"stu",
            sgae:18,
            ssex:"男"
        }
        var stu2 = {
            sgae:10
        }
        var stutest={...stu,...stu2}
        console.log(stutest)

当被用于函数传递时，...则变成一个rest操作符会将参数当作一个数组返回；

function foo(...agr1){
            console.log(agr1);//[1,2,3,4,5]
        }
        foo(1,2,3,4,5);

关于解构

解构表示从数组和对象提取值并赋值给独特的变量。

1.解构对象级获得对象在的属性值

 let stu={
        name:"tom",
        age:21,
        sex:"男"
    };
    let {name,sex,age}=stu;
    console.log(age,name,sex);

2.解构数组即获得数组中的元素

  let arr=['one','two','three'];
    let [a,b,c]=arr;
    console.log(a,b,c)

  
​

ES6模板

ES6模板可以模拟一整块JavaScript代码当作一个功能块使用。一个文件可以默认为一个模块，模块通过export向外暴露接口，实现模块之间的交互功能，使用<script>标签应用代码，然后通过type="modlue"属性告诉浏览器相关代码作为模块执行，而不是作为传统的脚本执行。

<script type="module">
    //代码块
    </script>
<script type="module" src="js文件目录"></script>

与传统脚本不同，使用模板都会默认定义一个defer属性。当页面解析到模板标签后，会立即下载脚本文件，但执行会延迟到文档解析完成后执行，值得注意的是，无论对嵌入式的模块代码，还是引入式的外部模块文件，都是一样的

<script type="module">在页面中出现的顺序就是他们执行的顺序。与< scriot defer>一样，修改模块标签的文字，无论是<head>还是<body>中，只会影响模板什么是加载，而不会影响模块什么是执行。

模块导出

使用“export”关键字对模块进行导出，导出的语句必须在模块顶部（模块顶部并不是代码顶部）

 //模块1，定义模块
    export var a = 3;
    //模块二，判断模块
    //错误示范
    if(true){
        export var a=4;
    }

export关键字在代码中出现的顺序没有限制

let str = "abc";
​
export {str}

命名导出：直接使用变量名导出

 //导出a
    export var a=3;
    //导出ab
    var a = 3;
    var b=2;
    export{a,b}

别名导出

 //使用str别名，导出a
    var a = 3;
    export{a as str};

使用“import”关键字将其他模板导入到当前模板中使用

格式：import{变量名}from"路径";