
## Array

1. 将输入值转化为数组

``` javascript
const castArray = value => Array.isArray(value) ? value : [value];

// Examples
castArray(1);               // [1]
castArray([1, 2, 3]);       // [1, 2, 3]
```

2. 判断数组是否为空

``` javascript
const isEmpty = arr => Array.isArray(arr) && arr.length === 0;

// Examples
isEmpty(1);             // false
isEmpty([]);            // true
isEmpty([1, 2, 3]);     // false
```

3. 拷贝一个数组

``` javascript
// `arr` is an array
const clone = arr => arr.slice(0);

// Or
const clone = arr => arr.concat([]);

// Or
const clone = arr => [...arr];

// Or
const clone = arr => Array.from(arr);

// Or
const clone = arr => arr.map(v => v);
```

4. 对比两个数组是否一样
   
``` javascript
const isEqual = (arr1, arr2) => arr1.length === arr2.length && arr1.every((v, i) => v === arr2[i]);

// Examples
isEqual([1, 2, 3], [1, 2, 3]);      // true
isEqual([1, 2, 3], [1, '2', 3]);    // false
```

5. 根据某个属性将数组转化为对象（属性作为key）

``` javascript
const toObject = (arr, key) => arr.reduce((a, b) => ({...a, [b[key]]: b}), {});

// Example
toObject(
    [
        { id: '1', name: 'Alpha', gender: 'Male' },
        { id: '2', name: 'Bravo', gender: 'Male' },
        { id: '3', name: 'Charlie', gender: 'Female' },
    ],
    'id'
);
/* 
{
    '1': { id: '1', name: 'Alpha', gender: 'Male' },
    '2': { id: '2', name: 'Bravo', gender: 'Male' },
    '3': { id: '3', name: 'Charlie', gender: 'Female' },
}
*/
```

6. 找出数组中最大的值（Number）

``` javascript
const indexOfMax = arr => arr.reduce((prev, v, i, a) => v > a[prev] ? i : prev, 0);

// Examples
indexOfMax([1, 3, 9, 7, 5]);        // 2
indexOfMax([1, 3, 7, 7, 5]);        // 2
```

7. 根据属性找出数组中属性值最大的

``` javascript
const maxBy = (arr, key) => arr.reduce((a, b) => a[key] >= b[key] ? a : b, {});

// Example
const people = [
    { name: 'Bar', age: 24 },
    { name: 'Baz', age: 32 },
    { name: 'Foo', age: 42 },
    { name: 'Fuzz', age: 36 },
];
maxBy(people, 'age');   // { name: 'Foo', age: 42 }
```

8. 数组去重

``` javascript
const unique = arr => Array.from(new Set(arr));

// Or
const unique = arr => arr.filter((el, i, array) => array.indexOf(el) === i);
```

9. 以属性值为key将数组转化成对象

``` javascript
const groupBy = (arr, key) => arr.reduce((acc, item) => ((acc[item[key]] = [...(acc[item[key]] || []), item]), acc), {});

// Example
groupBy([
    { branch: 'audi', model: 'q8', year: '2019' },
    { branch: 'audi', model: 'rs7', year: '2020' },
    { branch: 'ford', model: 'mustang', year: '2019' },
    { branch: 'ford', model: 'explorer', year: '2020' },
    { branch: 'bmw', model: 'x7', year: '2020' },
], 'branch');

/*
{
    audi: [
        { branch: 'audi', model: 'q8', year: '2019' },
        { branch: 'audi', model: 'rs7', year: '2020' }
    ],
    bmw: [
        { branch: 'bmw', model: 'x7', year: '2020' }
    ],
    ford: [
        { branch: 'ford', model: 'mustang', year: '2019' },
        { branch: 'ford', model: 'explorer', year: '2020' }
    ],
}
*/
```

10. 根据属性值给数组排序

``` javascript
const sortBy = (arr, k) => arr.concat().sort((a, b) => (a[k] > b[k]) ? 1 : ((a[k] < b[k]) ? -1 : 0));

// Example
const people = [
    { name: 'Foo', age: 42 },
    { name: 'Bar', age: 24 },
    { name: 'Fuzz', age: 36 },
    { name: 'Baz', age: 32 },
];
sortBy(people, 'age');

// returns
//  [
//      { name: 'Bar', age: 24 },
//      { name: 'Baz', age: 32 },
//      { name: 'Fuzz', age: 36 },
//      { name: 'Foo', age: 42 },
//  ]
```

## DOM

1. 判断是否为某个元素的子节点

``` javascript
const isDescendant = (child, parent) => parent.contains(child);
```

2. 判断当前元素是否是Focus状态

``` javascript
const isFocus = ele => ele === document.activeElement;
```

3. 判断页面是否滑到底部

``` javascript
const isAtBottom = () => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight;
```

4. 当前浏览器判断

``` javascript

// IE
const isIE = !!document.documentMode;

// Chrome
const isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

// macOS browser
const isMacBrowser = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
```

5. 获取用户选中的文本

``` javascript
const getSelectedText = () => window.getSelection().toString();
```

6. 隐藏元素
  
``` javascript
const hide = ele => ele.style.display = 'none';

// Or
const hide = ele => ele.style.visibility = 'hidden';

// Or
const hide = ele => ele.hidden = true;
```

7. 将元素插入某个元素之后

``` javascript
const insertAfter = (ele, anotherEle) => anotherEle.parentNode.insertBefore(ele, anotherEle.nextSibling);

// Or
const insertAfter = (ele, anotherEle) => anotherEle.insertAdjacentElement('afterend', ele);
```

8. 跳转页面

``` javascript
const goTo = url => location.href = url;
```

9. 重新加载当前页

``` javascript
const reload = () => location.reload();

// Or
const reload = () => (location.href = location.href);
```

10. 替换元素

``` javascript
const replace = (ele, newEle) => ele.parentNode.replaceChild(newEle, ele);
```

11. 回到页面顶部

``` javascript
const goToTop = () => window.scrollTo(0, 0);
```

## Date

1. 将时间转化为 YYYY-MM-DD 格式

``` javascript
// `date` is a `Date` object
const formatYmd = date => date.toISOString().slice(0, 10);

// Example
formatYmd(new Date());      // 2020-05-06
```

2. 计算当前时间是这一年的第几天

``` javascript
// `date` is a Date object
const dayOfYear = date => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / (1000 * 60 * 60 * 24));

// Example
dayOfYear(new Date(2020, 04, 16));      // 137
```

3. 获取给定月份的天数

``` javascript
const daysInMonth = (month, year) => new Date(year, month, 0).getDate();
```

4. 获取给定年份的总天数

``` javascript
const numberOfDays = year => new Date(year, 1, 29).getDate() === 29 ? 366 : 365;
```

js常用方法集合（一）

## 1. 两数之和

### 题目描述

给定一个整数数组 **nums** 和一个目标值 **target**，请你在该数组中找出和为目标值的那 **两个** 整数，并返回他们的数组下标。
你可以假设每种输入只会对应一个答案。但是，你不能重复利用这个数组中同样的元素。

### 示例

``` javascript
给定 nums = [2, 7, 11, 15], target = 9

因为 nums[0] + nums[1] = 2 + 7 = 9
所以返回 [0, 1]
````

### 代码实现

``` javascript
const findTotal = (nums, target) => {
  for(let i = 0; i < nums.length; i++) {
    if (nums.includes(target-nums[i])) {
      return [i, nums.indexOf(target-nums[i])];
    }
  }
}
```

``` javascript
const twoSum = (nums, target) => {
  let preNums = {};
  for (let i = 0; i < nums.length; i++) {
    const targetNum = target - nums[i];
    if (preNums[targetNum]) {
      return [preNums[targetNum], i];
    }
    preNums[nums[i]] = i;
  }
}
```


## 2. 整数反转

### 题目描述

![reverse-integer](reverse-integer.jpeg)


### 代码实现

``` javascript
const reverse = (x) => {
  let result = 0;
  while (x !== 0) {
    result = result * 10 + (x % 10);
    x = Math.floor(x / 10);
  }

  if (result < -Math.pow(2, 31) || result > Math.pow(2, 31) - 1) {
    return 0;
  }
  return result;
};
```

## 3. 合并两个有序链表

### 题目描述

将两个升序链表合并为一个新的 **升序** 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 

### 示例1

![merge-two-sorted-lists](merge-two-sorted-lists.jpeg)

``` javascript
输入：l1 = [1,2,4], l2 = [1,3,4]
输出：[1,1,2,3,4,4]
```

### 示例2

``` javascript
输入：l1 = [], l2 = []
输出：[]
```

### 示例3

``` javascript
输入：l1 = [], l2 = [0]
输出：[0]
```

### 提示

- 两个链表的节点数目范围是 [0, 50]
- -100 <= Node.val <= 100
- l1 和 l2 均按 非递减顺序 排列

``` javascript
// 例如 现有两个链表
const ListNode1 = {
  value: 0,
  next: {
    value: 2,
    next: {
      value: 4,
      next: null
    }
  }
}

const ListNode2 = {
  value: 1,
  next: {
    value: 3,
    next: {
      value: 5,
      next: null
    }
  }
}
```

### 实现

``` javascript
const mergeTwoLists = (l1, l2) => {
  if (l1 === null) {
    return l2
  }
  if (l2 === null) {
    return l1
  }
  if (l1.value < l2.value) {
    l1.next = mergeTwoLists(l1.next, l2)
    return l1
  }
  if (l2.value < l1.value) {
    l2.next = mergeTwoLists(l2.next, l1)
    return l2
  }
}
```

## 4. 最大子序和

### 题目描述

给定一个整数数组 **nums** ，找到一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和。

### 示例1

``` javascript
输入：nums = [-2,1,-3,4,-1,2,1,-5,4]
输出：6
解释：连续子数组 [4,-1,2,1] 的和最大，为 6 。
```

### 示例2

``` javascript
输入：nums = [1]
输出：1
```

### 示例3

``` javascript
输入：nums = [0]
输出：0
```

### 示例4

``` javascript
输入：nums = [-1]
输出：-1
```

### 示例5

``` javascript
输入：nums = [-100000]
输出：-100000
```

### 提示
- 1 <= nums.length <= 3 * 104
- -105 <= nums[i] <= 105

``` javascript
const maxSubArray = (nums) => {
  let pre = 0;
  let max = nums[0];
  nums.forEach(x => {
    pre = Math.max(pre + x, x);
    max = Math.max(max, pre);
  });
  return max;
};
```

## 5. 反转链表

### 题目描述

定义一个函数，输入一个链表的头节点，反转该链表并输出反转后链表的头节点。

### 示例:

``` javascript
const ListNode = {
  value: 1,
  next: {
    value: 2,
    next: {
      value: 3,
      next: {
        value: 4,
        next: {
          value: 5,
          next: null
        }
      }
    }
  }
}

