ES6 其他知识

Object相关

属性简短声明

在声明一个对象时如果，如果key与value标识符相同则可以简短声明

const age = 10
const obj = {
  age,
}

属性名表达式

es6之后支持使用变量或表达式作为对象的key，通过[]包裹key

let key = "name"
const obj = {
  age: 22,
  [key]: "Sakurige",
}

1. 如果是基础数据类型可以直接作为key
2. 为对象不能正常显示，但是可以拿到值

const obj = {
 age: 22,
 [{}]: "Sakurige",
}
console.log(obj[{}]) \\ 只要是个对象就可以取得该值 ，不管是否与 [] 的一样

3. 为数组会将数组展开作为key，并且通过原数组与展开后的都可以拿到

const obj = {
 age: 22,
 [[1, 2, 3]]: "Sakurige",
}
console.log(obj[[1, 2, 3]])
console.log(obj[["1", "2", "3"]])
console.log(obj["1,2,3"])

后边两种也不会这么搞，我这儿纯属闲得无聊

展开语法

展开语法 (Spread syntax), 可以在函数调用 数组构造时，将数组表达式或者 string 在语法层面展开；还可以在构造字面量对象时，将对象表达式按 key-value 的方式展开。

1. 数组，字符串在数组构造时

const strArr = [..."sdshoahsoahsa"]
const nums = [1, 2, 3, 4, ...[31, 32, 54]]
console.log(strArr)
console.log(nums)

2. 数组，字符串在函数调用时

console.log(..."sakurige")
console.log(...[1, 2, 3, 4])

3. 对象就只能是对象构造时了

const obj = {
  name: "sakurige",
  age: 21,
}
const newObj = {
  ...obj,
  address: "M78",
}
console.log(newObj)

展开语法是浅拷贝

const obj = {
  name: "sakurige",
  age: 21,
  frends: ["f1", "f2"],
}
const newObj = {
  ...obj,
  address: "M78",
}
newObj.frends.push("f3")
console.log(newObj.frends)
console.log(obj.frends)

解构赋值

解构赋值允许我们按照一定模式，从数组和对象中提取值，对变量进行赋值

数组解构

与数组索引对应就好

// 1. 声明变量时解构
const [num1, num2] = [1, 2, 3]
console.log(num1, num2) // 1 2

// 2. 先声明变量后解构
let num1, num2
[num1, num2] = [1, 2]
console.log(num1, num2) // 1 2

// 3. 给默认值
let [num1 = 0, num2 = 1] = []
console.log(num1, num2) // 0 1
// 4. 数组剩余部分赋值给一个变量
let [num1, ...nums] = [1, 2, 3, 4, 5]
console.log(num1, nums) // 1  [2, 3, 4, 5]
// 5. 忽略某些值
let [num1, , num3] = [1, 2, 3] // 直接用逗号隔开就行了
console.log(num1, num3) // 1  3

对象解构

只需要与需要解构的对象属性名保持一致，如果要取别名就把key保持一致，value就为新变量名

// 1. 最基本的对象解构
let { name, age } = { name: "sakurige", age: 11 }
console.log(name, age) // sakurige 11
// 2. 声明与赋值分开
let name, age
({ name, age } = { name: "sakurige", age: 11 }) // 这样必须给该表达式用小括号包裹
console.log(name, age) // sakurige 11
// 3. 取别名
let { name: newName, age } = { name: "sakurige", age: 11 } // 属性名与后面的对象保持一致，值作为新的变量名
console.log(newName, age) // sakurige 11
// 4. 默认值
let { name = "羽苏", age } = { age: 11 }
console.log(name, age) // 羽苏 11
// 5. 取别名并有默认值
let { name: newName = "羽苏", age } = { age: 11 }
console.log(newName, age) // 羽苏 11