前端基础：回顾es6相关知识

Author note(题记)：

ECMAscript is international standard of javascript。

ECMA 是 js的国际标准版语言。

let and const

为什么之前用var现在需要用let，const呢？

其实就是因为规范作用域的问题。var的作用域无块级

javascript 复制代码

for (var i = 0; i < 10; i++) {
      console.log('i')
    }
    console.log(i)// 10
    for (let j = 0; j < 10; j++) {
      console.log('j')
    }
    console.log(j) // 报错

我们看这个代码会发现代码块里边使用var外边也能访问，而let就不能，所以let更加严谨，const也一样，只不过const是声明常量的词，用作不改变的变量内容。

顺便提一下var的变量提升也是鸡肋的存在，不太严谨，所以let与const的暂时性死区也是解决这个问题的。

解构赋值

功能就是为了方便取值，解构解构先了解之前的结构才能解开，结构需一样，但取值可少取

比如let 【x,y] = [1,2,3]

javascript 复制代码

let arr = [1,2,3]
    let a = arr[0]
    let b = arr[1]
    let c = arr[2]
    console.log('数据是', a, b, c)

javascript 复制代码

let [a,b,c] = [1,2,3]
    console.log('数据是', a, b, c)

你会发现es6的写法真的很nice

事实上，只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值。

使用场景上对象的解构赋值非常常用，比如使用Vuex，路由，第三方模块等等。

字符串扩展

unicode表示法

ES6 加强了对 Unicode 的支持，允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的 Unicode 码点。

javascript 复制代码

let b = '\u0061'
    console.log('数据是', b) // a

遍历字符串

javascript 复制代码

for (let a of 'hep') {
      console.log('数据是', a)
    }

模板字符串

提示：这个场景用的最多

javascript 复制代码

let name = 'john'
    let age = '18'
    let sentence = 'my name is' + name + ',' + 'my age is' + age
    console.log(sentence)
    let esSentence = `my name is ${name},my age is ${age}`
    console.log(esSentence)

字符串的新增方法

String.fromCodePoint(）

javascript 复制代码

String.fromCharCode(0x20BB7)

正则

RegExp 构造函数

第一种情况是，参数是字符串，这时第二个参数表示正则表达式的修饰符（flag）

javascript 复制代码

var regex = new RegExp('xyz', 'i');
// 等价于
var regex = /xyz/i;

第二种情况是，参数是一个正则表示式，这时会返回一个原有正则表达式的拷贝。

javascript 复制代码

var regex = new RegExp(/xyz/i);
// 等价于
var regex = /xyz/i;

数值的扩展

Number.parseInt(), Number.parseFloat()

javascript 复制代码

// ES6的写法
Number.parseInt('12.34') // 12
Number.parseFloat('123.45#') // 123.45

Number.isInteger()

Number.isInteger()用来判断一个数值是否为整数。

javascript 复制代码

Number.isInteger(25) // true
Number.isInteger(25.1) // false

Math对象的扩展

Math.trunc()

Math.trunc方法用于去除一个数的小数部分，返回整数部分。

javascript 复制代码

Math.trunc(4.1) // 4
Math.trunc(4.9) // 4
Math.trunc(-4.1) // -4
Math.trunc(-4.9) // -4
Math.trunc(-0.1234) // -0

Math.sign()

Math.sign方法用来判断一个数到底是正数、负数、还是零。对于非数值，会先将其转换为数值。

它会返回五种值。

参数为正数，返回+1；
参数为负数，返回-1；
参数为 0，返回0；
参数为-0，返回-0;
其他值，返回NaN。

javascript 复制代码

Math.sign(-5) // -1
Math.sign(5) // +1
Math.sign(0) // +0
Math.sign(-0) // -0
Math.sign(NaN) // NaN

函数的扩展

javascript 复制代码

function Point(x, y) {
  this.x = x || 0;
  this.y = y || 0;
}

const p = new Point();
p // { x: 0, y: 0 }

vs es6

javascript 复制代码

function Point(x = 0, y = 0) {
  this.x = x;
  this.y = y;
}

const p = new Point();
p // { x: 0, y: 0 }

当然下边这个更好一些

我们再看下边这个结合解构赋值的例子

javascript 复制代码

function foo({x, y = 5}) {
      console.log(x, y);
    }

    foo({}) // undefined 5
    foo({x: 1}) // 1 5
    foo({x: 1, y: 2}) // 1 2

也就是当一个参数为复杂数据类型的时候使用更加的方便了

数组的扩展

合并数组es6之前用concat(),以后就let arr2 = 【...arr1】

Array.from()

javascript 复制代码

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5 的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6 的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

延申：[].slice.call()等同于Array.prototype.slice.call()

实例方法：entries()，keys() 和 values()

ES6 提供三个新的方法------entries()，keys()和values()------用于遍历数组。它们都返回一个遍历器对象（详见《Iterator》一章），可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

javascript 复制代码

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"

我们常常用Object.keys(obj).length来判断对象是否为null，arr.keys().length也可以啊，其实想一想直接arr.length就可以啊。

实例方法：includes()

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

之前经常使用这个去判断数据当中是否有某一个值，进行判断。

实例方法：flat()，flatMap()

数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组"拉平"，变成一维的数组。该方法返回一个新数组，对原数据没有影响。

对象的扩展

属性的简洁表示法

提示：这个你会见的最多比如import {name} from '@/name.js'

javascript 复制代码

const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}

// 等同于
const baz = {foo: foo};

Symbol

这个用的场景就是有些对象属性不想对外开发，想私有化就用它就对了

javascript 复制代码

let obj = {
   [Symbol('name')]: '一斤代码',
   age: 18,
   title: 'Engineer'
}

Object.keys(obj)   // ['age', 'title']

for (let p in obj) {
   console.log(p)   // 分别会输出：'age' 和 'title'
}

Object.getOwnPropertyNames(obj)   // ['age', 'title']

Set与Map

Set理解为数学的集合就行，Map就是为了解决键的多样化的设置，另外就是按顺序迭代，占用空间较小。

Proxy

可以理解的是这个比较重要，是对代码的再次编程。

javascript 复制代码

var proxy = new Proxy({}, {
  get: function(target, propKey) {
    return 35;
  }
});

proxy.time // 35
proxy.name // 35
proxy.title // 35

其实在Vue中我们知道数据的双向绑定Vue2使用的definePropty(),Vue3使用的就是Proxy

Promise 对象

这个非常关键，之前写过一篇。

promise的使用

async函数

这个也用的特别多，其实就是就是返回一个Promise对象

javascript 复制代码

function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function asyncPrint(value, ms) {
  await timeout(ms);
  console.log(value);
}

asyncPrint('hello world', 50);

javascript 复制代码

async function f() {
  return 'hello world';
}

f().then(v => console.log(v))

模块化

目前很多项目都是使用的import，export，比较常用

结语：

工作之余顺便看看之前的知识是一件开心的事，每一次看都会有新的体会。

Module 的语法 - ECMAScript 6入门 (ruanyifeng.com)