现在es6已经很火了，作为前端的我们也要去学习下，即使目前的工作上用不到，但在未来，浏览器升级了，兼容性高了，这些新的语法也将会慢慢出现，就像html5、css3一样。。。
下面来简单的介绍下关于ES6的语法。
## 一、let const
~~~
// let声明变量，代码块内有效
for(let i=0; i<10; i++) {
console.log(i);
}
console.log(i); // 块外调用会报错：Uncaught ReferenceError: i is not defined
// const声明常量
const AGE = 123;
AGE = 344; // 再次修改会报错：Uncaught TypeError: Assignment to constant variable.
~~~
## 二、解构赋值（从左往右运算，没有就是undefined）
~~~
// 数组解构赋值
var [name, age, gender] = ['tom', 24];
console.log(name); // tom
console.log(gender); // undefined
// 对象解析赋值
var {foo, bar} = {foo: 'tom', bar: 'jack'};
console.log(bar); // jack
// 默认值
var [name, age=24] = ['tom', 36];
console.log(age); // 36
var {foo='rose', bar} = {bar: 'jack'};
console.log(foo); // rose
~~~
## 三、字符串扩展
1、codePointAt（能够正确处理4个字节储存的字符，返回一个字符的码点）
~~~
var s = 'a';
console.log(s.codePointAt(0))// 134071
~~~
2、fromCodePoint（可以识别大于0xFFFF的字符，弥补了String.fromCharCode方法的不足）
~~~
console.log(String.fromCodePoint(0x20BB7))//
~~~
4、字符串遍历器（遍历器最大的优点是可以识别大于0xFFFF的码点）
~~~
var str = String.fromCodePoint(0x20BB7);
for(let i of str) {
console.log(i); //
}
~~~
5、normalize（用来将字符的不同表示方法统一为同样的形式，这称为Unicode正规化）
~~~
console.log('\u01D1'.normalize()); // Ǒ
~~~
6、includes() startsWith() endsWith()
~~~
var str = 'abs1234de0';
console.log(str.includes('s12')); // true
console.log(str.startsWith('abs')); // true
console.log(str.endsWith('de0')); // true
~~~
7、repeat（字符串重复）
~~~
var str = 'hello world !';
console.log(str.repeat(3)); // hello world !hello world !hello world !
~~~
8、模板字符串
~~~
var str = 'hello world';
var strong = `<strong>${str}</strong>`;
console.log(strong); // <strong>hello world</strong>
~~~
9、String.raw（方法可以作为处理模板字符串的基本方法，它会将所有变量替换，而且对斜杠进行转义）、
~~~
console.log(String.raw`Hi\\n`); // Hi\\n
console.log(String.raw({ raw: 'test' }, 0, 1, 2)); // t0e1s2t
~~~
## 四、正则扩展
1、source（返回正则表达式的正文）flags（返回正则表达式的修饰符）
~~~
console.log(/abc/ig.source); // abc
console.log(/abc/ig.flags); // gi
~~~
2、u修饰符（含义为“Unicode模式”，用来正确处理大于\uFFFF的Unicode字符）
~~~
console.log(/^\uD83D/.test('\uD83D\uDC2A')); // true
~~~
3、y修饰符（全局匹配，后一次匹配都从上一次匹配成功的下一个位置开始）
~~~
var s = 'aaa_aa_a';
var r1 = /a+/g;
var r2 = /a+/y;
console.log(r1.exec(s)); // ["aaa"]
console.log(r2.exec(s)); // ["aaa"]
console.log(r1.exec(s)); // ["aa"]
~~~
## 五、数值扩展
1、Number.isFinite()（用来检查一个数值是否为有限的）
~~~
console.log(Number.isFinite(0.8)); // true
console.log(Number.isFinite(NaN)); // false
console.log(Number.isFinite(Infinity)); // false
console.log(Number.isFinite('15')); // false
console.log(Number.isFinite(true)); // false
~~~
2、Number.isNaN()（用来检查一个值是否为NaN）
~~~
console.log(Number.isNaN(0.8)); // false
console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN(-Infinity)); // false
console.log(Number.isNaN('15')); // false
console.log(Number.isNaN(true)); // false
~~~
3、Number.isInteger()（用来判断一个值是否为整数）
~~~
console.log(Number.isInteger(25.0)); // true
console.log(Number.isInteger(25.1)); // false
console.log(Number.isInteger("15")); // false
console.log(Number.isInteger(true)); // false
~~~
4、parseInt()和parseFloat()，移植到Number对象上面
~~~
console.log(Number.parseInt('12.34')); // 12
console.log(Number.parseFloat('123.45#')); // 123.45
~~~
## 六、数组扩展
1、Array.from
~~~
// 对象形式
var data = {0: 'zhang', 1: 'san', length: 2};
console.log(Array.from(data)); // ["zhang", "san"]
// 字符串形式
console.log(Array.from('hello')); // ["h", "e", "l", "l", "o"]
// new Set()形式
console.log(Array.from(new Set(['tom', 24]))); // test.html:12 ["tom", 24]
~~~
2、Array.of（方法用于将一组值，转换为数组）
~~~
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
~~~
3、copyWithin(target, start, end)（将指定位置的成员复制到其他位置）
~~~
console.log([1, 2, 3, 4, 5].copyWithin(0, 3, 5)); // 将3~5号位复制到0号位 [4, 5, 3, 4, 5]
~~~
4、find()（数组实例的find方法，用于找出第一个符合条件的数组成员） findIndex()（返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1）
~~~
// find
var num = [1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
});
console.log(num); // 10
// findIndex
var num = [1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
});
console.log(num); // 2
~~~
5、fill(val, start, end)（方法使用给定值，填充一个数组）
~~~
console.log(['a', 'b', 'c'].fill(7)); // [7, 7, 7]
console.log(new Array(3).fill(7)); // [7, 7, 7]
console.log(['a', 'b', 'c'].fill(7, 1, 2)); // ["a", 7, "c"]
~~~
6、数组实例的entries()，keys()和values()
~~~
for (let index of ['a', 'b'].keys()) {
console.log(index); // 0 1
}
for (let elem of ['a', 'b'].values()) {
console.log(elem); // a b
}
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem); // 0,a 1, b
}
~~~
## 七、函数扩展
1、rest参数（数组）
~~~
function foo(a, ...args) {
console.log(a); // 1
console.log(args); // [2, 3]
}
foo(1,2,3);
~~~
2、箭头函数
~~~
document.querySelector('button').addEventListener('click', function(e) {
console.log(e.clientX); // 889
setTimeout(()=>{
console.log(this); // button
}, 1000);
setTimeout(function() {
console.log(this); // window
}, 1000);
});
~~~
## 八、对象扩展
~~~
var key = 'name';
var foo = {
[key+'2']: 'tom', // 键可以使用表达式
say() {
console.log(this.name2);
}
}
foo.say(); // tom
~~~
## 九、Symbol（一种新的原始数据类型，是一个独一无二的值）
~~~
let s = Symbol();
console.log(typeof s); // symbol
console.log(Symbol('foo') == Symbol('foo')); // false （参数只是描述，主要是为了区分）
// Symbol.for() 可以重新使用同一个Symbol值
console.log(Symbol.for('foo') == Symbol.for('foo')); // true
// Symbol.keyFor() 返回Symbol的key
var s1 = Symbol.for("foo");
console.log(Symbol.keyFor(s1)) // foo
~~~
## 十、set map
~~~
// Set
var set = new Set([1, 2, 3, 4, 4]);
console.log([...set]); // [1, 2, 3, 4]
// WeakSet（成员只能是对象）
var arr = [[1, 2], [3, 4]];
var ws = new WeakSet(arr);
console.log(ws); // WeakSet {[3, 4], [1, 2]}
// Map
var map = new Map([
['name', '张三'],
['title', 'Author']
]);
console.log(map.size); // 2
console.log(map.has('name')); // true
console.log(map.get('name')); // "张三"
// WeakMap
const k1 = [1, 2, 3];
const k2 = [4, 5, 6];
const wm2 = new WeakMap([[k1, 'foo'], [k2, 'bar']]);
console.log(wm2.get(k1)); // foo
~~~
## 十一、proxy（代理）
~~~
var proxy = new Proxy({}, {
get: function(target, property, receiver) {
return target[property];
},
set: function(target, key, value, receiver) {
target[key] = value;
}
});
proxy.time = 1200;
console.log(proxy.time); // 1200
~~~
## 十二、reflect（映射）
~~~
var obj = {
foo: 1,
bar: 2,
get baz() {
return this.foo + (this.bar||0);
},
}
// 设置、获取、删除属性
Reflect.set(obj, 'foo', 2);
console.log(Reflect.get(obj, 'baz')) // 4
console.log(Reflect.has(obj, 'name')) // false
Reflect.deleteProperty(obj, 'bar');
console.log(Reflect.get(obj, 'baz')) // 2
// 构造函数
var obj2 = Reflect.construct(function(...args) {
console.log(args); // ["tom", "jack"]
}, ['tom', 'jack']);
// 设置、获取原型
Reflect.setPrototypeOf(obj2, {name: 'rose'});
console.log(Reflect.getPrototypeOf(obj2)); // Object {name: "rose"}
// apply
console.log(Reflect.apply(Math.max, Math, [1, 2, 3])); // 3
// 定义属性
Reflect.defineProperty(obj2, 'time', {
value: (()=>new Date().toLocaleString())()
});
console.log(obj2.time); // 2017/5/12 下午6:29:32
// 获取属性描述符
console.log(Reflect.getOwnPropertyDescriptor(obj2, 'time')); // Object {value: "2017/5/12 下午6:31:08", writable: false, enumerable: false, configurable: false}
// 阻止扩展、获取是否可扩展
Reflect.preventExtensions(obj2);
console.log(Reflect.isExtensible(obj2)); // false
// 获取keys
console.log(Reflect.ownKeys(obj2)); // ["time"]
~~~
## 十三、promise（是异步编程的一种解决方案）
~~~
var promise = new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('get', 'test.php', true);
xhr.send(null);
xhr.onload = function(res) {
resolve(res.target.response);
}
xhr.onerror = reject();
}).then(function(data) {
console.log(data);
}, function() {
console.log('请求失败~');
}).catch(function(error) {
console.log(error);
});
// promise.all([p1, p2, p3]) 3个promise都成功才进行下一步操作
// promise.race([p1, p2, p3]) 3个promise率先成功那个进行下一步操作
~~~
## 十四、generator（生成器）
~~~
function* foo(x) {
var y = 2 * (yield (x + 1));
var z = yield (y / 3);
return (x + y + z);
}
var a = foo(5);
// next()参数会当成上一个yield的返回值
console.log(a.next()); // Object {value: 6, done: false} 5+1 x=5
console.log(a.next(12)); // Object {value: 8, done: false} 2*12/3 y=24
console.log(a.next(10)); // Object {value: 39, done: true} 5+24+10 z=10
// for of循环
function *foo() {
yield 1;
yield 2;
yield 3;
return 4;
}
var a = foo();
console.log(a.next()); // Object {value: 1, done: false}
console.log(a.next()); // Object {value: 2, done: false}
console.log(a.next()); // Object {value: 3, done: false}
console.log(a.next()); // Object {value: 4, done: true}
for(let v of foo()) {
console.log(v); // 1 2 3 next的done为true时循环会停止
}
~~~
## 十五、async await（可以当成Generator的语法糖）
~~~
// generator写法
var gen = function* () {
var f1 = yield readFile('/etc/fstab');
var f2 = yield readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};
// async await写法
var asyncReadFile = async function () {
var f1 = await readFile('/etc/fstab');
var f2 = await readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};
~~~
## 十六、decorator（装饰器）
~~~
function test(target) {
target.name = 'tom';
}
@test
class User {}
console.log(User.name); // tom
~~~
## 十七、module（模块）
~~~
// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};
// main.js
import {firstName, lastName, year} from './profile';
function setName(element) {
element.textContent = firstName + ' ' + lastName;
}
// 别名导出
function v1() { ... }
function v2() { ... }
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};
// 导出默认
export default function () {
console.log('foo');
}
~~~
## 十八、class
~~~
class User {
constructor() {
this.name = '张三';
}
say() {
console.log('hello '+this.name);
}
}
var user = new User();
user.say(); // hello 张三
// 继承
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y); // 调用父类的constructor(x, y)
this.color = color;
}
toString() {
return this.color + ' ' + super.toString(); // 调用父类的toString()
}
}
~~~
## 十九、二进制数组
~~~
// ArrayBuffer
var buffer = new ArrayBuffer(32);
console.log(buffer.byteLength); // 32
// 切割
var buffer = new ArrayBuffer(8);
var newBuffer = buffer.slice(0, 3);
console.log(newBuffer.byteLength); // 3
// DataView
var buffer = new ArrayBuffer(24);
var dv = new DataView(buffer);
console.log(dv.byteLength); // 24
// TypedArray（ArrayBuffer对象作为内存区域，可以存放多种类型的数据）
Int8Array：8位有符号整数，长度1个字节。
Uint8Array：8位无符号整数，长度1个字节。
Uint8ClampedArray：8位无符号整数，长度1个字节，溢出处理不同。
Int16Array：16位有符号整数，长度2个字节。
Uint16Array：16位无符号整数，长度2个字节。
Int32Array：32位有符号整数，长度4个字节。
Uint32Array：32位无符号整数，长度4个字节。
Float32Array：32位浮点数，长度4个字节。
Float64Array：64位浮点数，长度8个字节。
~~~
参考链接：[http://es6.ruanyifeng.com/](http://es6.ruanyifeng.com/)
后续补充
- 事件
- mouse缩放与拖动
- drag拖动
- 事件兼容
- animation/transition
- canvas
- 改变图片颜色
- html转图片
- 视频操作
- 图片缩放、水印、放大镜
- 虚线
- 圆环进度条
- 形状事件
- 圆角矩形
- 绘制注意
- arcTo与贝塞尔
- 椭圆及椭圆进度
- 五角星进度
- 常用图形
- 计算显示文本宽度
- 算法
- 几何算法
- 地图应用相关
- 运行符
- web安全
- 新窗口打开
- xss
- 分享交流
- php环境搭建及xhr交互
- node环境搭建及xhr交互
- node之socketio
- svg之入门介绍
- svg动画
- vue之搜索联想
- vue之登录和echarts
- vue之组件交互与slot
- vue之loading
- vue之上传进度
- webpack及cli
- 开发技巧
- 常用
- 移动端
- 错误处理
- 预加载
- 代理判断
- 数组扩展
- 对象扩展
- 字符串扩展
- 语音播报
- 收集
- 文章/日记
- 框架/库/插件
- 工具
- 学习网站
- 专业术语
- 正则
- 常用验证
- 方法基础
- es6扩展
- 深入实践
- 快捷使用
- html
- css
- http协议
- http
- https
- socket
- 地图/图表
- mapbox
- echarts
- arcgis
- MapView及事件
- 添加WMS/WMTS层
- 增删点线面
- 入门使用
- popup弹层
- 大数据处理
- 批量点
- 批量线
- 在线绘制
- GraphicLayer显示/隐藏
- 动态改变位置
- 去除版权信息
- 添加控件
- Symbol
- 自定义path标记
- 图片标记
- 文本标记
- 旋转
- UI
- 自定义
- 3D地图
- 创建实例
- basemap
- 底图切换
- 自定义底图
- 中心和范围
- pupup弹层更新
- 坐标转换
- 方向线
- leaflet
- amap
- 框架/类库/脚手架
- vue
- 常见问题
- 组件框架
- vue-router
- 命名视图
- url参数映射到prop
- sublime支持
- 随手记
- 常用功能
- threejs
- 常用效果
- 其他特效
- requirejs
- 简单使用
- jquery
- 方法扩展
- 使用笔记
- 组件扩展
- react
- 党见问题
- 学习笔记
- 学习笔记-进阶
- react-redux
- react-router
- redux
- 其他模块说明
- 组件框架
- sublime支持
- gulp
- 安装使用
- js压缩
- css压缩
- 组合使用
- copy文件
- 项目使用
- protobuf
- 入门
- layui
- 登录验证
- laydate
- 安装工具
- yarn
- reactNative
- 入门介绍
- vueNative
- 入门介绍
- 版本控制
- git常用
- git扩展
- git问题
- git其他
- git扩展2
- 编辑器
- vscode
- atom
- webstorm
- 插件
- clipboard
- 奇淫巧技
- js
- 个性打印
- css
- 滤镜效果
- 文本省略
- 当前色
- 新特性
- 花样边框效果
- 波纹效果
- 个性placeholder
- 伪元素内容
- 容器居中
- 知识点
- js
- 递归
- 沙箱
- 内存泄漏
- es6语法
- 变量介绍
- FileRead
- ajax
- web存储
- css
- rem布局