ES6789?笔记

let object = { foo: false };
Object.hasOwn(object, "foo"); // true
 
let object2 = Object.create({ foo: true });
Object.hasOwn(object2, "foo"); // false
 
let object3 = Object.create(null);
Object.hasOwn(object3, "foo"); // false

const cart = ["🍎", "🍌", "🍍"];
 
// first element
cart.at(0); // '🍎'
 
// last element
cart.at(-1); // '🍍'
 
// out of bounds
cart.at(-100); // undefined
cart.at(100); // undefined

Object.fromEntries([["eee", "ee"]]);
// { eee: 'ee' }

const m = new Map([
  ["23", 123],
  ["eew", 333],
]);
 
Object.fromEntries(m);
// { '23': 123, eew: 333 }

let fee = 123_00; // $123 (12300 cents, apparently)
let fee = 12_300; // $12,300 (woah, that fee!)
let amount = 12345_00; // 12,345 (1234500 cents, apparently)
let amount = 123_4500; // 123.45 (4-fixed financial)
let amount = 1_234_500; // 1,234,500

// "Or Or Equals" (or, the Mallet operator :wink:)
a ||= b;
a || (a = b);
 
// "And And Equals"
a &&= b;
a && (a = b);
 
// "QQ Equals" QQ 应该是 question question
a ??= b;
a ?? (a = b);

function foo(a) {
  if (!a) {
    a = "foo";
  }
  // or 利用 || 的断路机制
  // a || (a = "foo")
}

alert`yes ok`;
// 等价于
alert(["yes ok"]);

// const tag = (stringVals, ...args) => {}
tag = (stringVals, ...args) => {
  console.log(stringVals);
  console.log(args);
};
// let a = 123;
// tag`yes ok${a}`
// ["yes ok", ""]
// [123]

// 还原模版字符串 with 变量
const pass2 = (stringArr, ...args) => {
  // console.log(stringArr, args);
  const res = [];
  for (let i = 0; i < args.length; ++i) {
    res.push(`${stringArr[i]}${args[i]}`);
  }
  res.push(stringArr[stringArr.length - 1]);
  return res.join("");
};
 
// .... 一行超人 没必要
const pass = (stringArr, ...args) =>
  [
    ...args.map((v, i) => `${stringArr[i]}${v}`), // 可以对 v 做一些操作 比如 safe parse
    stringArr[stringArr.length - 1],
  ].join("");

Set.prototype[Symbol.iterator] === Set.prototype.values;

const union = new Set([...setA, ...setB]);

const intersect = new Set([...setA].filter((v) => setB.has(v)));

const differenceAB = new Set([...setA].filter((v) => !setB.has(v)));

const resolved = Promise.resolve(42);
const rejected = Promise.reject(-1);
 
const allSettledPromise = Promise.allSettled([resolved, rejected]);
 
allSettledPromise.then(function (results) {
  console.log(results);
});
// [
//    { status: 'fulfilled', value: 42 },
//    { status: 'rejected', reason: -1 }
// ]

let obj = {
  name: "dio",
};
 
obj.proxy = new Proxy(obj, {
  get(target, propKey, receiver) {
    console.log(target, propKey, receiver);
    console.log(`getting ${propKey}`);
    return target[propKey];
  },
  set(target, propKey, value, receiver) {
    console.log(target, propKey, receiver);
    if (propKey in target) {
      console.log(`setting ${propKey}`);
      target[propKey] = value;
      return true;
    }
    return false;
  },
});
 
const p = obj.proxy;
 
console.log(p.name);
p.name = 123;
console.log(p);
console.log(obj);

function myArray(...elements) {
  const handler = {
    get(target, propKey, receiver) {
      let index = Number(propKey);
      if (index < 0) {
        // 实现 arr[-1] 获取最后一个 这里仅修改 propKey 的值 让 Reflect 去 get
        propKey = String(target.length + index);
      }
      if (Number(propKey) < 0) {
        propKey = "0";
      }
      return Reflect.get(target, propKey, receiver);
    },
  };
  const target = [];
  target.push(...elements);
  return new Proxy(target, handler);
}
 
