ECMAScript6入门精简摘要@慕课网原创_慕课网

ES6

内容来源于阮一峰ECMAScript入门
有缩略和精简，大的特性中没有generator函数和promise对象。
细节上择要，备查。

新增let

增加块级作用域

解构赋值，同结构赋值

var [foo, [[bar], baz]] = [1, [[2], 3]]

字符串新增函数

codePointAt()相当于charAt()，但能正确处理4字节字符，如UTF-16的中文。
contains(),startsWith(),endsWith()
查询，头部，尾部。第二参数表示开始搜索位置。
s.startsWith("o", 4) // true
s.endsWith("o", 8) // true
s.contains("o", 8) // false

repeat()将原字符串修改N次返回

"x".repeat(3) // "xxx"
"hello".repeat(2) // "hellohello"

模板字符串
``反引号表示。

var obj = {x: 1, y: 2};
console.log(`${obj.x + obj.y}`)

数组新增函数

Array.from()将对象转换为数组
Array.of()构造数组，避免array(3)这样的语义分歧

find()和findIndex()返回第一个符合要求元素的数值（位置）

[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10

fill()数组填充

['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

数组推导

var years = [ 1954, 1974, 1990, 2006, 2010, 2014 ];
[for (year of years) if (year > 2000) year];
// [ 2006, 2010, 2014 ]
[for (year of years) if (year > 2000) if(year < 2010) year];
// [ 2006]
[for (year of years) if (year > 2000 && year < 2010) year];
// [ 2006]

对象增强

属性表达简化

var Person = {
name: '张三',
//等同于birth: birth
birth,
// 等同于hello: function ()...
hello() { console.log('我的名字是', this.name); }
};

属性名表达式
```
let obj = {
};
```

函数增强

参数默认值

function foo({x, y = 5}) {
console.log(x, y);
}
foo({}) // undefined, 5
foo({x: 1}) // 1, 5
foo({x: 1, y: 2}) // 1, 2

rest参数（...value）
rest参数必须在所有参数的最后

function add(...values) {
let sum = 0;
for (var val of values) {
  sum += val;
}
return sum;
}
add(2, 5, 3) // 10

扩展运算符(...)
只要有迭代接口都可用
```
var numbers = [4, 38];
add(...numbers) // 42
```

箭头函数
(val）=> {function}

var sum = (num1, num2) => { return num1 + num2; }
};
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};

箭头函数绑定定义时的对象，而不是使用时的对象

新增数据结构

set

特点:类似数组，内部元素不重复。可迭代。
set连续添加空对象不相等，内部元素以===判定相等性。

方法:add,delete,has,clear（增，删，查，清空）

技巧：运用扩展运算符和set结构，去除数组重复元素

let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)]; 
// [3, 5, 2]

Map

特点：类似于对象字面量，但键可以使各种类型的数值（包括对象）。

方法:
set,get,has,delete,delete,clear

var m = new Map(); 
m.set("edition", 6)        // 键是字符串
m.set(262, "standard")     // 键是数值
m.set(undefined, "nah")    // 键是undefined
var hello = function() {console.log("hello");}
m.set(hello, "Hello ES6!") // 键是函数
m.has("edition")     // true
m.has("years")       // false
m.has(262)           // true
m.has(undefined)     // true
m.has(hello)         // true
m.delete(undefined)
m.has(undefined)       // false
m.get(hello)  // Hello ES6!
m.get("edition")  // 6

遍历:

for (let [key, value] of map) {
console.log(key, value);
}

类和模块

类和模块内部默认是严格模式，考虑到未来所有的代码，其实都是运行在模块之中，所以ES6实际上把整个语言升级到了严格模式

class关键字

class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '('+this.x+', '+this.y+')';
}
}
\\相当于ES5的
function Point(x,y){
this.x = x;
this.y = y;
}
Point.prototype.toString = function () {
return '('+this.x+', '+this.y+')';
}

可使用extends继承，终于不用折腾尼玛原型链了

class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y); 
// super指代父类同名方法。等同于super.constructor(x, y)
this.color = color;
}
toString() {
return this.color+' '+super();
}
}

模块化
模块定义 export

export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
//相当于
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};
//输出函数：
export function area(radius) {
return Math.PI * radius * radius;
}
export function circumference(radius) {
return 2 * Math.PI * radius;
}
//输出匿名函数：
export default function () {
console.log('foo');
}

模块加载 import&module

import

import customName,{firstName, lastName, year，area，circumference} from 'profile';
//从模块文件中加载变量核函数,其中customName为匿名函数名称，可任意指定

module

module pofile from 'profile';
//相当于
import * as profile from 'profile';
//访问变量使用
profile.area

inpoort模块后可继续export，继承模块。

ECMAScript6入门精简摘要原创