基础语法
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