let arr = myArray(1, 2, 3, 4, 5, 6);
console.log(arr);
console.log(arr[0]);
console.log(arr[-124]);

const px = new Proxy(obj, {
  get(target, propKey, receiver) {
    if (propKey === "_receiver") {
      return receiver;
    }
    if (propKey === "_target") {
      return target;
    }
  },
});
console.log(px._receiver === px); // true
console.log(px._target === obj); // true

const handler = {
  get(target, key) {
    invariant(key, "get");
    return target[key];
  },
  set(target, key, value) {
    invariant(key, "set");
    target[key] = value;
    return true;
  },
};
function invariant(key, action) {
  if (key[0] === "_") {
    throw new Error(`Invalid attempt to ${action} private "${key}" property`);
  }
}
const target = {};
const proxy = new Proxy(target, handler);
proxy._prop;
// Error: Invalid attempt to get private "_prop" property
proxy._prop = "c";

var handler = {
  apply(target, ctx, args) {
    // ctx 就是 上下文
    return Reflect.apply(...arguments);
  },
};

const hasHandler = {
  has(target, key) {
    if (key[0] === "_") {
      return false;
    }
    return key in target;
  },
};
 
const obb = {
  _private: "oops",
  name: "yes",
};
 
const pobb = new Proxy(obb, { ...hasHandler });
console.log("name" in pobb); // true
console.log("_private" in pobb); // false
console.log("pp" in pobb); // false
for (let k in pobb) {
  console.log(k); // _private name
  // for 循环的 in 不起作用
}

const newHandler = {
  construct(target, args, newTarget) {
    return new target(...args);
  },
};

const ownKey = {
  ownKeys(target) {
    return Reflect.ownKeys(target).filter((key) => key[0] !== "_");
  },
};
 
const obb = {
  _private: "oops",
  name: "yes",
};
 
const pobb = new Proxy(obb, { ...hasHandler, ...ownKey });

const { proxy: rep, revoke } = Proxy.revocable(obj, hasHandler);
console.log(rep.name);
revoke();
// console.log(rep.name);  // 这里报错了 如下

const maybeCustom = value[customInspectSymbol];
                             ^
TypeError: Cannot read property 'Symbol(nodejs.util.inspect.custom)' of null

const target = {
  m: function () {
    console.log(this === proxy);
  },
};
const handler = {};
 
const proxy = new Proxy(target, handler);
 
target.m(); // false
proxy.m(); // true

let ssee = {
  _name: "init",
  get name() {
    return this._name;
  },
  set name(value) {
    console.log("set name");
    return (this._name = value);
  },
};
 
let rec = {
  _name: "eee",
  get name() {
    return this._name;
  },
};
// 有 set 的情况执行
let res = Reflect.set(ssee, "name", 0);
console.log(res);
console.log(ssee.name);
// 给 receiver 的情况下 上下文的 this 会帮绑定给 receiver
res = Reflect.set(ssee, "name", "kekekeke", rec);
console.log(res);
console.log(ssee.name); // 0
console.log(rec.name); // kekekeke

Object.isExtensible(1); // false
Reflect.isExtensible(1); // 报错

// 观察者模式
const queuedObservers = new Set();
 
const observe = (fn) => queuedObservers.add(fn);
const observable = (obj) => new Proxy(obj, { set }); // 对 obj 做观察 set 直接用的下面那个
 
function set(target, key, value, receiver) {
  const result = Reflect.set(target, key, value, receiver);
  // set 之后 通知所有的 观察者 执行
  console.log("notify");
  queuedObservers.forEach((observer) => observer(value));
  return result;
}
 
observe((value) => {
  console.log("ob1:", value);
});
 
const proxyOfObj = observable(obj);
proxyOfObj.foo = "123123";
// notify
// ob1: 123123

const reverseStr = (value) => Array.from(value).reverse().join("");

[1, [2, 2, 3] 2, 3].flat()
// 1, 2, 2, 3, 2, 3

function f(v) {
  return v > this.age;
}
let person = { name: "John", age: 20 };
[10, 12, 26, 15].find(f, person); // 26

