基础语法

1.基础语法

1.1 let 与 const

es5 中的变量提升。

// var a ; 变量提升至此进行定义。
console.log(a); // undefined
var a = 1; // 存在变量提升，会将该定义的变量执行在最开始
var arr = []
for(var i =1;i<10;i++){
    arr[i] = function (){
        return i;
    }
}
console.log(arr[5]()); // 10,如果没有变量的提升打印的应该是 6.

使用 let声明变量

let arr = []
for(let i =1;i<10;i++){
    arr[i] =function (){
        return i
    }
}
console.log(arr[5]()); // 5 ，此时打印的就是5.使用let 并不会发生变量的提升。

let 不会污染全局变量

let RegExp = 10;
console.log(RegExp);//10
console.log(window.RegExp);// f RegExp

const 与 let 相似，只是 const 声明的是常量，不会变化的变量都是用const进行声明。

除非在明确值会发生改变的情况下使用let，一般情况下使用const情况居多。

1.2 循环的格式

注：此并不为 es6 的新特性，而是一次额外的补充。

参考文献：https://zh.javascript.info/while-for

for (begin; condition; step) {
  // ……循环体……
}

1.3 模板字符串

类似于 Python 和 java 中的格式化字符串。

// 模板字符串
const dombox = document.querySelector(".box");
let id = "name";
let val = "Hello World";
let htmlstr = `<ul>
    <li>
        <p id="${id}">${val}</p>
    </li>
</ul>`;
console.log(htmlstr); // 
dombox.innerHTML = htmlstr;

1.4 解构赋值

结构赋值是针对运算符的一种扩展，他通常是针对数组或者对象进行操作。

优点：代码书写上简单且易读。

1.4.1 对象解构

全部解构赋值

// 1. 对象解构
 let node = {
    type:'identifier',
    name:'foo'
}
let {type,name} =node;//解构;注意，结构的时候需要解构的名字与对象内部的名字相同。
console.log(type,name);// identifier foo

选择解构

let obj = {
    a:{
        name:"张三"
    },
    b:[],
    c:"Hello World"
}
let {a} = obj; //可以单个值解构
let {a,c} =obj; //选择多个值进行解构。
console.log(a,c);//
>>> {name: '张三'} 'Hello World'

剩余值解构

let obj = {
    a:{
        name:"张三"
    },
    b:[],
    c:"Hello World"
}
// 剩余值解构
let {a,...res} = obj; // 将剩下的值解构到一个新的对象中去。
console.log(a,res);// 
>>> {name: '张三'} {b: Array(0), c: 'Hello World'} 

...res必须要是在最后一个参数的位置。

1.4.2 数组解构

let arr = [1,2,3];
let [a,b,c] = arr;
console.log(a,b,c);//
>>> 1 2 3

嵌套

let [a,[b],c] = [1,[2],[3]];
console.log(a,b);
>>> 1,2

忽略

let [a,b] = [1,2,3,4,5];
console.log(a,b);
>>> 1,2

默认值

let [a,b,c,d,e,f=10] = 'hello';
console.log(a,b,c,d,e,f); // 
>>> h e l l o 10