JS Advance --- ES6语法(二)

const age = 23

// 基本使用
console.log(`age is ${age}`) // => age is 23

// ${expression}中可以使用合法的js表达式
console.log(`age is ${age * 2}`) // => age is 46

function doubleAge() {
  return age * 2
}

// 函数调用也是一个合法的js表达式
console.log(`age is ${doubleAge()}`) // => age is 46
复制代码

function foo() {
  console.log('foo 被调用了')
}

// 传统的函数调用
foo()

// 标签模板字符串调用
foo``
复制代码

function foo(...args) {
  console.log(...args)
}

foo`` // 默认会接收一个参数，类型为数组 --> ['']
复制代码

function foo(...args) {
  console.log(...args)
}

const lang = 'JS'
const username = 'Kluas'

foo`Hello ${lang}, my name is ${username}`
/*
  =>
    [Hello, , my name is]
    JS,
    Klaus
*/
复制代码

function sum(m, n) {
  // ES5中设置默认值的方式，但是这么设置其实是有bug的
  // 如果m或n的值是0或者空字符串的时候
  // 他们转换为boolean类型的时候，也是false，会触发使用默认值
  // 但是很明显，他们之间是不应该使用默认值的
  m = m || 'm'
  n = n || 'n'
  console.log(m + n)
}
复制代码

function sum(m, n) {
  // 所以我们可能会这么书写函数的默认值
  m = m === undefined ? 'm' : m
  n = n === undefined ? 'n' : n
  console.log(m + n)
}
复制代码

function sum(m = 'm', n = 'n') {
  console.log(m + n)
}

sum() // => mn
sum(0, 0) // => 0
复制代码

function print({ name, age } = { name: 'Klaus', age: 23 }) {
  console.log(name, age)
}

print()

print({
  name: 'Alex',
  age: 18
})
复制代码

function print({ name = 'Klaus', age = 23 } = {}) {
  console.log(name, age)
}

print()

print({
  name: 'Alex',
  age: 18
})
复制代码

function print(m = 23, n) {
  console.log(m, n)
}

// 如果需要使用默认值
print(undefined, 23)
复制代码

function foo(m, n = 2) {
  console.log(arguments.length) // => 1
}

foo()

function baz(m, n = 2, x, y) {
  // 从默认值开始包括之后的参数都不再被计算到arguments中
  console.log(arguments.length) // => 1
}

baz()
复制代码

function foo(m, n, ...args) {
  console.log(args) // => [4, 5, 6]
}

foo(2, 3, 4, 5, 6)
复制代码

const foo = () => {
  // 箭头函数内部没有this，所以去上层作用域查找
  // 在这里上层作用域就是全局作用域
  console.log(this) // => globalThis

  // 箭头函数内部没有arguments, 直接打印会报错
  // 在浏览器端，会直接报错
  // 但是在node端，因为模块化解析需要，会存在默认值，但是也并不是我们所需要的那个arguments
  console.log(arguments) // error
}

console.log(foo.prototype) // => undefined

foo()
复制代码

// 函数调用
function foo(...args) {
  console.log(...args)
}

foo(...['Alex', 'Klaus'])
foo(...'Steven')
// apply的第一个参数是null，表示的是不指定函数调用内部的this，依旧使用原本的那个this
// 第二个参数是一个数组，apply在实际调用的时候，会自动将第二个参数解构出来并依次作为函数的参数被传入
foo.apply(null, [1, 2])
复制代码

// 数组构造
const users = ['Klaus', 'Alex', 'Steven']
const name = 'coderwxf'

const newUsers = [...users]
const newName = [...name]

console.log(newUsers, newName)
复制代码

// 构建对象字面量 --- 数组
const users = ['Klaus', 'Alex', 'Steven']
const userObj = { ...users }
console.log(userObj) // => { '0': 'Klaus', '1': 'Alex', '2': 'Steven' }
复制代码

// 构建对象字面量 --- 对象
const info = {
  name: 'Klaus',
  age: 23
}

const newObj = {...info}
console.log(newObj) // => { name: 'Klaus', age: 23 }
复制代码

// 十进制
let num = 100

// 二进制
num = ob100