输入: 1->2->3->4->5->NULL
输出: 5->4->3->2->1->NULL
```

### 限制：

``` javascript
0 <= 节点个数 <= 5000
```

``` javascript
const reverseList = (head) => {
  let pre = null;
  let cur = head;
  while(cur) {
    const next = cur.next;
    cur.next = pre;
    pre = cur;
    cur = next;
  }
  return pre;
}
```

## 6. 二叉树的最大深度

### 题目描述

给定一个二叉树，找出其最大深度。

二叉树的深度为根节点到最远叶子节点的最长路径上的节点数。

**说明： 叶子节点是指没有子节点的节点。**

### 示例

给定二叉树 **[3,9,20,null,null,15,7]**

![maximum-depth-of-binary-tree](maximum-depth-of-binary-tree.jpeg)

返回它的最大深度 3 。

``` javascript
const maxDepth = tree => {
  if (!tree) {
    return 0;
  }
  const maxLeft = maxDepth(tree.left);
  const maxRight = maxDepth(tree.right);
  return Math.max(maxLeft, maxRight) + 1;
}
```

## 7. 环形链表

### 题目描述

给定一个链表，判断链表中是否有环。

如果链表中有某个节点，可以通过连续跟踪 next 指针再次到达，则链表中存在环。 为了表示给定链表中的环，我们使用整数 pos 来表示链表尾连接到链表中的位置（索引从 0 开始）。 如果 pos 是 -1，则在该链表中没有环。注意：pos 不作为参数进行传递，仅仅是为了标识链表的实际情况。

如果链表中存在环，则返回 true 。 否则，返回 false 。

### 思路

给遍历过的节点打记号，如果遍历过程中遇到有记号的说明已环🤓

``` javascript
const hasCycle = head => {
  while(head) {
    if (head.tag) {
      return true;
    }
    head.tag = true;
    head = head.next;
  }
  return false;
}
```


## 8. 合并二叉树

### 题目描述

给定两个二叉树，想象当你将它们中的一个覆盖到另一个上时，两个二叉树的一些节点便会重叠。

你需要将他们合并为一个新的二叉树。合并的规则是如果两个节点重叠，那么将他们的值相加作为节点合并后的新值，否则不为 NULL 的节点将直接作为新二叉树的节点。

### 示例

![merge-two-binary-trees](merge-two-binary-trees.jpeg)

**注意：合并必须从两个树的根节点开始。**

``` javascript
const mergeTrees = (t1, t2) => {
  if (!t1 || !t2) {
    return t1 || t2;
  }
  t1.value = t1.value + t2.value;
  t1.left = mergeTrees(t1.left, t2.left);
  t1.right = mergeTrees(t1.right, t2.right);
  return t1;
}
```

## 9. 有效的括号

### 题目描述
给定一个只包括 '('，')'，'{'，'}'，'['，']' 的字符串 s ，判断字符串是否有效。

有效字符串需满足：

1. 左括号必须用相同类型的右括号闭合。
2. 左括号必须以正确的顺序闭合。

### 示例 1：
``` javascript
输入：s = "()"
输出：true
```

### 示例 2：
``` javascript
输入：s = "()[]{}"
输出：true
```

### 示例 3：
``` javascript
输入：s = "(]"
输出：false
```

### 示例 4：
``` javascript
输入：s = "([)]"
输出：false
```

### 示例 5：
``` javascript
输入：s = "{[]}"
输出：true
```

### 提示：

![valid-parentheses-alert](valid-parentheses-alert.jpeg)

``` javascript
const isValid = (str) => {
  const { length } = str;
  if (length % 2 !== 0) return false;
  let arr = [];
  for (let item of str) {
    switch (item) {
      case "(":
      case "{":
      case "[":
        arr.push(item);
        break;
      case ")":
        if (arr.pop() !== "(") return false;
        break;
      case "}":
        if (arr.pop() !== "{") return false;
        break;
      case "]":
        if (arr.pop() !== "[") return false;
        break;
    }
  }

  return arr.length === 0
};
```

## 10. 爬楼梯

### 题目描述

假设你正在爬楼梯。需要 n 阶你才能到达楼顶。

每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢？

注意：给定 n 是一个正整数。

### 示例 1：

``` javascript
输入： 2
输出： 2
解释： 有两种方法可以爬到楼顶。
1.  1 阶 + 1 阶
2.  2 阶
```

### 示例 2：

``` javascript
输入： 3
输出： 3
解释： 有三种方法可以爬到楼顶。
1.  1 阶 + 1 阶 + 1 阶
2.  1 阶 + 2 阶
3.  2 阶 + 1 阶
```

``` javascript
const climbStairs = (n) => {
  if (n < 1) return 0;
  const dp = [];
  dp[1] = 1;
  dp[2] = 2;
  for (let i = 0; i < n; i++) {
    dp[i] = dp[i - 1] + dp[i - 2];
  }
  return dp[n];
};
```

## 11. 二叉树的中序遍历

### 题目描述

给定一个二叉树的根节点 root ，返回它的 中序 遍历。

### 示例 1：

![binary-tree-inorder-traversal1](binary-tree-inorder-traversal1.jpeg)

``` javascript
输入：root = [1,null,2,3]
输出：[1,3,2]
```

### 示例 2：

``` javascript
输入：root = []
输出：[]
```

### 示例 3：

``` javascript
输入：root = [1]
输出：[1]
```

### 示例 4：

![binary-tree-inorder-traversal2](binary-tree-inorder-traversal2.jpeg)

``` javascript
输入：root = [1,null,2]
输出：[1,2]
```

### 示例 5：

![binary-tree-inorder-traversal3](binary-tree-inorder-traversal3.jpeg)

``` javascript
输入：root = [1,null,2]
输出：[1,2]
```

### 提示：

![binary-tree-inorder-traversal-alert](binary-tree-inorder-traversal-alert.jpeg)

``` javascript
const inorderTraversal = (root) => {
  const res = [];
  const inorder = (root) => {
    if (!root) return;
    inorder(root.left);
    res.push(root.val);
    inorder(root.right);
  }
  inorder(root)
  return res;
};
```

## 12. 对称二叉树

### 题目描述

给定一个二叉树，检查它是否是镜像对称的。

![symmetric-tree](symmetric-tree.jpeg)



## 13. 买卖股票的最佳时机

### 题目描述

给定一个数组 prices ，它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。

你只能选择 某一天 买入这只股票，并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计算你所能获取的最大利润。

返回你可以从这笔交易中获取的最大利润。如果你不能获取任何利润，返回 0 。

### 示例 1：

``` javascript
输入：[7,1,5,3,6,4]
输出：5
解释：在第 2 天（股票价格 = 1）的时候买入，在第 5 天（股票价格 = 6）的时候卖出，最大利润 = 6-1 = 5 。
     注意利润不能是 7-1 = 6, 因为卖出价格需要大于买入价格；同时，你不能在买入前卖出股票。
```

### 示例 2：

``` javascript
输入：prices = [7,6,4,3,1]
输出：0
解释：在这种情况下, 没有交易完成, 所以最大利润为 0。
```

### 提示：

![best-time-to-buy-and-sell-stock-alert](best-time-to-buy-and-sell-stock-alert.jpeg)


## 14. 只出现一次的数字

### 题目描述

给定一个非空整数数组，除了某个元素只出现一次以外，其余每个元素均出现两次。找出那个只出现了一次的元素。

### 说明：

你的算法应该具有线性时间复杂度。 你可以不使用额外空间来实现吗？

### 示例 1:

``` javascript
输入: [2,2,1]
输出: 1
```

### 示例 2:

``` javascript
输入: [4,1,2,1,2]
输出: 4
```

``` javascript
const singleNumber = (nums) => {
  let obj = {};
  for(const num of nums) {
    if (!obj[num]) {
      obj[num] = true;
    } else {
      delete obj[num]
    }
  }
  return Number(Object.keys(obj)?.[0])
};
```

## 15. 最小栈

### 题目描述

设计一个支持 push ，pop ，top 操作，并能在常数时间内检索到最小元素的栈。

  - push(x) —— 将元素 x 推入栈中。
  - pop() —— 删除栈顶的元素。
  - top() —— 获取栈顶元素。
  - getMin() —— 检索栈中的最小元素。

### 示例:

``` javascript
  输入：
  ["MinStack","push","push","push","getMin","pop","top","getMin"]
  [[],[-2],[0],[-3],[],[],[],[]]

  输出：
  [null,null,null,null,-3,null,0,-2]

  解释：
  MinStack minStack = new MinStack();
  minStack.push(-2);
  minStack.push(0);
  minStack.push(-3);
  minStack.getMin();   --> 返回 -3.
  minStack.pop();
  minStack.top();      --> 返回 0.
  minStack.getMin();   --> 返回 -2.
```

### 提示：

- pop、top 和 getMin 操作总是在 非空栈 上调用。

``` javascript
var MinStack = function() {
    this.x_stack = [];
    this.min_stack = [Infinity];
};

MinStack.prototype.push = function(x) {
    this.x_stack.push(x);
    this.min_stack.push(Math.min(this.min_stack[this.min_stack.length - 1], x));
};

MinStack.prototype.pop = function() {
    this.x_stack.pop();
    this.min_stack.pop();
};

MinStack.prototype.top = function() {
    return this.x_stack[this.x_stack.length - 1];
};

MinStack.prototype.getMin = function() {
    return this.min_stack[this.min_stack.length - 1];
};
```

## 16. 相交链表

### 题目描述

给你两个单链表的头节点 headA 和 headB ，请你找出并返回两个单链表相交的起始节点。如果两个链表没有交点，返回 null 。

图示两个链表在节点 c1 开始相交：

![intersection-of-two-linked-lists1](intersection-of-two-linked-lists1.jpeg)

题目数据 保证 整个链式结构中不存在环。

注意，函数返回结果后，链表必须 保持其原始结构 。

### 示例 1：

![intersection-of-two-linked-lists2](intersection-of-two-linked-lists2.jpeg)

``` javascript
输入：intersectVal = 8, listA = [4,1,8,4,5], listB = [5,0,1,8,4,5], skipA = 2, skipB = 3
输出：Intersected at '8'
解释：相交节点的值为 8 （注意，如果两个链表相交则不能为 0）。
从各自的表头开始算起，链表 A 为 [4,1,8,4,5]，链表 B 为 [5,0,1,8,4,5]。
在 A 中，相交节点前有 2 个节点；在 B 中，相交节点前有 3 个节点。
```

### 示例 2：

![intersection-of-two-linked-lists3](intersection-of-two-linked-lists3.jpeg)

``` javascript
输入：intersectVal = 2, listA = [0,9,1,2,4], listB = [3,2,4], skipA = 3, skipB = 1
输出：Intersected at '2'
解释：相交节点的值为 2 （注意，如果两个链表相交则不能为 0）。
从各自的表头开始算起，链表 A 为 [0,9,1,2,4]，链表 B 为 [3,2,4]。
在 A 中，相交节点前有 3 个节点；在 B 中，相交节点前有 1 个节点。
```

### 示例 3：

![intersection-of-two-linked-lists4](intersection-of-two-linked-lists4.jpeg)

``` javascript
输入：intersectVal = 0, listA = [2,6,4], listB = [1,5], skipA = 3, skipB = 2
输出：null
解释：从各自的表头开始算起，链表 A 为 [2,6,4]，链表 B 为 [1,5]。
由于这两个链表不相交，所以 intersectVal 必须为 0，而 skipA 和 skipB 可以是任意值。
这两个链表不相交，因此返回 null 。
```

### 提示：

![intersection-of-two-linked-lists-alert](intersection-of-two-linked-lists-alert.jpeg)

算法题（简单系列）


## 1. 对HTML语义化的一些理解

- 标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。SEO
- 有利于构建清晰的机构，有利于团队的开发、维护。

## 2. 讲讲HTML5加了哪些东西

- 语义化标签（header，footer等）
- audio，video
- Canvas
- 本地存储，各种storage
- Web Worker多线程

## 3. 那些你不知道的meta标签

- name 属性
  
  用于描述页面信息（内容，关键词，作者等）
  - author
  - description
  - keywords
  - viewport

- http-equiv
  
  用于描述HTTP头部

  - content-type
  - content-security-policy（内容策略）

面试题集合（HTML篇）


## 1. infinity代表什么数据

  在JS中Infinity用于表示无穷大的数值，且不是常量，即无法明确表示它到底有多大。可以通过isFinite(val)判断当前数字是否是无穷大，函数返回true表示不是无穷大，返回false表示是无穷大。


## 2. 如何计算动画的帧率（FPS）

- 可以借助requestAnimationFrame API，requestAnimationFrame 使用一个回调函数作为参数。这个回调函数会在浏览器重绘之前调用。

- requestAnimationFrame的回调函数执行次数通常与浏览器屏幕刷新次数相匹配，而利用这个API实现动画的原理就是回调函数内再次调用requestAnimationFrame，所以页面不断重绘时，然后检测1秒内requestAnimationFrame调用的次数，就是当前的FPS


## 3. 请说说new String("A")和String("A")分别返回的结果，请解释为什么

- new String("A") :
  
  返回类型：引用类型，堆内存存储
  返回值：字符串对象

- String("A”) ：
  
  返回类型：基本类型，栈内存存储
  返回值：字符串值

## 4. 请通过reduce函数实现一维数组的求和

``` javascript
const sum = arr => arr.reduce((a, b) => a + b)
```

## 5. 请说说严格模式下的this指向

- 在严格模式下，在全局作用域中，this指向window对象
- 在严格模式下，函数中的this等于undefined
- 在严格模式下，对象的函数中的this指向调用函数的对象实例
- 在严格模式下，构造函数中的this指向构造函数创建的对象实例。
- 在严格模式下，在事件处理函数中，this指向触发事件的目标对象。

## 6. 图片懒加载原理
   
  图片懒加载的原理主要是判断当前图片是否到了可视区域这一核心逻辑实现的

- 拿到所有的图片 dom 。
- 遍历每个图片判断当前图片是否到了可视区范围内。
- 如果到了就设置图片的 src 属性。
- 绑定 window 的 scroll 事件，对其进行事件监听（搭配节流）。

``` js
let imgList = [...document.querySelectorAll('img')]
let length = imgList.length

// 修正错误，需要加上自执行
- const imgLazyLoad = function() {
+ const imgLazyLoad = (function() {
    let count = 0
    
   return function() {
        let deleteIndexList = []
        imgList.forEach((img, index) => {
            let rect = img.getBoundingClientRect()
            if (rect.top < window.innerHeight) {
                img.src = img.dataset.src
                deleteIndexList.push(index)
                count++
                if (count === length) {
                    document.removeEventListener('scroll', imgLazyLoad)
                }
            }
        })
        imgList = imgList.filter((img, index) => !deleteIndexList.includes(index))
   }
- }
+ })()

