ES6常用语法

ES6

1. 模板字符串

var name = 'xiuyan'   
var career = 'coder' 
var hobby = ['coding', 'writing']
var finalString = `my name is ${name}, I work as a ${career} I love ${hobby[0]} and ${hobby[1]}`

2. var 和let const的区别

（1）var和let定义的是变量，可修改；const定义的是常量，不可修改；
（2）let和const有块级作用域，var没有
（3）var存在变量提升，ES6规定let和const不存在变量提升

let a = 5
let a = 7   // Identifier 'a' has already been declared

const e = 9
const e = 9  // Identifier 'e' has already been declared

var a = 4
var a = 5
console.log(a)  // 5

变量提升：
什么时变量提升： 在执行一段上下文的时候，执行之前会先分析一下有没有var定义的变量，如果有，会将定义的变量提前拎出来，声明为undefined。

为什么有变量提升：JS 也有编译阶段，js是一边编译一边执行，在这个短暂的编译阶段里，js引擎将var定义的变量提前拎出来，声明为undefined，所以存在变量提升。

//变量提升  ES5
console.log(a)   //undefined
var a = 100

/* var a
console.log(a)
a = 200 */

函数声明也有变量提升，但是函数声明提升优先于变量提升。

console.log(a)            // [Function: a]
a()                       // 函数a   
var a = '变量a'
function a () {
  console.log('函数a')
}

优先级：函数声明>函数参数>函数局部变量声明

function b (i) {
  console.log(i)       // // [Function: a]
  var i = '变量i'
  function i () {
    console.log('函数i')
  }
}
b(4)

function b (i) {
  console.log(i)              // 4
  var i = '变量i'               // 变量i
  console.log(i)
  // function i () {
  //   console.log('函数i')
  // }
}
b(4)

暂时性死区：

ES6 中有明确的规定：如果区块中存在 let 和 const 命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。假如我们尝试在声明前去使用这类变量，就会报错。

这一段会报错的危险区域，有一个专属的名字，叫”暂时性死区“。
块级作用域：
ES6中才有的块级作用域：一对花括号内的代码都算一个块级作用域。
当我们用 let 或者const声明变量时，变量会被绑定到它被声明的块作用域上。

for(var i = 0;i<10;i++) {
    var j = i+1
}
console.log(i,j) //10,10 

for(let i = 0;i<10;i++) {
    let j = i+1
}
console.log(i,j) // i is not defined, j is not defined

const：

1. const 声明的变量，必须在声明同时被初始化，否则会报错

   const c   //Missing initializer in const declaration 
   c = 7
   

2. const 声明的变量，在赋值过后，值不可以再被更改。否则同样会报错；但这个规则在声明引用类型时有点不同——引用类型的属性值（包括数组的元素）可以被更改，只要你不修改变引用的指向。

   const me = {
     name: 'xiuyan'
   }
   me.name = 'Bear' // 没问题
   //这样修改 name 这个属性值，而 me 对象的引用仍然指向原有的内存地址
   
   const me = {
     name: 'xiuyan'
   }
   me = {
     name: 'xiuyan'
   } // 报错  // // Assignment to constant variable.
   //这样就相当于重新给 me 赋值了，是在尝试把 me 的引用指向一个全新的对象、指向另一块内存空间。
   

3. 箭头函数

箭头函数和普通函数的区别：

1. 简化匿名函数的写法
2. 箭头函数是匿名函数，不能作为构造函数，不能使用new
3. 箭头函数不能绑定arguments，取而代之使用rest参数…解决

   function A(a){
     console.log(arguments);
   }
   A(1,2,3,4,5,8);
   // [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ] // arguments是一个类数组对象
   let C = (...args) => {
     console.log(args);
   }
   C(3,82,32,11323);
   // [3, 82, 32, 11323] // 利用rest参数...将参数序列转化为数组
   

4. 箭头函数没有原型属性
5. 普通函数的this由函数调用时的执行上下文动态决定
   而箭头函数的this是继承上级作用域的this
6. 不能使用call，apply，bind函数去直接修改箭头函数的this指向
7. 箭头函数不能当作Generator函数，不能使用yeild关键字

4. 解构赋值

数组的解构：以元素的位置为匹配条件来提取我们想要的数据

const [a, b, c] = [1, 2, 3]   // a 1 // b 2 // c 3
const [a,,c] = [1,2,3]         // a 1  // c 3

对象的解构： 以属性的名称为匹配条件，来提取我们想要的数据

const stu = {
  name: 'Bob',
  age: 24
}
const { name, age } = stu // name "Bob" // age 24

考点1：如何提取高度嵌套的对象里的指定属性？

const school = {
   classes: {
      stu: {
         name: 'Bob',
         age: 24,
      }
   }
}
const { classes: { stu: { name } }} = school
name // "Bob"

考点2：解构同时重命名

const { classes: { stu: { name: newName } }} = school
newName // 'Bob'

4. 扩展运算符…

对象扩展运算：取出参数对象中的所有可遍历属性，拷贝到当前对象之中，类似于