// 八进制
num = 0o100

// 十六进制
num = 0x100
复制代码

// 对于一些大的数值，看起来不是很方便
// 在生活中，我们会使用逗号进行分割 100，000，000，000
// 在ES2021中可以使用下划线来模拟这里的逗号

const num = 100_000_000_000

// 注意：这仅仅只是一个方便阅读和标识的方式，并不影响数值的实际使用和表示
console.log(num) // => 100000000000
复制代码

// Symbol即使多次创建值，它们也是不同的:Symbol函数执行后每次创建出来的值都是独一无二的
const s1 = Symbol()
const s2 = Symbol()
console.log(s1 === s2) // => false
复制代码

// 可以在创建Symbol值的时候传入一个描述description, 用以起到标记的功能
const s = Symbol('foo')
console.log(s) // => Symbol(foo)
// 获取到symbol的描述符
console.log(s.description) // => foo
复制代码

// 可以使用Symbol在对象中表示唯一的属性名
let s1 = Symbol()
let s2 = Symbol()
let s3 = Symbol()

// 设置方式1
const obj = {
  [s1]: 'Klaus'
}

// 设置方式2
obj[s2] = 'Alex'

// 设置方式3
Object.defineProperty(obj, s3, {
  value: 'Steven',
  enumerable: true,
  configurable: true,
  writable: true
})
复制代码

// 获取symbol属性值
// 获取Symbol值只能使用中括号语法，不可以使用点语法
// 如果使用点语法，例如obj.s1, 浏览器在解析的时候会将s1作为字符串类型的值去进行查找
console.log(obj[s1])
console.log(obj[s2])
console.log(obj[s3])

// 在普通的遍历中，无法遍历到以symbol值作为key的属性

// Object.keys获取属性名数组的时候，不包含以symbol值作为key的属性
console.log(Object.keys(obj)) // => []

// for ... of 循环中是无法打印出以symbol值作为key的属性
for (const k in obj) {
  // 没有任何的输出
  console.log(k)
}

// 无法使用Object.getOwnPropertyNames, 获取以symbol值作为key的属性
console.log(Object.getOwnPropertyNames(obj)) // => []
复制代码

// 可以使用Object.getOwnPropertySymbols方法获取以symbol值作为key的属性
// Object.getOwnPropertySymbols方法返回的数据类型是数组类型
// 可以通过遍历的方式去获取到每一个symbol类型的属性名及其对应的属性值
console.log(Object.getOwnPropertySymbols(obj)) // => [ Symbol(), Symbol(), Symbol() ]
复制代码

const s1 = Symbol.for()
const s2 = Symbol.for()

console.log(s1 === s2) // => true

// ---------------------------------

// 使用Symbol.for来创建symbol类型的值的时候
// 可以传入一个参数作为标识符
// 在创建的时候，会优先去寻找之前是否存在相同标识符的symbol值
// 如果存在就返回之前所创建过的symbol值，如果没有，则新建一个symbol值并返回
const s3 = Symbol.for('Klaus')
const s4 = Symbol.for('Klaus')

console.log(s3 === s4) // => true

// ---------------------------------------

// 可以通过Symbol.keyFor方法来获取对应的key
// Symbol.keyFor方法去获取一个Symbol类型值的标识符的时候

// 如果创建的时候传入了标识符，则将标识符返回
const s1 = Symbol.for('foo')
console.log(Symbol.keyFor(s1)) // => foo


// 如果创建的时候没有传入标识符，则返回undefined
// 注意: 这里返回的undefined是字符串类型的值
const s2 = Symbol.for()
console.log(Symbol.keyFor(s2)) // => undefined
console.log(typeof Symbol.keyFor(s2)) // => string

// 如果symbol在创建的时候，不是使用Symbol.keyFor方法创建的
// 那么无论该symbol值在被创建的时候，有没有传入标识符
// 其返回的结果都是undefined，且值的类型也是undefined
const s3 = Symbol('baz')
console.log(Symbol.keyFor(s3)) // => undefined
console.log(typeof Symbol.keyFor(s3)) // => undefined

// 此时需要通过属性description来获取
console.log(s3.description) // => baz