ES6中常见基本知识点的基本使用实例汇总

var name = 'xxx'
var age = 12
var obj = {
  // 1.property shorthand(属性的简写)
  name: name,
  age,

  // 2.method shorthand(方法的简写)
  foo: function () {
    console.log(1)
  },

  foo2: () => {
    console.log(2)
  },

  foo3() {
    console.log(3)
  },

  // 3.computed property name(计算属性名)
  [name + 123]: 'yyy'
}

obj.foo() //1
obj.foo2() //2
obj.foo3() //3
obj[name + 456] = 'zzz'
console.log(obj)
// {
//   name: 'xxx',
//   age: 12,
//   foo: [Function: foo],
//   foo2: [Function: foo2],
//   foo3: [Function: foo3],
//   xxx123: 'yyy',
//   xxx456: 'zzz'
// }

var arr = ['aaa', 'bbb', 'ccc']
// 以前的做法
// var a1 = arr[0]
// var a2 = arr[1]
// var a3 = arr[2]

// 1、对数组的解构
var [a1, a2, a3] = arr
console.log(a1, a2, a3) //aaa bbb ccc

// 2、解构后面的元素
var [, , a4] = arr
console.log(a4) //ccc

// 3、解构出一个元素,后面的元素放到一个新数组中
var [a5, ...newArr] = arr
console.log(a5, newArr) //aaa [ 'bbb', 'ccc' ]

// 4、解构的默认值
var [a6, a7, a8, a9 = 'ddd'] = arr
console.log(a6, a7, a8, a9) //aaa bbb ccc ddd

var obj = {
  name: 'xxx',
  age: 123,
  address: '广东'
}

//1、全部解构
var { name, age, address } = obj
console.log(name, age, address) //xxx 123 广东

//2、解构单个
var { age } = obj
console.log(age) //123

// 3、重新命名
var { age: newAge } = obj
console.log(newAge) //123

//4、解构的默认值
var { color: newColor = 'red' } = obj
console.log(newColor) //red

//5、函数中
function foo(o) {
  console.log(o.name, o.age) //xxx 123
}
foo(obj)

function foo2({ name, age }) {
  console.log(name, age) //xxx 123
}
foo2(obj)

function foo3({ name, age=456}) {
  console.log(name, age) //xxx 123
}
foo3(obj)

// 1、从直观的角度来说，let和var是没有太大的区别的，都是用于声明一个变量
let bar = "bar"

// 2、const constant(常量/衡量)
const name = "abc"

// 3、
// 注意事项一: const本质上是传递的值不可以修改
// 但是如果传递的是一个引用类型(内存地址), 可以通过引用找到对应的对象, 去修改对象内部的属性, 这个是可以的
const obj = {
    foo: "foo"
}

obj2.foo = "aaa"
console.log(obj.foo)// aaa

// 4、
// 注意事项二: 通过let/const定义的变量名是不可以重复定义
// let foo = "abc"
// let foo = "cba"

// 作用域提升: 能提前被访问
console.log(foo)// undefined
var foo = "foo"

// let/const他们是没有作用域提升
// foo被创建出来了, 但是不能被访问
// Reference(引用)Error: Cannot access 'foo' before initialization(初始化)
console.log(foo)
let foo = "foo"

var a = 123
let b = 456

console.log(window.a) //123
console.log(window.b) //undefined

// 在ES5中只有两个东西会形成作用域
// 1.全局作用域

// 2.函数（局部）作用域
function foo() {
    var bar = "bar"
}

// ES6的代码块级作用域
// 对let/const/function/class声明的类型是有效
{
  let foo = 'why'
  function demo() {
    console.log('demo function')
  }
  class Person {}
}

console.log(foo) // foo is not defined
// 不同的浏览器有不同实现的(大部分浏览器为了兼容以前的代码, 让function是没有块级作用域)
demo() //demo function
var p = new Person() // Person is not defined

// 1、if语句的代码就是块级作用域
if (true) {
  var foo = 'foo'
  let bar = 'bar'
}

console.log(foo) //foo
console.log(bar) //bar is not defined

// 2、switch语句的代码也是块级作用域
var color = 'red'
switch (color) {
  case 'red':
    var foo2 = 'foo'
    let bar2 = 'bar'
}

console.log(foo2) //foo
console.log(bar2) //bar2 is not defined

// 3、for语句的代码也是块级作用域
for (var i = 0; i < 10; i++) {
  console.log('Hello World' + i)
  // Hello World0
  // Hello World1
  // Hello World2
  // Hello World3
  // Hello World4
  // Hello World5
  // Hello World6
  // Hello World7
  // Hello World8
  // Hello World9
}
console.log(i) //10

for (let j = 0; j < 10; j++) {}

console.log(j) //j is not defined

