你当前的位子: 首页 >> 学无止境 >> javascript

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';
        })

image.png

找不到当前对象了 而是去找函数外的函数对象了,所以箭头函数是没有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的使用方法