liaooo

标签： ES6

  • 初识Promise

    目的: Promise 是书写异步代码的另一种方式, 解决回调函数嵌套的问题（回调地狱）

    基本语法

    创建Promise对象

    new Promise的时候会执行传入的函数

    //Promise对象传入一个函数，函数提供两个函数参数resolve、reject
const promise = new Promise((resolve, reject) => {
  // 内部封装一个异步操作

  // 成功则调用resolve

  // 失败调用reject
})

    使用

    promise.then((res) => { ... }).catch((err) => { ... })

    Promise是一个构造函数

    Promise.prototype上包含then()、catch()方法

    通过then方法来指定成功的回调函数

    通过catch方法来指定失败的回调函数

    Promise的三种状态

    • pending: 待定（等待结果）
    • fulfilled: 成功 (已兑现), 调用了 resolve, Promise的状态就会被标记成成功
    • rejected: 失败 (已拒绝), 调用了 reject, Promise的状态就会被标记成失败

    一旦Promise的状态发生变化，状态就不会再改变了！就像他的名字Promise一样，承诺了就不会改变。

    Promise链式调用

    解决回调地狱的问题

    因为 Promise.prototype.then 和 Promise.prototype.catch 方法返回的是 promise，只要是 promise 对象都有这两个方法，所以它们可以被链式调用。

    import fs from 'then-fs'

fs.readFile('1.txt', 'utf-8').then(res => {
  console.log('读取成功:' + res);
  return fs.readFile('2.txt', 'utf-8')
}).then((res) => {
  console.log('读取成功:' + res);
  return fs.readFile('3.txt', 'utf-8')
}).then((res) => {
  console.log('读取成功:' + res);
}).catch(err => {
  console.log('读取失败:' + err);
})

  • 箭头函数

    作用: 简化匿名函数, 简化回调函数和普通函数的写法

    语法: () => {}, 小括号内书写形参, 大括号内写函数体

    let fn = (msg) => {
  console.log('Hello' + msg)
}

    简化语法

    • 如果形参只有1个, 可以省略小括号
    • 方法体只有一行代码, 可以省略大括号, 省略大括号后, 默认返回此结果
    //上例中的箭头函数可简化
let fn = msg => console.log('Hello' + msg)

fn('World!')

    注：方法体只有一行代码，且省略了大括号，如果函数有return，则也省略。

    也就是箭头函数只有一句代码并且省略大括号时，默认带有return，再写return则会报错。

    let fn = (a,b) => {
	return a + b
}

//可简化成
let fn = (a,b) => a + b

    this指向

    箭头函数的this指向的是外层作用域this的值

    let myObj = {
  a: function () {
    console.log(this)
  },
  b: () => {
    console.log(this)
  }
}
myObj.a() // myObj
myObj.b() // window

    其他

    • 箭头函数不能用作构造函数, 不能和new配合使用
    • 不能使用arguments

  • 剩余参数运算符、展开运算符

    …剩余参数运算符

    为了接收所有参数

    普通函数可以通过arguments获取全部参数，箭头函数没有arguments

    用于函数形参，必须放在形参最后一个！

    • 一般配合箭头函数, 因为箭头函数内不能用arguments
    • 必须出现在形参的最后面
    function youSum (a, ...args) {
  console.log(a, args)
}
youSum(5, 10) //5 [10]
youSum(5, 100, 200, 300) //5 [100,200,300]
youSum(5, 100, 200, 300, 400) //5 [100,200,300,400]

let mySum = (...args) => {
  console.log(args)
}
mySum(10, 20, 30, 40) //[10, 20, 30, 40]

    …展开运算符

    用于数组[]或对象{}中, 可以将数组的项或对象的键值对展开

    展开数组

    let arr = [1, 3, 5, 7]
console.log(...arr) // 打印数组的每一项 1,3,5,7
    拼接两个数组
    let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let newArr = [...arr1, ...arr2]
    求数组最大值
    let arr = [3, 100, 20]
let max = Math.max(...arr3)

    展开对象

    let obj1 = {
  name: 'Liao',
  age: 18,
}
let obj2 = {
  money: 10000000000,
  car: "没有"
}
// 相当于快速浅拷贝
let obj3 = {
  ...obj1,
  ...obj2,
  name: 'liao'
}
//obj3 === {name: 'Liao',age: 18,money: 10000000000,car: "没有",name: 'liao'}
//obj3的name属性放到...obj2前面，name属性则会被覆盖

  • 解构赋值

    概念: ES6 允许 按照一个模式, 从目标结构 (数组/对象) 中提取值, 赋予给变量, 解构的目的方便取值.
    目的: 优化取值的过程

    数组的解构

    • 完全解构
    • 不完全解构
    let arr = ["春天", "夏天", "秋天", "冬天"]

let [spr, sum, aut, win] = arr // 完全解构

let [spr, , aut] = arr // 不完全解构

    对象的解构

    • 基本解构
    • 解构重命名

    解构赋值只要两边解构相同就行，所以对象也是可以解构赋值的。但是需要注意的是对象和数组的解构有一个很大的区别：对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

    let obj = {
  name: 'liao',
  age: 18,
  desc: '不错'
}

// 1. 基本解构
let { name, age, desc } = obj

// 2. 解构重命名 {变量名: 新的变量名}
let { name: myname, age: myage, desc: mydesc } = obj

// 3. 解构默认值
let { name, age, desc, girl = '小花' } = obj

// 4. 重命名 + 默认值
let { name, age, desc, girl: myGirl = '小花' } = obj
    使用解构赋值的时候，要注意声明变量的作用域问题
    // 错误的写法
let x;
{x} = {x: 1};
 
// 正确的写法
let x;
({x} = {x: 1});

    上面的例子中错误的原因是{x}被认为是一个块级作用域，导致解构失败，我们在使用解构要尽量避免这种大括号直接在行首的情况。

    https://blog.csdn.net/bjhan_csdn/article/details/97389320