JS-18:ES6-CSDN博客

本文链接：https://blog.csdn.net/weixin_51339105/article/details/124307060

1.ES6

https://es6.ruanyifeng.com/

2.let

用于替代var

区别：

1.let声明的变量不再做预解析

2.在同一个作用域中不能使用let重复声明一个变量

3.let声明的全局变量不再是 window的属性

4.let声明的变量会产生块级作用域

for 循环体包含两个作用域，for本身是一个块级作用域，for的循环体又是for中的一个子级作用域

<!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>
    
    <script>

        // // let声明的变量不再做预解析
        // alert(a);    //undefined
        // var a = 3;  
        // alert(b);     //报错
        // let b = 4;



        // 2.在同一个作用域中不能使用let重复声明一个变量
        // var a = 3;
        // var a = 4;
        // var a = 5;
        // alert(a);

        // let b = 3;
        // let b = 4;    //报错
        // b = 5;
        // alert(b);




        // 3.let声明的全局变量不再是 window的属性
        // var a = 3;
        // var b = 3; 
        // alert(window.a);    //3
        // alert(window.b);     //undefined



        // 4.let声明的变量会产生块级作用域
        // {
        //     var a = 3;
        //     let b = 4;
        //     // 只能在所在的块级作用域使用
        // }
        // alert(a);
        // alert(b);   //报错



        // for(var i = 0; i < 5; i++){
        //     setTimeout(function(){
        //         console.log(i)      //输出5个5
        //     },0)
        // }



        // for(let i = 0; i < 5; i++){
        //     setTimeout(function(){
        //         console.log(i)      //输出0 1 2 3 4
        //     },0)
        // }



        // for 循环体包含两个作用域，for本身是一个块级作用域，for的循环体又是for中的一个子级作用域
        for(let i = 0; i < 5;i++,console.log(i)){
            let i = 10             //输出 1 2 3 4 5
        }
    </script>
</body>
</html>

3.const

用来声明常量，一个常量只能声明一次，声明后，后面不能再对该常量进行重复赋值。

<!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>
    

    <script>

        // const  用来声明常量，一个常量只能声明一次，声明后，后面不能再对该常量进行重复赋值

        const PI = 3.14;
        const G = 9.8;


        const arr = ['aaa','bbb','ccc'];
        arr[1] = 'eee';   //可以
        arr = [1,2,3]  //报错




        
    </script>
</body>
</html>

4.解构赋值

1：数组的解构赋值 [] = []
2: 对象的解构赋值 {} = {}
好处：
1.交换数据；
2.函数传参给参数设置默认值不按顺序传参
3.返回值可以返回多个值

<!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>
    

    <script>

        // // 1.数组的解构赋值
        // let [a,b,c] = [1,2,3];
        // // console.log(a,b,c);


        // // 交换两个变量的值
        // console.log(a,b);
        // [a,b] = [b,a];
        // console.log(a,b);


        // 对象的解构

        var {a,b,c,d} = {c:3,b:2,a:4}
        console.log(a,b,c,d)     //4 2 3 undefined

        function fn({a = 2,b = 3,c = 4}){
            if(a > b){
                [a,b] = [b,a]
            }
            if(a > c){
                [a,c] = [c,a]
            }
            if(b > c){
                [b,c] = [c,b]
            }

            return [a,b,c]
        }
        console.log(fn({a:1,b:2,c:3}))


    </script>
</body>
</html>

5.字符串的扩展方法

includes(字符串，start)判断父串中是否包含子串的内容，返回布尔值；
startsWith(字符串，start)判断父串中是否以指定的子串开头，返回布尔值；
endsWith(字符串，start)判断父串中是否以指定的子串结尾，返回布尔值；
repeat()重复指定的字符串，返回字符串
repeat的参数：
（1）大于-1的数，如果是小数，自动取整；
（2）如果是非数字的值，则自动转为数字，如果无法转数字，转为NAN，NAN按0重复
（3）小于等于-1的数报错

<!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>
    

    <script>

        /* 
        includes(字符串，start)判断父串中是否包含子串的内容，返回布尔值；
        startsWith(字符串，start)判断父串中是否以指定的子串开头，返回布尔值；
        endsWith(字符串，start)判断父串中是否以指定的子串结尾，返回布尔值；
         repeat()重复指定的字符串，返回字符串
        */


        var str = 'how do you do';
        console.log(str.includes('do',4));     //true
        console.log(str.startsWith('do',4));    //true
        console.log(str.endsWith('do',6));       //true


        var ch = 'o';
        console.log(ch.repeat(3));     //'ooo'
        console.log(ch.repeat(3.3));    //'ooo'
        console.log(ch.repeat('a'));      //''
        // console.log(ch.repeat(-3));   // 报错
        console.log(ch.repeat(-0.3));      //''
    </script>
</body>
</html>

6.箭头函数

()=>{}
好处：
1.箭头函数中的this会指向该箭头函数所在作用域所绑定的对象；
2.简写；

<!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>
    

    <script>

        /* 
        箭头函数
        1：函数的简写
        2：改变this指向
        */

        // function fn(){
        //     console.log(1)
        // }


        // var fn = ()=>{
        //     console.log(1)
        // }




        // function fn1(a){
        //     return a*8;
        // }

        // var fn1 = a=>a*8;





        // function  fn2(a,b){
        //     return a+b;
        // }

        // var fn2 = (a,b)=>a+b;




        function fn3(a,b){
            console.log(123);
            return a*b;
        }

        var fn3 = (a,b)=>{
            console.log(123)
            return a*b;
        }

    </script>
</body>
</html>

7.Symbol

是ES6新增的第7种数据类型，是基本数据类型

作用：保证变量中的值一定是唯一的

<!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>
    


    <script>

        var a = Symbol();
        var b = Symbol();
        console.log(a == b);      //false
        console.log(a,typeof a);   //Symbol() 'symbol'



        
    </script>
</body>
</html>

8.扩展运算符

…扩展运算符

<!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>
    

    <script>

        // ...扩展运算符
        var str = 'hello';
        var arr = [...str];
        console.log(arr);   //0: "h" 1: "e" 2: "l" 3: "l" 4: "o"


        var arr1 = ['aa','bb','cc'];
        var arr2 = [...arr1,'ddd','ccc'];
        console.log(arr2)      //['aa', 'bb', 'cc', 'ddd', 'ccc']



        var obj = {
            name:'张三',
            age:12,
        }
        var o = {
            ...obj,
            sex:'男'
        }
        console.log(o);    //{name: '张三', age: 12, sex: '男'}
    </script>
</body>
</html>

9.模板字符串

模板字符串``，可以换行

<!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>
    <ul>

    </ul>


    <script>

        var oUl = document.getElementsByTagName('ul')[0];

        var obj = {
            name:'张三',
            age:12,
            sex:'男'
        }

        // 模板字符串``，可以换行
        oUl.innerHTML = `
        <li>${obj.name}</li>
        <li>${obj.age}</li>
        <li>${obj.sex}</li>
        `
    </script>
</body>
</html>