const btns = document.getElementsByTagName('button')
// 1、var没有块级作用域
for (var i = 0; i < btns.length; i++) {
  ;(function (n) {
    btns[i].onclick = function () {
      console.log('第' + n + '个按钮被点击')
    }
  })(i)
}

// 2、let有块级作用域
for (let i = 0; i < btns.length; i++) {
  btns[i].onclick = function () {
    console.log('第' + i + '个按钮被点击')
  }
}

const names = ['abc', 'cba', 'nba']

// 1、不可以使用const，因为i的每次循环（生成一个块级作用域）都不一样，其实都是需要上一次的i进行i++赋值给下一个i
for (let i = 0; i < names.length; i++) {
  console.log(names[i])
}

// 2、for...of: ES6新增的遍历数组(对象)
// 因为每次遍历（生成一个块级作用域）的值都赋给一个item，所以不需要上一次item的值进行操作
for (const item of names) {
  console.log(item)
}

var foo = 'foo'

// 块级作用域
if (true) {
  console.log(foo) //Cannot access 'foo' before initialization

  let foo = 'abc'
}

// ES6之前拼接字符串和其他标识符
const name = 'why'
const age = 18
const height = 1.88

console.log('my name is ' + name + ', age is ' + age + ', height is ' + height)

// ES6提供模板字符串 ``
// 1、
const message = `my name is ${name}, age is ${age}, height is ${height}`
console.log(message)

// 2、
const info = `age double is ${age * 2}`
console.log(info)

// 3、
function doubleAge() {
  return age * 2
}

const info2 = `double age is ${doubleAge()}`
console.log(info2)

// 第一个参数依然是模块字符串中整个字符串, 只是被切成多块,放到了一个数组中
// 第二个参数是模块字符串中, 第一个 ${}
function foo(m, n, x) {
  console.log(m, n, x)
}

// 另外调用函数的方式: 标签模块字符串
foo`` //[ '' ] undefined undefined

foo`Hello World` //[ 'Hello World' ] undefined undefined

const name = 'why'
const age = 18
foo`Hello${name}Wo${age}rld` //[ 'Hello', 'Wo', 'rld' ] why 18

// 1.ES6可以给函数参数提供默认值
function foo(m = 'aaa', n = 'bbb') {
  console.log(m, n)
}

foo(0)// 0 bbb

// 2.对象参数和默认值以及解构
function printInfo({ name, age } = { name: 'why', age: 18 }) {
  console.log(name, age)
}
printInfo({ name: 'kobe', age: 40 }) //kobe 40

// 另外一种写法
function printInfo1({ name = 'why', age = 18 } = {}) {
  console.log(name, age)
}
printInfo1() //why 18

// 3.有默认值的形参最好放到最后
function bar(x, y, z = 30) {
  console.log(x, y, z)
}

bar(10, 20) //10 20 30

// 4.有默认值的函数的length属性
function baz(x, y, z, m, n = 30) {
  console.log(x, y, z, m, n)
}

console.log(baz.length)// 4

function foo(m, n, ...args) {
  console.log(m, n) //20 30
  console.log(args) //[ 40, 50, 60 ]
  console.log(arguments) //[Arguments] { '0': 20, '1': 30, '2': 40, '3': 50, '4': 60 }
}

foo(20, 30, 40, 50, 60)

//function foo (...args,m, n)
// rest paramaters必须放到最后
// Rest parameter must be last formal parameter

function foo() {}

console.log(foo.prototype) //{}
const f = new foo()
console.log(f.__proto__) //{}

var bar = () => {
  console.log(this, arguments) //箭头函数本身没有
}

console.log(bar.prototype) //undefined
const f2 = new bar() //bar is not a constructor

const names = ['abc', 'cba', 'nba']
const name = 'why'
const info = { name: 'why', age: 18 }

// 1.函数调用时
function foo(x, y, z) {
  console.log(x, y, z)
}

// foo.apply(null, names)
foo(...names) //abc cba nba
foo(...name) //w h y

// 2.构造数组时
const newNames = [...names, ...name]
console.log(newNames) //[ 'abc', 'cba', 'nba', 'w', 'h', 'y' ]

// 3.构建对象字面量时ES2018(ES9)
const obj = { ...info, address: '广州市', ...names }
console.log(obj)
// {
//     '0': 'abc',
//     '1': 'cba',
//     '2': 'nba',
//     name: 'why',
//     age: 18,
//     address: '广州市'
//   }

const info = {
  name: 'why',
  friend: { name: 'kobe' }
}

const obj = { ...info, name: 'coderwhy' }
// console.log(obj)
obj.friend.name = 'james'

console.log(info.friend.name) //james

