ES6入门

Posted 2020-09-17 会飞的Tiger

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=" + urlSrc + ">");
ES6的写法
$(".box").append("<img src=${urlSrc}>");

不需要去拼接，${}里面存放一个变量。