(ECMAScript 6入门 -阮一峰)--笔记1

2015年6月,es6正式通过,成为国际标准。
支持度:各浏览器的最新版本,对es6的支持度很高。但是对于旧版本的浏览器,支持度不高,需要转码es5代码运行。

- Babel转码器

配置文件.babelrc,用来设置转码规则和插件

{
  "presets": [],
  "plugins": []
}

babel-cli命令行转码
babel-node提供一个REPL环境
babel-register 可以改写require命令,为他加上一个钩子,require js文件时会先用Babel转码
babel-core,如果某些代码需要Babel的api进行转码,就需要用这个模块。
babel-polyfill,Babel默认只转换新的Javascript句法,而不转换新的api,也不会转换定义在全局对象上的方法,比如Array.from()方法

  • let

块级作用域:let声明的变量在let命令所在的{}内有效。虽然es6运行在块级作用域内声明函数,但是为了考虑兼容老代码,不建议使用,可以用函数表达式代替。
不存在变量提升:let声明的变量一定要在声明后使用,不然会报错。
暂时性死区:let声明了某个变量,则在声明的{}内存在暂时性死区,在这个作用域内该变量一直存在,但是必须在声明变量后,变量才可以使用,在声明之前,变量是不可以获取的。
不允许重复声明

  • const

声明常量,定义后值不可以修改

es6声明变量的6种方法
var.function.let.const.class.import

  • 变量的解构赋值

let [a,b,c,d='d'] = [1,2,3];
let {a,b}={a:'a',b:'b'};
//a:'a'
let {a:b}={a:'a'}
//a: error,因为a是匹配模式是未定义的
//b:'a',b才是变量

提取JSON数据

let jsonData={
name:'tang',
age:22
}
let{name,age} = jsonData;
  • 字符串的扩展:模板字符串${}

//多行字符串
let str1 = `i am
tang`;
//在字符串中插入变量
let str2 = `hello${str1}`;
//模板html
let myHtml = `
<div>
<ul><li></li></ul>
</div>`;

  • 函数的扩展

//函数参数默认值
function hello(name,age=20){
  alert(`my name is ${name},i am ${age} years old`);
};
hello('tang');//

rest参数,用于获取函数的多余参数,是数组,可以使用数组方法。
箭头函数,没有自己的this,this永远指向引用该函数的父函数的this.

var f = val = > val
var f = () => 5
var sum = (val1,val2) => val1 + val2;
[1,2,3].map(x => x*x);
let result = results.sort((a,b) => a - b);
  • 数组的扩展

扩展运算符
[...arr],将一个数组转为用逗号分割的参数数列。
实际运用:

//复制数组
let arr1 =  [ 1,2,3];
let arr2 = [...arr1];

//合并数组
let arr3 = [...arr1,...arr2];

//解构赋值
let [arr4,...rest] = [1,2,3,4,5];
console.log(arr4);//1
console.log(rest);// [2,3,4,5];

//字符串转数组
let arr5 = [...'hello'];
console.log(arr5);//['h','e','l','l','o']

Array.from()
负责将类似数组的对象和可遍历的对象转为真正的数组

  • 对象的扩展

属性的简洁表示法

const str1 = 'test';
let obj = {str1};//相当于obj = {str1:str1};
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,117评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,963评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,897评论 0 240
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,805评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,208评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,535评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,797评论 2 311
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,493评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,215评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,477评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,988评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,325评论 2 252
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,971评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,807评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,544评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,455评论 2 266

推荐阅读更多精彩内容

  • *node下用express框架,实现一个简单的mvc *构建工具:gulp / babel / webpack ...
    韩娜爱吃辣_前端程序媛阅读 1,035评论 0 1
  • 本文为阮一峰大神的《ECMAScript 6 入门》的个人版提纯! babel babel负责将JS高级语法转义,...
    Devildi已被占用阅读 1,927评论 0 4
  • Lua 5.1 参考手册 by Roberto Ierusalimschy, Luiz Henrique de F...
    苏黎九歌阅读 13,517评论 0 38
  • [TOC] 参考阮一峰的ECMAScript 6 入门参考深入浅出ES6 let和const let和const都...
    郭子web阅读 1,745评论 0 1
  • 全职妈妈,全职员工,两份不同意义的工作范畴,却是我难以翻越的沟壑。 其实是否当全职妈妈一直都是我与...
    hh1895阅读 331评论 0 0