es6中的let、const关键字、解构

参考文献:http://es6.ruanyifeng.com/

es6中的let和const关键字

ECMAScript和JavaScript的关系: 前者是后者的规格,后者是前者的实现。符合ECMAScript规则的还有Flash中的ActionScript和TypeScript.
可以在NodeJS中测试ES6,后者使用webpack+Babel将ES6翻译成ES5

  • ES5中只有var能够定义变量,作用域是在function中
  • ES6中可以用let来定义变量,定义是块级作用域变量
//案例1
//let的作用域在{....}内部
{
    let a=10;
    var b=20;
}
console.log(a);//报错,未定义
console.log(b);//20
//案例2
var arr=[];
for(var i=0; i<10; i++){
	//i
	arr[i]=function(){
		console.log(i);
	}
}
arr[6]();//10
//案例3
var arr=[];
for(let i=0; i<10; i++){
//如果用let定义i,i实际上定义在了循环体中
	arr[i]=function(){
		console.log(i);
	}
}
arr[6]();//6
//案例4
//let 关键字定义的变量没有变量名的提升。
conosle.log(a);
let a=10; //报错
var a=10; //undefined
//案例5
//暂时性死区:  ES6明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域,凡是在声明之前就使用这些变量,就会报错。
var m=10;
function fun(){
	m=20;// 报错,函数在与解析阶段会预读所有的语句,发现let语句,所以就将这个函数变为一个m的暂时性死区,此时m不允许在let前被赋值。
	let m;
	console.log(m);
}
fun();// 报错,
//Uncaught ReferenceError: m is not defined at fun (<anonymous>:3:3)at <anonymous>:7:1
const

const用来定义常量,不允许更改。可以指向一个引用类型值。对引用类型值的操作是允许的。

//
const arr=[1,2,3]
arr.push(4);
console.log(arr);//[1,2,3,4]
//object.freeze();  //冻结对象
//案例2
 const arr=object.freeze([1,2,3]);
 console.log(arr); //合法
 arr.push(4);  //报错,对象已经被冻结
//案例3
//object.freeze(); 只冻结第一层,无法冻结下一层
var obj=Object.freeze({"a":1,"b":2,"c":[1,2,3]});
obj.a=44;
obj.c.push("A");
console.log(obj);
//{a: 1, b: 2, c: Array(4)}
//a: 1  a为第一层,所以被冻结
//b: 2
//c: (4) [1, 2, 3, "A"]  //c为第二层,所以无法被冻结,所以"A"元素添加到数组c成功

es6中的解构

//数组解构
var [a,b,c]=[1,2,3];
console.log(a);//1
console.log(b);//2
console.log(c);//3
//对象解构
var {name,age}={name:"老王",age:12};
console.log(name);//老王
console.log(age);//12
//... 运算符
var [a,b,...c]=[1,2,3,4,5,6];
console.log(a);//1
console.log(b);//2
console.log(c);//[3, 4, 5, 6]

//函数的参数可以解构
function fun([a,b]){
console.log(a+b)
}
fun([4,7]);//4+7=11

//案例5
function fun(...arr){
	let sum=0;
	for(let i=0;i<arr.length;i++){
	sum+=arr[i];
	}
	console.log(sum);
}
fun(1,2,3,4);//1+2+3+4=10
//案例6
function fun({math,english}){
	console.log(math+english);
}
var mine={"name":"mine","age":12,"math":78,"english":82};
fun(mine);//78+82=160
//案例7
let obj1={"a":1,"b":2};
//赋值操作
let {a:n,b:m}=obj1;
console.log(n);//1
console.log(m);//2
//案例8
let mine={"name":"mine","age":12,"math":78,"english":82};
let  {math}=mine;
console.log(math);//78
发布了49 篇原创文章 · 获赞 3 · 访问量 5118

猜你喜欢

转载自blog.csdn.net/weixin_43487066/article/details/90045324