番外篇-es6语法学习

李先生 2020年12月14日 197次浏览

番外篇-ES6语法学习

let/var

  • 事实上Var的设计可以看成JavaScript语言设计上的错误,但是这种错误多半不能修复和移除,因为需要向后兼容。
    • 大概十年前,Brendan Eich就决定修复这个问题,于是他添加了一个新的关键字:let
    • 我们可以将let看成更完美的var
  • 块级作用域
    • JS中使用var来声明一个变量时,变量的作用域主要是和函数的定义有关。
    • 针对于其他块定义来说是没有作用域的,比如if/for等,这在我们开发中往往会引起一些问题。
<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>01-块级作用域</title>
</head>

<body>
    <div>
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <button>按钮4</button>
        <button>按钮5</button>
        
    </div>



    <script>
        // ES5中的var是没有块级作用域的(if/for)
        // ES6中的let是有块级作用域的(if/for)
        // ES5之前因为if和for都没有块级作用域的概念,所以在很多是有,我们都必须
        // 借助function的作用域来解决应用外面变量的问题
        // ES6中,加入了let,let他是有if和for的块级作用域


        // // 1. 变量作用域:变量在什么范围内是可用。
        // {
        //     var name = "小新";
        //     console.log(name + "  在块内调用了var name变量")
        // }
        // console.log(name + "  在块外调用了var name变量")
        // 2. 以上没有块级作用域 会引起的问题 if的块级
        // var func;
        // if(true){
        //     var name = '小新';
        //     func = function(name){
        //         console.log(name)
        //     }
        // }
        // name = '张三'
        // func('李四')
        // console.log(name)

        // 3. 没有块级作用域引起的文图:for的块级
        var btns = document.getElementsByTagName('button');
        for (var i=0;i<btns.length;i++){
            btns[i].addEventListener('click',function(){
                // 这个i是函数里的i,应该是传递进来的i
                // 但是由于没有块级作用域,这个i被外面的for中的i给改变了
                console.log('第'+i+'个按钮被点击');
            })
        }
        // 上述问题所以需要用闭包来解决,因为函数是一个作用域
        for (var i=0;i<btns.length;i++){
            (function(i){
                btns[i].addEventListener('click',function(){
                    console.log('第'+i+'个按钮被点击');
                })
            })(i)
        }
        // 使用let
        for(let i=0;i<btns.length;i++){
            btns[i].addEventListener('click',function(){
                console.log('第'+i+'个按钮被点击');
            })
        }
    </script>
</body>

</html>

const的使用

  • const关键字

    • 在很多语言中已经存在,比如C/C++中,主要作用是将某个变量修饰为常量
    • 在JavaScript中也是如此,使用const修饰的标识符为常量,不可以再次赋值
  • 什么时候使用const呢?

    • 当我们修饰的标识符不会再次被赋值是,就可以使用const来保证数据的安全性
  • 建议:在ES6开发中,优先使用const,只有需要改变某一个标识符的时候才使用let。

  • 注意事项:

      1. 一点给const修饰的标识符被赋值之后,不能修改
      1. 在使用const定义标识符,必须进行赋值
      1. 常量的含义是指向的对象不能修改,但是可以改变对象内部的属性
    <!DOCTYPE html>
    
    
03-const关键字
</div>



<script>

    // 1. 一点给const修饰的标识符被赋值之后,不能修改
    // const name = 'why';
    // name = 'zhangsan' // 浏览器报错

    // 2. 在使用const定义标识符,必须进行赋值
    // const name //浏览器报错

    // 3. 常量的含义是指向的对象不能修改,但是可以改变对象内部的属性
    const obj = {
        name : "why",
        age : 18,
        height: 1.88
    }
    console.log(obj)
    obj.name = 'kobe';
    obj.age = 20;
    obj.height = 187;
    console.log(obj);
</script>
```

对象字面量的增强写法

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>03-const关键字</title>
</head>

<body>
    <div>
        
    </div>



    <script>

        // // 传统写法
        // const obj = {
        //     name :"why",
        //     age : 18,
        //     height: 1.88,
        //     run:function(){
        //         console.log('在奔跑');
        //     },
        //     eat:function(){
        //         console.log('在吃东西');
        //     }
        // }

        // 1.属性的增强写法
        const name = "张三";
        const age = 18;
        const height = 1.88
        // ES5
        const obj = {
            name :name,
            age : age,
            height : height
        }
        // ES6
        const obj2 = {
            name,
            age,
            height
        }

        // 2.函数的增强写法
        // ES5
        const obj3 = {
            run:function(){

            },
            eat:function(){

            }
        }
        // ES6
        const obj4 = {
            run(){

            },
            eat(){

            }
        }
        
    </script>
</body>

</html>

for循环

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>总价格:{{totalPrice}}</h2>
    </div>
    <script>
        const app = new Vue({
           el:'#app',
           data:{
               books:[
                   {id:110,name:'Unix编程艺术',price:119},
                   {id:111,name:'代码大全',price:105},
                   {id:112,name:'深入理解计算机原理',price:98},
                   {id:113,name:'现代操作系统',price:87},

               ]
           },
           // 多次调用只计算一次  有缓存  比methods性能高
           computed:{
               totalPrice:function(){
                 
                   let result = 0
                // 1.
                //    for (let i=0;i<this.books.length;i++){
                //        result+=this.books[i].price
                //    }
                // 2.
                //    for(let i in this.books){
                //        result+=this.books[i].price
                //    }
                // 3.
                //    for(let i of this.books){
                //        result += i.price
                //    }
                  // 常用高阶函数filter/map/reduce 
                // 4. filter : 过滤函数 它的回调函数有一个要求:必须返回一个boolean值
                // true:当返回true时,函数内部会自动将这次回调的n加入到新的数组中
                // false:当返回false时,函数内部会过滤掉这次的n
                // let newNums = this.books.filter(function(n){
                //     return n.price <= 100
                // })
                // 5.map函数的使用
                // let newNums = this.books.map(function(n){
                //     return n.price*2
                // })
                // 6. reduce函数的使用  对数组中所有的内容进行汇总
                // 参数一 一个回调函数 preValue 前一次调用的返回值 n本次调用的数组中的值
                // 参数二 第一次的默认值 不写则为数组的第一个元素
                result = this.books.reduce(function(preValue,n){
                    return preValue + n.price 
                },0)
                // 链式写法
                // result =  this.books.filter(function(n){
                //     return n.price < 100
                // }).map(function(n){
                //     console.log("map",n)
                //     return n.price * 2
                // }).reduce(function(preValue,n){
                //     console.log("reduce",n)
                //     return preValue + n
                // },0);
                   // result = this.books.filter(n => n.price<100).map(n => n.price*2).reduce((preValue,n) => preValue+n)
                   return result
               }
           },
           methods:{}
        });
    </script>
</body>

</html>