es6语法

阮一峰的博客

http://es6.ruanyifeng.com/

一 ES6简介

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在2015年6月正式发布了。

2011年，ECMAScript 5.1版发布后，就开始制定6.0版了。

因此，ES6 这个词的原意，

就是指 JavaScript 语言的下一个版本。

二 检查浏览器是否支持ES6的方法

http://ruanyf.github.io/es-checker

三 语法介绍

(一) let和const的使用

1.1 let 关键字的使用

1.2 let和 var的区别案例

1.3 ES6的代码块作用域

1.4 let 不存在变量的提升定义

1.5 let的暂时性死区

1.6 const 关键字的使用

1.7 const定义常量的使用

1.8 const的本质

const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指针，const只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

2.0 ES6 声明变量的六种方法

2.1 ES6 的顶层对象的属性

注意let和const变量 不添加到window中

(二) 变量的解构赋值

1.1 数组的解构

let [a,b] = [100,200];

1.2 对象的解构

注意: 对象的解构没有顺序

let { bar, foo } = { foo: "aaa", bar: "bbb" };

1.3 数值和布尔值的解构赋值

1.4 函数参数的解构赋值 (函数会说明)

1.5 圆括号问题

(三) 字符串扩展

1.1 字符的 Unicode 表示法

百度搜索:汉字字符编码

http://www.mytju.com/classCode/tools/encode_gb2312.asp

http://tool.chinaz.com/Tools/Unicode.aspx

1.2 codePointAt()

1.3 String.fromCodePoint()

1.4 字符串的遍历器接口

for...of的使用 和for...in的区别

1.5 charAt方法 ES5新增的方法

1.6 includes(), startsWith(), endsWith()

1.7 repeat()

1.8 模板字符串(重点)

// ES6字符串教程中

// 有箭头函数的写法和...参数的写法

1.8.1 字符串模板的来源是使用+的不方便

'name'+name+"age is"+age

1.8.2 字符串的插值采用${name}的方式实现

1.8.3 标签模板 tagged template

function tag(stringArr, value1, value2){

// ...

}

// 等同于

function tag(stringArr, ...values){

// ...

}

(四) 函数的扩展

1.1 函数参数的默认值

ES6新添加的函数默认值

1.2 rest参数

ES6 引入 rest 参数（形式为"...变量名"），用于获取函数的多余参数，这样就不需要使用arguments对象了

1.3 扩展运算符

可以看做前面的rest参数的逆运算

扩展运算符（spread）是三个点（...）

将一个数组转为用逗号分隔的参数序列。

注意：三个点（...）用在不同的地方表示的意义不一样

1.4 严格模式

1.4.1 从 ES5 开始，函数内部可以设定为严格模式。

1.4.3 ES2016 做了一点修改，规定只要函数参数使用了默认值、解构赋值、或者扩展运算符，那么函数内部就不能显式设定为严格模式，否则会报错。

1.5 name 属性

1.6 箭头函数

1.7 绑定 this

(五) 数值Number的扩展

1.1 二进制和八进制表示法

1.2 Number.isFinite(), Number.isNaN()

1.3 Number.parseInt(), Number.parseFloat()

1.4 Number.isInteger()

四 Babel介绍使用

1.1 后缀名称为.babelrc文件

添加：

{

"presets": ["env"]

}

1.2 安装babel的包文件

npm install --save-dev babel-cli babel-preset-env

1.2 运行测试文件01example.js

1.3 babel测试文件

babel 01example.js

1.4 babel -d 测试输出文件

babel 01example.js --out-file 01result.js

或者

babel 01example.js -o 01result.js

1.5 babel 的配置环境介绍

https://excaliburhan.com/post/babel-preset-and-plugins.html




二 数值Number的扩展

1.1 二进制和八进制表示法

1.2 Number.parseInt(), Number.parseFloat()

1.3 Number.isInteger()

三 ES6的语法续

(一) 数组的扩展

1.1 Array.from()

将类数组对象 转换为数组对象

1.2 Array.of()

解决new Array(3)

第一个参数是数组的长度还是数组的元素问题

弥补数组构造函数Array()的不足

1.3 数组实例的find()和findIndex()

find方法用于找出第一个符合条件的数组成员

数组实例的findIndex方法的用法与find方法非常类似，

返回第一个符合条件的数组成员的位置，

如果所有成员都不符合条件，则返回-1。

1.4 数组实例的fill()

fill方法使用给定值，填充一个数组。

用于数组的初始化操作

1.5 数组实例的 entries()，keys()和values()

ES6提供三个新的方法——entries()，keys()和values()——用于遍历数组

注意:values方法暂时有些浏览器不支持 但是转码是支持的

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

1.6 数组实例的 includes()

Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似

该方法属于ES7，但Babel转码器已经支持。

(二) 对象的扩展

1.1 属性的简洁表示法

1.1.1 {x:x,y:y} 简写为:{x,y}

1.1.2 方法名的简写

var obj = {

showName(){

console.log("html5");

}

}

1.2 属性名表达式

let propKey = 'foo';

let obj = {

[propKey]: true,

['a' + 'bc']: 123

};

1.3 Object.is()

