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

Author note(题记)：

ECMAscript is international standard of javascript。

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

let and const 

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

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

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]

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

vs

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

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

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

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

字符串扩展 

unicode表示法

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

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

遍历字符串 

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

 模板字符串

提示：这个场景用的最多

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(）

String.fromCharCode(0x20BB7)

正则

RegExp 构造函数

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

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

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

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

数值的扩展

Number.parseInt(), Number.parseFloat()

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

Number.isInteger()

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

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

Math对象的扩展

Math.trunc()

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

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。

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

   函数的扩展

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

  vs es6

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

  当然下边这个更好一些

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

  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()

  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()是对键值对的遍历。

  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‘

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

  Symbol

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

  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

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

  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对象

  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);

  async function f() {
    return 'hello world';
  }
  f().then(v => console.log(v))

  模块化

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

  结语：

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

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