ES6_常用语法

let和const命令

console.log(a) // 变量提升 undefined
var a = 1;
console.log(b) // 报错， not defined
let b = 1;

// 块级作用域
{
  var a1 = 1
  let b1 = 2
}
console.log(a1) // 打印1 var 变量没有块级作用域,具有函数作用域
console.log(b1) // 报错，let具有块级作用域 

// const 和 let的区别
// const 一般用于定义常量，不可更改(不更改内存地址)
let a2 = 1
const b2 = 2

a2 = 2  
b2 = 3 // 报错， 不可更改

const b3 = {a: 1}
b3 = {a: 2} // 报错
b3.a = 'abc' // 不更改内存地址，不会报错

模板语言

模板语言使用一对``来表示
let a = `
  console.log(a)
  console.log(a)
  console.log(a)
`
console.log(a) // 原样输出

**模板语言使用变量**
let b = 10
let str = `hello world ${b}` 
console.log(str) // hello world 10

函数默认参数，默认值

function add (flag) { return flag?true:false } 
// 参数默认值
function incr(flag=true) { return flag?true:false } 
console.log(add()) // 返回false
console.log(incr()) // 返回true

// 普通函数
let arr = [1,2,3]
arr.map(function(item){
  return item + 2;
})
// 箭头函数
arr.map(item => item + 2);
// 1. 当参数只有一个的时候可以省略括号，
// (item, index) => item + 2 或者 () => item + 2
// 2. 当函数体只有一条语句时，表示该语句执行并return,超出2条语句必须添加{}
// item => {let b = 2; return item + b}

// 箭头函数和普通函数的区别
// 箭头函数没有this指向，普通函数this指向则是谁调用就指向谁

解构赋值

// 数组解构
let [a,b,c] = [1,2,3]   // 打印a=1, b=2, c=3

// 字符串解构
let [a,b,c] = "vue"     // 打印a=v, b=u, c=e

// 对象结构
let {n,m} = {n:1, m:2}  // 打印n=1, m=2
// 对象结构根据key值来赋值
let {n,m} = {m:2, n:1}  // 打印n=1, m=2
// {n,m}是{n:n, m:m}的简写

// 函数解构
function person ({ name }) {
  console.log(name)
}
let obj = {
  name: 'jack',
  age: 18
}
let obj2 = {
  age: 25,
}
person (obj) // 打印 jack， name = obj.name
person (obj2) // undefined， name = obj2.name

reset参数

当参数不确定几个时候用...表示

// rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。
function sum (...m) {
  let total = 0
  for (let i of m) {
    total += i
  }
  console.log(total) 
}
sum (1,2,3,4) // => 10
sum (1,2) // => 3

// ...扩展运算符

// 数组扩展
let [a, ...b] = [1,2,3,4] // a = 1, b = [2,3,4]
console.log(...[1,2,3,4]) // => 1 2 3 4
// 合并数组
let arr1 = [1,2], arr2 = [3,4]
newArr = [...arr1, ...arr2] // => [1,2,3,4]
// 字符串扩展 
let [x, ...y] = "vue" // x = 'v', y = ['u', 'e']
let str = "vue"
console.log(...str)  // v u e

// 对象扩展
let obj = {name: 'jack'}
let obj2 = {age: 18}
let obj3 = {...obj, ...obj2} 
console.log(obj3) // {name: 'jack', age: 18}

promise

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。
Promise 简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果
Promise 特点

• 对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。
• 一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected

const promise = new Promise(function(resolve, reject) {
  axios.get(url)    // axios基于promise封装
  .then (res => {
    resolve(res.data)  // resolve表示 已完成，这里调用相当于调用.then方法
  })
  .catch(err => {
    reject(err)  // reject表示失败，相当于调用.catch方法
  })
});

promise.then (res => {
  console.log(res) // 这里res就是resolve传递的参数
  return '11' 
  // 如果有返回值，不管是什么类型数据，都会封装成promise对象，所以才能使用链式语法调用.then方法
})
.then(res => {
  console.log(res) // 打印 '11'
  return new Promise((resolve, reject) => resolve('promise1'))
})
.catch(err => {
  console.log(err) // 抛出异常就是reject传递的参数
  // 注意： catch 只会捕获之前所有.then方法抛出的错误,如果后面还有.then方法则不会捕获，一般把catch方法写在最后面
})
.then(res => {
  console.log(res) // promise1
  throw '手动抛出异常' // 上面的catch方法并不会捕获这次的错误，需要后面链式语法调用.catch
})

// Promise.all()方法
const promise1 = new Promise((resolve, reject) => resolve('promise1'))
const promise2 = new Promise((resolve, reject) => resolve('promise2'))

// 解构赋值方式传参
Promise.all([promise1, promise2]).then(([res1, res2])=> {
  console.log(res1) // promise1
  console.log(res2) // promise2
})