首页 > 代码库 > ES6入门
ES6入门
ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。但是现在越来越多的人开始使用ES6。
1. ES6申明语法
let 表示声明一个变量，和var类似
const 表示申明一个常量，常量不可被修改，相当java里的 static final 。
let a = 3;
const b = 3;
a = 2;
console.log(a); // 2
b = 2;
console.log(b); // 报错：Uncaught TypeError: Assignment to constant variable.
变量的解构赋值
解构赋值的原则是:只要等号两边的模式相同，左边的变量就会被赋予对应的值,所以声明时，只要左右两边结构相同就可以赋值。
let [a,b] = [1,2];
console.log(a,b); // 1,2
let [[a],[[b],c]] = [[1],[[2],3]];
console.log(a,b,c); // 1,2,3
ES6的块级作用域
用let所声明的变量，只在let命令所在的代码块内有效。
{
let a = 0;
var b = 0;
}
console.log(b); // 0
console.log(a); // Uncaught ReferenceError: a is not defined(…)
function f1() {
let n = 5;
if (true) {
let n = 10;
}
console.log(n); // 5 用let申明
}
function f1() {
var n = 5;
if (true) {
var n = 10;
}
console.log(n); // 10 用var 申明
}
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 10 用var 申明
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 6 用let申明
还有要注意的是:使用let声明的变量，在域解析的时候不会被提升。console.log(a); var a = 10; // 10 console.log(b); let b = 10; //Uncaught ReferenceError: b is not defined(…)
2. arrowfunction 箭头函数
语法：()=>{} , {}里面表示的是返回值
特性：
a、函数内置 this 的值，取决于箭头函数在哪儿定义，而非箭头函数执行的上下文环境。
b、没有arguments对象
let a = ()=>{};
console.log(a); // undefined
let a = ()=>{
return 5;
};
console.log(a()); // 5
函数内置 this 的值，取决于箭头函数在哪儿定义，而非箭头函数执行的上下文环境这句话怎么理解？
示例1
let a = {
name :‘make‘
}
a.b = function(){
let a = ()=>{ // 这里用箭头函数
console.log(this); // Object {name: "make"}
return this;
}
return a();
}
a.b();
示例2
let a = {
name :‘make‘
}
a.b = function(){
let a = function(){ // 这里用function
console.log(this); // window对象
return this;
}
return a();
}
a.b();
3. 类 class
其他语言不清楚，但如果你对java有那么一点研究，你会发现，类的申明，extends,super 方法和java几乎没什么区别。
constructor 构造方法
extends 继承super关键字，它指代父类的实例（即父类的this对象）；
class Animal{ // 申明一个动物类
constructor(name){ // 动物类的构造方法
this.name = name; // 给动物类取个名字
}
say(){ // 动物都会说话
console.log(this.name + "说话了");
}
}
let tiger = new Animal("tiger"); // 实例化一个动物类，传入一个名称
tiger.say(); // tiger说话了
class Cat extends Animal{ // 有个Cat类继承了动物类，就拥有动物类所有的方法
constructor(name){
super();
this.name = name;
}
}
let cat = new Cat("cat");
cat.say();
4. Set 和Map
set介绍
Set 是 ES6 新增的有序列表集合，它不会包含重复项。之前我们通常用对象（Object）或者数组（Array）来实现没有重复项的集合。
let c = new Set([1,2,3]);
console.log(c); // 1,2,3
c.add("b"); // 1,2,3,b
c.delete("b"); // 1,2,3
c.has("b"); // flase
c.size; // 3
console.log(c.keys()); // 1,2,3,
console.log(c.values()); // 1,2,3
c.forEach(function(key,value,set){
console.log(value + "," + key); // {1,1}{2,2}{3,3}
});
add(value) 添加某个值。
delete(value) 添加删除value这个值。
size() 返回集合的个数
has(value) 判断是否还有某个值，返回值是 true或false
set.keys() 返回所有的key值
set.values() 返回所有的value值
forEach(key,value,set) // 第一参数为 key ,第二个为 value，第三个为 循环什么类型，这里循环的是 set 集合
这里介绍一个数组去重的方法
原理是set集合会过滤掉重复的值。
new Set(Array);
let a = [1,2,3,1];
let b = new Set(a);
console.log(b); // 1,2,3
Map介绍
首先map对象是一个简单的键/值映射。任何值（包括对象和原始值）都可以用作一个键或一个值。
let map = new Map([ [‘a‘,1],[‘b‘,2] ]);
console.log(map); // Map {"a" => 1, "b" => 2}
map.set(‘chen‘,22).set(‘zhou‘,22);
console.log(map); //Map {"a" => 1, "b" => 2, "chen" => 22, "zhou" => 22}
console.log(map.get(‘chen‘)); // 22
map.delete(‘zhou‘);
console.log(map.has(‘chen‘)); //true
console.log(map.size); // 3
console.log(map.values()); //MapIterator {1, 2, 22}
console.log(map.keys()); // MapIterator {"a", "b", "chen"}
map.forEach(function(value,key,map){
console.log(value + "," + key); //1,a; 2,b;22,chen
});
set(key,value) 添加一个键值对。
get(key) 拿到key值对应的value
delete(key) 删除某个值
has(key) 判断是否有某个值
size 返回map的长度
values() 返回所有的value
keys() 返回所有的key
forEach(key,value,map) // 第一参数为 key ,第二个为 value，第三个为 循环什么类型，这里循环的是 map 集合
5.template string
主要是用来连接字符串。
平时的写法 $(".box").append("<img src="http://www.mamicode.com/+ urlSrc +">"); ES6的写法 $(".box").append("<img src=http://www.mamicode.com/${urlSrc}>");
不需要去拼接，${}里面存放一个变量。
ES6入门