AntChen Front-end Dev Engineer

ES6学习小结

2016-12-30

1. for in 和 for of的区别

// 传统循环
for (var i = 0; i < Things.length; i++) {
  Things[i]
}
// 这种写法比较麻烦,因此数组提供内置的forEach方法。

myArray.forEach(function (value) {
  console.log(value);
});
// 缺点就是不能使用return break

用法

for in // 是遍历key值,****适合遍历对象****
for of // 是既可以遍历values值,也可以遍历keys值,(效率更高,es6新特性)

// for of用法:
// 1. 遍历val值
 var array = [1, 2, 3]
 for (let val of array) {
     console.log(val)
 }
 for (let val of array.values()) {
     console.log(val)
 }
 // 1, 2, 3

// 2. 遍历key值
 for(let key of array.keys()) {
     console.log(key)
 }
 // 0, 1, 2
 // 3. 遍历keys, values值
 for (let [ keys, values ] of array.entries()) {
    console.log(keys, values)
 }
 // 0 1
 // 1 2
 // 2 3

2. 把字符串转成数组

var obj = "hello"
console.log(Array.of(...obj))
// ["h", "e", "l", "l", "o"]

// 老方法
console.log(obj.split(''))

3. Array.form() 把数组的对象转成真正的数组

/* length 属性一定需要 */
var array = { length: 2, 0: 'a', 1: 'b' }
console.log(Array.from(array))
// ['a', 'b']

4. 变量默认值

// 不仅可以用在数组,对象也适用
var { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
// 对应的key值必要跟定义的相等

⚠️注意

var [foo = true] = [];
//默认值比较是 === 所以如果要然默认值生效,必须是undefind,不能是 null

var [x = 1] = [undefined];
x // 1

var [x = 1] = [null];
x // null

// 如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候,才会求值。

function f() {
  console.log('aaa');
}

let [x = f()] = [1];

5. 定义多个变量

let [a, b, c] = ['1', '2', '3']
// 用法
let [a, b] = [1, 2] // 数组
let { bar, foo } = { foo: "aaa", bar: "bbb" }; // 对象
// 换个名字用法
let [a, b: c] = [1, 2]
a // 1
c // 2

6. 变量赋值作用

// 1.交换变量的值
// [x, y] = [y, x];

var x = 1,
    y = 2;
[x, y] = [y, x]
console.log(x, y)
// 2 1

// 2. 从函数返回多个值
// 返回一个数组

function example() {
  return [1, 2, 3];
}
var [a, b, c] = example();

// 返回一个对象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
var { foo, bar } = example();

// 3. 解构赋值可以方便地将一组参数与变量名对应起来。

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

// 4.提取JSON数据
var jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

// 5. 函数参数的默认值
var fn = ({user = 'hello', password: 'world'}) => { ... }

7. map

var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

8. class 实现构造函数

class Person {
    constructor(name) {
        this.name = name;
    }
    describe() {
        return 'Person called '+this.name;
    }
}
var a = new Person('1')
console.log(a.describe())
// "Person called 1"

//注意简化的方法定义语法 —— 不再需要 function 关键字。也请注意类的各个部分之间没有逗号。

// 继承
class Employee extends Person {
    constructor(name, title) {
        super(name);
        this.title = title;
    }
    describe() {
        return super.describe() + ' (' + this.title + ')';
    }
}
var b = new Employee('1', '2')
console.log(b.describe())
// "Person called 1 (2)"

Comments