@decorator
class A {}
 
// 等同于
class A {}
A = decorator(A) || A;

function testable(target) {
  target.isTestabel = true;
}

function testable(isTestable) {
  return function (target) {
    target.isTestable = isTestable;
  };
}
 
@testable(true)
class MyTestableClass {}
MyTestableClass.isTestable; // true
 
@testable(false)
class MyClass {}
MyClass.isTestable; // false

// mixins.js
export function mixins(...list) {
  return function (target) {
    Object.assign(target.prototype, ...list);
  };
}
 
// main.js
import { mixins } from "./mixins";
 
const Foo = {
  foo() {
    console.log("foo");
  },
};
 
@mixins(Foo)
class MyClass {}
 
let obj = new MyClass();
obj.foo(); // 'foo'

class MyReactComponent extends React.Component {}
 
export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent); // 调用

@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {}

class Math {
  @log
  add(a, b) {
    return a + b;
  }
}
function log(target, name, descriptor) {
  var oldValue = descriptor.value;
  // 对 descriptor 进行修改 返回一个新的函数 操作一波
  descriptor.value = function () {
    console.log(`Calling ${name} with`, arguments);
    return oldValue.apply(this, arguments);
  };
 
  return descriptor;
}
 
const math = new Math();
 
// passed parameters should get logged now
math.add(2, 4);

function dec(id) {
  console.log("evaluated", id);
  return (target, property, descriptor) => console.log("executed", id);
}
 
class Example {
  @dec(1)
  @dec(2)
  method() {}
}
// evaluated 1
// evaluated 2
// executed 2
// executed 1

@dec(1)
@dec(2)
method(){}
// 等价于
dec(1)(
  dec(2)(method)
)()

var readOnly = require("some-decorator");
 
@readOnly
function foo() {
}
// 实际是
var readOnly;  // 此时是 undefined 下面的函数定义就会报错
 
@readOnly
function foo() {
}
 
readOnly = require("some-decorator");

class Tank {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  toString() {
    return `Tank: ${this.name}-${this.year}`;
  }
}
 
const KingTiger = new Tank("tiger", 1940);
console.log(Tank); // Function
console.log(Tank.prototype.constructor === Tank); // true
console.log(KingTiger);

console.log(Object.keys(Tank.prototype)); // []
console.log(Object.getOwnPropertyNames(Tank.prototype)); // [ 'constructor', 'toString', 'toValue', 'fire' ]

class Point {}
 
// 等同于
class Point {
  constructor() {}
}

class Tank {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  get amount() {
    return this._amount ? this._amount : (this.amount = 0);
  }
  set amount(value) {
    this._amount = this._amount ? this._amount + value : value;
    return this._amount;
  }
}
const KingTiger = new Tank("tiger", 1940);
console.log(KingTiger.amount); // 0
KingTiger.amount = 100;
console.log(KingTiger.amount); // 100

let person = new (class {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
})("张三");
 
person.sayName(); // "张三

