ES6新语法

Love The Way You Lie 2023-09-27 19:19 11阅读 0赞

## 1.let ##

## 1.1 let命令的作用域只局限于当前代码 ##

### 1.2 let 声明的变量作用域不会被提前 ###

console.log(a); // 输出undefined
    var a = 10;
    console.log(b); // error
    let b = 1;

### 1.3 在相同作用域下，不能声明相同的变量 ###

// 报错
    function func(){
    	let a= 0;
    	var a = 0;
    }
    // 报错
    function func(){
    	let a = 1;
    	let a = 2;
    }
    // 报错
    function func(arg){
    	let arg = 0;
    }
    // 不报错
    function func(arg){
    	{
    		let arg = 2;
    	}
    }

### 1.2 let 声明的变量作用域不会被提前 ###

console.log(a); // 输出undefined
    var a = 10;
    console.log(b); // error
    let b = 1;

### 1.3 在相同作用域下，不能声明相同的变量 ###

### 1.4 for 循环中let的父子作用域 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
    </body>
    <script>
        var btns = document.querySelectorAll('button');
        for(var i=0; i<btns.length; i++){
            btns[i].onclick = function(){
                console.log('这是第'+ i +'个按钮');
            }
        }
    </script>
    </html>

## 2、const ##

**const表示声明一个常量。他和let的特点一样，主要区别是常量。**

1. const变量在声明时需要赋值。

2.声明后变量的指针地址不能变，但是指向的数据结构内容可以改变。对于简单数据类型就是值 不能变。对于对象类型则是指指针不能变。

## 3、解构 ##

### 3.1 什么是解构 ###

解构赋值可以理理解为赋值操作的语法糖，它是针对数组或者对象进⾏行行模式匹配，然后对其中的变量进行赋值。代码书写上⾔简意赅，语义明确，也方便了对象数据的读取操作。

解构不同的数据类型，解构的语法会略有不同。数组解构用的是\[\]，对象解构用的是\{\}

但是解构的默认值，和别名语法是一样的。

### 3.2 数组解构 ###

{
            let a,b,c; // 声明
            [a,b,c] = [1,2,3]; // 解构赋值，数据的解构使用[],
            console.log(a,b,c) // 1 2 3
        }
        {
            let [a,b,c] = [1,2,3]; // 声明并解构赋值
            console.log(a,b,c) // 1 2 3
        }
        {
            let [a,,b] = [1,2,3] // 赋值是按照位置顺序指定的，使用,占位符
            console.log(a,b) // 1 3
        }
        {
            let [a,b=2,c=3,d] = [1,22] // 给b设置一个默认值，默认值会被赋值操作覆盖
            console.log(a,b,c) // 1 22 3
        }
        {
            let [a,...other] = [1,2,3]; // 数组分割
            console.log(a,other) // 1 [2 3]
        }

### 3.3 对象解构 ###

{
        let a,b;
        ({a,b} = {a:1,b:2}); // 对象解构使用的{}
        console.log(a,b);
    }
    {
        let {a,b} = {b:2,a:1}; // 对象中赋值的对应关系使用的是键值，和顺序无关
        console.log(a,b);
    }
    {
        let {a:num1,b:num2} ={a:1,b:2} // 当对象中的键值和变量名称不一致的时候，可以使用别名
        console.log(num1,num2);
    }
    {
        function func() {
            return {
                schoolname: '学校名称',
                classlist: [{
                        classname: '班级1',
                        count: 10
                    },
                    {
                        classname: '班级2',
                        count: 11
                    }
                ]
            }
        }
        // 解构复杂数据类型
        let {
            schoolname: myschoolname,
            classlist: [{
                classname: myclassname1
            }, {
                classname: myclassname2
            }]
        } = func();
        console.log(myschoolname, myclassname1, myclassname2);
    }

## 4、字符串方法扩展 ##

{
        let str = '123name321';
        console.log(str.includes('name')); // 判断是否包涵name
        console.log(str.startsWith('123')); // 判断是否以123开头
        console.log(str.startsWith('name',3)); // 判断从第4位开始，是否以name开头
        console.log(str.endsWith('321')); // 判断是否以321结尾
        console.log(str.endsWith('name',7)); // 判断第7位以前，是否以name结尾
        console.log(str.repeat(2)); // 重复字符串2次
        console.log(str.padStart(13,'abcd')) // 头部补全，补全到13位
        console.log(str.padEnd(13,'abcd')) // 尾部补全，补全到13位
    }

## 5、字符串模板 ##

在之前的语法中，在字符串中拼接带变量的字符串会比较麻烦，所以引入了字符串模板。

{
        let name='youyou';
        let age=18;
        let str = `我叫${name},    今年${age}岁`; // 注意空格和回车会原样输出
        console.log(str)
    }