const num1 = 100 // 十进制
// b -> binary
const num2 = 0b100 // 二进制
// o -> octonary
const num3 = 0o100 // 八进制
// x -> hexadecimal
const num4 = 0x100 // 十六进制

console.log(num1, num2, num3, num4) //100 4 64 256

// 大的数值的连接符(ES2021 ES12),该写法方便阅读
const num = 10_000_000_000_000_000
console.log(num) //10000000000000000

// 1.ES6之前, 对象的属性名(key)
var obj = {
  name: 'why',
  friend: { name: 'kobe' },
  age: 18
}
obj['newName'] = 'james'
console.log(obj) //{ name: 'why', friend: { name: 'kobe' }, age: 18, newName: 'james' }

// 2.ES6中Symbol的基本使用
const s1 = Symbol()
const s2 = Symbol()
console.log(s1 === s2) //false

// ES2019(ES10)中, Symbol还有一个描述(description)
const s3 = Symbol('aaa')
console.log(s3.description) //aaa

// 3.Symbol值作为key
// 3.1.在定义对象字面量时使用
const obj2 = {
  [s1]: 'abc',
  [s2]: 'cba'
}

// 3.2.新增属性
obj2[s3] = 'nba'

// 3.3.Object.defineProperty方式
const s4 = Symbol()
Object.defineProperty(obj2, s4, {
  enumerable: true,
  configurable: true,
  writable: true,
  value: 'mba'
})

console.log(obj2[s1], obj2[s2], obj2[s3], obj2[s4]) //abc cba nba mba
// 注意: 不能通过.语法获取
console.log(obj2.s1) //undefined

// 4.使用Symbol作为key的属性名,在遍历/Object.keys等中是获取不到这些Symbol值
// 需要Object.getOwnPropertySymbols来获取所有Symbol的key
console.log(Object.keys(obj2)) //[]
console.log(Object.getOwnPropertyNames(obj2)) //[]
console.log(Object.getOwnPropertySymbols(obj2)) //[ Symbol(), Symbol(), Symbol(aaa), Symbol() ]
const sKeys = Object.getOwnPropertySymbols(obj2)
for (const sKey of sKeys) {
  console.log(obj2[sKey])
  // abc
  // cba
  // nba
  // mba
}

// 5.Symbol.for(key)/Symbol.keyFor(symbol)
const sa = Symbol.for('aaa')
const sb = Symbol.for('aaa')
console.log(sa === sb) //true

const key = Symbol.keyFor(sa)
console.log(key) //aaa
const sc = Symbol.for(key)
console.log(sa === sc) //true

// 1.创建Set结构
var set = new Set()
set.add(2)
set.add(2)
set.add(30)
set.add(40)
set.add(2)
set.add(230)
console.log(set) //Set(4) { 2, 30, 40, 230 }

// 2.添加对象时特别注意:
// 这是两个不同的变量
set.add({})
set.add({})
console.log(set) //Set(6) { 2, 30, 40, 230, {}, {} }

// obj存储的是地址，set存储的元素不重复
const obj = {}
set.add(obj)
set.add(obj)
console.log(set) //Set(7) { 2, 30, 40, 230, {}, {}, {} }

// 3.对数组去重(去除重复的元素)
const arr = [43, 10, 26, 30, 43, 26, 10]
// 3.1第一种方法
// const newArr = []
// for (const item of arr) {
//   if (newArr.indexOf(item) !== -1) {
//     newArr.push(item)
//   }
// }

// 3.2第二种方法
const arrSet = new Set(arr)
// const newArr = Array.from(arrSet)
const newArr = [...arrSet]
console.log(newArr) //[ 43, 10, 26, 30 ]

// 4.size属性
console.log(arrSet.size) //4

// 5.Set的方法
// add
arrSet.add(1000)
console.log(arrSet) //Set(5) { 43, 10, 26, 30, 1000 }

// delete
arrSet.delete(43)
console.log(arrSet) //Set(4) { 10, 26, 30, 1000 }

// has
console.log(arrSet.has(100)) //false

// clear
// arrSet.clear()
console.log(arrSet) //Set(0) {}

// 6.对Set进行遍历
arrSet.forEach(item => {
  console.log(item)
  //   10
  //   26
  //   30
  //   1000
})

for (const item of arrSet) {
  console.log(item)
  //   10
  //   26
  //   30
  //   1000
}

const weakSet = new WeakSet()

// 1.区别一: 只能存放对象类型
// TypeError: Invalid value used in weak set
// weakSet.add(10)

// 2.区别二: 对对象是一个弱引用
let obj = {
  name: 'why'
}

const set = new Set()
// 建立的是强引用
set.add(obj)

// 建立的是弱引用
weakSet.add(obj)
console.log(weakSet)// WeakSet { <items unknown> }

