8.9日面试题

说说redux的实现原理是什么，写出核心代码？

原理

1. 将应用的状态统一放到state中，由store来管理state。

2. reducer的作用是 返回一个新的state去更新store中对用的state。

3. 按redux的原则,UI层每一次状态的改变都应通过action去触发，action传入对应的reducer 中，reducer返回一个新的state更新store中存放的state，这样就完成了一次状态的更新

4. subscribe是为store订阅监听函数，这些订阅后的监听函数是在每一次dipatch发起后依次执行

5. 可以添加中间件对提交的dispatch进行重写 核心API

6. createStore 创建仓库，接受reducer作为参数

7. bindActionCreator 绑定store.dispatch和action 的关系

8. combineReducers 合并多个reducers

9. applyMiddleware 洋葱模型的中间件,介于dispatch和action之间，重写dispatch

10. compose 整合多个中间件

41.扩展运算符都有哪些作用，详细介绍一下？
扩展运算符是一个三个连续点（…）的语法，可以在多种上下文中使用，并具有以下几个作用：

展开数组：扩展运算符可以将一个数组展开为独立的元素。这个特性可以用于创建新的数组、合并数组或在函数调用时传递参数。

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

const combinedArr = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
1
2
3
4
展开对象：类似于展开数组，扩展运算符还可以将一个对象的属性展开为独立的键值对。这使得在创建新对象时可以轻松地引入已有对象的属性。

const obj1 = { name: 'John', age: 30 };
const obj2 = { city: 'New York' };

const combinedObj = { ...obj1, ...obj2 }; // { name: 'John', age: 30, city: 'New York' }
1
2
3
4
复制数组和对象：使用扩展运算符还可以创建数组和对象的浅拷贝副本。这样的拷贝是对原始数据的引用，因此对复制的数组或对象的修改不会影响到原始数据。

const arr = [1, 2, 3];
const copyArr = [...arr]; // [1, 2, 3]

const obj = { name: 'John', age: 30 };
const copyObj = { ...obj }; // { name: 'John', age: 30 }
1
2
3
4
5
函数调用时传递参数：扩展运算符可以在函数调用时将数组或对象的元素作为独立的参数传递给函数。

function sum(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];
const result = sum(...numbers); // 6
1
2
3
4
5
6
剩余参数：扩展运算符还可以用作函数的剩余参数（rest parameter），将传递给函数的多余参数收集为一个数组。

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

const result = sum(1, 2, 3, 4, 5); // 15
1
2
3
4
5
扩展运算符非常方便且易读，使得在处理数组和对象时更加灵活和简洁。它对于数组、对象的合并、复制和函数参数的收集等场景都提供了便利的语法。