ES6 简易示例

Map对象

Map对象 和 Objects 的区别
Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值。
get 和 set方法

const print = console.log
var map1 = new Map()
var keyString = 'a string'
map1.set(keyString, "和键'a string'关联的值")
const a1 = map1.get(keyString) // "和键'a string'关联的值"
const a2 = map1.get('a string') // "和键'a string'关联的值"
//print('a1-2:', a1, a2)

---

Set对象

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。
Set 对象存储的值总是唯一的，所以需要判断两个值是否恒等。
add方法

let mySet = new Set()
mySet.add(1) // Set(1) {1}
mySet.add(5) // Set(2) {1, 5}
mySet.add(5) // Set(2) {1, 5} 这里体现了值的唯一性
mySet.add('some text') // Set(3) {1, 5, "some text"} 这里体现了类型的多样性

var o = { a: 1, b: 2 }
mySet.add(o) //Set(4) { 1, 5, 'some text', { a: 1, b: 2 } }
//console.log(mySet)
mySet.add({ a: 1, b: 2 }) // Set(5) { 1, 5, 'some text', { a: 1, b: 2 }, { a: 1, b: 2 } }
// 这里体现了对象之间引用不同不恒等，即使值相同，Set 也能存储

---

解构

//数组解构
let [a, b, c] = [1, 2, 3] // a = 1  b = 2  c = 3 
let [e, , g] = [1, 2, 3] // e = 1  g = 3 

//对象解构
let { foo, bar } = { foo: 'aaa', bar: 'bbb' } // foo = 'aaa'  bar = 'bbb' 

//注意下面不是逗号，是冒号
let { x: y } = { x: 'x1' }   // y='x1'
let { v: w } = { vv: 'v1' } // undefined
// console.log(y) //打印x会报错  x1
// console.log(w) //打印v会报错  undefined

---

Proxy

可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理。它不直接操作对象，而是像代理模式，通过对象的代理对象进行操作，在进行这些操作时，可以添加一些需要的额外操作。
一个Proxy对象由两个部分组成，构造函数生成实例需target目标对象 和 handler对象（声明代理target的指定行为）
get 、 set、 construct、 has

let target = {
  name: 'Tom',
  age: 20
}
let handler = {
  get: (target, key) => {
    console.log('get: ' + key)
    return target[key] // 不是target.key
  },
  set: (target, key, value) => {
    console.log('set: ' + key)
    target[key] = value
  }
}
let proxy = new Proxy(target, handler)
  //console.log(target, proxy) //2个相等 { name: 'Tom', age: 20 } { name: 'Tom', age: 20 }
  proxy.name // 实际执行 handler.get  //打印get: name
  proxy.age = 25 // 实际执行 handler.set  //打印set: age

通过构造函数新建实例时其实是对目标对象进行了浅拷贝，因此目标对象与代理对象会互相影响

---

Reflect

可以用于获取目标对象的行为，它与 Object 类似，但是更易读，
为操作对象提供了一种更优雅的方式。它的方法与 Proxy 是对应的
get 、 set、 construct、 has

 //Reflect.get(target, name, receiver)
    let exam = {
      name: 'Tom',
      age: 24,
      get info() {
        return this.name + this.age
      }
    }
    const res = Reflect.get(exam, 'name')
    //console.log('res:', res) //res: Tom

    // 当target对象中存在name属性的getter方法，getter方法的this会绑定,参数3:obj
    let obj = {
      name: 'Jerry',
      age: 20
    }
    const r0 = Reflect.get(exam, 'info') // Tom24
    const r1 = Reflect.get(exam, 'info', obj) // Jerry20
    // 当 name 为不存在于 target 对象的属性时，返回 undefined
    const r2 = Reflect.get(exam, 'birth') // undefined
    //const r3 = Reflect.get(1, 'name') // 会报错,因为target不是对象 

---

字符串