// 3.WeakSet的应用场景
const personSet = new WeakSet()
class Person {
  constructor() {
    personSet.add(this)
  }

  running() {
    if (!personSet.has(this)) {
      throw new Error('不能通过非构造方法创建出来的对象调用running方法')
    }
    console.log('running~', this) //running~ Person {}
  }
}

let p = new Person()
p.running()

// 抛出异常
// p.running.call({ name: 'why' })

// 1.JavaScript中对象中是不能使用对象来作为key的
const obj1 = { name: 'why' }
const obj2 = { name: 'kobe' }

const info = {
  [obj1]: 'aaa',
  [obj2]: 'bbb'
}

console.log(info) //{ '[object Object]': 'bbb' }

// 2.Map就是允许我们对象类型来作为key的
// 构造方法的使用
const map = new Map()
map.set(obj1, 'aaa')
map.set(obj2, 'bbb')
map.set(1, 'ccc')
console.log(map)
// Map(3) {
//     { name: 'why' } => 'aaa',
//     { name: 'kobe' } => 'bbb',
//     1 => 'ccc'
//  }

const map2 = new Map([
  [obj1, 'aaa'],
  [obj2, 'bbb'],
  [2, 'ddd']
])
console.log(map2)
// Map(3) {
//     { name: 'why' } => 'aaa',
//     { name: 'kobe' } => 'bbb',
//     2 => 'ccc'
//  }

// 3.常见的属性和方法
console.log(map2.size) //3

// set
map2.set('why', 'eee')
console.log(map2)
// Map(4) {
//     { name: 'why' } => 'aaa',
//     { name: 'kobe' } => 'bbb',
//     2 => 'ddd',
//     'why' => 'eee'
//  }

// get(key)
console.log(map2.get('why')) //eee

// has(key)
console.log(map2.has('why')) //true

// delete(key)
map2.delete('why')
console.log(map2)
// Map(3) {
//     { name: 'why' } => 'aaa',
//     { name: 'kobe' } => 'bbb',
//     2 => 'ddd'
// }

// clear(),全部清空
// map2.clear()
// console.log(map2)

// 4.遍历map
map2.forEach((item, key) => {
  console.log(item, key)
  // aaa { name: 'why' }
  // bbb { name: 'kobe' }
  // ddd 2
})

for (const item of map2) {
  console.log(item[0], item[1])
  // { name: 'why' } aaa
  // { name: 'kobe' } bbb
  // 2 ddd
}

for (const [key, value] of map2) {
  console.log(key, value)
  // { name: 'why' } aaa
  // { name: 'kobe' } bbb
  // 2 ddd
}

const obj = {name: "obj1"}
// 1.WeakMap和Map的区别二:弱引用
const map = new Map()
map.set(obj, "aaa")

const weakMap = new WeakMap()
weakMap.set(obj, "aaa")

// 2.区别一: 不能使用基本数据类型
// weakMap.set(1, "ccc")

// 3.常见方法
// get方法
console.log(weakMap.get(obj))//aaa

// has方法
console.log(weakMap.has(obj))//true

// delete方法
console.log(weakMap.delete(obj))//true
// WeakMap { <items unknown> }
console.log(weakMap)//WeakMap { <items unknown> }

// 应用场景(vue3响应式原理)
const obj1 = {
  name: 'why',
  age: 18
}

function obj1NameFn1() {
  console.log('obj1NameFn1被执行')
}

function obj1NameFn2() {
  console.log('obj1NameFn2被执行')
}

function obj1AgeFn1() {
  console.log('obj1AgeFn1')
}

function obj1AgeFn2() {
  console.log('obj1AgeFn2')
}

const obj2 = {
  name: 'kobe',
  height: 1.88,
  address: '广州市'
}

function obj2NameFn1() {
  console.log('obj1NameFn1被执行')
}

function obj2NameFn2() {
  console.log('obj1NameFn2被执行')
}

// 1.创建WeakMap
const weakMap = new WeakMap()

// 2.收集依赖结构
// 2.1.对obj1收集的数据结构
const obj1Map = new Map()
obj1Map.set('name', [obj1NameFn1, obj1NameFn2])
obj1Map.set('age', [obj1AgeFn1, obj1AgeFn2])
weakMap.set(obj1, obj1Map)

// 2.2.对obj2收集的数据结构
const obj2Map = new Map()
obj2Map.set('name', [obj2NameFn1, obj2NameFn2])
weakMap.set(obj2, obj2Map)

// 3.如果obj1.name发生了改变
// Proxy/Object.defineProperty
obj1.name = 'james'
const targetMap = weakMap.get(obj1)
const fns = targetMap.get('name')
fns.forEach(item => item())
// obj1NameFn1被执行
// obj1NameFn2被执行