猫史档案馆

经过了深思熟虑,我做出了一个违背祖宗的决定(bushi

这篇帖子全是干货 一定要看完 

诸如箭头函数、模板字符串、解构赋值、this指针、异步、class、protype这些相对基础 伴雪就不会多加叙述了

 

1.空值合并运算符

const foo = null ?? "default value";
console.log(foo); // 输出 "default value"

a ??b 当a为空值时(如 null undefined)时 返回b 不为空值时返喵身

2.可选链操作符

const someObj = {
  foo: {
    bar: "Hello, world!"
  }
};

const baz = someObj?.foo?.bar?.toUpperCase();
console.log(baz); // 输出 "HELLO, WORLD!"

?. 它可以用于访问嵌套对象或数组的属性或方法，如果链上的任何一个属性或方法不存在，它会返回 undefined

3.扩展操作符

①数组和对象

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

②函数参数填值 有点像python的def (*v):

function sum(...nums) {
  return nums.reduce((acc, num) => acc + num, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // 15

 

③函数调用

function foo(x, y, z) {
  console.log(x, y, z);
}

const arr = [1, 2, 3];
foo(...arr); // 1 2 3

4.Map 和 Set

Map 可以用于存储一组键值对，而 Set 可以用于存储一组唯一值

const m = new Map();
m.set('a', 1);
m.set('b', 2);

console.log(m.get('a')); // 1

const t = new Set([1, 2, 3, 2, 3, 4]);
console.log(t); // {1, 2, 3, 4}

5.Proxy

拦截并改变 JavaScript 操作对象的默认行为 可以保护对象

const person = {
  id: '吉吉',
  age: 45
};

const protectedPerson = new Proxy(person, {
  // 定义 get 操作的喵
  get(target, prop) {
    console.log(`"${prop}"`);
    return target[prop];
  },
  // 定义 set 操作的喵
  set(target, prop, value) {
    if (prop === 'age' && value < 18) {
      throw new Error('age is too low');
    }
    console.log(`"${prop}"="${value}"`);
    target[prop] = value;
    return true;
  }
});

console.log(protectedPerson.id); // 输出: "id"  吉吉
protectedPerson.age = 15; // 抛出异常: "age is too low"

6.Symbol

每个 Symbol 都是独一无二的

const mySymbol = Symbol('my symbol');
const obj = {};

obj[mySymbol] = 'some value';

console.log(obj[mySymbol]); // 'some value'

7.with

with 关键字可以将一个对象作为作用域，然后在代码块中可以直接访问该对象的属性

const myObject = {
  foo: '吉吉'
};

with (myObject) {
  console.log(foo); // '吉吉'
}

8.yield和*function

function* a() {
  yield 1;
  yield 2;
  yield 3;
}

const m = a();
console.log(m.next()); // { value: 1, done: false }
console.log(m.next()); // { value: 2, done: false }
console.log(m.next()); // { value: 3, done: false }
console.log(m.next()); // { value: undefined, done: true }

9.Promise.all()和Promise.race()

接受一个包含多个 Promise 实例的数组，返回一个新的 Promise 实例

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, 'foo');
});
const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 2000, 'bar');
});

Promise.all([promise1, promise2]).then(values => {
  console.log(values); // ['foo', 'bar']
});

10.Reflect

用于像反射一样操作 JavaScript 对象

const myObject = { foo: 'bar' };

Reflect.defineProperty(myObject, 'baz', {
  value: 'qux'
});

console.log(myObject.baz); // 'qux'

11.Proxy revocable()

用于管控代理行为，它创建并返回一个 Proxy 对象，同时提供一个 revoke() 函数

const m = { foo: 'bar' };
const { proxy, revoke } = Proxy.revocable(m, {});

console.log(proxy.foo); // 'bar'
revoke();
console.log(proxy.foo); // 报错TypeError: Cannot perform 'get' on a proxy that has been revoked

12.Function

替代eval

const code = 'console.log("Hello, World!");';
const exec = new Function(code);
exec(); // 输出： Hello, World!

13.apply() 和 call() 

用于改变函数中 this 关键词

//不想写例子了自己去搜

14.bind() 

用来永久性地指定一个函数的 this 值

//不想写例子了自己去搜

15.instanceof

测试一个对象是否是某个构造函数的实例

class Animal {}
class Dog extends Animal {}
const fido = new Dog();
console.log(fido instanceof Dog); // true
console.log(fido instanceof Animal); // true

16.位运算符

按位与(&)、按位或(|)、按位异或(^)

const num1 = 10; // 二进制: 1010
const num2 = 3;  // 二进制: 0011

console.log(num1 & num2); // 2   (二进制: 0010)
console.log(num1 | num2); // 11  (二进制: 1011)
console.log(num1 ^ num2); // 9   (二进制: 1001)

17.管道操作符

const result = [1, 2, 3]
  |> map(x => x * 2)
  |> map(x => x + 100);

console.log(result); // 输出： [102, 104, 106]

|> 将多个函数以管道方式组合起来

18.双否定运算符

~~3.14 //返回3
~~"42" //返回42

就写这么多了 多了也没人看(绝对不是想不到了)

 

 

“多了也没人看”

人贵在有自知之明

var idea = 0 ?? 1

function xxx(){
    return arguments;
};

xxx(1,2,"3"); // 返回 伪数组 [1,2,"3"]

function xxx(){
    return [].slice.call(arguments);
};

xxx(1,2,"3"); // 返回 真数组 [1,2,"3"]

function xxx(){
    return [].slice.call(arguments).join(" ");
};

xxx(1,2,"3"); // 返回 "1 2 3"

1e7

10**7

0.1 + 0.2; // 0.30000000000000004
0.1 + 0.2 === 0.3; // false

999999999999999999; // 喵00000000
console.log(999999999999999999); // 控制台输出：喵00000000
999999999999999999 === 999999999999999999; // true
999999999999999999 === 喵00000000; // true

true && (()=>{
    console.log(6)
})()

if (true) {
    console.log(6)
}

false || (() => {
    console.log(6)
})()

if (!false) {
    console.log(6)
}