寒假学习——ES6（1）

let const

let的一些注意事项

1、变量不能重复进行声明
2、var没有块级作用域，let有（块级作用域包括{}条件循环等）
3、let不存在变量提升（var有，即在使用之前会去代码中查找到对变量的声明不用管位置）
4、不影响作用域链

 <script>
       {
           let name="paopao";
           function say(){
               console.log(name);
           }
           say();
       }
    </script>

5、一个例子：切换颜色

<script>
        let items = document.getElementsByClassName('item');
        for (var i = 0; i < items.length; i++) {
            items[i].onclick = function () {
                this.style.background = 'pink';
            }//用this不要紧，但是发现用items[i]会报错，因为var是全局的,但是用let就可以
            for (let  i = 0; i < items.length; i++) {
            items[i].onclick = function () {
                items[i].style.background = 'pink';
            }
        }
    </script>

const

1、一些注意事项：
- 定义常量时一定要赋初始值
- 有块级作用域
- 数组和对象的元素修改不做对常量的修改不报错（即数组本身和数组内容的改变，内容可以变，常量指向地址不能变）

变量解构赋值

数组与对象的解构

//数组解构
 <script>
        const Fruit=['banana','apple','peach','watermelen'];
        let [a,b,c,d]=Fruit;//定义四个变量和数组每个元素对应
        console.log(a+" "+ b+" "+c+" "+d);

    </script>



//对象解构
<script>
       const paopao={
           name:"红",
           age:19,
           eat:function () {
               console.log("吹泡泡");
           }
       }
       let{name,age,eat}=paopao;//对象用{}数组用[]
       console.log(name+age+eat)

    </script>

模板字符串

新的声明字符串方式``

 <script>
        let str = `泡泡
       果果
       `;
        console.log(str);//可以换行，''和""就不行
    </script>

${变量名}

 <script>
      let love="果果";
      let obj=`${love}和泡泡`;
      console.log(obj);
    </script>

简化对象

成员变量和成员函数可以直接写，方法可以省略function关键字

 <script>
        let name="红";
        let play=function(){
            console.log("吹泡泡");
        }
        const Guo={
            name,
            play,//直接放变量名
            eat(){
                console.log("吃绿绿");
            }//省略function
        }
    </script>

箭头函数

注意事项：
- 1、不能作为构造函数去实例化对象，只能用constructor
- 2、不能使用arguments变量
- 3、当形参只有一个时，可以省略中间的（）
- 4、代码体只有一条语句时，省略{}（此时return语句也省略，执行结果就是返回值）

let fn=(a,b)=>{
           return a+b;
       }
   //this是静态的始终指向函数声明时的作用域下的this的值


    <script>
        function getName1() {
            console.log(this.name);
        }
        let getName2 = () => {
            console.log(this.name);
        }
        window.name = "泡泡";
        const school = {
            name: "果果"
        }
        getName1.call(school); //call方法可以改变this的值,指向school
        getName2.call(school); //输出果果、泡泡，箭头函数依然指向的是全局对象，只能指向函数在声明时所在作用域
        let fun = () => {
            console.log(arguments);
        }
        fun(1, 2, 3, 4);//报错argumrnts未定义
    </script>


//省略（）
let add=n=>{
            return n+n;
        }
        console.log(add(8));

//省略{}
let pow=n=>n*n;
        console.log(pow(8));

箭头函数的两个小应用

3秒后切换颜色

 <style>
        div{
            width: 200px;
            height: 200px;
            background: green;
        }
    </style>
</head>
<body>
    <div id="ad">

    </div>
    <script>
        let ad=document.getElementById('ad');
        ad.addEventListener("click",function(){
            let _this=this;//在外界保留下this的值使其向上找的时候找到这个值，否则是window
            setTimeout(function(){
                _this.style.background='pink';
            },3000);

        });
//用箭头函数
  setTimeout(()=>{
                this.style.background='pink';
            },3000);//箭头函数的this就是声明时候的作用域此时指向事件源ad
    </script>

返回数组中的偶数元素

 <script>
      const arr=[1,2,3,4,5,6,7];
      const result=arr.filter(item=>item%2===0);
      console.log(result);
    </script>

寒假学习——ES6（1）

寒假学习——ES6（1）

let const

let的一些注意事项

const

变量解构赋值

模板字符串

简化对象

箭头函数

箭头函数的两个小应用

猜你喜欢