ES6在ES5的基础上增加了许多新功能和新用法，使JavaScript更加倾向于面向对象的语言了。
前端知识的更新速度真的让我这样的小白崩溃啊
块级作用域
在ES5里，我们用function来划分作用域，叫做函数作用域。
通过var来申请的变量只识别函数作用域。
var p = 1;
function test(){
console.log(p); //undefined（此处下面的变量声明会提升，但是还没有进行赋值）
var p = 2;
console.log(p); //2
}
test();
在ES6里，增加了let，const 声明，可以用代码块{ }来划分作用域，叫做块级作用域。
{
var a = 1;
}
console.log(a); // 1 (var 不识别该作用域)
{
let a = 1;
}
console.log(a); // 报错！！（let识别块级作用域，所以会报错）
存在暂时性死区
ES6规定，在块级作用域里定义的let和const形成了封闭作用域，所以在声明前进行赋值就会报错。
var test = 123;
if (true) {
test = 'abc'; //报错
let test;
}
在同一个作用域之内，const和let不允许重复声明同一个变量，包括变量和形参的名字相同的情况
const message = 'hello';
const message = 'world';//报错 Identifier 'message' has already been declared
let tt = 'hello';
let tt = 'world';//报错 Identifier 'tt' has already been declared
const一旦声明常量的值就不能更改,但是let可以
const message = 'hello';
message = 'world';//报错 Assignment to constant variable.
let tt = 'hello';
tt = 'world';
console.log(tt); //world
声明一个常量必须马上初始化
const message ;//报错 Missing initializer in const declaration
对象内部属性值都是可以变的，但是引用的地址是不能变
const foo = {};
foo.prop = 123;
console.log(foo.prop);//123
foo.prop = 0;
console.log(foo.prop);//0
const foo = {};
foo = {};//报错 Assignment to constant variable.
来看一个经典的小面试题
function test() {
var arr = [];
for(var i=0; i<10; i++){
arr[i]= function () {
console.log(i);
}
}
return arr;
}
var demo = test();
for (var j = 0; j<10; j++){
demo[j]();
} //打印结果 10个10
这就是著名的闭包问题啊！
//在es5中，解决这个问题我们用到了立即执行函数
function test() {
var arr = [];
for(var i = 0; i<10; i++){
(function (i) {
arr[i] = function () {
console.log(i);
}
})(i);
}
return arr;
}
var demo = test();
for (var j = 0; j<10; j++){
demo[j]();
}
//es6更加轻松的解决了这个问题
//将var 换成let就可以了
function test() {
var arr = [];
for(let i=0; i<10; i++){
arr[i]= function () {
console.log(i);
}
}
return arr;
}
var demo = test();
for (var j = 0; j<10; j++){
demo[j]();
}
在es6中，var和function 命令声明的全局变量，依然是window的属性
let、const、class声明的全局变量，不再是window的属性了。
解构赋值
es6允许按照一定的模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值
var [a,b,c] = [1,2,3];
//等同于var a = 1, b = 2, c = 3;
可以任意嵌套
var [a,[b,[c,[d]]]] = [1,[2,[3,[4]]]];
如果解构失败(左边的值多)
var [a,b,c] = [1,2];
console.log(a,b,c); //1 2 undefined
如果不完全解构（右边的值多）
这样的情况也是可以解构成功的，按照变量对应的位置进行解构即可。
var [a,b,c] = [1,2,3,4];
console.log(a,b,c);// 1 2 3
如下情况会报错 右边不是数组（或者严格地说，不是可遍历的结构）
涉及到Iterator遍历器的概念,以后我们会详细说。
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};
默认赋值
当右边的值严格等于undefined的时候（即 “===”），会使用左边的值
var [a = 1,b = 2,c = 3] = [];
console.log(a,b,c);//1 2 3
var [a = 1] = [undefined]
console.log(a); //1
var [a = 1,b = 2,c = 3] = [null];
console.log(a,b,c);//null 2 3 ( null == undefined 是不严格等于)
惰性求值
如果默认值是一个表达式，那只有在用到的时候，才会求值
function val() {
return 666;
}
var [a = val(),b = 2,c = 3] = [];
console.log(a,b,c); //666 2 3
如果a能取到值，就不会执行 val() 函数。
function val() {
return 666;
}
var [a = val(),b = 2,c = 3] = [1];
console.log(a,b,c); //1,2,3
从左向右解析
var [a = 1,b = a] = [];
console.log(a,b);// 1 1
var [a = b,b = 1] = [];
console.log(a,b); //undefined 1
var [a = 1,b = a] = [1,2];
console.log(a,b); // 1,2
let [a = b,b = 1] = [];
console.log(a,b);//报错 b无法进行变量声明提升
对象的解构赋值
数组的元素是按照次序排序的，因此它们赋值也是按照顺序赋值的，但是对象的属性是没有次序的，变量必须与属性同名，才会被赋值
注意：
var a;
{a} = {a:1};
会报错。js引擎误以为{a}是一个代码块
所以我们要告诉js引擎，这不是一个代码块，是个表达式
var a;
({a} = {a:1});
由于数组本质也是特殊的对象，因此可以对数组进行对象属性的解构
var arr = [1, 2, 3];
var {0 : first, [arr.length - 1] : last} = arr;
console.log(firsrt,last);//1 3
字符串也可以被解构赋值，和数组相似
const [a, b, c, d, e] = 'hello';
由于类数组和对象都有length属性，还可以专门对这个属性进行解构赋值：
var {length : len} = 'hello';
console.log(len); // 5
解构赋值的时候，如果等号右边是数组和布尔值，则会有限转化成对象
函数的解构赋值
function fn([a,b]) {
console.log(a,b);
}
fn([1,2]); //1,2
参数在传入数组的一瞬间就被解构赋值成了a,b两个变量，因此在函数内部使用的变量而不是数组。
function fn([a,b]=[10,20]) {
console.log(a,b);
}
fn([1,2]); //1 2 (传了参数，就不会走默认赋值)
看一个吧
function move({x = 0, y = 0} = {}) {
return [x, y];
}
move({x: 3, y: 8}); // 3 8
move({x: 3}); // 3 0
move({}); // 0 0
move(); // 0 0
function move({x, y} = { x: 0, y: 0 }) {
return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]
第一种是给x、y变量指定默认值，而第二种是给move函数指定默认值而不是x、y变量
解构赋值用途
- 交换变量
[a, b] = [b, a];
- 从函数返回多个值
function example () {
return [1,2,3];
}
var [a, b, c] = example();
- 函数参数的定义
function f2({x,y,z}) {
console.log(x,y,z);
}
f2({z:3,x:2,y:1});
- 提交json数据
var jsonData= {
id: 42,
status: 'ok',
data:[888,999]
}
let {id,status,data:number} = jsonData;
console.log(id, status,number);
网友评论