【复习】js重点内容选择性回顾+【学习】es6

2022.1.17

#复习

【1】p215 排他思想

1.获取所有元素

var btns = documents.getElementsByTagName('button');

2.开始循环

for(var i = 0;i<btns.length;i++)
    {
    btn[i].onclick = function(){
    for(var i =0;i<btns.length;i++){
        btn[i].style.backgroundColor = '';}
    this.style.backgroundColor = 'pink';}
    }

【2】p223 tab栏切换布局分析

效果：当处于第一个li时，只显示第一个li，其余暂不显示

方法：给第一个div命名为tab-con，其余为item；

为item添加display：none; 再给tab-con加display:block；

【3】p231 下拉菜单

1.先给nav里的ul加上display:none

.nav>li>a:hover{
    background-color:#eee;
}
.nav ul{
    display:none;
    position:absolute;
    ...
}

2.核心原理：当鼠标经过li,里面的第二个子ul显示；当鼠标离开，则ul隐藏

var nav = document.querySelector('.nav');
var lis = nav.children;
for(var i = 0;i<lis.length;i++)
{
    lis[i].onmouseover = function(){
        this.children[1].style.display = 'block';
    }
    lis[i].onmouseout = function(){
        this.children[1].style.display = 'none';
    }
}

#学习 es 6

【1】let关键字

1.let声明的变量只在所处的块级有效。
块级作用域 - 在大括号 {}中。

注：使用let关键字声明的变量才具有块级作用域特性，使用var声明的变量不具备。

if (true) { 
     let a = 10;
 }
console.log(a) // a is not defined

2.不存在变量提升

注：let声明的变量没有变量提升，必须先声明再使用。

console.log(a); // a is not defined 
let a = 20;
// 报错

3.暂时性死区
即：利用let声明的变量会绑定在这个块级作用域，不会受外部代码影响。

var tmp = 123;
 if (true) { 
     tmp = 'abc';
     let tmp; 
 } 

报错“初始化前无法访问tmp ”，它不会向上查找“var tmp = 123”。
原因： 在块级中使用了let关键字，而它会将num变量与块级这个整体进行绑定。

【2】const关键字

作用：用来声明常量

1.具有块级作用域

if (true) { 
     const a = 10;
 }
console.log(a) // a is not defined

报错原因：在块级作用域内声明的常量，外部代码是找不到的，所以会报错。

2.声明常量时必须赋初始值

const PI; // Missing initializer in const declaration
// 报错：常量声明中缺少初始值

3.常量赋值后，值不能修改。

const PI = 3.14;
PI = 100; // Assignment to constant variable.
const ary = [100, 200];
ary[0] = 'a';
ary[1] = 'b';
console.log(ary); // ['a', 'b']; 
ary = ['a', 'b']; // Assignment to constant variable.

    let、const、var 的区别

1. 使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象。
2. 使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升。
3. 使用const声明的是常量，在后面出现的代码中不能修改该常量的值。