Object.assign()方法

const me = { 
  name: 'xiuyan',
  age: 24
}

const meCopy = { ...me }   // Object.assign({}, me)

meCopy // {name: "xiuyan", age: 24}

数组扩展运算：…指的是Spread/Rest操作符

function mutiple(x, y) {
  return x*y
}
const arr = [2, 3]
mutiple(...arr) // 6
// 当被用于迭代器中时，它是一个 Spread 操作符：

function A(a){
  console.log(arguments);
}
A(1,2,3,4,5,8);
// [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ] // arguments是一个类数组对象
let C = (...args) => {
  console.log(args);
}
C(3,82,32,11323);
// [3, 82, 32, 11323] // 利用rest参数...将参数序列转化为数组

// ...被用在函数形参上时，可以把一个分离的参数序列整合成一个数组,常用于获取函数的多余参数，是一个Rest操作符

剩余参数…args和 arguments对象的区别
剩余参数args和 arguments对象之间的区别主要有三个：

• 剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参。
• arguments对象不是一个真正的数组，而剩余参数是真正的 Array实例，也就是说你能够在它上面直接使用所有的数组方法，比如 sort，map，forEach或pop。
• arguments对象还有一些附加的属性 （如callee属性）。
  考点1：合并两个数组

const arr1 = [1, 2, 3, 4]
const arr2 = [5, 6, 7, 8]
const newArr = [...arr1, ...arr2] // [1, 2, 3, 4, 5, 6, 7, 8]

5. 类数组的转换(重点重点)

类数组：必须是一个对象，且有length属性
考点：如何把类数组对象转换为真正的数组？

const arrayLike = {0: 'Bob', 1: 'Lucy', 2: 'Daisy', length: 3 }

• Array原型上的slice方法—— 这个方法如果不传参数的话会返回原数组的一个拷贝，因此可以用此方法转换类数组到数组：

  const arr = Array.prototype.slice.call(arrayLike);
  

• Array.from方法——这是 ES6 新增的一个数组方法，可以把类数组转为数组：

  const arr = Array.from(arrayLike);
  

• 扩展运算符——"…"也可以把类数组对象转换为数组，但前提是这个类数组对象上部署了遍历器接口。在这个例子中，arrayLike 没有部署遍历器接口，所以这条路走不通。
  但一些对象，比如函数内部的 arguments 变量（它也是类数组对象），就满足条件，可以用这种方法来转换：

  function demo() {
    console.log('转换后的 arguments 对象：', [...arguments])
  } 
  demo(1, 2, 3, 4)
  
  // 	[Arguments] { '0': 1, '1': 2, '2': 3, '3': 4 }
  // 转换后的 arguments 对象：[1, 2, 3, 4]
  

6. ES6中的类

extends 允许一个子类继承父类，需要注意的是，子类的constructor 函数中需首先执行 super() 函数。
也可以在子类方法中调用父类的方法，如super.parentMethodName()。

7. 函数的参数默认值

// ES6之前，当未传入参数时，text = 'default'；
function printText(text) {
    text = text || 'default';
    console.log(text);
}

// ES6；
function printText(text = 'default') {
    console.log(text);
}

printText('hello'); // hello
printText();// default

function move ({ x, y } = { x: 0, y: 0 }) {
  return [x, y]
}

console.log(move({ x: 3, y: 8 }))
console.log(move({ x: 3 }))
console.log(move({}))
console.log(move())
// [3, 8]
// [3, undefined]
// [undefined, undefined]
// [0, 0]

8. iterable类型

ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型，具有iterable类型的集合可以通过新的for … of循环来遍历。

ES7常用新特性

1. 新的一些方法

1.存在性判定：以前，当我们想判断一个字符/字符串是否在某字符串中时，只能用 indexOf > -1 来做。现在 ES6 提供了三个方法：includes、startsWith、endsWith，它们都会返回一个布尔值来告诉你是否存在。

• includes：判断字符串与子串的包含关系：

  const son = 'haha' 
  const father = 'xixi haha hehe'
  
  father.includes(son) // true
  

• startsWith：判断字符串是否以某个/某串字符开头：

  const father = 'xixi haha hehe'
  
  father.startsWith('haha') // false
  father.startsWith('xixi') // true
  

• endsWith：判断字符串是否以某个/某串字符结尾：

   const father = 'xixi haha hehe'
  
    father.endsWith('hehe') // true
  

2.自动重复： 我们可以使用 repeat 方法 来使同一个字符串输出多次（被连续复制多次）：

const sourceCode = 'repeat for 3 times;'
const repeated = sourceCode.repeat(3) 

console.log(repeated) // repeat for 3 times;repeat for 3 times;repeat for 3 times;

2. Object.values/Object.entries（ES8）

ES5 引入了Object.keys方法，返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键名。
Object.values方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键值。
Object.entries方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键值对数组。

3. 字符串补全长度

let c = str.padEnd(5,“a”);
let d = str.padStart(5,“a”);

4. async/await