es6

let / var/const

let
- 不能重复声明
- 是块级作用域

var 
- 可以重复声明
- 作用域: 全局作用域 
- 变量提升

const
- 常量 声明后不可以重新赋值 '地址值'
const obj = {
  name: 'ys',
  age: 25
}
Object.freeze(); // 冻结常量 对象内值也不可被修改  不能冻结多层对象  可以自己封装深层冻结
// 深冻结实现
function deepFreeze(obj) {
   freeze(obj)
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {  // 判断是否是自身的属性  因为for in 也会去循环 原型链上的属性
      // 判断是对象 
      if (typeof obj[key] === 'object') {
        deepFreeze(obj[key])
      }
   }
  }
}

解构赋值

// object
let obj = {a: 1, b: 2, d: 4}
let a = obj.a;
let b = obj.b;
let {a, b, c} = obj; // 1 2 undefined   名字必须一一对应
// array
let arr = ['a', 'b', 'c'];
let [f, f] = arr;   // 'a'  'b'  顺序是对应的
// 面试题快速交换数值
let a = 0;
let b = 1; 
[a, b] = [b, a ]
// string
let str = 'abc';
let [e, f] = str  // 'a' 'b' 同数据 顺序对应

let obj = {
   name: '小三',
   people: {
     name: '小四'
   }
}
let {name, prople: {name: myname}}  = obj
console.log(name, myname)  // name: myname 起别名 取重复key的时候会报错

展开运算符

let arr = [1,2,3,4];
let arr2 = ['a','b', 'c', 'd']
let arr3 =  ['a','b',...arr, 'c', 'd'];
// 剩余参数
let [a,b, ...c] = arr;  // 1 2 [3, 4]
// 对象展开
let obj = {a: 1, b: 2};
let obj2 = {..obj, c: 3, d: 4}  // {a: 1, b:2,c:3,d:4} 
let {a, b, ...c} = obj2 // 1 2 {c: 3, d: 4}
let obj3 = obj
obj3.a = 10  // obj.a 也是 10
let obj4 = {..obj} 
obj.c = 20 // obj.c 还是 3

Set 对象 / Map对象

// Set构造函数 用来构建某一类型的对象 - 对象实例化
let arr = [1,2,3,4,5, 1]
let s = new Set(arr);  // [1,2,3,4,5]  会去重 保留第一次出现的值
arr = [..s] // 去重后的数组
s.size // 数值的个数  相当于lengeh
s.clear() // 清空所有值 返回值 undefined
s.delete(4) // 删除值  成功返回true
s.add('a')  // 添加 也会被去重 返回set 本身 可以链式操作
s.get() 
s.has('a')  // true 是否包含  

let arr = [ ['a': 1], ['b': 2], [c: 3] ]
let m = new Map(arr); 
m.clear()  // clear() 清空
m.delete('a')  // key 删除某项  返回值 boolean
m.get('b')  // key 获取某项
m.has('c')  // key  是否包含 boolean
m.set(d, 4) // 设置一个值  返回本身

箭头函数

() => {} // 形参=>返回值
let fn = num => num*2; // fn(10)   20
let fn1 = (n1, n2) => n1* n2
let fn2 =  () => '返回值'  // 返回值
let fn3 = (a) => {
  console.log(a); 
  return a
}
let fn4 = () => ({name: ''ys, age: 25}) //不加 {} 会自动return 对象的{}和函数的{}语法冲突 用 ()包起来
// 差异
-  箭头函数没有 arguments  用 rest参数 (..arg)或者 (a, b, ...arg)
-  没有this 指向其声明时所在作用域的this(取外部的 this')
-  函数默认值 (a = 1)

数组的扩展

• Array.form 把一个类数组转换成真正的数组
  | 构造函数下的方法

lis = Array.form(lis) // 返回值 转换后的新数组
Array.form(lis, (item, index) => {
  return index
})  // 拿到index数组
let arr = [];
Array.forem(lis, function(item, index) => {
  return index
}, arr)  // this 指向 arr

• Array.of()

Array.of(1,2,3,4,5) // 返回新的数组

• Array.isArray()

Array.isArray('a') // 是否是数组 返回值 boolean

同步 / 异步

同步阻塞 异步非阻塞
异步

• setTimeout
• 图片加载
• ajax

// es5 常用方法通过传入回调函数 
  function test (cb) {
    setTimeout(() => {
      console.log(111)
      cb && cb()
    })
  }
  test(function () {console.log(2222)})

  let p = new Promise((resolve, reject) => {
    resolve("111") 
  })
  console.log(p)  // 返回的promise对象 有状态和值
  // 三种状态 pending resolved(火狐是fullfilled) reject
  // primise对象有一个then方法 有俩个参数
  p.then((res) => {
    // 可以拿到resolve的值
  }, err =>{

  })

  p.then((res) => {
    // 可以拿到resolve的值
  }).catch((err) => {
    
  })

总结:

• 返回promise对象 so .then().then() 支持链式操作
• 链式操作有俩个参数 .then 和.catch
• 有三种状态 (pendding, resolved, reject) 会提供一个then函数,then 函数会有俩个参数(res, err), then函数有三种返回值(返回promise对象)
  • 没有返回值会拿到和之前状态一样promise对象
  • 有返回值 返回promise对象
  • 返回promise对象
• 看起来优雅一些 解决了回调地域嵌套(不是终极)

扩展Promise

Promise.all()

 let p1 = new Promise((res, reg) => {
    res(1)
  })
  let p2 = new Promise((res, reg) => {
    // res(2)
    reg(22)
  })
  let p3 = new Promise((res, reg) => {
    res(3)
  })
// 所有的promise都执行成功才会有结果
  Promise.all([p1, p2, p3]).then(res => {
    console.log(res, '111111111')
  }).catch(err => {
    console.log(err)
  })

Prpmise.race()

Prpmise.race([p1,p2,p3]).then((res) => {
  // 拿到最快的一个结果 不管成功失败
 console.log()
})

// 拿到成功状态(resolve)的promise
Promise.resolve('1111')
Promise.reject('1111')

async/await

await后面需要一个promise对象

// 多个await等待执行 需要放在一个async里面
// 异常捕获用try{}catch(e){}
/// async await 将异步变成同步写法
async function asyncFn() {
  try {
    let p1 =] await new Promise((res, reg) => {  // 拿到 resolve()传递的值
      setTimeout(() => {
       console.log(1)
       res(1) 
      })
    })

    let p2 = await new Promise((res, reg) => {
      setTimeout(() => {
       console.log(2)
       res(2) 
     })
    })
  } catch (e) {
    console.log(e)
  }
}

怎么把函数变成一个promise对象?

function fn () {
  return new Promise((res) =>{
    res(111)
  });
}

### babel 工具


### 主流打包工具
webpack gulp grunt rollup

### tip
JSON.parse(JSON.stringify()) // 对有undefined 和function的深拷贝有问题 会丢失项

// 问题 这个为什么能实现深拷贝  等翻翻资料再说