es6使用的三个技巧

发布时间：2018-04-12 编辑：admin阅读（114）

1. const和var的区别
   

const 常量  有作用域 ，必须赋值，常量顾明思意是不能改变的否则报错

var    没有作用域，可以只定义不赋值，定义过后还能再次改变他的值，不严谨

另外es6还有 let取代了var  var几乎不使用了

变量里 尽量使用const  因为很多程序出问题是因为let重复赋值出错的

2.函数的更简单写法 箭头函数 和普通函数的区别

<button id="btn">我是按钮</button>
    <script>
        const btn = document.querySelector('#btn');
        console.log(btn);
        btn.addEventListener('click',function(){
            this.style.backgroundColor = 'red';
        })
    </script>

这样能找到 当前对象的this 可以执行style样式点击变换

如果换成箭头函数是不行的

 btn.addEventListener('click',()=>{
            this.style.backgroundColor = 'red';
        })

找不到当前对象了 而是去找函数外的函数对象了,所以箭头函数是没有this的

3.优雅的取值

<script>
        /**对象**/
        const cname = {
            age:20,
            sex:'男'
        }
        //老办法取值
        // const age = cname.age;
        // const sex = cname.sex;
        // console.log(age,sex);
       
        //es6取值
        const {age,sex} = cname;
        console.log(age,sex);

        /**数组**/
        const dog = ['red','white'];
        //老办法取值
        // const red = dog[0];
        // const white = dog[1];

        //es6取值
        const [red,white] = dog;
        console.log(red,white);

    </script>

括号里是形式变量 可以改成自己喜欢的  比如:

const [a,b] = dog;
console.log(a,b);

关键字：魏新明,魏新明个人博客,web全栈

上一页：没有了！

下一页：js自定义的dataset的使用方法