includes和模板字符串

  const print = console.log 
  let string = 'apple,banana,orange'
  print(string.includes('banana')) // true  判断是否找到参数字符串
  print(string.startsWith('apple')) // true  判断参数字符串是否在原字符串的头部
  print(string.endsWith('apple')) // false  判断参数字符串是否在原字符串的尾部  

这三个方法只返回布尔值，如果需要知道子串的位置，还是得用 indexOf

模板字符串：字符串插入变量、表达式、调用函数

  let namea = 'Mike'
  let age = 27
  let info = `My Name is ${namea},I am ${age + 1} years old next year.` 
 
  function f() {
    return 'have fun!'
  }
  let string2 = `Game start,${f()}`
  console.log(string2) // Game start,have fun!

---

对象object

Object.assign() 与 Object.is()

let age = { age: 15, city: 'beijing' }
let names = { names: 'Amy', age: 18 } 
let person2 = { ...age, ...names } //{ age: 18, city: 'beijing', names: 'Amy' } 同名的属性将被覆盖掉

Object.assign(target, source_1, ···)
用于将源对象的所有可枚举属性复制到目标对象中。

let target = { a: 1 }
let object2 = { b: 2 }
let object3 = { c: 3 }
Object.assign(target, object2, object3) // 第一个参数是目标对象，后面的参数是源对象
console.log(target) //{ a: 1, b: 2, c: 3 }

target = { ...target, ...object2, ...object3 }
console.log(target) //{ a: 1, b: 2, c: 3 }

//如果该函数只有一个参数，当参数为对象时，直接返回该对象；
//当参数不是对象时，会先将参数转为对象然后返回。
const objx = Object.assign(3)
console.log(objx, typeof objx) // [Number: 3] object

Object.is(value1, value2) 用来比较两个值是否严格相等，与（===）基本类似。

Object.is('q', 'q') // true
Object.is(1, 1) // true
Object.is([1], [1]) // false
Object.is({ q: 1 }, { q: 1 }) // false

---

数组

Array.of()、Array.from()

  console.log(Array.of(1, 2, 3, 4)) // [1, 2, 3, 4]
  console.log(Array.of(1, '2', true)) // [1, '2', true] // 参数值可为不同类型
  console.log(Array.of()) // [] // 参数为空时返回空数组

Array.from() 将类数组对象或可迭代对象转化为数组。

console.log(Array.from([1, 2])) // [1, 2]  参数为数组,返回与原数组一样的数组
console.log(Array.from([1, , 3])) // [1, undefined, 3] 参数含空位

//第2可选参数：map 函数、第3可选参数：thisArg（用于指定 map 函数执行时的 this 对象）
let map = {
  do: (n) => {
    return n * 2
  }
}
let arrayLike = [3, 4, 5]
const res = Array.from(
  arrayLike,
  function (n) {
    return this.do(n)
  },
  map
)
console.log(res) // [ 6, 8, 10 ]

类"数组对象" 转数组
一个类数组对象必须含有 length 属性，且元素属性名必须是数值或者可转换为数值的字符。

let arr = Array.from({
  0: '1',
  1: '2',
  2: 3,
  length: 3
})
console.log(arr) // ['1', '2', 3]

map转数组、set转数组、字符串转数组

let map = new Map()
map.set('key0', 'value0')
map.set('key1', 'value1')
console.log(Array.from(map)) // [['key0', 'value0'],['key1', 'value1']]
 
let arr = [1, 2, 3]
let set = new Set(arr)
console.log(Array.from(set)) // [1, 2, 3]
 
let str = 'abc'
console.log(Array.from(str)) // ["a", "b", "c"]

---

函数

箭头函数有几个使用注意点。
（1）箭头函数没有自己的this对象
（2）不可以当作构造函数，也就是说，不可以对箭头函数使用new命令，否则会抛出一个错误
（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替
（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数

对于普通函数来说，内部的this指向函数运行时所在的对象

