Skip to content

JS_Grammer_Summary

reduce

reduce is a simplified version of iteration

arr.reduce((acc, cur) → acc + cur.price, 0);

Init methods

  • []
  • new Array()
  • Array.of(1, 2, 3)
  • Array.from({ length: 3 }, (_, i) => i)
  • Array.from(set)
  • Array(3).fill('x')
  • 初始化包含x个为y元素的array

Copy Array Clone

Not change original array - Shallow Copy

  • arr.slice()
  • arr.concat()

change original array

  • [...arr]

Deep Copy

  • JSON.parse(JSON.stringify(arr))
  • Array.from(arr)

Methods

return new array

  • arr.map(fn)
  • arr.filter(fn)
  • arr.reduce(fn, initialValue)
  • arr.flat(depth)
  • arr.flatMap(fn)
  • arr.slice(start, end)
  • start: 开始索引

  • end: 结束索引(不包括)

  • arr.every(fn)

  • arr.some(fn)
  • arr.find(fn)
  • arr.findIndex(fn)
  • arr.indexOf(item)
  • arr.lastIndexOf(item)
  • arr.includes(item)

change original array

  • arr.splice(start, deleteCount, item1, item2, item3)
  • deleteCount: 删除的元素个数
  • item1, item2, item3: 添加的元素
  • 主要是删除元素，添加元素
  • arr.push(item)
  • arr.pop()
  • arr.shift()
  • arr.unshift(item)
  • arr.reverse()
  • arr.sort(fn)
  • arr.sort((a, b) => a - b)

Map - Initialize

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
]);

Map - Methods

  • map.set(key, value)

  • map.get(key)

  • map.has(key)

  • map.delete(key)
  • map.clear()
  • map.size

Map - Iteration

for (const [key, value] of map) {
  console.log(key, value);
}

Set - Initialize

const set = new Set([1, 2, 3]);

Set - Methods

  • set.add(value)
  • set.has(value)
  • set.delete(value)
  • set.clear()
  • set.size

Set - Iteration

for (const value of set) {
  console.log(value);
}

Object - Prototype

  • Get prototype
  • __proto__
  • Object.getPrototypeOf(obj)
  • Set prototype
  • Object.setPrototypeOf(obj, proto)

Object - Create object

  • {}
  • new Object()
  • Object.create(proto)
  • constructor function
  • class

Object - Basic method

  • Object.values(obj)
  • Object.keys(obj)
  • Object.entries(obj)
  • Object.fromEntries(iterable)
  • Object.hasOwn(obj, key)
  • filter inherienced properties
  • Object.getOwnPropertyNames(obj)
  • return an array of all properties (including non-enumerable properties) found directly upon a given object.

Object - 判断key是否是原生的

Object.hasOwn(obj, key)

Object - iterate object

for (const [key, value] of Object.entries(obj)) {
    console.log(key, value);
}
Object.entries(obj).map(([key, value]) => {
    console.log(key, value);
})

Object - 判断是否是object

  • typeof obj === 'object' && obj !== null
  • 不能判断obj是Array，Function等。
  • isPlainObject 判断是否是纯对象，排除Array，Function等。
function isPlainObject(value) {
  if (value == null) {
    return false;
  }

  const prototype = Object.getPrototypeOf(value);
  return prototype === null || prototype === Object.prototype;
}

Type Comparison

在GFE做了很多type相关的题目，比如deep equal，重点type是Object和Array,先遍历，如果item是多层嵌套的，在每个item递归调用，另外，在Object中，还需要排除null的情况。

Hint: forEach里的return不会终止循环，for里的return会终止循环。其他的思路是，可以用every和some，他们可以中止循环。

Primitive

  • Object.is(NaN, NaN)
  • typeof NaN
  • Object.prototype.toString.call(valueA)

Object

首先判断是不是object，可以用typeof和判断不是null。

通过Object.keys()来拿到keys，先判断length是否一致，再用for...of来遍历，递归调用deepEqual。

判断object

  • Object.getPrototypeOf(value) === Object.prototype
  • value instanceof Object
  • typeof value === 'object' && value !== null

iterate object

判断obj里有没有x属性

  • Object.hasOwn(obj, x)
  • Object.prototype.hasOwnProperty.call(obj, x)

Array

思路的是先判断是否是array，再判断length是否一致，再遍历，遍历时候递归来判断每个item是否一致.注意forEach里的return不会终止循环，for里的return会终止循环。

命名

  • wrapper
  • container
  • flex-container
  • input-box

pseudo class

  • first-child
  • :not(:first-child)

Hover

.btn:hover {
    background-color: red;
}

def variable and use

:root {
    --blue: #007bff;
}

.btn {
    background-color: var(--blue);
}

button

name

  • button--primary
  • button--secondary
  • button--danger
.btn {
    cursor: pointer;
    padding: 4px 8px;
    font-weight: bold;
    align-items: center;
    border: 1px solid #000;
    border-radius: 2rem;
    display: flex;
    gap: 1/2rem;
}
.btn:focus{
    outline: 2px solid #000;
  outline-offset: 1px;
}
.btn:disabled{
    opacity: 0.25;
    cursor: not-allowed;
    transition: all 0.3s linear;
}

input

input:focus {
    outline: 1px solid #000;
}

```css
.input-box {
  --size: 3rem;
  height: var(--size);
  width: var(--size);
  border: none;
  outline: none;
  font-weight: 600;
  font-size: 1.5rem;
}


## hidden

```css
.hidden {
    display: none;
}

wrapper

.wrapper {
    width: 100vw;
    height: 100vh;
}

BEM

先说细节,再说更加specific的

EX: like-button--default 和 like-button--liked