padStart()/padEnd()

padStart()用于头部补全。 返回新字符串，不修改原始字符串。 padEnd()用于尾部补全。 返回新字符串，不修改原始字符串。

/**
 * @param {number} maxLength 当前字符串需要填充到的目标长度。若这个数值小于当前字符串的长度，则返回当前字符串本身。
 * @param {string=} fillString 填充字符串，若字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左(padStart)/最右(padEnd)的部分，其他部分会被截断，默认值为" " (U+0020)
 */
padStart(maxLength: number, fillString?: string): string;
padEnd(maxLength: number, fillString?: string): string;

Run

console.log('abc'.padStart(5, 'd'));
console.log('0.0'.padStart(4, '10'));

console.log('abc'.padEnd(5, 'd'));
console.log('0.0'.padEnd(4, '10'));

async/await

async 函数实际上是 Generator 函数与自动执行器包装在一个函数中。

Run

async function fn(args) {
  const res = await new Promise((resolve) => {
    setTimeout(() => {
      resolve(args);
    }, 2000);
  });
  console.log(res);
}
fn('Hello world!');

等同于

Run

function spawn(genFunc) {
  return new Promise((resolve, reject) => {
    const gen = genFunc();
    function step(nextFunc) {
      let next;
      try {
        next = nextFunc();
      } catch (e) {
        return reject(e);
      }
      if (next.done) {
        return resolve(next.value);
      }
      Promise.resolve(next.value).then(
        (v) => {
          step(() => gen.next(v));
        },
        (e) => {
          step(() => gen.throw(e));
        }
      );
    }
    step(() => gen.next(undefined));
  });
}
function fn(args) {
  spawn(function* () {
    yield new Promise((resolve) => setTimeout(() => resolve(), 2000));
    return args;
  }).then((res) => {
    console.log(res);
  });
}
fn('Hello world!');

async/await 示例

Run

const fakeRequest = (time, val) => () =>
  new Promise((resolve) => setTimeout(() => resolve(val), time));
const fakeRequests = [
  fakeRequest(2000, 'a'),
  fakeRequest(1000, 'b'),
  fakeRequest(3000, 'c'),
  fakeRequest(5000, 'd'),
];
async function request(reqs) {
  console.log('Start');
  for (const req of reqs) {
    console.log(await req());
  }
  console.log('End');
}
request(fakeRequests);

Object.values()

Object.values() 类似 Object.keys()，返回 Object 自身属性的所有值，不包括继承值。

Run

const obj = { foo: 'foo', bar: 'bar', baz: 'baz' };
const values = Object.values(obj);
console.log(values);
// ['foo', 'bar', 'baz']

Object.entries()

Object.entries() 返回一个给定对象自身可枚举属性的键值对的数组。

Run

const obj = { foo: 'foo', bar: 'bar', baz: 'baz' };
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}
// 'foo: foo'
// 'bar: bar'
// 'baz: baz'

Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors() 用于获取一个对象所有自身属性的描述符。若无，则返回空对象。

Run

const obj = {
  foo: 'foo',
  baz() {
    return 'baz';
  },
};
const descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors);

SharedArrayBuffer

SharedArrayBuffer 用于表示一个通用的，固定长度的原始二进制数组缓冲区，类似 ArrayBuffer，它们用来在共享内存(Shared Memory)上创建视图，但与 ArrayBuffer 不同的是，SharedArrayBuffer 不能被分离。

Atomics

Atomics 对象提供了一组静态方法用来对 SharedArrayBuffer 对象进行原子操作。 Atomics 不是构造函数，因此不能使用 new 操作符调用，也不能将其当作函数直接调用。Atomics 的所有属性和方法都是静态的(与 Math 对象相同)。 多个共享内存的线程能够同时读写同一位置上的数据。原子操作会确保正在读或写的数据的值是符合预期的，即下一个原子操作一定会在上一个原子操作结束后才会开始，其操作过程不会中断。

方法	描述
Atomics.add()	将指定位置上的数组元素与给定的值相加，并返回相加前该元素的值
Atomics.and()	将指定位置上的数组元素与给定的值相与，并返回与操作前该元素的值
Atomics.compareExchange()	如果数组中指定的元素与给定的值相等，则将其更新为新的值，并返回该元素原本的值
Atomics.exchange()	将数组中指定的元素更新为给定的值，并返回该元素更新前的值。
Atomics.load()	返回数组中指定元素的值
Atomics.or()	将指定位置上的数组元素与给定的值相或，并返回或操作前该元素的值
Atomics.store()	将数组中指定的元素设置为给定的值，并返回该值
Atomics.sub()	将指定位置上的数组元素与给定的值相减，并返回相减前该元素的值
Atomics.xor()	将指定位置上的数组元素与给定的值相异或，并返回异或操作前该元素的值
Atomics.wait()	检测数组中某个指定位置上的值是否仍然是给定值，是则保持挂起直到被唤醒或超时。返回值为 "ok"、"not-equal" 或 "time-out"。调用时，如果当前线程不允许阻塞，则会抛出异常（大多数浏览器都不允许在主线程中调用 wait()）。
Atomics.wake()	唤醒等待队列中正在数组指定位置的元素上等待的线程。返回值为成功唤醒的线程数量。
Atomics.isLockFree(size)	可以用来检测当前系统是否支持硬件级的原子操作。对于指定大小的数组，如果当前系统支持硬件级的原子操作，则返回 true；否则就意味着对于该数组，Atomics 对象中的各原子操作都只能用锁来实现。此函数面向的是技术专家。