var Person = {
  age: 18,
  sayHello: function (v) {
    //由于setTimeout异步，函数运行时所在的对象是setTimeout
    setTimeout(function () {
      console.log('this:', this) //this: Timeout {...}
      console.log('age:', this.age) //age: undefined
    }, 1000)
    return v * 2
  }
}
console.log('x:', Person.sayHello(2)) // x:4

箭头函数则不一样，它没有自己的this对象，内部的this就是定义时上层作用域中的this

var Person1 = {
  age: 18,
  sayHello: function (v) {
    //箭头函数上层作用域中的this，就是Person1对象
    setTimeout(() => {
      console.log('this:', this) // this: { age: 18, sayHello: [Function: sayHello] }
      console.log('age:', this.age) //age: 18
    }, 1000)
    return v * 2
  }
}
console.log('y:', Person1.sayHello(2)) // y:4

箭头函数不可以当作构造函数

function fun1(a, b) {
  console.log('new 函数，则函数是构造函数：', a + b)
}
const a1 = new fun1(1, 2)

const fun2 = (a, b) => {
  console.log('new 箭头函数，会报错：', a + b)
}
//const a2 = new fun2(1, 2) //会报错 

---

class类

ES6 的类，完全可以看作构造函数的另一种写法。
JS是用构造函数来充当”类“，TS类才是类似其他后端语言的类

class Point {
  // ...
}
console.log(typeof Point) // "function"
console.log(Point === Point.prototype.constructor) // true

下面代码中的三个方法，其实都是定义在Point.prototype上面。

class Point2 {
  constructor() {}
  toString() {}
  toValue() {}
}
// 等同于
Point2.prototype = {
  constructor() {},
  toString() {},
  toValue() {}
}

封装与继承
get和set

class Example {
  constructor(a, b) {
    console.log('构造函数')
    this.a = a // 实例化时调用 set 方法
    this.b = b
  }
  // get 函数名 和 属性同名 才会触发
  get a() {
    console.log('get-a')
    //return this.a  //这样也会不断循环,
    return this._a
  }
  get b() {
    console.log('get-b')
    return this.b
  }
  set a(v) {
    console.log('set-a:', v)
    //this.a = a  //自身递归调用,不断循环，最终导致 RangeError
    this._a = v
  }
  set b(v) {
    console.log('set-b:', v)
  }
}
let exam = new Example(1, 2) //构造函数  set-a: 1   set-b: 2
console.log(exam.a) //get-a  1


class Father1 {
  constructor() {}
  get a() {
    return this._a
  }
  set a(v) {
    this._a = v
  }
}
class Child1 extends Father1 {
  constructor() {
    super()
  }
}
let test1 = new Child1()
test1.a = 2
console.log(test1.a) // 2

---

模块

ES6 的模块化分为导出（export） @与导入（import）两个模块
模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等

每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域
每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取
导出的函数声明与类声明必须要有名称（export default 命令另外考虑）
export 命令可以出现在模块的任何位置，但必需处于模块顶层

---

Generator 函数

ES6新引入了Generator函数，可以通过yield关键字，把函数的执行流挂起，
为改变执行流程提供了可能，从而为异步编程提供解决方案。 基本用法
Generator 有两个区分于普通函数的部分：
一是在 function 后面，函数名之前有个 *
函数内部有 yield 表达式。
其中 * 用来表示函数为 Generator 函数，yield 用来定义函数内部的状态。

function* func() {
  console.log('one')
  yield '1'
  console.log('two')
  yield '2'
  console.log('three')
  return '3'
}
//调用 Generator 函数和调用普通函数一样，在函数名后面加上()即可，
//但是 Generator 函数不会像普通函数一样立即执行，而是返回一个指向内部状态对象的指针
const f = func() //不会立即执行,返回指针
console.log(f.next()) //one  { value: '1', done: false }
console.log(f.next()) //two  { value: '2', done: false }
console.log(f.next()) //three  { value: '3', done: true }
console.log(f.next()) // { value: undefined, done: true }
console.log(f.next()) // { value: undefined, done: true }
//如果执行第三步时，没有 return 语句的话，就直接返回 { value: undefined, done: true }