ES6

老孔不吃肉
62 阅读4分钟

1/this关键字

call

调用函数，改变this，参数1，参数2..

精准检测数组类型 Object.toString.call(数组)

将伪数组转为数组 [].slice.call()

apply

调用函数，改变this，参数数组

bind

复制函数，并改变this的指向，返回新函数

2/let 和 const 命令

2.1 let

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效

不存在变量提升

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

暂时性死区

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

不允许重复声明

// 报错
function func() {
  let a = 10;
  let a = 1;
}

2.2 const

const声明一个只读的常量。一旦声明，常量的值就不能改变。

3/箭头函数

对匿名函数做简写

var f = v => v;

// 等同于
var f = function (v) {
  return v;
};
f(1) // 1

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

var f = () => 5;
// 等同于
var f = function () { return 5 };

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

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。 箭头函数有几个使用注意点。

（1）箭头函数没有自己的this对象（详见下文）。

（2）不可以当作构造函数，也就是说，不可以对箭头函数使用new命令，否则会抛出一个错误。

（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

4/对象的简写

image.png

image.png

4/解构赋值

以前，为变量赋值，只能直接指定值。

let a = 1;
let b = 2;
let c = 3;

ES6 允许写成下面这样。

let [a, b, c] = [1, 2, 3];

对象的解构赋值

let obj = { foo: 'aaa', bar: 'bbb' };
let { foo, bar } = obj;
let { foo:a, bar:b } = obj;//取别名后原来的变量名无法使用
foo // "aaa"
bar // "bbb"

5 ... 运算符

分解数组 分解对象 将多个值合并成数组

fn（。。。arr）{} fn（1，2）fn（1，2，3，4）

6、MAP

Map是以键值对的形式 Map中的键可以是任何类型

const map = new Map([
  ['name', '张三'],
  ['title', 'Author']
]);

Object中的键是字符串

//定义Map
let map = new Map()
let map = new Map({['age',20],[obj,'对象']})
//设置Map键值对
map.set('age1',33) //如果存在就是修改 不存在就是添加
//获取Map键值
map.get('age1')
//删除Map键值对
map.delete('age1')
//判断属性是否在map中
map.has('age')
//查看map中键值对个数
map.size
//清空
map.clear()
//获取map中所有的键
map.keys()
//获取map中所有的值
map.values()
// for Each()

Map 结构转为数组结构，比较快速的方法是使用扩展运算符（...）。

const map = new Map([  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

[...map.keys()]
// [1, 2, 3]

[...map.values()]
// ['one', 'two', 'three']

[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]

[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]

结合数组的map方法、filter方法，可以实现 Map 的遍历和过滤（Map 本身没有map和filter方法）。

const map0 = new Map()
  .set(1, 'a')
  .set(2, 'b')
  .set(3, 'c');

const map1 = new Map(
  [...map0].filter(([k, v]) => k < 3)
);
// 产生 Map 结构 {1 => 'a', 2 => 'b'}

7、Set

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 上面代码也展示了一种去除数组重复成员的方法。

// 去除数组的重复成员
[...new Set(array)]

上面的方法也可以用于，去除字符串里面的重复字符。

[...new Set('ababbc')].join('')
// "abc"

Set 结构的实例有以下属性。

  • Set.prototype.constructor：构造函数，默认就是Set函数。
  • Set.prototype.size：返回Set实例的成员总数。

Set 实例的方法分为两大类： 操作方法（用于操作数据）和遍历方法（用于遍历成员）。下面先介绍四个操作方法。

  • Set.prototype.add(value)：添加某个值，返回 Set 结构本身。
  • Set.prototype.delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
  • Set.prototype.has(value)：返回一个布尔值，表示该值是否为Set的成员。
  • Set.prototype.clear()：清除所有成员，没有返回值

Set 结构的实例有四个遍历方法，可以用于遍历成员。

  • Set.prototype.keys()：返回键名的遍历器
  • Set.prototype.values()：返回键值的遍历器
  • Set.prototype.entries()：返回键值对的遍历器
  • Set.prototype.forEach()：使用回调函数遍历每个成员

8、for of

for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、后文的 Generator 对象，以及字符串,不能遍历对象

const arr = ['red', 'green', 'blue'];

for(let v of arr) {
  console.log(v); // red green blue
}

var arr = ['a', 'b', 'c', 'd'];

for (let a in arr) {
  console.log(a); // 0 1 2 3
}

for (let a of arr) {
  console.log(a); // a b c d
}

上面代码表明，for...in循环读取键名，for...of循环读取键值。

avatar
文章
阅读
粉丝