最近ES6 很火,当然这也源于它强大的功能,现在我将自己学到的ES6知识做个小分享。。。
1.ES6是什么?
ES6:它是ECMAScript 6.0的简称,也是JavaScript语言的下一代标准,它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
2.Let和Const
Same:它们都在块级作用域内有效
Difference: Let声明变量,Const声明常量
细说let:Let是一种新的变量申明方式,它允许你把变量作用域控制在块级里面,也就是用大括号定义的代码块,let限制块级作用域,var限制函数作用域,当然for循环就比较适合用let。
细说const:const它一旦被定义不能被修改,当然它也是块级作用域
下面给大家一些关于let,var,const 的栗子
const c = 2;
alert(c); // 2
//var 定义的变量可以修改,如果不初始化会输出undefined,不会报错。
var a = 1;
console.log("函数外var定义a: " + a); // 1
function change(){
a = 3;
console.log("函数内部var定义a: " + a); // 3
}
change();
console.log("函数调用后var定义a为函数内部修改值:" + a); //3
//let 是块级作用域,函数内部使用let定义后,对函数外部无影响。
let b = 1;
console.log("函数外var定义b: " + b); // 1
function change1(){
let b = 3;
console.log("函数外var定义b: " + b); // 3
}
change1();
console.log("函数调用后let定义b不受函数内部定义影响: " + b); //1
2.ES6变量的解构赋值##
我们先说说什么叫解构
解构:ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值
1.模式匹配,等号两边模式一样,如果解析不成功,就是undefined
var [a,b,c] = [1,2,3]; //es6可以这样写,对应赋值
2.不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组
数组解构赋值
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4
解构赋值不仅适用于var命令,也适用于let和const命令
解构赋值允许指定默认值
var [hh = true] = [];
hh // true
对象的解构赋值
数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值
var { hh, ll } = { hh: "aaa", ll: "bbb" };
hh // "aaa"
ll // "bbb"
oo //undefined 解析不到
字符串的解构赋值
字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象
const [a, b, c, d, e] = 'lemon';
a // "l"
b // "e"
c // "m"
d // "o"
e // "n"
数值和布尔值的解构赋值
解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。
let {toString: str} = 123;
str === Number.prototype.toString // true
函数参数的解构赋值
函数的参数也可以使用解构赋值。
function add([x, y]){
return x + y;
}
add([1, 2]); // 3
3.箭头函数
箭头函数就是函数的一种简写形式,使用括号包裹参数,跟随一个 =>,紧接着是函数体:
//箭头函数简写
let breakfast = dessert => dessert;
/*普通写法*/
var breakfast = function breakfast(dessert){
return dessert;
}
箭头函数不仅仅是让代码变得简洁,函数中 this 总是绑定总是指向对象自身
function Person(){
this.age = 0;
setInterval(() => {
// |this| 指向 person 对象
this.age++;
}, 1000);
}
var person = new Person();
箭头函数不管是书写,还是this的使用,都给我们省了很多不必要的麻烦,所以说学号ES6很有必要的。
4.Map和Set
1.Map
初始化Map需要一个二维数组,或者直接初始化一个空Map。Map具有以下方法:
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined
由于一个key只能对应一个value,所以,多次对一个key放入value,后面的值会把前面的值覆盖
2.Set
Set和Map类似,也是key的集合,但不存储value。由于key不能重复,所以,在Set中没有重复的key
要创建一个Set,需要提供一个Array作为输入,或者直接创建一个空Set
var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
重复元素在Set中自动被过滤
var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}
//add(key)在set中添加元素,可重复添加,但是不会有效果
//delete(key)在set中删除元素
未完待续......