// 这里最好加上节流处理
document.addEventListener('scroll', imgLazyLoad)

```

## 7. 懒加载和预加载

  两者都是提高页面性能有效的办法，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

## 8. 如何区分返回内容是文件流还是json数据

``` javascript
await (await fetch(url)).blob();
// Blob {size: 100, type: "application/json"}
// Blob {size: 73226, type: "image/jpeg"}
```

## 9. 写一个方法判断js的方法是内置的还是自定义的

toString一下
``` javascript
function isNative (f) {
    return typeof f === 'function' && /native code/.test(f.toString())
}
```

## 10. 微任务与宏任务

- JavaScript是单线程的语言
- Event Loop是javascript的执行机制

![interview-js-event-loop](interview-js-event-loop.jpeg)

- 同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table并注册函数
- 当指定的事情完成时，Event Table会将这个函数移入Event Queue。
- 主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。
- 上述过程会不断重复，也就是常说的Event Loop(事件循环)。

  js异步有一个机制，就是遇到宏任务，先执行宏任务，将宏任务放入eventqueue，然后在执行微任务，将微任务放入eventqueue最骚的是，这两个queue不是一个queue。当你往外拿的时候先从微任务里拿这个回掉函数，然后再从宏任务的queue上拿宏任务的回掉函数，也就是说‘同一层’既有微任务也有宏任务的时候，先执行微任务

``` javascript
console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})
```

## 11. 函数的方法 call()、apply()、bind()的区别

### 改变函数执行上下文，也就是改变this的指向

- call和apply改变了函数的this上下文后便执行该函数,而bind则是返回改变了上下文后的一个函数。
- call和apply的第一个参数都是要改变上下文的对象，而call从第二个参数开始以参数列表的形式展现，apply则是把除了改变上下文对象的参数放在一个数组里面作为它的第二个参数。


## 12. 前端性能优化
- 减少 HTTP 请求
- 使用 HTTP2
- 使用服务端渲染
  
  客户端渲染: 获取 HTML 文件，根据需要下载 JavaScript 文件，运行文件，生成 DOM，再渲染。
  服务端渲染：服务端返回 HTML 文件，客户端只需解析 HTML。

- 静态资源使用 CDN
- 将 CSS 放在文件头部，JavaScript 文件放在底部
- 使用字体图标 iconfont 代替图片图标
- 善用缓存，不重复加载相同的资源
- 压缩文件（js，css，图片）
- 图片优化（懒加载，base64）
- 分chunk，大的库考虑用CDN（react，router等）
- 使用事件委托
- if-else 对比 switch
  
  当判断条件数量越来越多时，越倾向于使用 switch 而不是 if-else。
- 使用 Web Workers
- 降低 CSS 选择器的复杂性（勿嵌套多层）

## 13. 什么是防抖和节流，应用场景是啥
    
### 都是用于限制函数被频繁调用

**防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。**

场景：有个输入框，输入之后会调用接口，获取联想词。但是，因为频繁调用接口不太好，所以我们在代码中使用防抖功能，只有在用户输入完毕的一段时间后，才会调用接口，出现联想词。

**节流：任务频繁触发的情况下，指定时间间隔内只会执行一次任务。**

场景：懒加载要监听计算滚动条的位置，使用节流按一定时间的频率获取；双十一抢商品

## 14. 实现链式调用
    
链式调用的核心就在于调用完的方法将自身实例返回

``` javascript
function Class1() {
    console.log('初始化')
}
Class1.prototype.method = function(param) {
    console.log(param)
    return this
}
let cl = new Class1()
//由于new 在实例化的时候this会指向创建的对象， 所以this.method这个方法会在原型链中找到。
cl.method('第一次调用').method('第二次链式调用').method('第三次链式调用')
```
    
## 15. 继承
    
**原型链继承**

``` javascript
function Animal() {
    this.colors = ['black', 'white']
}
Animal.prototype.getColor = function() {
    return this.colors
}
function Dog() {}
Dog.prototype =  new Animal()

let dog1 = new Dog()
dog1.colors.push('brown')
let dog2 = new Dog()
console.log(dog2.colors)  // ['black', 'white', 'brown']
```

**问题**

- 原型中的属性会被共享
- 实例化时无法给父类构造函数传参
  
**借用构造函数实现继承**

``` javascript
function Animal(name) {
    this.name = name
    this.getName = function() {
        return this.name
    }
}
function Dog(name) {
    Animal.call(this, name)
}
```
借用构造函数实现继承解决了原型链继承的 2 个问题：引用类型共享问题以及传参问题。但是由于方法必须定义在构造函数中，所以**会导致每次创建子类实例都会创建一遍方法**。

**组合继承**

组合继承结合了原型链和盗用构造函数，将两者的优点集中了起来。基本的思路是使用原型链继承原型上的属性和方法，而通过盗用构造函数继承实例属性。这样既可以把方法定义在原型上以实现重用，又可以让每个实例都有自己的属性。

``` javascript
function Animal(name) {
    this.name = name
    this.colors = ['black', 'white']
}
Animal.prototype.getName = function() {
    return this.name
}
function Dog(name, age) {
    Animal.call(this, name)
    this.age = age
}
Dog.prototype =  new Animal()
Dog.prototype.constructor = Dog

