【ES6】学Vue前必须掌握的内容（上）

目录

变量声明 ⭐

解构 ⭐

① 数组解构[ ]

② 对象解构{}

③ 字符串解构

扩展 

① 函数的扩展 ⭐  

res参数（剩余参数）

严格模式

name属性

箭头函数 ( 参数 ) => { 函数体 } 

② 数组的扩展 ⭐

Array.from()

Array.of() 

③ 对象的扩展 ⭐  

Object.defineProperty

Object.freeze

Object.setPrototypeOf()，Object.getPrototypeOf()

④ 运算符的扩展⭐​  

扩展运算符 ... 

链判断运算符?.

⑤ 字符串扩展：

模板字符串⭐

其他扩展 

⑥ Number扩展：

---

变量声明 ⭐

• 采用 let 和 const 分别声明变量和常量。
• 不用var所以不存在变量提升。

解构 ⭐

① 数组解构[ ]

     等号左边允许存在默认值。变量的取值按照顺序。  

//之前的写法
var arr=[1,2];
var a=arr[0];
var b=arr[1];
//ES6
let [a,b]=[1,2];
console.log(a,b) -> 1 2
let [c,d]=[3]
console.log(c,d) -> 3 undefined
let [f=4,g=5,h=6]=[,undefined,null];
console.log(f,g,h) -> 4 5 null

② 对象解构{}

     根据键值取值。

let obj={
    name:'hua',
    age:18
}
//不同名，则把左边的属性的值赋给右边自定义的变量
let {name:n,age:a}=obj;
console.log(n,a) -> 'hua' 18
console.log(name,age) ->打印报错 未声明
//同名的可以将name:name省略成name
let {age,name}=obj;
console.log(name,age) -> 'hua' 18

③ 字符串解构

     此时字符串被转换成一个类似于数组的对象。

let str='hello World';
let [a,b,c]=str;
console.log(a,b,c,typeof(a)) -> h e l string

扩展 

① 函数的扩展 ⭐  

res参数（剩余参数）

 用于获取函数的多余参数，会将多余的实参放进一个数组里。

function fn(a,...arr){
    console.log(a);             -> 1
    console.log(arr);           -> ['a', 'b'] 
    console.log(arr[0]);        -> a
    console.log(arr[2]);        -> undefined     
}
fn(1,'a','b');//方法中的定义了4个参数，但调用函数时只使用了3个参数，ES6 中并不会报错。

注意，res参数之后不能再有任何参数。函数的length属性（指明函数形参的个数）不包括res参数

(function(a){}).length //1
(function(...a){}).length //0

严格模式

规定只要函数参数使用了默认值、解构赋值或者扩展运算符，那么函数内部就不能显示设定为严格模式，会报错。

function fn(a,b=1){ //报错
    'use strict';
}

 两种方式可以避免这种限制：

• 设定全局性的严格模式；
• 把函数包在一个无参数的立即执行函数里。

name属性

具名函数返回函数原本的名字，匿名函数返回实际的函数名

function fn(){}
let fun=function(){}
fn.name  //fn
fun.name //fun （ES5中返回空字符串）

箭头函数 ( 参数 ) => { 函数体 } 

注意要点：

• 不会创建自己的this，只会从自己的作用域链的上一层继承this；⭐
• 不能作为构造的实例化对象，即不能用new；
• 不能使用argument函数内置对象；
• 当只有一个参数时，小括号可以省略；
• 当函数体只有一条语句且为return，可以省略return和大括号；
• 不能使用yield命令，因此不能作为Generator函数。

由于箭头函数this指向的特殊性，箭头函数不适用于定义对象的方法，且该方法内部包括this。

s = 21;
const obj = {
  s: 42,
  f: () => console.log(this.s)//继承作用域的上一层的this，指向全局
};
obj.f() // 21