const ttt = class Tank {
  constructor(name, year) {
    this.name = name + Tank.name;
    this.year = year;
    this.bomb = 100;
    ...

{
  let Foo = class {};
  // 如果 class 提升了 这里 Bar 就无法继承 Foo 了
  class Bar extends Foo {}
}

* fire() {
  console.log('boommmmm!');
  for (let i = 0; i < this.bomb; ++i) {
    yield 'booommmm! ' + i;
  }
}
// 这个对象属性 指向实例的默认迭代器 详见下面的 Symbol
* [Symbol.iterator]() {
  for (let i = 0; i < this.amount; ++i) {
    yield `gen no.${i+1} tank`;
  }
}

constructor() {
  // bind 一下
  this.printName = this.printName.bind(this);
}

class Obj {
  constructor() {
    // 保存的是调用时的上下文
    this.getThis = () => this;
  }
}
 
const myObj = new Obj();
myObj.getThis() === myObj; // true

class Foo {
  static bar() {
    this.baz();
  }
  static baz() {
    console.log("hello");
  }
  baz() {
    console.log("world");
  }
}
 
Foo.bar(); // hello

class ModernTank extends ttt {
  static modern = true;
  tag = "TAG";
  constructor(name, year) {
    super(name, year);
    this.modified = 1000;
  }
  static get isModern() {
    // 这里的 this 是 ModernTank 我们调用他的静态成员
    return this.modern;
  }
}
const mtk = new ModernTank("M4A1", 2020);
console.log(ModernTank.isModern); // true

function R() {
  if (typeof new.target === "undefined") {
    throw new Error("用 new 来构造！");
  }
  this.e = 123;
  this.name = R.name;
}
R(); // 报错咯

class Rectangle {
  constructor(length, width) {
    console.log(new.target === Rectangle);
    // ...
  }
}
 
class Square extends Rectangle {
  constructor(length, width) {
    super(length, width);
  }
}
new Square(3, 3);

class ColorPoint extends Point {}
 
// 等同于
class ColorPoint extends Point {
  constructor(...args) {
    super(...args);
  }
}

class A {
  constructor() {
    this.x = 1;
  }
}
 
class B extends A {
  constructor() {
    super();
    this.x = 2;
    super.x = 3;
    console.log(super.x); // undefined
    console.log(this.x); // 3
    // console.log(super) // 会报错
  }
  go(x) {
    super.x = x;
  }
}
 
let b = new B();
b.go(1000);
console.log(b); // x: 1000

"xxx".padStart(5, "a"); // -> aaxxx
"xxx".padStart(5, "abc"); // -> abxxx
"xxx".padStart(5, "0"); // -> 00xxx
"xxx".padStart(10, "pad"); // -> padpadpxxx

let y = Symbol("hhh"); // 可以给一个字符串描述一下这个标识
console.log(typeof y); // symbol
y.a = "a";
console.log(y); // Symbol(hhh)

const obj = {
  toString() {
    return "ohla ohla ohla";
  },
};
 
let sm = Symbol(obj);
console.log(sm); // Symbol(ohla ohla ohla)

console.log(y + "123");
// 直接报错了，但是可以显示的变成字符串
console.log(y.toString() + "123"); // Symbol(hhh)123

console.log(Boolean(y)); // true
console.log(!y); // false

console.log(y.description); // hhh

const PROP_ABC = Symbol("abc");
const PROP_BBC = Symbol("bbc");
let a = {
  [PROP_BBC]() {
    if (this[PROP_ABC]) {
      console.log(this[PROP_ABC]);
    }
    console.log("bbc");
  },
};
 
a[PROP_ABC] = "abc for u";
a[PROP_BBC]();

const log = {};
 
log.levels = {
  DEBUG: Symbol("debug"),
  INFO: Symbol("info"),
  WARN: Symbol("warn"),
};
console.log(log.levels.DEBUG, "debug message");
console.log(log.levels.INFO, "info message");

const COLOR_RED = Symbol(); // 虽然这其实也可以用字符串。。。
const COLOR_GREEN = Symbol();
 
function getComplement(color) {
  switch (color) {
    case COLOR_RED:
      return COLOR_GREEN;
    case COLOR_GREEN:
      return COLOR_RED;
    default:
      throw new Error("Undefined color");
  }
}

type = getType();
 
if (type === "node") {
  // 魔法字符串哦
  // ...
}

const TYPES = {
  node: "node",
  path: "path",
};
 
if (type === TYPES.node) {
  // ...
}

const TYPES = {
  node: Symbol("node"),
  path: Symbol("path"),
};
 
if (type === TYPES.node) {
  // ...
}

console.log(Object.getOwnPropertySymbols(a)); // [ Symbol(bbc), Symbol(abc) ]

let s1 = Symbol.for("foo");
let s2 = Symbol.for("foo");
// 如果给 s1 手贱添加属性的话 就永远是 false... why?
s1 === s2; // true

let x = Symbol.for("eee");
let z = Symbol.for("eee");
let eee = Symbol("eee");
console.log(x === z); // true
console.log(Symbol.keyFor(eee)); // undefined 没有登记

function foo() {
  return Symbol.for("bar");
}
 
const x = foo();
const y = Symbol.for("bar");
console.log(x === y); // true

class MyArray {
  [Symbol.hasInstance](obj) {
    console.log(obj);
    return Array.isArray(obj);
  }
}
 
const ma = new MyArray();
console.log([1, 2, 3] instanceof ma);
// [ 1, 2, 3 ]
// true

class Odd {
  static [Symbol.hasInstance](obj) {
    return Number(obj) & 1;
  }
}
 
// 等同于
const Odd = {
  [Symbol.hasInstance](obj) {
    return Number(obj) & 1;
  },
};
console.log(1 instanceof Odd); // true
console.log(2 instanceof Odd); // false

const ar = [1, 4, 3];
console.log(ar[Symbol.isConcatSpreadable]); // undefined
ar[Symbol.isConcatSpreadable] = false;
console.log([555, 444].concat(ar));
// [ 555, 444, [ 1, 4, 3, [Symbol(Symbol.isConcatSpreadable)]: false ] ]

const ou = {
  0: 123,
  1: 312,
  length: 2, // 要有 length
};
ou[Symbol.isConcatSpreadable] = true;
console.log([555, 444].concat(ou));
// [ 555, 444, 123, 312 ]

const myIterable = {};
myIterable[Symbol.iterator] = function* () {
  yield 1;
  yield 2;
  yield 3;
};
 
[...myIterable]; // [1, 2, 3]

const m = new Map();
// don't do this below
m["a"] = 123;
m.has("a"); // false
m.delete("a");
console.log(m); // Map(0) { a: 123 }  won't delete

m.set(2141, "dsfaa");
const o = { a: 123 };
m.set(o, { b: 312 });
console.log(m);
console.log(m.has({ a: 123 })); // false
console.log(m.has(o)); // true
m.delete(o);

const kv1 = [
  [123, "sdf"],
  [223, "erw"],
];
 
const kv2 = [
  [123, "rrrr"],
  ["22222", "5555"],
];
 
const mp = new Map(kv1);
const mp2 = new Map([...kv1, ...kv2]);
const mp3 = new Map([...kv1, ...kv2, [{ ae: 33 }, 666]]);
console.log(...mp2); //	可以解构的... => 键值对数组 在 console.log 能解构因为他本身就接受无限参数 ...args
const arr = [...mp2]; // -> [ [ 123, 'rrrr' ], [ 223, 'erw' ], [ '22222', '5555' ] ]

// 定义 callback
const registry = new FinalizationRegistry((heldValue) => {
  // ....
});
// 注册一个对象
registry.register(theObject, "some value");

// module People.js
const privates = new WeakMap(); // 闭包一个 weakmap 来存放所有实例的私有数据
 
function Person(name, age, money = 0, longevity = 80) {
  this.name = name;
  this.age = age;
  const me = {
    money,
    longevity,
  };
  privates.set(this, me); // 在这里将 this 作为 key 私有数据 me 作为值
  // this 上是访问不到私有数据的
}
// 定义一些操作私有数据的方法
Person.prototype.getMoney = function () {
  const me = privates.get(this);
  return me.money;
};
Person.prototype.die = function () {
  const me = privates.get(this);
  me.longevity = 0;
};
Person.prototype.buy = function (expense = 0) {
  const me = privates.get(this);
  if (me.money < expense) {
    return false;
  }
  return (me.money -= expense);
};
 
module.exports = Person;

// 调用
const Person = require("./weak_map");
const p = new Person("JoJo", 18, 1500);
 
console.log(p); // Person { name: 'JoJo', age: 18 }
console.log(p.money); // undefined 不在 this 上
console.log(p.getMoney()); // 1500
console.log(p.buy(4444)); // false

let a = undefined ?? 123;

const a = obj?.eee?.fff ?? "default"; // 如果没有取到值 当然也可以用 ||

(null || undefined) ?? "foo"; // returns "foo"

if (obj.p && obj.p.pp && obj.p.pp.ppp) {
  console.log(obj.p.pp.ppp.pppp);
}

const res = obj.p
  ? obj.p.pp
    ? obj.p.pp.ppp
      ? obj.p.pp.pppp
      : undefined
    : undefined
  : undefined;

const res = obj.p?.pp?.ppp?.pppp; // obj?.p?....也是可以的
if (!res) {...}

obj.val?.prop;
obj.val?.[expr];
obj.arr?.[index];
obj.func?.(args);

const obj = {
  a: 123,
  b: {
    c: "www",
  },
  d: {
    dd: {
      ddd: "dddd",
      dddd: () => {
        console.log(123123);
        return 123;
      },
    },
  },
};
 
const bb = obj.d?.dd?.dddd?.();

if (foo && foo.bar === baz) {
  /* ... */
}
// 等价于
if (foo && foo.bar === baz) {
  /* ... */
}

if (foo?.bar === baz) {
  /* ... */
}

if (foo && foo.bar !== baz) {
  /* ... */
}
if (foo?.bar !== baz) {
  /* ... */
}

npm install --save-dev @babel/plugin-syntax-optional-chaining

{
  "plugins": ["@babel/plugin-syntax-optional-chaining"]
}

babel --plugins @babel/plugin-syntax-optional-chaining script.js

require("@babel/core").transform("code", {
  plugins: ["@babel/plugin-syntax-optional-chaining"],
});

function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(ms);
    }, ms);
  });
}
 
