JS-18:ES6

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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值