类型判断


全局(客户端)状态管理并不总是像今天这样。我清楚地记得有一段时间，在高阶组件中的状态管理最佳选择是使用`Redux`， `connect` 连接 `mapStateToProps` 和 `mapDispatchToProps`。

即使是`context api`，最初也不是那么符合需求 ，因为刚出的时候只支持自身`props`。

当然，hooks 出现后一切都变了。不仅现有的解决方案变得更容易使用，而且新的解决方案也诞生了。

## Zustand

其中增长迅速的像`Zustand`，它非常小而精悍，提供了简易`api`创建全局状态以及通过`selectors`过来状态。它类似`Redux`，又比`Redux`简易。

就像`React`，`Zustand`提供丰富的扩展，可以结合[immer](https://github.com/pmndrs/zustand/tree/2b29d736841dc7b3fd7dec8cbfea50fee7295974#sick-of-reducers-and-changing-nested-state-use-immer)，也可以使用其他[middlewares](https://github.com/pmndrs/zustand/tree/2b29d736841dc7b3fd7dec8cbfea50fee7295974#middleware)

`Zustand` 将 `createStore` 函数的返回值作为一个自定义 hook 来实现，其中为了让 `React` 组件能感知到状态更新，是利用 `useEffect` 来完成订阅操作，而状态更新发布后，则通过 `forceUpdate()` 来强制组件进行 `rerender` 以获取最新的状态。

实际上，用法和 `react-redux` 非常相似，但获取状态与更新状态均只需要使用 `useStore` 一个 API 即可完成业务。

我从 2018 年开始在大小项目中使用`Zustand`，我也为`Zustand`开源做过贡献，以下是一些在实践中积累的技巧。

### 仅导出自定义钩子

这是首要技巧，对于任何 React 开发都满足，我之前列出了很多[Hooks 优点](https://tkdodo.eu/blog/simplifying-use-effect#3-write-custom-hooks)。

```js
// ⬇️ not exported, so no one can subscribe to the whole store
const useBearStore = create((set) => ({
  bears: 0,
  fish: 0,
  increasePopulation: (by) => set((state) => ({bears: state.bears + by})),
  eatFish: () => set((state) => ({fish: state.fish - 1})),
  removeAllBears: () => set({bears: 0})
}))

// 💡 exported - consumers don't need to write selectors
export const useBears = () => useBearStore((state) => state.bears)
```

它们将为您提供更清晰的界面，并且您不需要在所有您希望只订阅状态的一个值的地方编写选择器。此外，它还避免了意外地订阅整个状态:

```js
// ❌ we could do this if useBearStore was exported
const {bears} = useBearStore()
```

虽然结果可能是相同的(你会得到 bear 的数量) ，上面的代码将订阅你的整个状态，这意味着你的组件将在某个状态更新后全部重新渲染 ，即使 bear 没有改变，比如，fish 的状态改变了。`Selectors`在 `Zustand` 是可选择的，但对我来说，他们真的不是。即使我们有一个只有一个状态值的存储，我也会编写自定义钩子，以便将来能够添加更多的状态。

### 多使用原子选择器

这个在[官方文档](https://github.com/pmndrs/zustand/tree/2b29d736841dc7b3fd7dec8cbfea50fee7295974#selecting-multiple-state-slices)也解释了，所以我会尽量简短，但是非常重要，因为错用、滥用它可能会导致渲染性能下降。

`Zustand` 通过比较选择器的结果和之前渲染的结果来决定何时通知组件更新。默认情况下，它通过严格的相等检查来完成。

实际上，这意味着选择器必须返回稳定的结果。如果返回一个新的 `Array` 或 `Object`，它将始终被视为更改，即使内容相同:

```js
// 🚨 selector returns a new Object in every invocation
const {bears, fish} = useBearStore((state) => ({
  bears: state.bears,
  fish: state.fish
}))

// 😮 so these two are equivalent
const {bears, fish} = useBearStore()
```

如果要从选择器返回 Object 或 Array，可以将比较函数调整为使用浅比较:

```js
import shallow from 'zustand/shallow'

// ⬇️ much better, because optimized
const {bears, fish} = useBearStore(
  (state) => ({bears: state.bears, fish: state.fish}),
  shallow
)
```

然而我更倾向于导出两个独立的`selectors`

```js
export const useBears = () => useBearStore((state) => state.bears)
export const useFish = () => useBearStore((state) => state.fish)
```

假如组件需要多个值，引入多个 hooks 即可。

### actions 和 state 分离

actions 是不变的静态函数，它更新 state 中的值，所以它们不是真正的“状态”。将它们作为一个额外的对象在我们的存储中分离将允许我们将它们作为一个钩子暴露出来，然后我们可以在组件中使用它们:

```js
const useBearStore = create((set) => ({
  bears: 0,
  fish: 0,
  // ⬇️ separate "namespace" for actions
  actions: {
    increasePopulation: (by) => set((state) => ({bears: state.bears + by})),
    eatFish: () => set((state) => ({fish: state.fish - 1})),
    removeAllBears: () => set({bears: 0})
  }
}))

export const useBears = () => useBearStore((state) => state.bears)
export const useFish = () => useBearStore((state) => state.fish)

// 🎉 one selector for all our actions
export const useBearActions = () => useBearStore((state) => state.actions)
```

现在可以只使用一个 hooks 导出所有的 actions

```js
const {increasePopulation} = useBearActions()
```

这看起来和上面提到的原子选择器相反，但是事实并非如此，由于 `actions` 不会改变，`actions` 可以看出是一个原子块。

### Model Actions as Events, not Setters

这是一个通用的提示，无论你是否使用 `useReducer`、 `Redux` 或 `Zustand`。
事实上，这个技巧直接来自 [Redux 风格指南](https://redux.js.org/style-guide/style-guide#model-actions-as-events-not-setters)。
它将帮助您将业务逻辑保留在存储中，而不是保留在组件中。
上面的例子已经使用了这种模式——逻辑(例如“增加人口”)存在于状态中。
组件只是调用操作，而存储决定如何处理它。

### 保持状态小型化

与 `Redux` 不同的是，`Zustand` 鼓励您拥有多个小型状态。每个状态可以对单个状态负责。如果你需要组合它们，你可以使用自定义钩子:

```js
const currentUser = useCredentialsStore((state) => state.currentUser)
const user = useUsersStore((state) => state.users[currentUser])
```

> 注意: Zustand 确实有另外一种将状态组合成切片的方法，但是我从来不需要这种方法。对我来说，它看起来不是很简单，尤其是涉及到 TypeScript 的时候。如果我真的需要它，我可能会选择 Redux Toolkit。

### 结合其他库

老实说，我并不经常需要组合多个 `Zustand` 状态，因为应用程序中的大多数状态要么是服务器状态，要么是 URL 状态。与将两个状态组合起来相比，我更有可能将 `Zustand` 状态与 `useQuery` 或 `useParams` 结合起来。不过，同样的原则也适用于: 如果你需要将另一个钩子与 `Zustand` 状态结合起来，自定义钩子也许是你最好的选择:

```js
const useFilterStore = create((set) => ({
  applied: [],
  actions: {
    addFilter: (filter) =>
      set((state) => ({applied: [...state.applied, filter]}))
  }
}))

export const useAppliedFilters = () => useFilterStore((state) => state.applied)

export const useFiltersActions = () => useFilterStore((state) => state.actions)

// 🚀 combine the zustand store with a query
export const useFilteredTodos = () => {
  const filters = useAppliedFilters()
  return useQuery({
    queryKey: ['todos', filters],
    queryFn: () => getTodos(filters)
  })
}
```

在这里，应用的筛选器驱动查询，因为筛选器是查询键的一部分。
每次调用 `addFilter` (可以在 UI 中的任何地方执行)时，都会自动触发一个新查询，这个查询也可以在 UI 中的任何地方使用。
我觉得这是一个非常简洁明了的说明，但又不会太神奇。


全局(客户端)状态管理并不总是像今天这样。我清楚地记得有一段时间，在高阶组件中的状态管理最佳选择是使用Redux， connect 连接 mapStateToProps 和 mapDispatchToProps。

Zustand-入门


在本教程中，我们将使用 Nodejs、 Express、 Postgres 和 Docker 在 JavaScript 中构建 CRUD Rest API。

## 介绍

下面是我们将要创建的应用程序架构的模式:

![gBFaRK](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/gBFaRK.jpg)

5 个基本 CURD 基本操作

- Create
- Read all
- Read one
- Update
- Delete

将使用以下技术、框架创建应用程序:

- Express
- Sequelize
- Docker
- Postgres
- Docker compose
- Postman

## 项目结构

```bash
mkdir node-curd-api
cd node-curd-api
npm init -y
npm i express sequelize pg
mkdir controllers routes util models
code .
```

项目结构图如下：

![RQuES3](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/RQuES3.jpg)

## 创建、连接数据库

首先在 util 文件夹下新建 database.js 文件，用于连接数据库。这个文件将包含允许 Node.js 应用程序和运行的 Postgres 实例之间连接的内部配置。

```js
const Sequelize = require('sequelize')
const sequelize = new Sequelize(
  process.env.PG_DB,
  process.env.PG_USER,
  process.env.PG_PASSWORD,
  {
    host: process.env.PG_HOST,
    dialect: 'postgres'
  }
)
module.exports = sequelize
```

## 创建模型

在 models 文件夹下新建 user.js 文件，用于创建模型。这个文件将包含模型，在本例中是一个具有自动递增 id、name 和 email 的用户。

```js
const Sequelize = require('sequelize')
const db = require('../util/database')

const User = db.define('user', {
  id: {
    type: Sequelize.INTEGER,
    autoIncrement: true,
    allowNull: false,
    primaryKey: true
  },
  name: Sequelize.STRING,
  email: Sequelize.STRING
})
module.exports = User
```

## 创建控制器

在 controllers 文件夹下新建 user.js 文件，用于创建控制器。这个文件将包含控制器，用于处理请求。

```js
const User = require('../models/user')

// CRUD Controllers

//get all users
exports.getUsers = (req, res, next) => {
  User.findAll()
    .then((users) => {
      res.status(200).json({users: users})
    })
    .catch((err) => console.log(err))
}

//get user by id
exports.getUser = (req, res, next) => {
  const userId = req.params.userId
  User.findByPk(userId)
    .then((user) => {
      if (!user) {
        return res.status(404).json({message: 'User not found!'})
      }
      res.status(200).json({user: user})
    })
    .catch((err) => console.log(err))
}

//create user
exports.createUser = (req, res, next) => {
  const name = req.body.name
  const email = req.body.email
  User.create({
    name: name,
    email: email
  })
    .then((result) => {
      console.log('Created User')
      res.status(201).json({
        message: 'User created successfully!',
        user: result
      })
    })
    .catch((err) => {
      console.log(err)
    })
}

//update user
exports.updateUser = (req, res, next) => {
  const userId = req.params.userId
  const updatedName = req.body.name
  const updatedEmail = req.body.email
  User.findByPk(userId)
    .then((user) => {
      if (!user) {
        return res.status(404).json({message: 'User not found!'})
      }
      user.name = updatedName
      user.email = updatedEmail
      return user.save()
    })
    .then((result) => {
      res.status(200).json({message: 'User updated!', user: result})
    })
    .catch((err) => console.log(err))
}

//delete user
exports.deleteUser = (req, res, next) => {
  const userId = req.params.userId
  User.findByPk(userId)
    .then((user) => {
      if (!user) {
        return res.status(404).json({message: 'User not found!'})
      }
      return User.destroy({
        where: {
          id: userId
        }
      })
    })
    .then((result) => {
      res.status(200).json({message: 'User deleted!'})
    })
    .catch((err) => console.log(err))
}
```

## 创建路由

在 routes 文件夹下新建 user.js 文件，用于创建路由。这个文件将包含路由，用于处理请求。

```js
const controller = require('../controllers/users')
const router = require('express').Router()

// CRUD Routes /users
router.get('/', controller.getUsers) // /users
router.get('/:userId', controller.getUser) // /users/:userId
router.post('/', controller.createUser) // /users
router.put('/:userId', controller.updateUser) // /users/:userId
router.delete('/:userId', controller.deleteUser) // /users/:userId

module.exports = router
```

## 创建应用

在根目录下新建 index.js 文件，用于创建应用。这个文件将包含应用的主要配置。

```js
const express = require('express')
const bodyparser = require('body-parser')
const sequelize = require('./util/database')
const User = require('./models/user')

const app = express()

app.use(bodyparser.json())
app.use(bodyparser.urlencoded({extended: false}))

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*')
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE')
  next()
})

//test route
app.get('/', (req, res, next) => {
  res.send('Hello World')
})

//CRUD routes
app.use('/users', require('./routes/users'))

//error handling
app.use((error, req, res, next) => {
  console.log(error)
  const status = error.statusCode || 500
  const message = error.message
  res.status(status).json({message: message})
})

//sync database
sequelize
  .sync()
  .then((result) => {
    console.log('Database connected')
    app.listen(3000)
  })
  .catch((err) => console.log(err))
```

## Docker 不分

在根目录下新建 Dockerfile、.dockerignore、docker-compoese.yml 文件，用于创建 Docker 镜像。

![ntgsxk](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/ntgsxk.jpg)

.dockerignore 文件写入以下内容

```
node_modules
```

![EzUpqv](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/EzUpqv.jpg)

Dockerfile 文件写入以下内容

```dockerfile
FROM node:14

# Create app directory
WORKDIR /app

COPY package*.json ./

RUN npm install

# Bundle app source
COPY . .

EXPOSE 3000

CMD [ "node", "index.js" ]
```

docker-compose.yaml，用于启动多容器服务

```yaml
version: '3.9'

services:
  node_app:
    container_name: node_app
    build: .
    image: francescoxx/node_live_app
    ports:
      - '3000:3000'
    environment:
      - PG_DB=node_live_db
      - PG_USER=francesco
      - PG_PASSWORD=12345
      - PG_HOST=node_db
    depends_on:
      - node_db

  node_db:
    container_name: node_db
    image: postgres:12
    ports:
      - '5432:5432'
    environment:
      - POSTGRES_DB=node_live_db
      - POSTGRES_USER=francesco
      - POSTGRES_PASSWORD=12345
    volumes:
      - node_db_data:/var/lib/postgresql/data

volumes:
  node_db_data: {}
```

## 打包镜像、运行服务

在根目录下打开终端，运行以下命令

```bash
docker-compose up --build node_db
```

查询日志：

```bash
docker-compose logs -f node_db
```

得到以下内容，如输出***database system is ready to accept connections***，表示数据库已经启动成功。

![wlzr48](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/wlzr48.jpg)

使用 TablePlus 连接数据库，创建数据库表，点击+按钮新建连接

![zxe2HJ](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/zxe2HJ.jpg)

从 docker-compose.yml 文件中获取数据库连接信息

![3rUiJH](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/3rUiJH.jpg)

打包镜像

```bash
docker compse build
```

![SqOJnk](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/SqOJnk.jpg)

运行镜像

```bash
docker compose up node_app
```

![rlgrrW](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/rlgrrW.jpg)

## 使用 Postman 测试

创建 GET 请求

![vgNVHB](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/vgNVHB.jpg)

请求 ***http://localhost:3000/users***

![vy6QR0](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/vy6QR0.jpg)

创建三个用户 aaa、bbb、ccc

![xhGZ8W](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/xhGZ8W.jpg)

![hIXblX](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/hIXblX.jpg)

![7mfRmn](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/7mfRmn.jpg)

再次请求 ***http://localhost:3000/users***，得到以下结果

![IWZroo](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/IWZroo.jpg)

请求单个用户 ***http://localhost:3000/users/2***

![TuscvA](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/TuscvA.jpg)

修改已存在的用户 ***http://localhost:3000/users/2***

![dmVeir](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/dmVeir.jpg)

删除已存在的用户 ***http://localhost:3000/users/3***

![50TtFw](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/50TtFw.jpg)

操作完成后同样可以在 TablePlus 中查看数据库表

![KWjZdE](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/KWjZdE.jpg)

## 总结

本文介绍了如何使用 Docker Compose 配置多容器服务，以及如何使用 Postman 测试 Node.js 服务。

源码地址：[https://github.com/FrancescoXX/crud-node-live](https://github.com/FrancescoXX/crud-node-live)


使用 Nodejs、 Express、 Postgres 和 Docker 在 JavaScript 中构建 CRUD Rest API


![集合引用类型](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/集合引用类型.png)

## Object

> 任何非原始类型的值（字符串，数字，布尔值，符号，null 或未定义）都是对象，数组和函数也不例外。

内置属性

1. Object.length=1
2. Object.prototype

静态方法

1. Object.assign() **_ES2015_** //通过复制一个或多个对象来创建一个新的对象。
2. Object.create() //使用指定的原型对象和属性创建一个新对象。
3. Object.defineProperty() //给对象添加一个属性并指定该属性的配置。
4. Object.defineProperties() //给对象添加多个属性并分别指定它们的配置。
5. Object.entries() **_ES2017_** //返回给定对象自身可枚举属性的 [key, value] 数组。
6. Object.freeze() //冻结对象：其他代码不能删除或更改任何属性。
7. Object.getOwnPropertyDescriptor() //返回对象指定的属性配置。
8. Object.getOwnPropertyNames() //返回一个数组，它包含了指定对象所有的可枚举或不可枚举的属性名。
9. Object.getOwnPropertySymbols() //返回一个数组，它包含了指定对象自身所有的符号属性。
10. Object.getPrototypeOf() //返回指定对象的原型对象。
11. Object.is() **_ES2015_** //比较两个值是否相同。所有 NaN 值都相等（这与==和===不同）。
12. Object.isExtensible() //判断对象是否可扩展。
13. Object.isFrozen() //判断对象是否已经冻结。
14. Object.isSealed() //判断对象是否已经密封。
15. Object.keys() //返回一个包含所有给定对象自身可枚举属性名称的数组。
16. Object.preventExtensions() //防止对象的任何扩展。
17. Object.seal() //防止其他代码删除对象的属性。
18. Object.setPrototypeOf() **_ES2015_** //设置对象的原型（即内部 [[Prototype]] 属性）。
19. Object.values() //返回给定对象自身可枚举值的数组。

Object 实例和 Object 原型对象

> JavaScript 中的所有对象都来自 Object；所有对象从 Object.prototype 继承方法和属性，尽管它们可能被覆盖。

```js
Object.prototype.constructor //特定的函数，用于创建一个对象的原型。
```

实例方法

1. Object.prototype.hasOwnProperty() //返回一个布尔值 ，表示某个对象是否含有指定的属性，而且此属性非原型链继承的。
2. Object.prototype.isPrototypeOf() //返回一个布尔值，表示指定的对象是否在本对象的原型链中。
3. Object.prototype.propertyIsEnumerable() //判断指定属性是否可枚举，内部属性设置参见 ECMAScript [[Enumerable]] attribute 。
4. Object.prototype.toLocaleString() //直接调用 toString()方法。
5. Object.prototype.toString() //返回对象的字符串表示。
6. Object.prototype.valueOf() //返回指定对象的原始值。

创建对象

```js
const person = {}
typeof person //object
```

### 使用 Object 全局函数

```js
const person = Object()
typeof person //object
```

### 使用 Object 构造器

```js
const person = new Object()
typeof person //object
```

### 使用 Object.create()

```js
const car = Object.create()
```

```js
const person = {
  age: 36,
  name: 'funny',
  speak: () => {
    //speak
  }
}

const person = Object({
  age: 36,
  name: 'funny',
  speak: () => {
    //speak
  }
})

const person = new Object({
  age: 36,
  name: 'funny',
  speak: () => {
    //speak
  }
})
```

### Object.assign

```js
const copied = Object.assign({}, target1, target2, ...target)
```

> Object.assign-将一个或多个对象的所有可枚举属性复制到另一个对象中。浅拷贝，复制对象引用而非对象本身。

```js
const original = {
  name: 'Fiesta',
  car: {
    color: 'blue'
  }
}
const copied = Object.assign({}, original)

original.name = 'Focus'
original.car.color = 'yellow'

copied.name //Fiesta
copied.car.color //yellow
```

### Object.create

```js
const newObject = Object.create(prototype)

const newObject = Object.create(prototype, newProperties)
```

> 使用指定原型创建新的对象，可以指定第二个参数来向对象添加新属性

```js
const animal = {}
const dog = Object.create(animal)

const animal = {}
const dog = Object.create(animal, {
  breed: {
    value: 'Siberian Husky'
  }
})
console.log(dog.breed) //'Siberian Husky'
```

### Object.defineProperty

> 直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象

```js
const dog = {}
Object.defineProperty(dog, 'breed', {
  value: 'Siberian Husky'
})
console.log(dog.breed) //'Siberian Husky'
```

扩展：[vue 原理之-神奇的 Object.defineProperty]("https://zhuanlan.zhihu.com/p/29066270")

### Object.defineProperties

> 直接在一个对象上定义新的属性或修改现有属性，并返回该对象

```js
const dog = {}
Object.defineProperties(dog, {
  breed: {
    value: 'Siberian Husky'
  }
})
console.log(dog.breed) //'Siberian Husky'
```

### Object.entries()

> ES2017,返回自身可枚举属性的键值对数组

```js
const person = {name: 'Fred', age: 87}
Object.entries(person) // [['name', 'Fred'], ['age', 87]]

const people = ['Fred', 'Tony']
Object.entries(people) // [['0', 'Fred'], ['1', 'Tony']]
```

### Object.freeze()

> 冻结对象，冻结后不能再添加或修改

```js
const dog = {}
dog.breed = 'Siberian Husky'
const myDog = Object.freeze(dog)

Object.isFrozen(dog) //true
Object.isFrozen(myDog) //true
dog === myDog //true

dog.name = 'Roger' //TypeError: 无法添加name属性，dog是不可扩展的
```

### Object.getOwnPropertyDescriptor()

> 返回自由属性描述符

```js
const dog = {}
Object.defineProperties(dog, {
  breed: {
    value: 'Siberian Husky'
  }
})
Object.getOwnPropertyDescriptor(dog, 'breed')
/*
{
  value: 'Siberian Husky',
  writable: false,
  enumerable: false,
  configurable: false
}
*/
```

### Object.getOwnPropertyNames()

> 返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括 Symbol 值作为名称的属性）组成的数组

```js
const dog = {}
dog.breed = 'Siberian Husky'
dog.name = 'Roger'

Object.getOwnPropertyNames(dog) //[ 'breed', 'name' ]
```

### Object.getOwnPropertySymbols()

> 返回一个给定对象自身的所有 Symbol 属性的数

```js
const dog = {}
const r = Symbol('Roger')
const s = Symbol('Syd')
dog[r] = {
  name: 'Roger',
  age: 6
}
dog[s] = {
  name: 'Syd',
  age: 5
}

Object.getOwnPropertySymbols(dog) //[ Symbol(Roger), Symbol(Syd) ]
```

### Object.getPrototypeOf()

> 返回指定对象的原型（内部[[Prototype]]属性的

```js
const animal = {}
const dog = Object.create(animal)
const prot = Object.getPrototypeOf(dog)

animal === prot //true

//如果对象没有原型，将返回null
Object.prototype //{}
Object.getPrototypeOf(Object.prototype) //null
```

### Object.is()

> 判断两个值是否相等

- 两个值都是 undefined
- 两个值都是 null
- 两个值都是 true 或者都是 false
- 两个值是由相同个数的字符按照相同的顺序组成的字符串
- 两个值指向同一个对象
- 两个值都是数字并且
  - 都是正零 +0
  - 都是负零 -0
  - 都是 NaN
  - 都是除零和 NaN 外的其它同一个数字

```js
Object.is(a, b)
```

### Object.isExtensible()

> 判断一个对象是否是可扩展的，返回布尔值。任何对象都是可扩展，除非使用了 Object.freeze()、Object.seal()、Object.preventExtensions()

### Object.isFrozen()

> 判断一个对象是否被冻结，返回布尔值

```js
const dog = {}
dog.breed = 'Siberian Husky'
const myDog = Object.freeze(dog)
Object.isFrozen(dog) //true
Object.isFrozen(myDog) //true
dog === myDog //true
```

### Object.isSealed()

> 判断一个对象是否被密封，返回布尔值

```js
const dog = {}
dog.breed = 'Siberian Husky'
const myDog = Object.seal(dog)
Object.isSealed(dog) //true
Object.isSealed(myDog) //true
dog === myDog //true
```

### Object.keys()

> 返回对象的自身可枚举属性组成的数组

```js
const car = {
  color: 'Blue',
  brand: 'Ford',
  model: 'Fiesta'
}

Object.keys(car) //[ 'color', 'brand', 'model' ]
```

### Object.preventExtensions()

> 阻止对象扩展，但可以删除属性

```js
const dog = {}
dog.breed = 'Siberian Husky'
Object.preventExtensions(dog)

dog.name = 'Roger' //TypeError: Cannot add property name, object is not extensible

delete dog.name
dog //{ breed: 'Siberian Husky' }
```

### Object.seal()

> 与 Object.freeze（）类似，但不会使属性不可写。仅阻止添加或删除属性。与 Object.preventExtensions（）类似，但也不允许删除属性：

```js
const dog = {}
dog.breed = 'Siberian Husky'
Object.seal(dog)
dog.breed = 'Pug'
dog.name = 'Roger' //TypeError: Cannot add property name, object is not extensible
```

### Object.values()

> 对象自身的所有可枚举属性值的数组

```js
const person = {name: 'Fred', age: 87}
Object.values(person) // ['Fred', 87]

const people = ['Fred', 'Tony']
Object.values(people) // ['Fred', 'Tony']
```

### Object.hasOwnProperty()

> 判断对象自身是否有某个值，返回布尔值

```js
const person = {name: 'Fred', age: 87}
person.hasOwnProperty('name') //true
person.hasOwnProperty('job') //false
```

### Object.isPrototypeOf()

> 测试一个对象是否存在于另一个对象的原型链上

```js
const Animal = {
  isAnimal: true
}

const Mammal = Object.create(Animal)
Mammal.isMammal = true

Animal.isPrototypeOf(Mammal) //true

const dog = Object.create(Animal)
Object.setPrototypeOf(dog, Mammal)

Animal.isPrototypeOf(dog) //true
Mammal.isPrototypeOf(dog) //true
```

### Object.propertyIsEnumerable()

> 判断对象的属性是否可枚举，返回布尔值

```js
const person = {name: 'Fred'}

Object.defineProperty(person, 'age', {
  value: 87,
  enumerable: false
})

person.propertyIsEnumerable('name') //true
person.propertyIsEnumerable('age') //false
```

### Object.toLocaleString()

```js
const person = {name: 'Fred'}
person.toLocaleString() //[object Object]
```

### Object.toString()

```js
const person = {name: 'Fred'}
person.toString() //[object Object]
```

### Object.valueOf()

> 返回指定对象的原始值

```js
const person = {name: 'Fred'}
person.valueOf() //{ name: 'Fred' }
```

## Array

属性

1. Array.length - 静态属性，值为 1
2. Array.prototype - 数组的原型对象

方法

1. Array.from - 从类数组对象或者可迭代对象中创建一个新的数组实例
2. Array.of - 根据一组参数来创建新的数组实例，支持任意的参数数量和类型
3. Array.isArray - 判断是否为数组

### 实例属性

1. Array.prototype.length - 空数组，值为 0
2. Array.prototype.constructor - 所有的数组实例都继承了这个属性，值为 Array

### 实例方法

#### 修改器方法 - 改变调用它们的对象自身的值

- Array.prototype.copyWithin //将数组 copy 到另一个数组，并覆盖原值
- Array.prototype.fill //填充数组
- Array.prototype.pop //删除数组最后一个值，并返回该值
- Array.prototype.push //向数组最后添加一个新的元素或多个元素，并返回数组的长度
- Array.prototype.reverse //颠倒数组
- Array.prototype.shift //删除数组第一个元素并返回该元素
- Array.prototype.sort //排序
- Array.prototype.splice //在数组任意位置添加或删除元素
- Array.prototype.unshift //在数组开头添加一个或多个元素并返回数组长度

#### 访问方法 - 不会改变调用它们的对象自身的值，只会返回新数组或期望值

- Array.prototype.concat //返回当前数组和其他数组的组合
- Array.prototype.includes //数组是否包含某个值，返回 true/false
- Array.prototype.join //返回数组所有元素组成的字符串
- Array.prototype.slice //截取数组的某一段
- Array.prototype.toString //转换成字符串
- Array.prototype.toLocalString //转换成本地字符串
- Array.prototype.indexOf //返回数组中第一个与指定值相等的索引
- Array.prototype.lastIndexOf //返回数组中最后一个与指定值相等的索引

#### 迭代方法

- Array.prototype.forEach //为数组中每个元素执行一次回调函数
- Array.prototype.entries //返回数组元素的键值对
- Array.prototype.every //如果每个元素都满足回调函数就返回 true，否则返回 false
- Array.prototype.some //如果数组中元素至少有一个满足回调函数就返回 true，否则返回 false
- Array.prototype.filter //过滤数组中满足回调函数的元素
- Array.prototype.find //查找数组中满足回调函数的元素，如果没有则返回 undefined
- Array.prototype.findIndex //返回数组中满足回调函数的索引，没有则返回-1
- Array.prototype.keys //返回数组中的键
- Array.prototype.map //返回一个由回调函数组成的新数组
- Array.prototype.reduce //从右向左为每个元素执行一次回调函数，并将上次回调函数的返回值暂存，然后传递给下一个回调函数
- Array.prototype.reduceRight //与 reduce 相反方向
- Array.prototype.values //返回数组中的值

### 四种合并数组的方法

1. 循环

```js
function push(fromArray, toArray) {
  for (let i = 0, len = fromArray.length; i < len; i++) {
    toArray.push(fromArray[i])
  }
  return toArray
}

var array1 = [1, 2, 3, 4, 5]
var array2 = [6, 7, 8, 9, 10]
var array3 = []
push(array1, array3)
push(array2, array3)
```

2. 解构

```js
var array1 = [1, 2, 3, 4, 5]
var array2 = [6, 7, 8, 9, 10]
var array3 = [...array1, ...array2]
var array3 = Array.of(...array2, ...array1)
array3 // [1,2,3,4,5,6,7,8,9,10];
```

3. concat

```js
var array1 = [1, 2, 3, 4, 5]
var array2 = [6, 7, 8, 9, 10]

var array3 = array1.concat(array2)
// or
var array3 = [].concat(array1, array2)
```

4. reduce

```js
var array1 = [1,2,3,4,5];
var array2 = [6,7,8,9,10];
var array3 = array2.reduce((newArray, item) => {
          newArray.push(item);
          return newArray;
 ), array1);
```

## 定型数组

## Map、WeakMap

## Set、WeakSet

## 迭代、扩展操作


Javascript - 集合引用类型


在做 UI（页面重构）的时候，免不了和各种小图标打交道，这其中最多的应该是三角形以及箭头，一般情况下可以通过伪类使用 unicode 解决大部分问题。

现在我们来总结下几种使用 css 绘制三角形的方法，dom 结构如下：

```html
<div class="triangle"></div>
```

## 最简单最方便的办法 background

```
代码忽略
```

## unicode

```css
.triangle:after {
  display: block;
  content: '\25B2';
  color: '#fd5353';
  font-size: 20px;
}
```

> 注意，伪类必须加上 content 属性，否则不生效

[unicode 图表](http://www.w3cplus.com/solution/css3content/images/html.png)

## border

```css
.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
```

使用 border 绘制三角形是什么原理？事实上，宽度相等的 border 是以 45 度对接的，如下图：

![image](https://i.stack.imgur.com/hZefy.png)

那么没有了上 border 就是如下图：

![image](https://i.stack.imgur.com/uV9Q5.png)

再设置 div 的宽度为 0，就是如下图：

![image](https://i.stack.imgur.com/K1A7G.png)

再设置 div 的高度为 0，如下图：

![image](https://i.stack.imgur.com/NsmsW.png)

最后设置左右 border 的颜色为透明，如下图：

![image](https://i.stack.imgur.com/B42zY.png)

再来个动图：

![image](https://i.stack.imgur.com/vYvqa.gif)

通过这种原理，我们可以做更多的图形，比如五角星、六角星等，更多图形请移步[shapesofcss](https://css-tricks.com/examples/ShapesOfcss/)

## 使用 css3 transform rotate

![image](https://i.stack.imgur.com/mEaS1.jpg)

```css
.triangle {
  width: 30%;
  padding-bottom: 21.27%; /* = width / 1.41 */
  position: relative;

  //划重点
  overflow: hidden;
}

.triangle: before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0079c6;

  //划重点
  transform-origin: 0 100%;
  transform: rotate(45deg);
}
```

> 为什么是 1.41，因为正方形的对角线长度是约等于 1.414。

## 使用 clip-path

```css
.triangle {
  width: 200px;
  height: 200px;
  background: #fd5353;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
```

clip-path 不支持安卓 4.4 以下，其余均需使用浏览器前缀-webkit，[caniuse](http://caniuse.com/#feat=css-clip-path)

详细请移步 [clip-path](https://developer.mozilla.org/zh-CN/docs/Web/css/clip-path)


在做UI（页面重构）的时候，免不了和各种小图标打交道，这其中最多的应该是三角形以及箭头

三角形绘制方法


源码：[fhsinchy/hello-dock](https://hub.docker.com/r/fhsinchy/hello-dock)

这是一个非常简单的 JavaScript 项目。

## 创建一个 Dockerfile

```dockerfile
FROM node:14.15.4-alpine3.12
EXPOSE 3000
USER node
RUN mkdir /home/node/app
WORKDIR /home/node/app
COPY ./package.json .
RUN npm install

COPY . .

CMD ["npm", "start"]
```

对以上文件进行解释：

- `FROM`：指定基础镜像，这里使用的是 `node:14.15.4-alpine3.12`，这是一个非常小的镜像，只有 88.9MB。
- `EXPOSE`：指定端口，这里指定的是 3000 端口。
- `USER`：指定用户，这里指定的是 `node`。
- `RUN`：执行命令，这里执行的是 `mkdir /home/node/app`。
- `WORKDIR`：指定工作目录，这里指定的是 `/home/node/app`。
- `COPY`：复制文件，这里复制的是 `package.json`。
- `RUN`：执行命令，这里执行的是 `npm install`。
- `COPY`：复制文件，这里复制的是 `.`，也就是当前目录下的所有文件。
- `CMD`：指定命令，这里指定的是 `npm start`。

## 构建镜像

```bash
docker build -t hello-dock .
```

`--file`选项可以指定 Dockerfile 的路径，`-t`选项可以指定镜像的名称。

执行命令后可以访问 [http://localhost:3000](http://localhost:3000) 查看效果。

## 挂载本地目录

![JTD5j1](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/JTD5j1.jpg)

```bash
docker run -it -p 3000:3000 -v $(pwd):/home/node/app hello-dock
```

`-v`选项可以挂载本地目录，这里挂载的是当前目录，也就是 `.`。

挂载本地目录后，修改本地文件后，可以直接在浏览器中查看效果。

## 使用匿名卷

```bash
docker run -it -p 3000:3000 -v /home/node/app/node_modules -v $(pwd):/home/node/app hello-dock
```

## 多阶段构建

```dockerfile
FROM node:lts-alpine as builder

WORKDIR /app

COPY ./package.json ./
RUN npm install

COPY . .
RUN npm run build

FROM nginx:stable-alpine

EXPOSE 80

COPY --from=builder /app/dist /usr/share/nginx/html
```

多阶段构建和单阶段构建的区别在于，多阶段构建可以减少镜像的大小。

- 第一阶段：安装依赖，构建项目。
- 第二阶段：使用 Nginx 镜像，将第一阶段构建的项目复制到 Nginx 的目录下。

构建镜像后，可以访问 [http://localhost:8080](http://localhost:8080) 查看效果。

多阶段构建适用于前端项目，因为前端项目的构建过程比较复杂，需要安装很多依赖，构建完成后，只需要将构建后的文件复制到 Nginx 的目录下即可。

## 忽略不需要的文件

```bash
.git
*Dockerfile*
*docker-compose*
node_modules
```


如何创建一个JavaScript docker镜像


## 函数的定义

函数的定义是一个特殊的可复用的代码块，它的第一行必须是函数的声明，第二行开始是函数的实现。

```python
#定义函数
def sumcount(n):
    '''
    Returns the sum of the first n integers
    '''
    total = 0
    while n > 0:
        total += n
        n -= 1
    return total
#调用函数
a = sumcount(100)
```

## 标准函数

python 中的标准函数是一些内置的函数，通过`import`调用。

```python
import math
x = math.sqrt(10)

import urllib.request
u = urllib.request.urlopen('http://www.python.org/')
data = u.read()
```

## 错误和异常

错误和异常是 python 中的两个主要概念，错误是指程序运行过程中发生的错误，异常是指程序运行过程中抛出的异常。例如：

```python
>>> int('N/A')
Traceback (most recent call last):
File "<stdin>", line 1, in <module>
ValueError: invalid literal for int() with base 10: 'N/A'
>>>
```

## 捕获、处理异常

异常可以通过`try`和`except`来捕获，也可以通过`try`和`finally`来处理。

```python
for line in f:
    fields = line.split()
    try:
        shares = int(fields[1])
    except ValueError:
        print("Couldn't parse", line)
    ...
```


随着程序的不断更新，我们会发现，函数的定义和调用是一致的。