【笔记】再学JavaScript ES(6-10)全版本语法——模板字符串、解构赋值

---

一、模板字符串

/**
 * 模板字符串
 */
// ES5
var retailPrice = 20
var wholesalePrice = 16
var type = 'retail'
var showTxt = ''
if (type === 'retail') {
  showTxt += '您此次的购买单价是：' + retailPrice
} else {
  showTxt += '您此次的批发价是：' + wholesalePrice
}
console.log(showTxt)

// ES6
/**
 * @param: 定义一个 Tag 函数，然后用这个 Tag 函数来充当一个模板引擎
 * @desc:
 * - strings 返回模板客串中被所有变量分隔开的字符串集合
 * - ype 参数对应模板字符串中的第一个变量，Tag 函数可以有多个 type 类似的参数
 */
// 参数：
function Price (strings, type) {
  let s1 = strings[0]
  const retailPrice = 20
  const wholeSalePrice = 16
  let showTxt = (type === 'retail') ? `购买单价是：${retailPrice}` : `购买单价是：${wholeSalePrice}`
  return `${s1}${showTxt}`
}
console.log(Price`您此次的${'retail'}`)

• 反引号支持直接换行和空格
• 在模板字符串中使用反引号，要用反斜杠转义
• 模板字符串支持嵌套

拓展：

• 字符串的扩展 - ECMAScript 6入门

二、解构赋值

1.Array

{
  let [first, , third] = ['a', 'b', 'c', 'd']
  console.log(first, third) // a c
}

2.String

{
  let [first, , third] = 'abcd'
  console.log(first, third) // a c
}

3.Number & Bollean

{
  let { toString: a } = 123
  let { toString: b } = false
  console.log(a, b) // ƒ toString() { [native code] } ƒ toString() { [native code] }
}

4.Set

{
  let [first, , third] = new Set(['a', 'b', 'c', 'd'])
  console.log(first, third) // a c
}

5.Map

{
  let [first, , third] = new Map([[1, 'a'], [2, 'b'], [3, 'c'], [4, 'd']])
  console.log(first, third) // (2)[1, "a"] (2)[3, "c"]
}

6.使用rest参数

{
  let [first = 'A', , third, ...last] = ['a', 'b', 'c', 'd', 'e', 'f', 'g'] // 为防undefined可赋初值
  console.log(first, third, last) // a c (4)["d", "e", "f", "g"]
}

7.Object

{
  let obj = { A: 'a', B: 'b', C: 'c', D: 'd', E: 'e', F: 'f' }
  let _obj = {
    A: 'a',
    B: {
      C: {
        D: 'd',
        E: [1, 2, 3, 4, 5]
      }
    },
    F: 'f'
  }
  // 数组解构
  {
    // 实体（key+value）
    let [[firstK, firstV], , [thirdK, thirdV], ...last] = Object.entries(obj)
    console.log(firstK, firstV, thirdK, thirdV, last) // A a C c (3)[Array(2), Array(2), Array(2)]
  }
  {
    // Key
    let [firstK, , thirdK, ...lastK] = Object.keys(obj)
    console.log(firstK, thirdK, lastK) // A C (3)["D", "E", "F"]
  }
  {
    // Value
    let [firstV, , thirdV, ...lastV] = Object.values(obj)
    console.log(firstV, thirdV, lastV) // a c (3)["d", "e", "f"]
  }
  // 对象解构
  {
    let { A, C, ...last } = obj
    console.log(A, C, last) // a c {B: "b", D: "d", E: "e", F: "f"}
  }
  // 对象数组混合解构
  {
    let {
      A,
      B: {
        C,
        C: {
          E: [, , third, ..._last]
        }
      },
      ...last
    } = _obj
    console.log(A, C, third, _last, last) // a {D: "d", E: Array(5)} 3 (2)[4, 5] {F: "f"}
  }
}

8.参数解构赋值

[[1, 2], [3, 4], [5, 6], ['a', 'b']].map(([a, b]) => a + b) // (4) [3, 7, 11, "ab"]
{
  function move1 ({ x = 0, y = 0 } = {}) {
    return [x, y]
  }

  move1({ x: 3, y: 8 }) // [3, 8]
  move1({ x: 3 }) // [3, 0]
  move1({}) // [0, 0]
  move1() // [0, 0]
}
{
  function move2 ({ x, y } = { x: 0, y: 0 }) {
    return [x, y]
  }

  move2({ x: 3, y: 8 }) // [3, 8]
  move2({ x: 3 }) // [3, undefined]
  move2({}) // [undefined, undefined]
  move2() // [0, 0]
}
// undefined就会触发函数参数的默认值
[1, undefined, 3].map((x = 'yes') => x) // [ 1, 'yes', 3 ]

9.案例

{
  let cvs = document.getElementById('cvs')
  let ctx = cvs.getContext('2d')
  let drawLine = ([x, y, ...args]) => {
    ctx.moveTo(x, y)
    for (let i = 0; i < args.length; i++) {
      ctx.lineTo(args[i].x, args[i].y)
    }
    ctx.stroke()
  }
  let line = [20, 20, { x: 30, y: 70 }, { x: 100, y: 30 }, { x: 200, y: 150 }]
  drawLine(line)
}

10.妙用

（1）交换变量的值

let x = 1
let y = 2
console.log([x, y] = [y, x]) // [2, 1]

（2）加载模块

const { SourceMapConsumer, SourceNode } = require("source-map")

注意：

• 解构赋值不能使用圆括号

拓展：

• 变量的解构赋值 - ECMAScript 6入门