async function aPrint(value, ms) {
  await timeout(ms);
  console.log(value);
  return ms;
}
 
const res = aPrint(1000, 2000).then((value) => console.log(`timeout ${value}`));
console.log(res); // 这是个 Promise 会先打印

async function aPrint(value, ms) {
  timeout(ms).then((v) => {
    console.log(value);
  });
}

async function foo() {
  const [result1, result2] = await Promise.all([asyncFunc1(), asyncFunc2()]);
}

asyncIterator
  .next()
  .then((iterResult1) => {
    console.log(iterResult1); // { value: 'a', done: false }
    return asyncIterator.next();
  })
  .then((iterResult2) => {
    console.log(iterResult2); // { value: 'b', done: false }
    return asyncIterator.next();
  })
  .then((iterResult3) => {
    console.log(iterResult3); // { value: undefined, done: true }
  });

async function f() {
  const asyncIterable = createAsyncIterable(["a", "b"]);
  const asyncIterator = asyncIterable[Symbol.asyncIterator]();
  console.log(await asyncIterator.next());
  // { value: 'a', done: false }
  console.log(await asyncIterator.next());
  // { value: 'b', done: false }
  console.log(await asyncIterator.next());
  // { value: undefined, done: true }
}

const asyncIter = {
  // 这个 asyncIterator 只能给 for await of 这个 异步迭代接口来用
  [Symbol.asyncIterator]: () => {
    const items = [11, 12, 13, 14, 15];
    return {
      next() {
        return Promise.resolve({
          done: 0 === items.length,
          value: items.shift(),
        });
      },
    };
  },
  [Symbol.iterator]() {
    const N = 5;
    let id = 0;
    return {
      next() {
        return {
          done: id === N,
          value: id++,
        };
      },
    };
  },
};
// for await of
(async function () {
  for await (const s of asyncIter) {
    console.log(s);
  }
})(); // 11 12 13 14 15

const foo = (a) => console.log(a);

let uesa = ["aefjf", "aefjsdf", "aefjf1q", "aefjf1qq34"];
console.log(uesa.map(({ length: len }) => len));
console.log(uesa.map(({ length }) => length));

// 摘自MDN
// Parenthesize the body of a function to return an object literal expression:
params => ({foo: bar})
 
// Rest parameters and default parameters are supported
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => {
statements }
 
// Destructuring within the parameter list is also supported
var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f(); // 6

let callback;
 
callback = callback || function() {}; // ok
 
callback = callback || () => {};
// SyntaxError: invalid arrow-function arguments
 
callback = callback || (() => {});    // ok

let ew = {
  name: "eeee",
  f: () => console.log(this.name),
};
ew.f(); // undefined