码迷,mamicode.com
首页 > 其他好文 > 详细

ES6/ES2015常用知识点和概念

时间:2016-08-23 12:55:31      阅读:94      评论:0      收藏:0      [点我收藏+]

标签:

越来越多的开源库开始使用ES2015来构建代码了,大家知道ES6=ES2015,ES6在2015年被ECMAScript标准化组织approve,各大浏览器厂商要完全支持ES6的强大功能还须一些时日,对于喜爱新尝试的同学难道只有干等吗?幸运的是有了babel,traceur等transpiler的帮助,我们根本不用等待浏览器原生支持ES6才开始使用新技术了!其实babel做的事情很简单,他就是把es6的代码转换成浏览器认识的ES5代码。简单举一个例子,比如ES6中引入的语言原生支持模块的关键字import, export在仅实现ES5的浏览器中无法运行,因此babel做的就是将import, export转换为commonJS的模块格式require, exports, 随后在加载到浏览器端的SystemJS模块加载器的帮助下(或者通过webpack,browserify Module bundler工具整合),就能完全实现了ES6模块的功能。

本文视图整理我在学习ES6过程中遇到的一些常见重要知识点和疑惑的问题

Variable and Parameters

block scope

ES6中引入了block scope的概念,配合使用let来declare一个变量的话,该变量就只在block中可见

if (flag){
  let x = 3; // x只在这个{}block中可见  
}
return x; // x is not defined error!

let vs var

let支持块作用域,不会像var那样hoisted到前面 

同样let支持for block

for (let i=0;i <10; i++)
{
}
return i // i not defined

for (var i=0;i <10; i++)
{
}
return i // i==10

const(chrome,firefox支持的,貌似非es6标准)

const MAX_AGE 130 
MAX_AGE = 200 //syntax error

 Destructuring

let x = 2; 
let y = 3;
[x,y] = [y,x] //[3,2]     
// 右边的是array, 左边不是array,而是destructuring,只对x,和y赋值
// destructuring assignment, 注意

let [x,y]=[2,3] //这里对x,y两个单个变量赋值: x=2, y=3并且在后面可以直接访问
expect(x).toBe(2)
expect(y).toBe(3);

var retv = function(){
      return [1,2,3];
}
let [, x , y] = retv(); // [1,2,3]解构  这里 , 号表示忽略部分结构单元
exepct(x).toBe(2) 
exepct(y).toBe(3) 

var retO = function(){
   return {
   firstName: "alice",
   lastName: "zhang",
   social: {
         qq: "13442",
         wechat: "wechatalice"
   }
  }
}

let { firstName: f, lastName: l, social:{wechat: weixin}} = retO();
//f = "alice", l = "zhang"  , weixin = "wechatalice"

let { firstName, lastNamel, social:{wechat}} = retO();
//firstName= "alice", lastName = "zhang"  , wechat = "wechatalice"


//模拟一个ajax call返回结果解构:
let ajax = function(url, {data, cache}{
       return data; //注意这里data是从ajax调用者传入的配置对象解构出来data字段后直接返回的
//在通常的ajax调用中,则从server端返回
}
let result = ajax("api/test", {
   data: "test data for ajax", //这是ajax调用的传入对象,可以被ajax解构成变量
   cache: false
});
expect(result).toBe("test data for ajax") // true

 

ES6/ES2015常用知识点和概念

标签:

原文地址:http://www.cnblogs.com/kidsitcn/p/5798543.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!