Исследование зимних каникул-ES6 (1)

пусть 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>

Упростить объекты

Переменные-члены и функции-члены могут быть написаны напрямую, и метод может опускать ключевое слово функции

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

Функция стрелки

Меры предосторожности:
- 1. Не может использоваться в качестве конструктора для создания экземпляров объектов, только конструктор.
- 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)

пусть const

Некоторые соображения для let

const

Назначение переменной деструктуризации

Строка шаблона

Упростить объекты

Функция стрелки

Два небольших приложения стрелочных функций

рекомендация