let dog1 = new Dog('奶昔', 2)
dog1.colors.push('brown')
let dog2 = new Dog('哈赤', 1)
console.log(dog2) // { name: "哈赤", colors: ["black", "white"], age: 1 }
```

## 16. js中的堆栈
    
### 栈数据结构

- 栈是一种特殊的列表，栈内的元素只能通过列表的一端访问，这一端称为栈顶。
- 栈被称为是一种后入先出（LIFO，last-in-first-out）的数据结构。

### 堆数据结构

- 堆是一种经过排序的树形数据结构，每个结点都有一个值。
- 堆的特点是根结点的值最小（或最大），且根结点的两个子树也是一个堆。

### 变量类型与内存的关系

#### 基本数据类型

Sting、Number、Boolean、null、undefined、Symbol

- 基本数据类型保存在栈内存中，因为基本数据类型占用空间小、大小固定，通过按值来访问，属于被频繁使用的数据。
- 引用数据类型存储在堆内存中，因为引用数据类型占据空间大、大小不固定；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址


## 17. Proxy的理解

### 回答要点
- Proxy的作用（拦截读取，写入等操作，可以覆盖原生操作）
- Proxy和Object.defineProperty的区别（优势，Vue3用Proxy取代2版的defineProperty）
- Reflect的用法（了解）

### 链接
[Proxy 和 Reflect](https://juejin.cn/post/6844904090116292616)

## 18. Generator详解

- 可控制的异步流程
- async是Generator的实现（语法糖）

## 19. 搞懂prototype和 __proto__

### javascript继承的本质

一个对象 A的__proto__属性指向的那个对象B，B就是 A 的原型对象（或者叫父对象），对象 A 可以使用对象 B 中的属性和方法，同时也可以使用对象 B 的 原型对象C 上的属性和方法，以此递归，就是所谓的原型链。

### new 操作到底做了什么

## 20. script标签中defer和async的区别

都是异步加载 script 脚本
- 如果脚本无需等待页面解析，且无依赖独立运行，那么应使用 async。
- 如果脚本需要等待页面解析，且依赖于其它脚本，调用这些脚本时应使用 defer，将关联的脚本按所需顺序置于 HTML 中。

## 21. CommonJs和Es Module的区别

### CommonJs

- CommonJs可以动态加载语句，代码发生在运行时
- CommonJs导出值是拷贝，可以修改导出的值

### Es Module

- Es Module是静态的，不可以动态加载语句，只能声明在该文件的最顶部，代码发生在编译时
- Es Module混合导出，单个导出，默认导出，完全互不影响
- Es Module导出是引用值之前都存在映射关系，并且值都是可读的，不能修改

### 题外话

webpack treeshaking 是基于静态检查，所以尽量使用 Es Module。


## 22. getSnapshotBeforeUpdate

## 23. target和currentTarget

## 24. 常用的hooks



面试题集合（JS篇）


## 1. css 伪类与伪元素区别
   
### 伪类(pseudo-classes)

其核⼼就是⽤来选择DOM树之外的信息,不能够被普通选择器选择的⽂档之外的元素，⽤来添加⼀些选择器的特殊效果。⽐如:hover :active :visited :link :visited :first-child :focus :lang等；由于状态的变化是⾮静态的，所以元素达到⼀个特定状态时，它可能得到⼀个伪类的样式；当状态改变时，它⼜会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于⽂档之外的抽象，所以叫 伪类。
  
### 伪元素(Pseudo-elements)

DOM树没有定义的虚拟元素

核⼼就是需要创建通常不存在于⽂档中的元素，⽐如::before ::after 它选择的是元素指定内容，表示选择元素内容的之前内容或之后内容。伪元素控制的内容和元素是没有差别的，但是它本身只是基于元素的抽象，并不存在于⽂档中，所以称为伪元素。⽤于将特殊的效果添加到某些选择器
    
### 伪类与伪元素的区别
    
表示⽅法

CSS2 中伪类、伪元素都是以单冒号:表示,CSS2.1 后规定伪类⽤单冒号表示,伪元素⽤双冒号::表示，浏览器同样接受 CSS2 时代已经存在的伪元素(:before, :after, :first�line, :first-letter 等)的单冒号写法。CSS2 之后所有新增的伪元素(如::selection)，应该采⽤双冒号的写法。CSS3中，伪类与伪元素在语法上也有所区别，伪元素修改为以::开头。浏览器对以:开头的伪元素也继续⽀持，但建议规范书写为::开头定义不同

伪类即假的类，可以添加类来达到效果

伪元素即假元素，需要通过添加元素才能达到效果
    
总结:

伪类和伪元素都是⽤来表示⽂档树以外的"元素"。伪类和伪元素分别⽤单冒号:和双冒号::来表示。伪类和伪元素的区别，关键点在于如果没有伪元素(或伪类)，是否需要添加元素才能达到效果，如果是则是伪元素，反之则是伪类。

### 相同之处：

伪类和伪元素都不出现在源⽂件和DOM树中。也就是说在html源⽂件中是看不到伪类和伪元素的。
  
### 不同之处：
    
伪类其实就是基于普通DOM元素⽽产⽣的不同状态，他是DOM元素的某⼀特征。伪元素能够创建在DOM树中不存在的抽象对象，⽽且这些抽象对象是能够访问到的。

## 2. position

- static： 默认值。没有定位，元素出现在正常的流中（top, right, bottom, left 和 z-index 属性无效）
- relative： 该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）
- absolute： 元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的 **非 static** 定位祖先元素的偏移，来确定元素位置。
- fixed： 元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。

## 3. 水平垂直居中

- 定宽居中
  
  - absolute+负maigin
  ``` css
  .father {
      width: 400px;
      height: 400px;
      border: 1px solid blue;
      position: relative;
  }
  
  .son {
      width: 100px;
      height: 100px;
      background-color: orange;
      /* 1、定宽高定位：absolute + 负边距margin */
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -50px;
  }
  ```

  - absolute+maigin:auto
  ``` css
  .father {
      border: 1px solid red;
      width: 300px;
      height: 300px;
      position: relative;
  }
  
  .son {
      width: 100px;
      height: 100px;
      background: green;
      /*2、定宽高定位：absolute + margin:auto */
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
  }
  ```

- 不定宽居中

  - absolute+transform

  ``` css
  .father {
      border: 1px solid red;
      width: 300px;
      height: 300px;
      position: relative;
  }
  
  .son {
      background: green;
      /* 1、不定宽高居中：（依赖translate 2d的兼容性）absolute+transform */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  ```

  - lineheight（行内元素）

  ``` css
  .father {
      border: 1px solid red;
      width: 300px;
      height: 300px;
      /* 2、不定宽高居中  */
      text-align: center;
      line-height: 300px;
      font-size: 0px;
  }
  
  .son {
      /* 2、不定宽高居中lineheight */
      display: inline-block;
      vertical-align: middle;
      line-height: inherit;
      text-align: left;
      font-size: 16px;
  }
  ```

  - flex布局

  ``` css
  .father {
      border: 1px solid red;
      width: 300px;
      height: 300px;
      /* 4、不定宽高居中flex */
      display: flex;
      justify-content: center;
      align-items: center;
  }
  ```

  - grid布局

  ``` css
  .father {
      border: 1px solid red;
      width: 300px;
      height: 300px;
      /* 5、grid */
      display: grid;
  }
  
  .son {
      /* 5、不定宽高居中grid(兼容性不如flex 不推荐使用) */
      justify-self: center;
      align-self: center;
  }
  ```
## 4. link和@import的区别？

- link 属于 XHTML 标签，⽽ @import 是 CSS 提供的。
- ⻚⾯被加载时，link 会同时被加载，⽽ @import 引⽤的 CSS 会等到⻚⾯被加载完再加载。
- link ⽅式的样式权重⾼于 @import 的权重。
  
## 5. em\px\rem区别

- em：在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width
- rem：根元素的字体大小（html的font-size)
- px：绝对单位，⻚⾯按精确像素展示





面试题集合（CSS篇）


## 1. 性能优化 ：项⽬⾥做过哪些性能优化，怎么检测性能，有没有实际测过优化的数据有多少提升
  ![性能优化](performance.jpeg)

### 性能优化

- 避免过多的回流与重绘
  
  实质上是避免过多的 **render tree** 操作，避免使用table布局；DOM结构避免嵌套过深

- JavaScript、Css、Html压缩
- splitChunks 拆包
- 网页中可视化部分（图片，视频等）采用骨架
- 函数的频繁调用考虑使用防抖节流
- 多利用缓存（多跟服务器端有关）
- 大的基础库使用CDN
- 用上懒加载和预加载
- 使用Service Worker
  
### 检测性能

- 很直观的看network页面的load时间
- lighthouse进行检测
- 用webpack-bundle-analyzer查看打包后资源情况
  
## 2. http2.0有哪些特性？https是怎么加密的，https强缓存在项目中怎么用的

### http2.0的特性
- 二进制分帧

  HTTP 1.x 的解析是基于文本，HTTP 2之后将所有传输的信息分割为更小的消息和帧，并对它们采用二进制格式的编码，提高传输效率

- 多路复用
  
  一次链接成功后，只要链接还没断开，那么 client 端就可以在一个链接中**并发**地发起多个请求，每个请求及该请求的响应不需要等待其他的请求，某个请求任务耗时严重，不会影响到其它连接的正常执行

- 头部压缩
  
  由于 HTTP 是无状态的，每一个请求都需要头部信息标识这次请求相关信息，所以会造成传输很多重复的信息，当请求数量增大的时候，消耗的资源就会慢慢积累上去。所以 HTTP 2 可以维护一个头部信息字典，差量进行更新头信息，减少头部信息传输占用的资源

### HTTP 与 HTTPS

- HTTP 是明文传输，HTTPS 通过 SSL\TLS 进行了加密
- HTTP 的端口号是 80，HTTPS 是 443
- HTTPS 需要到 CA 申请证书，一般免费证书很少，需要交费
- HTTPS 的连接很简单，是无状态的；HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。

### 浏览器缓存策略

## 3. web安全（xss/csrf）

### xss（Cross-Site Scripting）

**定义**

跨站脚本攻击，简称脚本注入

**原理**

恶意攻击者往 Web 页面里插入恶意可执行网页脚本代码，当用户浏览该页之时，嵌入其中 Web 里面的脚本代码会被执行，从而可以达到攻击者盗取用户信息或其他侵犯用户安全隐私的目的。

**防范**

- HttpOnly 防止劫取 Cookie，浏览器将禁止页面的Javascript 访问带有 HttpOnly 属性的Cookie。
- 输入检查，对 **<**  、 **>** 进行转译，使得恶意的脚本内容无法执行（React DOM 会在渲染的时候把内容（字符串）进行转义）


### csrf

**定义**

跨站请求伪造，是一种劫持受信任用户向服务器发送非预期请求的攻击方式

**原理**

利用同域下cookie可以共享，在A页面中嵌入B页面的请求，如果用户登录过B页面，即在A中的B请求可以获取B服务器信任。

**防范**

- Token验证

## 4. 前端能在Http缓存上做哪些优化

- 对于经常不改动的静态资源可以在 nginx 上增加相关的缓存配置，尽可能的命中强缓存
- 正确使用好前端资源打包的 hash
- Service Worke 也可以针对缓存做一些优化

## 5. bff如何做鉴权
## 6. setTimeout

面试题集合（真题篇）


## 1. 打乱数组

### 题目描述

给你一个整数数组 nums ，设计算法来打乱一个没有重复元素的数组。

实现 **Solution** class:
- **Solution(int[] nums)** 使用整数数组 **nums** 初始化对象
- **int[] reset()** 重设数组到它的初始状态并返回
- **int[] shuffle()** 返回数组随机打乱后的结果

### 示例

``` javascript
  输入
  ["Solution", "shuffle", "reset", "shuffle"]
  [[[1, 2, 3]], [], [], []]
  输出
  [null, [3, 1, 2], [1, 2, 3], [1, 3, 2]]

  解释
  Solution solution = new Solution([1, 2, 3]);
  solution.shuffle();    // 打乱数组 [1,2,3] 并返回结果。任何 [1,2,3]的排列返回的概率应该相同。例如，返回 [3, 1, 2]
  solution.reset();      // 重设数组到它的初始状态 [1, 2, 3] 。返回 [1, 2, 3]
  solution.shuffle();    // 随机返回数组 [1, 2, 3] 打乱后的结果。例如，返回 [1, 3, 2]
```

### 提示：

![shuffle-an-array](shuffle-an-array.jpeg)

### todo

## 2. 无重复字符的最长子串

### 题目描述

给定一个字符串 **s** ，请你找出其中不含有重复字符的 最长子串 的长度。

### 示例 1:

``` javascript
  输入: s = "abcabcbb"
  输出: 3 
  解释: 因为无重复字符的最长子串是 "abc"，所以其长度为 3。
```

### 示例 2:

``` javascript
  输入: s = "bbbbb"
  输出: 1
  解释: 因为无重复字符的最长子串是 "b"，所以其长度为 1。
```


### 示例 3:

``` javascript
  输入: s = "pwwkew"
  输出: 3
  解释: 因为无重复字符的最长子串是 "wke"，所以其长度为 3。
       请注意，你的答案必须是 子串 的长度，"pwke" 是一个子序列，不是子串。
```


### 示例 4:

``` javascript
  输入: s = ""
  输出: 0
```

### 提示：

![longest-substring-without-repeating-characters](longest-substring-without-repeating-characters.jpeg)

### 暴力算法
``` javascript
const lengthOfLongestSubstring = (str) => {
  const arr = [];
  for (let i = 0; i < str.length; i++) {
    let item = str[i];
    for (let j = i + 1; j < str.length; j++) {
      if (item.includes(str[j])) {
        break;
      }
      item += str[j];
    }
    arr.push(item.length);
  }
  return Math.max(...arr);
};
```


## 3. 两数相加

### 题目描述

给你两个 非空 的链表，表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的，并且每个节点只能存储 一位 数字。

请你将两个数相加，并以相同形式返回一个表示和的链表。

你可以假设除了数字 0 之外，这两个数都不会以 0 开头。

### 示例 1：

![add-two-numbers](add-two-numbers.jpeg)

``` javascript
输入：l1 = [2,4,3], l2 = [5,6,4]
输出：[7,0,8]
解释：342 + 465 = 807.
```

### 示例 2：

``` javascript
输入：l1 = [0], l2 = [0]
输出：[0]
```

### 示例 3：

``` javascript
输入：l1 = [9,9,9,9,9,9,9], l2 = [9,9,9,9]
输出：[8,9,9,9,0,0,0,1]
```

``` javascript
const addTwoNumbers = (l1, l2) => {
  let addOne = 0;
  let sum = new ListNode("0");
  let head = sum;
  while (addOne || l1 || l2) {
    let val1 = l1 ? l1.val : 0;
    let val2 = l2 ? l2.val : 0;
    let r1 = val1 + val2 + addOne;
    addOne = r1 >= 10 ? 1 : 0;
    sum.next = new ListNode(r1 % 10);
    sum = sum.next;
    if (l1) l1 = l1.next;
    if (l2) l2 = l2.next;
  }
  return head.next;
};
```

## 4. 最长回文子串

### 题目描述

给你一个字符串 s，找到 s 中最长的回文子串。

![longest-palindromic-substring](longest-palindromic-substring.jpeg)

``` javascript
const longestPalindrome = function(s) {
  let n = s.length;
  let res = '';
  let dp = Array.from(new Array(n),() => new Array(n).fill(0));
  for(let i = n-1;i >= 0;i--){
      for(let j = i;j < n;j++){
          dp[i][j] = s[i] == s[j] && (j - i < 2 || dp[i+1][j-1]);
          if(dp[i][j] && j - i +1 > res.length){
              res = s.substring(i,j+1);
          }
      }
  }
  return res;
};
```

## 5. 盛最多水的容器

### 题目描述

给你 n 个非负整数 a1，a2，...，an，每个数代表坐标中的一个点 (i, ai) 。在坐标内画 n 条垂直线，垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0) 。找出其中的两条线，使得它们与 x 轴共同构成的容器可以容纳最多的水。

**说明：你不能倾斜容器。**

### 示例 1:

![container-with-most-water](container-with-most-water.jpeg)

``` javascript
输入：[1,8,6,2,5,4,8,3,7]
输出：49 
解释：图中垂直线代表输入数组 [1,8,6,2,5,4,8,3,7]。在此情况下，容器能够容纳水（表示为蓝色部分）的最大值为 49。
```

### 示例 2:

``` javascript
输入：height = [1,1]
输出：1
```

### 示例 3:

``` javascript
输入：height = [4,3,2,1,4]
输出：16
```

### 示例 4:

``` javascript
输入：height = [1,2,1]
输出：2
```

### 提示：
![container-with-most-water](container-with-most-water-alert.jpeg)

``` javascript
const maxArea = (arr) => {
  let max = 0;
  let i = 0;
  let j = arr.length - 1;
  while (j > i) {
    const area = Math.min(arr[i], arr[j]) * (j - i);
    if (area > max) max = area;
    if (arr[i] < arr[j]) {
      i ++;
    } else {
      j --;
    }
  }
  return max;
}
```

## 6. 三数之和

### 题目描述

给你一个包含 n 个整数的数组 nums，判断 nums 中是否存在三个元素 a，b，c ，使得 a + b + c = 0 ？请你找出所有和为 0 且不重复的三元组。

注意：答案中不可以包含重复的三元组。

### 示例 1:

``` javascript
输入：nums = [-1,0,1,2,-1,-4]
输出：[[-1,-1,2],[-1,0,1]]
```

### 示例 2:

``` javascript
输入：nums = []
输出：[]
```

### 示例 3:

``` javascript
输入：nums = [0]
输出：[]
```

### 提示：

![3sum-alert](3sum-alert.jpeg)









算法题（中等系列）


## 1. 前端之SSO（单点登录）

### 知识点
- session存储用户信息于服务器
- 通过session ID（cookie）来实现认证
- 由于cookie不支持跨域，跨域时的解决方案不同于同域

### 链接
- [单点登录（SSO）看这一篇就够了](https://www.jianshu.com/p/75edcc05acfd)
- [前端需要了解的 SSO 与 CAS 知识](https://juejin.cn/post/6844903509272297480)
  
## 2. git revert和reset

- git reset操作会将版本回退至指定的commit，指定commit后的操作都将被撤销
- git revert则撤销指定commit的修改，同时生成一个新的commit

## 3. git merge和rebase

![git merge](git-merge.jpeg)
![git rebase](git-rebase.jpeg)

- 都是合并操作
- 当需要保留详细的合并信息的时候建议使用git merge，特别是需要将分支合并进入master分支时；
- 当发现自己修改某个功能时，频繁进行了git commit提交时，发现其实过多的提交信息没有必要时，可以尝试git rebase
- rebase操作会去除之前的commit记录，而merge不会

### cherrypick的了解

## 4. git 如何取消add操作

可以reset，reset后面可以跟commit ID，也可以跟Head指针回退add内容

## 5. git的工作流

dev、release、master分支

## 6. keepAlive组件的原理




面试题集合（其他）


## 1. 浏览器存储

### Cookie

- 大小限制4k，超出会裁剪

- HTTP 是无状态的协议（对于事务处理没有记忆能力，每次客户端和服务端会话完成时，服务端不会保存任何会话信息）
  
- cookie 存储在客户端
  
  cookie 是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。

- cookie 是不可跨域的
  
### LocalStorage

- 保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据
- 大小为5M左右
- 仅在客户端使用，不和服务端进行通信

### sessionStorage

- 会话级别的浏览器存储（窗口关闭会清空）
- 大小为5M左右
- 仅在客户端使用，不和服务端进行通信
  
基于上面的特点，sessionStorage 可以有效对表单信息进行维护，比如刷新时，表单信息不丢失。

### sessionStorage 、localStorage 和 cookie 之间的区别

- 共同点：都是保存在浏览器端，且都遵循同源策略。
- 不同点：在于生命周期与作用域的不同

面试题集合（浏览器篇）


  
## 1. 手写 bind、call、apply

``` javascript
// call
Function.prototype.myCall = (content) => {
  content = content || window;
  content.fn = this;
  const args = [...arguments].slice(1);
  const result = content.fn(args);
  delete content.fn;
  return result;
}

// apply
Function.prototype.myApply = (content) => {
  content = content || window;
  content.fn = this;
  let result
  if (arguments[1] && Array.isArray(arguments[1])) {
    if (arguments[1].length === 1) {
      result = content.fn(...arguments[1])
    } else {
      result = content.fn()
    }
  }
  delete content.fn
  return result
}

// bind
Function.prototype.myBind = (content) => {
  content = content || window;
  content.fn = this;
  const args = [...arguments].slice(1);
  return () => {
    content.fn(args)
  }
}
```

## 2. 手写防抖节流
   
   防抖
   ``` javascript
    const debounce = (fn, delay) => {
      let timeout = null;
      return () => {
        if (timeout) {
          clearTimeout(timeout);
        }
        timeout = setTimeout(() => {
          fn.call(this, arguments)
        }, delay)
      }
    }
   ```
   节流
   ``` javascript
    const throttle = (fn, delay) => {
      let canRun = true;
      if (!canRun) {
        return
      }
      canRun = false;
      setTimeout(() => {
        fn.call(this. arguments);
        canRun = true;
      }, delay);
    }
   ```

## 3. 手写数组flat

``` javascript
const flat = arr => {
  arr.reduce((pre, value) => {
    return pre.concat(Array.isArray(value) ? flat(value) : value)
  }, []);
}
```

## 4. 写一个 mySetInterVal(fn, a, b),每次间隔 a,a+b,a+2b 的时间，然后写一个 myClear，停止上面的 mySetInterVal

``` javascript
function mySetInterVal(fn, a, b) {
  this.a = a;
  this.b = b;
  this.time = 0;
  this.handle = -1;
  this.start = () => {
    this.handle = setTimeout(() => {
      fn();
      this.time++;
      this.start();
    }, this.a + this.time * this.b);
  }

  this.stop = () => {
    clearTimeout(this.handle);
    this.time = 0;
  }
}

var a = new mySetInterVal(() => {console.log('123')},1000, 2000 );
a.start();
a.stop();
```

## 5. 斐波那契数列
   
``` javascript
const Fibonacci = (n) => {
  if (n < 0) throw new Error('输入的数字不能小于0');
  if (n < 2) return n;
  return Fibonacci(n - 1) + Fibonacci(n - 2)
}
```
   
## 7. 实现 add(1)(2)(3)
   
``` javascript
const add = (a) => (b) => (c) => a + b + c;
```

## 8. 数据类型判断

typeof 可以正确识别：Undefined、Boolean、Number、String、Symbol、Function 等类型的数据，但是对于其他的都会认为是 object，比如 Null、Date 等，所以通过 typeof 来判断数据类型会不准确。但是可以使用 Object.prototype.toString 实现。

``` javascript
const getType = (obj) => {
  return Object.prototype.toString.call(obj).slice(8, -1);
}
```

## 9. 数组扁平化
    
数组扁平化就是将 [1, [2, [3]]] 这种多层的数组拍平成一层 [1, 2, 3]。使用 Array.prototype.flat 可以直接将多层数组拍平成一层：

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

关键：递归

``` javascript
const flatten = arr => {
  let newArr = [];
  for(let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      newArr.concat(flatten(arr[i]))
      return
    }
    newArr.push(arr[i])
  }
  return neaArr;
}
```

## 10. 深浅拷贝

浅拷贝：只考虑对象类型

ES5版
``` javascript
function shallowCopy(obj) {
  if (typeof obj !== 'object') return

  let newObj = obj instanceof Array ? [] : {};

  for (let i in obj) {
    if (obj.hasOwnProperty(i)) {
      newObj[i] = obj[i];
    }
  }

  return newObj;
}
```

ES6版
``` javascript
const shallowCopy = obj => Array.isArray(obj) ? [...obj] : {...obj}
```

深拷贝

``` javascript
const deepClone = obj => {
  if (typeof obj !== 'object') return;
  let newObj = obj instanceof Array ? [] : {};
  
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      if (typeof obj[key] === 'object') {
        newObj[key] = deepClone(obj[key]);
      } else {
        newObj[key] = obj[key];
      }
    }
  }

  return newObj;
}
```

## 11. 解析 URL 参数为对象
  
``` javascript
const urlSearch = href => {
  let obj = {};
  const queryIndex = href.indexOf('?');
  const urlOptions = href.slice(queryIndex + 1, href.length);
  const options = urlOptions.split('&');
  options.map(option => {
    const equalIndex = option.indexOf('=');
    obj[option.slice(0, equalIndex)] = option.slice(equalIndex + 1, option.length);
  });
  return obj;
}
```

## 12. 实现柯里化（Currying）

``` javascript
function curry(fn) {
    let judge = (...args) => {
        if (args.length == fn.length) return fn(...args)
        return (...arg) => judge(...args, ...arg)
    }
    return judge
}
```

## 13. 手写AJAX

``` js
const myAjax = (url) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.setRequestHeader('Accept', 'application/json');
    xhr.onreadystatechange = () => {
      if (xhr.readyState !== 4) return
      if (xhr.status === 200) {
        resolve(xhr.responseText)
      } else {
        reject(xhr.responseText)
      }
    }
    xhr.send();
  })
}
```

## 14. 手写Promise

``` javascript
const PADDING = "PADDING";
const FULFILLED = "FULFILLED";
const REJECTED = "REJECTED";