判断传入的参数是否是相等的 类似===的操作

1.4 Object.assign()

将source对象的可枚举属性赋值到target对象上。

注意：如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

1.6 属性的遍历

1.6.1 for...in

1.6.2 Object.keys(obj)

1.6.3 Object.values(obj) 暂时不支持 需要转码

1.7 __proto__属性和

Object.setPrototypeOf()，Object.getPrototypeOf()

(三) Map和Set集合

1.1 Set

Set 基本的数学集合 不允许有重复的对象

size属性 Set的集合个数

has方法  判断是否存在对象

add添加数据

delete方法删除数据

使用forEach方法和for...of方法实现

clear方法清除set集合

1.2 Map

JavaScript 的对象（Object）本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制, Map可以使用任意的对象或值做键

set方法设置属性和值

get方法获取属性和值

delete方法删除对应的键属性

(四) Symbol的基本使用

http://www.cnblogs.com/sker/p/5474591.html

1.1 概述

1.2 作为属性名的Symbol

表示独一无二的ID。它通过Symbol函数生成。

(五) Iterator和for...of循环

1.1 Iterator的概念

当对象需要遍历的时候就需要调用某种方法将对象显示出来

当使用for...of循环遍历某种数据结构时，

该循环会自动去寻找Iterator接口。

1.2 在ES6中，有三类数据结构原生具备Iterator接口：数组、某些类似数组的对象、Set和Map结构

1.3 字符串,类数组对象,set和map的Iterator接口和遍历

(六) Promise的使用 (异步编程 什么是异步)

1.1 Promise 的含义和基本用法

1.2 Promise.prototype.then()

1.3 Promise.prototype.catch()

1.4 Promise.all()

1.5 Promise.race()

1.6 Promise.resolve()

1.7 Promise.reject()

Promise的说明使用

http://www.tuicool.com/articles/RzQRV3

(七) Class

1.1 类的定义

1.2 类的继承

1.3 类的get和set函数

(八) Module  必须要采用简单的jspm的模块进行开发测试

1.1 Module的导入import

import {nam1,name2} from '文件路径';

import { name as n } from '路径';

import * as 变量名 from '路径';

1.2 Module的到导出export

另一种定义匿名函数的方式导出

export default

输出匿名函数

语法：

export default function(){};

在输入的时候可以使用任何名字指向该匿名函数

例如：

import name from '路径'；

注意：name不需要{}包含起来

1.3 模块的继承 模块的整体输出

export * from '模块路径';

输出模块中所有方法和属性

export { a as b} from '模块路径';

将模块中的a变量转为b输出

(九) Babel介绍使用

安装Node.js

Node.js的项目 npm 的包项目

新建文件夹test

在改文件夹下面输入npm init 初始化项目

先全局安装

npm install -g babel-cli

安装成功  输入babel -V 查看版本号

1.1 后缀名称为.babelrc文件

添加：

{

"presets": ["env"]

}

1.2 安装babel的包文件

npm install --save-dev babel-cli babel-preset-env

--save-dev 保存到package.json文件中

babel-cli    包工具

babel-preset-env 包工具

npm install --save-dev babel-cli babel-preset-env

1.2 运行测试文件01example.js

1.3 babel测试文件

babel 01example.js

1.4 babel -d 测试输出文件

babel 01example.js --out-file 01result.js

或者

babel 01example.js -o 01result.js

1.4.1 babel-node 01.js 运行输出结果

1.5 babel 的配置环境介绍

https://excaliburhan.com/post/babel-preset-and-plugins.html

本地的服务器开发方式:

browser-sync start --server

要安装webpack 实现浏览器支持ES6的语法

1. 安装webpack

npm install -g webpack;

2. 新建后缀名称为.babelrc文件

添加：

{

"presets": ["env"]

}

3. npm install --save-dev babel-loader babel-core

3. npm install --save-dev babel-preset-env

4. 新建webpack.config.js文件

(十二) 复习 ES6

http://www.jianshu.com/p/ebfeb687eb70

扩展: 数组的推导(不需要掌握) 仅仅FireFox实现了 建议不要使用

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Array_comprehensions

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,185评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,445评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,684评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,564评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,681评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,874评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,025评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,761评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,217评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,351评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,988评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2赞 349

推荐阅读更多精彩内容

  • ES6语法特性精华
    以下内容是我在学习和研究ES6时，对ES6的特性、重点和注意事项的提取、精练和总结，可以做为ES6特性的字典；在本...
    科研者阅读 3,120评论 2赞 9
  • ES6语法
    阮一峰的博客http://es6.ruanyifeng.com/ 一 ES6简介 ECMAScript 6.0（以...
    blank的小粉er阅读 151评论 0赞 0
  • ES6语法核心
    概念: 1.ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。          ...
    Sujz阅读 221评论 1赞 2
  • es6语法快速上手
    引用：http://hao.jser.com/archive/10813/?utm_source=tuicool&...
    庄志平阅读 1,206评论 1赞 14
  • JavaScript(ES6) - Async
    异步编程对JavaScript语言太重要。Javascript语言的执行环境是“单线程”的，如果没有异步编程，根本...
    呼呼哥阅读 7,301评论 5赞 22