es6学习笔记

展开运算符...

展开运算符的作用是解构数组，然后将每个数组元素作为函数参数。

function add(...arr){
  console.log(a + b);
  console.log(arr) // [1, 2]
}
let a = 1,b = 2
add(a, b) // 3

有了展开运算符，我们操作数组的时候，就可以不再使用apply来指定上下文环境了。

//ES5的写法
let arr = [10, 20, 50, 40, 30]
let a = Math.max.apply(null, arr)
console.log(a) // 50

//ES6的写法
let arr = [10, 20, 50, 40, 30]
let a = Math.max(...arr)
console.log(a) // 50

在所有函数参数中，只有最后一个才可以被标记为不定参数。函数被调用时，不定参数前的所有参数都正常填充，任何“额外的”参数都被放进一个数组中并赋值给不定参数。如果没有额外的参数，不定参数就是一个空数组，它永远不会是undefined。

function foo(a,...arr) {
  console.log(a); // 1
  console.log(arr);// [23, 4, 5]
}
foo(1,23,4,5)
function bar(a, b, ...arr) {
  console.log(arr)// [] 空数组
}
bar(1, 2)

一个简单的可变参数函数containsAll给大家演示不定参数的用法。函数containsAll可以检查一个字符串中是否包含若干个子串，例如：containsAll("banana", "b", "nan")返回true，
containsAll("banana", "c", "nan")返回false。

es5写法

function containsAll(haystack) {
  for (var i = 1; i < arguments.length; i++) {
    var needle = arguments[i];
    if (haystack.indexOf(needle) === -1) {
      return false;
    }
  }
  return true;
}

es6写法

function containsAll(haystack, ...needles) {
  for (var needle of needles) {
    if (haystack.indexOf(needle) === -1) {
      return false;
    }
  }
  return true;
}

默认参数的临时死区

//这是个默认参数临时死区的例子，当初始化a时，b还没有声明，所以第一个参数对b来说就是临时死区。
function add(a = b, b){
  console.log(a + b)
}
add(undefined, 2) // b is not define

箭头函数

1. 箭头函数没有this，函数内部的this来自于父级最近的非箭头函数，并且不能改变this的指向。

2. 箭头函数没有super

3. 箭头函数没有arguments

4. 箭头函数没有new.target绑定。

5. 不能使用new

6. 没有原型

7. 不支持重复的命名参数。

const foo = a => a
foo(5) //5

//多个参数可以用() 括起来，函数体内不止一个表达式的时候可以用{}
const foo = (a, b) =>{
  console.log(a + b)
}
foo(1, 2)
//支持IIFE
const test = ((id) => {
  return {
    getId() {
      console.log(id)
    }
  }
})(18)
test.getId() // 18

//箭头函数给数组排序
const arr = [10, 50, 30, 40, 20]
const s = arr.sort((a, b) => a - b)
console.log(s) // [10,20,30,40,50]

对象方法简写

// ES5
const obj = {
  id: 1,
  printId: function() {
    console.log(this.id)
  }
}

// ES6
const obj = {
  id: 1,
  printId() {
    console.log(this.id)
  }
}

对象属性可计算

const id = 5
const obj = {
  [`my-${id}`]: id
}
console.log(obj['my-5']) // 5

es6的对象枚举顺序

如果对象中的key值为数字，将数字从小到大排序，如果对象中的Key值为字母，将字母从a-z进行排序

const state = {
  id: 1,
  5: 5,
  name: "eryue",
  3: 3
}

Object.getOwnPropertyNames(state) 
//["3","5","id","name"] 枚举key

Object.assign(state, null)
//{"3":3,"5":5,"id":1,"name":"eryue"} 

Object.setPrototypeOf()改变实例原型

let a = {
  name() {
    return 'eryue'
  }
}
let b = Object.create(a)
console.log(b.name()) // eryue
  
//使用setPrototypeOf改变b的原型
let c = {
  name() {
    return "sb"
  }
}    
Object.setPrototypeOf(b, c)    
console.log(b.name()) //sb

解构：解构是从对象中提取出更小元素的过程。赋值是对解构出来的元素进行重新赋值。

1. 对象解构
2. 数组解构
3. 混合解构
4. 解构参数

//对象解构

let obj = {
    a:1,
    b:2,
    name() {
        return "sb"
    }
}

let {a, b, c} = obj//错误
let {a, b, name} = obj//正确
//也可以使用展开运算符...
let {...arr} = obj

函数中使用解构赋值
//eg1
let props = {
  a: 1,
  b: 2
}
function test(value) {
  console.log(value)
}
test({a=3, b=3} = props) // {a: 1, b: 2}
//eg2
let props = {
  a: 1,
  b: 2
}
function test(value) {
  console.log(value)
}
test({a=3, b=3} = props) // {a: 1, b: 2}
//eg3 嵌套对象解构

let obj = {
  a: {
    b: {
      c: 5
    }
  }
}
const {a: {b}} = obj
console.log(b.c) // 5

//数组解构
let arr = [1, 2, 3]

//解构前2个元素
const [a, b] = arr
console.log(a,b) //1 2

//解构中间的元素
const [, b,] = arr
console.log(b) // 2

//克隆数组
let arr = [1, 2, 3, 4];
let [...a] = arr;
console.log(a) //[1,2,3,4] 

//嵌套数组解构
let arr = [1, [2, 3], 4];
let [a, [,b]] = arr;
console.log(a, b) // 1 3

//实际解构过程，左边的变量和右边的数组元素一一对应下标。
var a = arr[0],
_arr$ = arr[1],
b = _arr$[1];

//混合解构数组与对象
let obj = {
  a: {
    id: 1
  },
  b: [2, 3]
}

const {
  a: {id},
  b:[...arr]
} = obj;
console.log(id, arr) //id = 1, arr = [2, 3]

//解构参数
function Ajax(url, options) {
  const {timeout = 0, jsonp = true} = options
  console.log(url, timeout, jsonp)
};
Ajax('baidu.com', {
  timeout: 1000,
  jsonp: false
}) // "baidu.com" 1000 false