class MyPromise {
  constructor(executor) {
    this.status = PADDING;
    this.value = undefined;
    this.error = undefined;

    let resolve = (value) => {
      if (this.status === PADDING) {
        this.value = value;
        this.status = FULFILLED;
      }
    }

    let reject = (error) => {
      if (this.status === PADDING) {
        this.error = error;
        this.status = REJECTED;
      }
    }

    try {
      executor(resolve, reject)
    } catch (e) {
      reject(e);
    }
  }

  then(onFulfilled, onRejected) {
    if (this.status === FULFILLED) {
      onFulfilled(this.value)
    }

    if (this.status === REJECTED) {
      onRejected(this.error)
    }
  }
}
```
    
## 15. 实现 Promise.all
  
``` js
const promiseAll = (promises) => {
  if (Array.isArray(promises)) {
    throw new Error('the arguments must be an array !!!')
  }
  const promisesLength = promises.length;
  let current = 0, result = [];
  new Promise((resolve, reject) => {
    promises.forEach((promise, i) => {
      Promise.resolve(promise).then(value => {
        current ++;
        result[i] = value;
        if (current === promisesLength) {
          resolve(result)
        }
      }, error => reject(error))
    })
  })
}
```

## 16. 手写模版字符串

``` javascript
const render = (str, data) => {
  const reg = /\{\{(\w+)\}\}/;
  if (reg.test(str)) {
    const key = reg.exec(str)[1];
    str = str.replace(reg, data[key]);
    return render(str, data);
  }
  return str;
} 
```

面试题集合（手撕代码篇）


## 1. 什么时候使用状态管理器（React）

   - state并不总是以单向的方式线性流动
   - 存在组件需要更新全局状态
   - 存在组件需要更新另一个组件的状态
   - 某个状态需要在全局使用或共享（例如角色权限等信息）

## 2. redux-saga和redux-thunk有什么本质的区别

**redux-thunk** 中 **dispatch** 可以接受一个函数作为参数，而 **redux-saga** 其实和原始的 **redux** 保持一致，**dispatch** 的只是一个对象(plain object),异步是通过saga文件中的 **generator** 函数来处理的

## 3. React 项目中有哪些细节可以优化？实际开发中都做过哪些性能优化
   
  - 优化资源加载（减少http请求，采用CDN静态资源，小图片base64）
  - 首屏考虑SSR
  - 图片使用懒加载
  - 相关资源的预加载
  - 关于可视化的显示可以加入骨架
  - 分chunk实现动态加载组件
  - Service worker做缓存
  - 开发中遍历要给组件加key
  - css勿嵌套多层
  - 不必要的dom标签用Fragments
  - 考虑redux的必要性
  
## 4. react 最新版本解决了什么问题 加了哪些东西
## 5. React 事件绑定原理
   
React并不是将click事件绑在该div的真实DOM上，而是在document处监听所有支持的事件，当事件发生并冒泡至document处时，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅减少了内存消耗，还能在组件挂载销毁时统一订阅和移除事件。

另外冒泡到 document 上的事件也不是原生浏览器事件，而是 React 自己实现的合成事件（SyntheticEvent）。因此我们如果不想要事件冒泡的话，调用 event.stopPropagation 是无效的，而应该调用 event.preventDefault。

## 6. webpack 做过哪些优化，开发效率方面、打包策略方面等等
   
   [查看答案](https://github.com/lgwebdream/FE-Interview/issues/25)

## 7. 说一下 react-fiber
   [查看答案](https://github.com/lgwebdream/FE-Interview/issues/33)

## 8. React 18的新特性

  - 新的 **ReactDOM.createRoot()** API（替换 **ReactDOM.render()**）
  - 新的 **startTransition** API（用于非紧急状态更新）
  - 渲染的自动批处理优化（主要解决异步回调中无法批处理的问题）
  - 支持 **React.lazy** 的 全新 SSR 架构（支持 **<Suspense>** 组件）

## 9. React 开发Tips

官方文档即是最佳实践

1. 尽量使用 react 高版本进行开发
     - fiber 组件更新的优势
     - 各种官方 hook 的使用（useMemo，useCallback）
     - 等等

2. 数组遍历渲染时，key的正确使用
3. Fragment 的使用
4. Suspense 和 lazy 的搭配使用（懒加载）
5. 代码的提取（HOC，手写hook）
6. 合理使用状态管理（Redux，Context）

## 10. React的合成事件

由于fiber机制的特点，生成一个fiber节点时，它对应的dom节点有可能还未挂载，onClick这样的事件处理函数作为fiber节点的prop，也就不能直接被绑定到真实的DOM节点上。
为此，React提供了一种“顶层注册，事件收集，统一触发”的事件机制。

委托到顶层root根节点上

## 11. setState 是异步还是同步

- setState 只在合成事件和钩子函数中是“异步”的，在原生事件和 setTimeout 中都是同步的。
- setState的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形式了所谓的“异步”，当然可以通过第二个参数 setState(partialState, callback) 中的callback拿到更新后的结果。
- setState 的批量更新优化也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和setTimeout 中不会批量更新，在“异步”中如果对同一个值进行多次 setState ， setState 的批量更新策略会对其进行覆盖，取最后一次的执行，如果是同时 setState 多个不同的值，在更新时会对其进行合并批量更新。

## 12. react hooks产生的背景？hooks的优点？

- 组件之间复用状态逻辑很难，在hooks之前，实现组件复用，一般采用高阶组件和 Render Props，它们本质是将复用逻辑提升到父组件中，很容易产生很多包装组件，带来嵌套地域。
- 组件逻辑变得越来越复杂，尤其是生命周期函数中常常包含一些不相关的逻辑，完全不相关的代码却在同一个方法中组合在一起。如此很容易产生 bug，并且导致逻辑不一致。
- 复杂的class组件，使用class组件，需要理解 JavaScript 中 this 的工作方式，不能忘记绑定事件处理器等操作，代码复杂且冗余。除此之外，class组件也会让一些react优化措施失效。

## 13. React 架构变化（15 - 16）

新增了 **Scheduler（调度器）** 

- Scheduler（调度器）：调度任务的优先级，高优先级任务先进入 协调器
- Reconciler（协调器）：负责找出变化的组件
- Renderer（渲染器）：负责将变化的组件渲染到页面上

**React Fiber** 可以理解为：

**React** 内部实现的一套状态更新机制。支持任务不同 **优先级**，可中断与恢复，并且恢复后可以复用之前的 **中间状态**。

其中每个任务更新单元为 **React Element** 对应的 **Fiber** 节点



面试题集合（框架篇）


## 1. TCP/IP 四层网络模型

第一层：应用层，主要有负责web浏览器的 **HTTP** 协议， 文件传输的 **FTP** 协议，负责电子邮件的 **SMTP** 协议，负责域名系统的 **DNS** 等。

第二层：传输层，主要是有可靠传输的 **TCP** 协议，特别高效的 **UDP** 协议。主要负责传输应用层的数据包。

第三层：网络层，主要是 **IP** 协议。主要负责寻址（找到目标设备的位置）

第四层：数据链路层，主要是负责转换数字信号和物理二进制信号。

## 2. 用户输入url到页面展示的过程
   
- DNS解析
  
  域名到真实IP的寻址过程
- 发起TCP连接
  
  三次握手🤝，确定 **client** ，**server** 双端的接受发送能力
- 发起Http请求
- 服务器处理请求并返回HTTP报文
- 浏览器解析渲染页面

## 3. 说一下 Http 缓存策略，有什么区别，分别解决了什么问题
   
   浏览器每次发起请求时，先在本地缓存中查找结果以及缓存标识，根据缓存标识来判断是否使用本地缓存。如果缓存有效，则使用本地缓存；否则，则向服务器发起请求并携带缓存标识。根据是否需向服务器发起HTTP请求，将缓存过程划分为两个部分：强制缓存和协商缓存，强缓优先于协商缓存。

  - 强缓存，服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行比较缓存策略。
  - 协商缓存，让客户端与服务器之间能实现缓存文件是否更新的验证、提升缓存的复用率，将缓存信息中的Etag和Last-Modified通过请求 发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存。

  HTTP缓存都是从第二次请求开始的：

  - 第一次请求资源时，服务器返回资源，并在response header中回传资源的缓存策略；
  - 第二次请求时，浏览器判断这些请求参数，击中强缓存就直接200，否则就把请求参数加到request header头中传给服务器，看是否击中协商缓存，击中则返回304，否则服务器会返回新的资源。这是缓存运作的一个整体流程图：
  ![chrome-cache](chrome-cache.jpeg)

## 4. 常见的Http状态码

- 200 OK：表示从客户端发送给服务器的请求被正常处理并返回
- 204 No Content：表示客户端发送给服务端的请求得到了成功处理，但在返回的响应报文中不含实体的主体部分（没有资源可以返回）
- 301 Moved Permanently：永久性重定向，表示请求的资源被分配了新的URL，之后应使用更改的URL
- 302 Found：临时性重定向，表示请求的资源被分配了新的URL，希望本次访问使用新的URL
- 304 Not Modified：表示客户端发送附带条件（是指采用GET方法的请求报文中包含if-Match、If-Modified-Since、If-None-Match、If-Range、If-Unmodified-Since中任一首部）的请求时，服务器端允许访问资源，但是请求为满足条件的情况下返回改状态码
- 400 Bad Request：表示请求报文中存在语法错误（一般指参数）
- 401 Unauthorized：没有经过身份认证，需要通过HTTP认证
- 403 Forbidden：身份认证过了，但是没有权限
- 404 Not Found：(客户端问题)请求的资源没有找到，说明客户端错误的请求了不存在的资源
- 500 Inter Server Error：表示服务器在执行请求时发生了错误，也有可能是web应用存在的bug或某些临时的错误时
- 503 Server Unavailable：服务不可用，一般指维护中或者服务重启中

## 5. 跨域的复杂请求和简单请求的区别

### 简单请求

- HTTP方法是下列之一（HEAD、GET、POST）
- HTTP头信息不超出以下几种字段
  
  **Accept**

  **Accept-Language**

  **Content-Type** （application/x-www-form-urlencoded、multipart/form-data、text/plain）

任何一个 **不满足上述要求** 的请求，即被认为是复杂请求

### 复杂请求

- 一个复杂请求不仅有：包含通信内容的请求，同时也包含预请求。

- 复杂请求表面上看起来和简单请求使用上差不多，但实际上浏览器发送了不止一个请求。其中最先发送的是一种"预请求"，此时作为服务端，也需要返回"预回应"作为响应。预请求实际上是对服务端的一种权限请求，只有当预请求成功返回，实际请求才开始执行。

## 5. TCP和UDP

- TCP向上层提供面向连接的可靠服务 ，UDP向上层提供无连接不可靠服务。
- 虽然 UDP 并没有 TCP 传输来的准确，但是也能在很多实时性要求高的地方有所作为
- 对数据准确性要求高，速度可以相对较慢的，可以选用TCP
- HTTP3.0取两者之长


面试题集合（网络篇）


## 存储方式

### 数据结构的存储方式只有两种：数组（顺序存储）和链表（链式存储）

散列表、栈、队列、堆、树、图等等各种数据结构都属于上层建筑，而数组和链表才是「结构基础」。

### 两者优缺点

**数组**

1. 由于是连续存储，可以随机访问，通过索引快速找到对应元素，而且相对节约存储空间，访问数组元素的时间复杂度 O(1)；
2. 但正因为连续存储，内存空间必须一次性分配够，所以说数组如果要扩容，需要重新分配一块更大的空间，再把数据全部复制过去，时间复杂度 O(N)；而且你如果想在数组中间进行插入和删除，每次必须搬移后面的所有数据以保持连续，时间复杂度 O(N)。

**链表**

1. 因为元素不连续，而是靠指针指向下一个元素的位置，所以不存在数组的扩容问题；
2. 如果知道某一元素的前驱和后驱，操作指针即可删除该元素或者插入新元素，时间复杂度 O(1)。
3. 但是正因为存储空间不连续，你无法根据一个索引算出对应元素的地址，所以不能随机访问；而且由于每个元素必须存储指向前后元素位置的指针，会消耗相对更多的储存空间。


## 基本操作

数据结构的基本操作无非遍历 + 访问，即增删改查；

但是不同数据结构的增删改查的效率是不一样的，所以我们需要了解各数据结构的特性以便我们在不同场景下提高代码的性能。

遍历 + 访问 分为两种形式：线性的和非线性的。

线性：以for/while 迭代为代表

非线性：以递归为代表




数据结构笔记


终于来到 **applyMiddleware** 部分，理解了 [**compose**](https://xudongdong.site/post/compose) 和 [**Currying**](https://xudongdong.site/post/currying)，这部分源码也变得很好理解

这个方法是用来应用中间件的，用过 **node** 的同学应该比较了解，中间件我的理解类似于插件，一般为了避免系统框架过于臃肿，我们把常用的功能剥离开来，以中间件的形式插入到框架中来实现复杂的应用处理

我们首先看下 **applyMiddleware** 的用法

``` js
import { applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';

const store = createStore(reducer, applyMiddleware(thunk, logger))
```

**createStore** 内部的调用

``` js
function createStore(reducer, preloadedState, enhancer) {
  // 传入参数的判断
  // ...

  // 参数中enhancer function存在，一般是指applyMiddleware()
  if (typeof enhancer !== "undefined" && typeof enhancer === "function") {
    return enhancer(createStore)(reducer, preloadedState);
  }

  // 省略
}
```

由此可以得出 **applyMiddleware** 的 **API** 调用

``` js
applyMiddleware(thunk, logger)(createStore)(reducer, preloadedState);

// applyMiddleware(...middlewares)(createStore)(reducer, preloadedState);
```

结合源码

我们将源码中 **TS** 部分去除，得出函数主体代码

``` javascript
import { compose } from "./compose";

function applyMiddleware(...middlewares) {
  // use Currying function
  return (createStore) => (reducer, preloadedState) => {
    // 获取store
    const store = createStore(reducer, preloadedState);
    // 初始化dispatch
    let dispatch = () => {
      // 在dispatch完成正在赋值之前，调用会报错
      throw new Error("目前还不能使用dispatch")
    }

    // 给每个中间件的默认传参：getState，dispatch
    const middlewareAPI = {
      getState: store.getState,
      dispatch: (action, ...args) => dispatch(action, ...args)
    }
    
    // 加入默认参数后的中间件chain
    const chain = middlewares.map(middleware => middleware(middlewareAPI))
    // 对chain做compose操作，并赋值给dispatch
    dispatch = compose(...chain)(store.dispatch)
  }

  // 返回store的属性和dispatch
  return {
    ...store,
    dispatch
  }
}
```

主要难以理解的部分还是 **compose** 这一块

我们拿两个中间件做解析

``` javascript
import thunk from 'redux-thunk';
import logger from 'redux-logger';

applyMiddleware(thunk, logger)(createStore)(reducer, preloadedState);

// applyMiddleware chain部分
const middlewareAPI = { getState, dispatch }

const chain = [thunk, logger].map(middleware => middleware(middlewareAPI))
// const chain = [thunk(middlewareAPI), logger(middlewareAPI)]
// const chain = [thunk({ getState, dispatch }), logger({ getState, dispatch })]

// applyMiddleware compose dispatch部分
dispatch = compose(...chain)(store.dispatch)
// dispatch = compose(thunk({ getState, dispatch }), logger({ getState, dispatch }))(store.dispatch)

// 根据 compose 代码可转化为
// dispatch = thunk({ getState, dispatch })(logger({ getState, dispatch })(store.dispatch))
```

代码到这边我们需要结合 **redux-thunk** 源码继续解析了

``` js
function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => (next) => (action) => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;
```

把
``` js
dispatch = thunk({ getState, dispatch })(logger({ getState, dispatch })(store.dispatch))
```

放到 **thunk** 中

``` js
dispatch = ({ getState, dispatch }) => {
  return ({ getState, dispatch }) => (logger({ getState, dispatch })(store.dispatch)) => (action) => {

    // 如果有异步action，会先执行异步action，在执行传进来的logger function
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return logger({ getState, dispatch })(store.dispatch)(action);
  }
}
```

应用了 **thunk** 和 **logger** 的 **redux** 应用，会先执行异步 **action**，在执行 **logger** 中间件。

从代码上看，**applyMiddleware** 最主要的作用就是对原始的 **dispatch** 方法进行了重新赋值，并将它与 **store** 的属性返回。


## 参考
- [redux-thunk](https://github.com/reduxjs/redux-thunk/blob/master/src/index.js)



redux源码系列之applyMiddleware


之前看 **Redux compose** 部分源代码的时候，就感觉和 **柯里化（Currying）** 很像，所以这篇把它安排上了，同属于函数式编程范畴。

## What

什么是柯里化（Currying）

**柯里化** 大家应该听说过，或许还有些了解，但是到底什么样的范式才是柯里化呢？

>在维基百科上的定义是这样：***currying is the technique of converting a function that takes multiple arguments into a sequence of functions that each takes a single argument***.

首先是一个技术，作用是将一个拥有多个参数的函数转化成一系列只能传入一个参数的函数。

还是比较抽象，通过代码

``` js
const add = (x) => (y) => x + y;
```

这种多 **=>** 的代码经常见，其实就是 **ES6** 版的柯里化，我们可以转化下

觉得理解困难的可以借用 **[Babel](https://www.babeljs.cn/repl)** 来转化

``` js
var add = function add(x) {
  return function (y) {
    return x + y;
  };
};
```

不用 **柯里化（Currying）**:

``` js
const add = (a, b, c) => {
  return a + b + c;
}
```

在数学和计算机科学中的柯里化函数，一次只能传递一个参数；

而我们 **Javascript** 实际应用中的柯里化函数，可以传递一个或多个参数。

``` js
//普通函数
function fn(a, b, c, d, e) {
  return a + b + c + d + e;
}
//生成的柯里化函数
const curryFn = curry(fn);

curryFn(1,2,3,4,5);     // 15
curryFn(1)(2)(3,4,5);   // 15
curryFn(1,2)(3,4)(5);   // 15
curryFn(1)(2)(3)(4)(5); // 15

```

那么什么时候应该用 **柯里化（Currying）** 呢，总不至于我们就是用来为了给三个数字求和。

## When

举个例子🌰

科颜氏有一款爆火的爽肤水，经常会有活动促销打折，打折力度往往不一样

所以他们会这样计算折后价格

``` js
const discountPrice = (price, dicount) => {
  return price * dicount;
}

discountPrice(300, 0.9);
discountPrice(300, 0.95);
discountPrice(300, 0.85);
discountPrice(300, 0.88);
```

其实我们会发现，虽然折扣经常变，但是它本身的价格基本不变

所以我们可以用 **柯里化（Currying）** 优化下代码结构

``` js
const defaultPrice = 300; // 爽肤水默认价格

const discountPrice = (price) => {
  return (dicount) => {
    return price * dicount;
  }
}

// const discountPrice = price => dicount => price * dicount

const tonerdDscountPrice = discountPrice(defaultPrice);

tonerdDscountPrice(0.9);
tonerdDscountPrice(0.95);
tonerdDscountPrice(0.85);
tonerdDscountPrice(0.88);
```

下面的代码是不是调用的时候更加舒爽一点

## Why

那么 **柯里化（Currying）** 有啥好处呢

柯里化本质上是 ***降低通用性，提高适用性***。

怎么理解...

结合打折的例子看，

降低通用性是指 **Currying** 之前，我们可以灵活的传入默认价格，我可以算出爽肤水折扣价格，也可以算出面膜折扣价格，很通用

但是 **Currying** 之后更加适用于算出爽肤水折扣价格了，都不用传入默认价格了，提取了一个通用的方法对默认价格进行处理，只要传入折扣价格

所以，关于使用其实是个取舍问题，需结合具体场景







## 参考
- [currying-javascript](https://www.dottedsquirrel.com/currying-javascript/)
- [wiki-Currying](https://en.wikipedia.org/wiki/Currying)
- [javascript-currying-what-is-the-point-of-currying-javascript-functions](https://www.jondjones.com/frontend/javascript/functional-programming/javascript-currying-what-is-the-point-of-currying-javascript-functions/)
- [「前端进阶」彻底弄懂函数柯里化](https://juejin.cn/post/6844903882208837645)

柯里化-Currying


本来想写 **applyMiddleware** 方法代码解析的，然后一看，里面有个 **compose** 方法，好像内部代码也调用的比较多，想了想就决定先看下 **compose** 相关代码。

``` javascript
import { compose } from 'redux'

const composeFn = compose(fn1, fn2, fn3, fn4)
const b = composeFn(x)
// 等价于
const b = fn1(fn2(fn3(fn4(x))))
```
从使用上大概可以看出它的作用，从右往左的组合执行多个函数，将多个函数组合成一个函数，右边函数的执行结果是左边函数的参数值，
除了最右边的函数可以传入多个参数，其余函数只能传入一个参数。

## 参数
1. **(arguments)**: 需要组合的函数。

## 返回值
**(Function)**: 从右到左把接收到的函数合成后的最终函数。

## 代码结构
代码算是很简单了，我们分两部分去理解

### 上半部分

``` typescript
export default function compose(): <R>(a: R) => R

export default function compose<F extends Function>(f: F): F

/* two functions */
export default function compose<A, T extends any[], R>(
  f1: (a: A) => R,
  f2: Func<T, A>
): Func<T, R>

/* three functions */
export default function compose<A, B, T extends any[], R>(
  f1: (b: B) => R,
  f2: (a: A) => B,
  f3: Func<T, A>
): Func<T, R>

/* four functions */
export default function compose<A, B, C, T extends any[], R>(
  f1: (c: C) => R,
  f2: (b: B) => C,
  f3: (a: A) => B,
  f4: Func<T, A>
): Func<T, R>

/* rest */
export default function compose<R>(
  f1: (a: any) => R,
  ...funcs: Function[]
): (...args: any[]) => R

export default function compose<R>(...funcs: Function[]): (...args: any[]) => R

export default function compose(...funcs: Function[]) {
  
}
```

声明各种不同参数的 **compose**，其实是重载，为了写代码时有更好的代码提示。

### 核心部分
``` typescript
return funcs.reduce(
  (a, b) =>
    (...args: any) =>
      a(b(...args))
)
```
最后 **compose return** 的是函数数组（即传入的参数）的 **reduce** 方法，显而易见的能组合成高阶函数的形式。

## 总结

``` javascript
compose(fn1, fn2, fn3, fn4)(...args) === fn1(fn2(fn3(fn4(...args))))
```

**compose** 函数在函数式编程里很常见。这里 **redux** 的对 **compose** 实现很简单，主要还是要对 **Array.prototype.reduce** 函数要熟练。



redux源码系列之compose


``` javascript
const store = createStore(reducer, [initState, enhancer])
```

## 参数

1. [**reducer**](https://redux.js.org/understanding/thinking-in-redux/glossary#reducer) (*Function*):  接受两个参数，分别是当前的 **state** 和要处理的 [**action**](https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow#actions)

2. [**preloadedState**] (*any*):  初始状态的 **state**，其实在实际开发中很少在这边给应用赋上初始 **state**，一般会在各自的 **reducer** 中赋上初始 **state**: 

``` javascript
const initialState = {}

  // reducer
const todoApp = (state = initialState, action) => {
  // 这里暂不处理任何 action，
  // 仅返回传入的 state。
  return state
}
```
值得注意的是: 通常情况下，通过 **preloadedState** 指定的 **state** 要优先于通过 **reducer** 指定 **state** : 

``` javascript
import { createStore } from 'redux';
// reducer
const a = (state = 'lol', action) => {
  return state;
}

const b = (state = 'wat', action) => {
  return state;
}

// const combined = combineReducers({ a, b })
const combined = (state = {}, action) => {
  return {
    a: a(state.a, action),
    b: b(state.b, action)
  };
}

const store = createStore(combined, { a: 'horse' });
console.log(store.getState()); // { a: 'horse', b: 'wat' }
```

3. [**enhancer**] (*Function*):  高阶函数，通常是指中间件，必须用 **applyMiddleware()** 包装下：

``` javascript
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

function logger({ getState }) {
  return next => action => {
    console.log('will dispatch', action)

    // Call the next dispatch method in the middleware chain.
    const returnValue = next(action)

    console.log('state after dispatch', getState())

    // This will likely be the action itself, unless
    // a middleware further in chain changed it.
    return returnValue
  }
}

const store = createStore(todos, applyMiddleware(thunk, logger))
```

## 返回值
[**store**](https://redux.js.org/api/store): 是一个对象，包含了一些方法（[**dispatch**](https://redux.js.org/api/store#dispatchaction)，[**getState**](https://redux.js.org/api/store#getstate)等)，保存了应用所有 **state** 的对象。改变 **state** 的惟一方法是 **dispatch action**。

``` typescript
const store = {
  dispatch: dispatch as Dispatch<A>,
  subscribe,
  getState,
  replaceReducer,
  [$$observable]: observable
} as unknown as Store<ExtendState<S, StateExt>, A, StateExt, Ext> & Ext
return store
```

## 代码结构
便于理解，我们忽略函数中 **TS** 的一些类型定义，大致结构如下：

``` javascript
function createStore(reducer, preloadedState, enhancer) {
  // 传入参数的判断
  // ...

  // 参数中enhancer function存在，一般是指applyMiddleware()
  if (typeof enhancer !== "undefined" && typeof enhancer === "function") {
    return enhancer(createStore)(reducer, preloadedState);
  }

  let currentReducer = reducer; // 当前store中的reducer
  let currentState = preloadedState; // 当前store中存储的状态
  let currentListeners = []; // 当前store中放置的监听函数
  let nextListeners = currentListeners; // 下一次dispatch时的监听函数
  let isDispatching = false; // 用于判断是否正在dispatch

  // 获取state
  function getState() {
    //...
  }

  // 添加一个监听函数，每当dispatch被调用的时候都会执行这个监听函数
  function subscribe() {
    //...
  }

  // 触发了一个action，因此我们调用reducer，得到的新的state，并且执行所有添加到store中的监听函数。
  function dispatch() {
    //...
  }

  // 忽略两个不常用的方法replaceReducer，observable...

  // createStore的时候会执行一次INIT action的dispatch
  // 便于其他reducer获取初始值
  dispatch({ type: ActionTypes.INIT } as A);

  return {
    dispatch,
    subscribe,
    getState,
    //下面两个是主要面向库开发者的方法，暂时先忽略
    //replaceReducer,
    //observable
  };
}
```

可以看出，**createStore** 方法创建了一个 **store**，但是并没有直接将这个 **store** 的状态 **state** 返回，而是返回了一系列方法，外部可以通过这些方法（**getState**）获取 **state**，或者间接地（通过调用 **dispatch** ）改变 **state**。

下面我们来看下各个方法的具体实现

### getState

``` typescript
function getState(): S {
  // 如果正在dispath会抛出异常
  if (isDispatching) {
    throw new Error(
      'You may not call store.getState() while the reducer is executing. ' +
        'The reducer has already received the state as an argument. ' +
        'Pass it down from the top reducer instead of reading it from the store.'
    )
  }

  return currentState as S
}
```

很简单，就是获取当前 **state**，我们可以通过 ``` store.getState() = ... ``` 来修改 **state**，但是一般来说，redux不建议这样做，只能通过 **dispatch action** 来修改 **state**。

### subscribe

``` typescript
  // 若相等，做一下currentListeners浅拷贝
  function ensureCanMutateNextListeners() {
    if (nextListeners === currentListeners) {
      nextListeners = currentListeners.slice()
    }
  }

  function subscribe(listener: () => void) {
    if (typeof listener !== 'function') {
      // throw Error
    }
    if (isDispatching) {
      // throw Error
    }
    //设置一个标志，标志该监听器已经订阅了
    let isSubscribed = true

    ensureCanMutateNextListeners()
    // push到nextListeners数组中，下次dispatch会调用
    nextListeners.push(listener)

    // 返回了一个取消订阅的函数，即从数组中删除该监听函数
    return function unsubscribe() {
      // 如果已经取消订阅过了，直接返回
      if (!isSubscribed) {
        return
      }
      if (isDispatching) {
        // throw Error
      }

      isSubscribed = false

      ensureCanMutateNextListeners()
      // 从下一轮的监听函数数组（用于下一次dispatch）中删除这个监听器。
      const index = nextListeners.indexOf(listener)
      nextListeners.splice(index, 1)
      // 清空当前currentListeners
      currentListeners = null
    }
  }
```

### dispatch

``` typescript
function dispatch(action: A) {
  if (!isPlainObject(action)) {
    // throw Error
  }

  if (typeof action.type === 'undefined') {
    // throw Error
  }

  if (isDispatching) {
    // throw Error
  }

  try {
    // 标记正在dispatch
    isDispatching = true
    // 调用reducer，得到新state
    currentState = currentReducer(currentState, action)
  } finally {
    isDispatching = false
  }

  const listeners = (currentListeners = nextListeners)
  // 遍历执行监听数组中的所有监听函数
  for (let i = 0; i < listeners.length; i++) {
    const listener = listeners[i]
    listener()
  }

  // 返回传入的action
  return action
}
```

**dispatch** 是修改 **state** 的唯一途径（**redux** 规定）。

## 总结
整个 **createStore** function 还是比较容易理解的，记住应用中应有且仅有一个 store。

## 参考
- [Redux createStore API](https://redux.js.org/api/createstore)
- [Redux createStore API（中文版）](https://www.redux.org.cn/docs/api/createStore.html)


深入源码解析createStore内部代码

redux源码系列之createStore


在 **REST** 中，主要的数据描述称为 **Resource**，拥有明确一致的 **REST** 命名规范，长期来看将是最好的决策

> 资源可以是单例或者集合，比如说，customers是一个集合资源，customer是一个单个资源。我们在URI中可以用"/customers"来定义集合资源，用"/customers/{customerId}"来定义单个资源。

> 一个资源也可以包含子集合资源，比如说，一个顾客他名下有多个account，我们可以这样"/customers/{customerId}/accounts"表示。相同的，单独表示某个顾客的某个账号，我们可以这样"/customers/{customerId}/accounts/{accountId}"。

## Tips
1. 使用名词表示资源（而不是动词）


2. 使用"/"表示层次关系

```url
http://api.example.com/customers/{customerId}/accounts/{accountId}
```


3. 结尾不需要加"/"

```url
http://api.example.com/device-management/managed-devices/

//better
http://api.example.com/device-management/managed-devices
```

4. 用"-"代替驼峰的命名方式，提高可读性,
   也不要使用下划线"_"（某些字体下会显示不明显，或者被遮盖）

```url
http://api.example.com/inventoryManagement/managedEntities/{id}/installScriptLocation 

http://api.example.com/inventory_management/managed_entities/{id}/install_script_location

//better
http://api.example.com/inventory-management/managed-entities/{id}/install-script-location
```

5. 使用小写字母


6. 不要加文件后缀

```url
http://api.example.com/device-management/managed-devices.xml  /*Do not use it*/

http://api.example.com/device-management/managed-devices 	/*This is correct URI*/
```

7. 不要使用CRUD的一些方法名词（例如：getXXX，deletXXX，与第一点类似）

```url
HTTP GET http://api.example.com/device-management/managed-devices  //Get all devices
HTTP POST http://api.example.com/device-management/managed-devices  //Create new Device

HTTP GET http://api.example.com/device-management/managed-devices/{id}  //Get device for given Id
HTTP PUT http://api.example.com/device-management/managed-devices/{id}  //Update device for given Id
HTTP DELETE http://api.example.com/device-management/managed-devices/{id}  //Delete device for given Id
```


8. 用query形式来过滤资源集合（区别于params形式，理解）
```url
http://api.example.com/device-management/managed-devices

http://api.example.com/device-management/managed-devices?region=USA
http://api.example.com/device-management/managed-devices?region=USA&brand=XYZ
http://api.example.com/device-management/managed-devices?region=USA&brand=XYZ&sort=installation-date
```


## 参考：
- [resource-naming](https://restfulapi.net/resource-naming)


资源路径如何正确的定义？应该遵守怎样的命名规范？

RESTful资源命名规范


以前只用过嵌套和变量，所以在脑子里CSS预处理器就这点功能。

最近准备看下Sass文档，学习和总结下，看了中文文档有些翻译确实让人看不太懂，所以决定对着英文文档自己啃。

本准备像上一篇一样，把英文文档逐篇翻译，后来想想算了，所以总结了Sass常用的一些功能点。

## 变量

变量以 **$** 开头，非驼峰写法，以 **-** 做命名切割

![sass-variable](sass-variable.jpeg)

⚠️**注意**：原生CSS也是带有变量功能的，命名以 **--** 开头，点击[这里](https://sass-lang.com/documentation/variables)查看具体的区别


## 嵌套

原生CSS是不支持嵌套写法的，但有个相关的[草案](https://drafts.csswg.org/css-nesting-1)，相信不久的将来也会支持

![sass-css-nesting](sass-css-nesting.jpeg)

用Sass我们可以这样写

![sass-css-nesting](sass-nesting.jpeg)

嵌套写法也是我们大部分人最常用的功能，没有之一。。。

⚠️**注意**：嵌套是很有用，但也是很容易滥用的地方，一般建议嵌套不超过三层，否则会影响性能，在Sass中还提供了一个[@at-root](https://sass-lang.com/documentation/at-rules/at-root) 的功能，可以让你直接跳出去。这样也可以避免嵌套层级过深。


## 父选择器（&）

在嵌套中，我们用 **&** 来表示当前位置的父类节点，通常在写伪类的时候会用到

![sass-&](sass-&.jpeg)

## 占位符选择器（placeholder）

占位符选择器以 **%** 开头，通过 **@extend** 来应用

![sass-placeholder](sass-placeholder.jpeg)

编译出来的CSS代码中并不会包括 **%placeholder** 规则中的样式，除非是通过 **@extend** 对其进行调用

它和 **mixin** 的使用也很像，但是还是有区别

### mixin

![sass-placeholder-mixin](sass-placeholder-mixin.jpeg)

### placeholder

![sass-placeholder1](sass-placeholder1.jpeg)

## 继承（@extend）

所谓 **@extend** 用法就是你为通用样式写一个 **.** 样式类，然后要用到改样式的地方再 **@extend**

![sass-extend](sass-extend.jpeg)

我们可以从上图中很直接的看出它与 **%placeholder** 的区别

还有一个问题，**.icon** 类我们在 **Html** 中不会用到，因为它仅仅是用来被 **@extend** 的，我们可以使用 **%placeholder** 来解决这种现象

## mixin

**mixin** 前面介绍占位符的时候也稍待介绍下，它主要用来修饰 **function** ，可以传入参数，也可以给参数设置个默认值

![sass-mixin](sass-mixin.jpeg)

## SassScript相关

### @if和@else

流程控制指令一般会配合 **mixin** 一起使用

![sass-if-else](sass-if-else.jpeg)

### @for

![sass-for](sass-for.jpeg)


### @while

![sass-while](sass-while.jpeg)


## 参考
- [掌握sass这些技能，帮助提升开发效率](https://juejin.cn/post/6870009638478151688)
- [your-nesting-is-harmful](https://medium.com/@verpixelt/your-nesting-is-harmful-a1ffddaf7e43)
- [your-placeholder-selectors](https://sass-lang.com/documentation/style-rules/placeholder-selectors)





Sass总结篇


## Sass支持两种语法，你可以根据喜好随意选择其中一种。

## SCSS

SCSS语法应用于后缀为 **.scss** 的文件，它是CSS的超集，那就意味着大多数情况下 ***合法的CSS写法也适用于SCSS***。


``` css
@mixin button-base() {
  @include typography(button);
  @include ripple-surface;
  @include ripple-radius-bounded;

  display: inline-flex;
  position: relative;
  height: $button-height;
  border: none;
  vertical-align: middle;

  &:hover { cursor: pointer; }

  &:disabled {
    color: $mdc-button-disabled-ink-color;
    cursor: default;
    pointer-events: none;
  }
}
```


## 缩进式语法（SASS）

这是Sass最原先的语法，应用于后缀为 **.sass** 的文件，缩进语法支持SCSS语法的一眼的功能，只是在写法上会用缩进的形式代替花括号和分号。

通常来讲，你如果想用花括号来表示结构的时候，你可以使用代码缩进来表示，每行结束的时候，即视为分号，这里只包括了基本的写法区别，其余的区别在后续的文档中会提到


```css
@mixin button-base()
  @include typography(button)
  @include ripple-surface
  @include ripple-radius-bounded

  display: inline-flex
  position: relative
  height: $button-height
  border: none
  vertical-align: middle

  &:hover
    cursor: pointer

  &:disabled
    color: $mdc-button-disabled-ink-color
    cursor: default
    pointer-events: none
```

## 和CSS一样，大部分Sass样式表是由包含属性声明的样式规则组成。但是Sass样式表还包含其他的一些功能

## 声明

Sass样式表由一系列声明组成，一些声明会包含语法块，通常由 **{}** 表示，语法块中还会包含其他声明，例如属性声明。

在Scss中，声明由分号分隔开，在缩进语法（.sass）中，只需换行即可。

### 通用声明

这些声明可以在Sass样式表中任何地方使用：

- [变量声明](https://sass-lang.com/documentation/variables)，比如： **$var: value**
- [流程控制规则](https://sass-lang.com/documentation/at-rules/control)，比如： **@if** and **@each**
- [@error](https://sass-lang.com/documentation/at-rules/error)，[@warn](https://sass-lang.com/documentation/at-rules/warn) 和 [@debug](https://sass-lang.com/documentation/at-rules/debug)规则

### CSS声明

这些声明生成CSS，它们可以在除 **@function** 的任何地方使用：
- [Style规则](https://sass-lang.com/documentation/style-rules)，比如 **h1 { /* ... */ }**
- [CSS规则](https://sass-lang.com/documentation/at-rules/css)，比如 **@media** 和 **@font-face**
- [Mixin](https://sass-lang.com/documentation/at-rules/mixin)使用 **@include**
- [@at-root规则](https://sass-lang.com/documentation/at-rules/at-root)

### 顶级声明

这些声明只能在样式表最上面或者CSS语法块最外层使用：
- [模块加载](https://sass-lang.com/documentation/at-rules/use)，使用 **@use**
- [引入](https://sass-lang.com/documentation/at-rules/import)，使用 **@import**
- [Mixin定义](https://sass-lang.com/documentation/at-rules/mixin)，使用 **@mixin**
- [Function定义](https://sass-lang.com/documentation/at-rules/function)，使用 **@function**

### 其余声明
- [属性声明](https://sass-lang.com/documentation/style-rules/declarations)，比如 **width: 100px** 只能在 **Style规则** 和 **CSS规则** 中使用
- [@extend规则](https://sass-lang.com/documentation/at-rules/extend)只能在 **Style规则** 中使用

## 表达式

表达式通常指属性右侧部分或者是变量声明，所有表达式最后都会生成一个值。任何有效的CSS属性值都可以是Sass表达式，但是Sass表达式包含更丰富强大的功能。它们可以将参数传递给 **mixins** 和 **functions**，用 **@if rule** 控制流程，并用算法进行操作。我们把Sass表达式称为 **SassScript** 语法。

### 文值

最简单的表达式就是静态的值：
- [Numbers](https://sass-lang.com/documentation/values/numbers)，可以有单位，比如 **12** 或 **100px**
- [Strings](https://sass-lang.com/documentation/values/strings)，可以有引号，比如 **"Helvetica Neue"** 或 **blod**
- [Colors](https://sass-lang.com/documentation/values/colors)，可以用颜色代码或者颜色名表示，比如 **#c6538c** 或 **blue**
- [boolean](https://sass-lang.com/documentation/values/booleans)， **true** 或者 **false**
- [null](https://sass-lang.com/documentation/values/null)
- [值列表](https://sass-lang.com/documentation/values/lists)，由空格，逗号或者 **[]** 来隔开，比如：**1.5em 1em 0 2em, Helvetica, Arial, sans-serif** 或者 **[col1-start]**
- [Maps](https://sass-lang.com/documentation/values/maps)会把 **key** 和 **value** 联系起来，比如： **("background": red, "foreground": pink)**

### 运算

Sass为数字运算定义了语法：
- [== 和 !=](https://sass-lang.com/documentation/operators/equality)用来检查两个值是否相等
- [+, -, *, /, 和 %](https://sass-lang.com/documentation/operators/numeric)用来对数字进行常用的算数计算，加上单位会有特殊的意义
- [<, <=, >, 和 >=](https://sass-lang.com/documentation/operators/relational)用来检查两个值哪个大，哪个小
- [and, or 和 not](https://sass-lang.com/documentation/operators/boolean)用来表示布尔行为，Sass认为除了 **false** 和 **null** 其余的都为 **true**
- [+, - 和 /](https://sass-lang.com/documentation/operators/string)可用于连接字符串
- [( and )](https://sass-lang.com/documentation/operators#parentheses)可用于显式控制操作的优先顺序


### 其余表达式
- [变量](https://sass-lang.com/documentation/variables)，比如 **$var**
- [函数调用](https://sass-lang.com/documentation/at-rules/function)，比如 **nth($list, 1)** 或者 **var(--main-bg-color)** ，可以调用Sass核心库函数或用户定义的函数，也可以直接编译为CSS
- [特定函数](https://sass-lang.com/documentation/syntax/special-functions)，比如 **calc(1px + 100%)**，**url(http://myapp.com/assets/logo.png)** 具有自己独特的解析规则
- [父级选择器](https://sass-lang.com/documentation/style-rules/parent-selector)， **&**
- **!important**，被解析为无引号的字符串


## 参考
- [sass-syntax](https://www.freecodecamp.org/news/npm-vs-npx-whats-the-difference/)

Sass的基本语法，以及语法声明和表达式介绍

Sass语法篇



如果你曾经用过Node.js，那你一定用过npm。

**npm**(node package manager)是你安装Node.js之后开箱即用的包依赖管理工具。开发者可以通过它本地或全局安装依赖库。

有时候你可能只是想了解下某些库，然后试一试它的一些命令，但是你不在本地  **node_modules**  文件夹安装相关的库你是无法尝试它的指令的。

这就是 **npx** 出现的原因。

本文我们讲着重看一看两者的区别，学会在合适的场景使用它们。

首先，让我们先来了解下 **npm** 到底是什么，我们可以通过它来干些啥。

## npm the package manager

它是一个在线资源库，用于发布开源的Node.js项目

它是一个CLI（命令行）工具，可以帮助你安装库并管理其版本和依赖（npm上又成千上万的Node.js库和应用，而且每天都在增加）

npm本身不会运行任何库，如果你想使用npm来运行某些库，你必须要在你的 **package.json** 文件中声明

当npm执行安装库的指令时（npm install xxx)，npm会创建指向它们的链接
1. 本地安装会在 **./node_modules/.bin/** 文件夹中创建链接
2. 全局安装会在全局的 **bin/** 文件夹下创建链接（例如：Linux系统是 **/usr/local/bin** ，Windows系统是 **%AppData%/npm** ）

你可以这样执行库

``` bash
$ ./node_modules/.bin/your-package
```
或者可以通过在package.json里添加脚本来执行

``` json
{
  "name": "your-application",
  "version": "1.0.0",
  "scripts": {
    "your-package": "your-package"
  }
}
```
然后你可以运行指令：

``` node
npm run your-package
```

你可以看到通过 **npm** 运行库还是要花不少时间的。

庆幸的是，**npx** 可以派上用场了。

## npm the package runner

从 **npm**5.2.0版本开始，安装 **npm** 会预安装上 **npx**。

**npx** 也是CLI（命令行）工具，其目的是使得安装和管理 **npm** 依赖库更加容易。

现在可以很简单的运行通过 **npm** 安装的任何基于Node.js的可执行文件。

你可以通过以下指令查看你当前 **npm** 版本是否已经安装了 **npx** ：

``` dash
$ which npx
```
如果没有，可以通过以下指令安装：
``` dash
$ npm install -g npx
```

确定安装好之后，我们通过一些用例来看看 **npx** 是多么的方便有用。

## Run a locally installed package easily

如果要执行本地安装的库，只需输入：
``` dash
$ npx your-package
```
**npx** 将检查 **$ PATH** 或本地项目二进制文件中是否存在 **<command>** 或 **<package>** ，如果存在，它将执行该命令。

## Execute packages that are not previously installed

另一个主要优点是能够执行未安装的库。

有时，您只是想使用某些库的命令行指令，但不想安装它们。 这意味着你可以节省一些磁盘空间，仅在需要它们时才安装它们。

## Run code directly from GitHub

![execute-gist-scripts-with-npx](execute-gist-scripts-with-npx.jpeg)

这很酷！

你可以使用 **npx** 运行任何 **GitHub gists** 和仓库。 让我们集中精力执行 **GitHub gists** ，因为它更容易创建。

在[这里](https://gist.github.com/Tynael/0861d31ea17796c9a5b4a0162eb3c1e8)，你可以找到此示例代码。

在执行之前，请确保仔细阅读所有 script，以避免由于恶意代码而导致的严重问题。

## 总结

**npx** 帮助我们避免安装仅仅想尝试的不必要的库

它还提供了一种通过直连 **GitHub gists** 或 **仓库** 来执行包命令的更简单快捷的方式

如果您以前从未使用过 **npx**，那么现在是开始的好时机！

## 参考
- [npm-vs-npx-whats-the-difference](https://www.freecodecamp.org/news/npm-vs-npx-whats-the-difference/)

npx和npm的区别是啥，npx能解决npm的哪些痛点