首页 > 代码库 > 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入门