2018-07-26 汉得日记

今日考试总结巩固

今天我们前端组进行了es6的笔试，有30道选择题，难度并不大。但是由于我Promise对象掌握的并不好，所以后十题错了很多。需要进行巩固，下面对不熟的知识点进行总结：

1.REST参数

rest参数和一个变量名搭配使用，生成一个数组，用于获取函数多余的参数，说不清楚，还是代码实例演示
function input(…params){
console.log(params)
}

input(1,2,3,4)  //[1,2,3,4]

function input2(a,b,...params){
    console.log(params)
}

input2(1,2,3,4)  //[3,4]

rest参数作用： 将多余的逗号分隔的参数序列转换为数组参数
注意： rest参数必须是最后一个参数，否则报错

2.对象解构赋值的顺序

在下列对象的解构赋值中， 结果中，a、b、c的值分别是：（ ）

const { a, b, c } = { c: 10, b: 9, a: 8 };

A. 10   9   8
B. 8   9   10
C. undefined   9   undefined
D. null   9   null

答案应当选B，不应与数组的嵌套解构弄混。

3.for..of遍历

因为能够被for…of正常遍历的，都需要实现一个遍历器Iterator。而数组、字符串、Set、Map结构，早就内置好了Iterator（迭代器），它们的原型中都有一个Symbol.iterator方法，而Object对象并没有实现这个接口，使得它无法被for…of遍历。

比如我自己写了段代码：

const obj={name:'kiri',age:'sss'}

for(x of obj)
{
    console.log(x);
}

报错：

test18.html:13 Uncaught TypeError: obj is not iterable

而如果定义的是数组：

const obj=[1,2,3]
for(x of obj)
{
    console.log(x);
}

则成功运行。

4.Promise对象相关

由于看的比较早，然后又忘了回顾，所以掌握的不好，错了不少题。下面进行总结：

（1）下列代码的运行结果是：（ ）

setTimeout(() => {
console.log(1);
}, 0);
new Promise(resolve => {
console.log(2);
for (let i = 0; i < 10000; i++) {
    i === 9999 && resolve();
}
console.log(3);
}).then(() => {
console.log(4);
});
console.log(5);

答案是：2，3，5，4，1.因为Promise对象的then（）函数要等到同步任务执行完再执行，而最上面的console.log(1)并不是同步任务。所以顺序是这样。

（2）下列代码的运行结果是：（ ）

const promise = new Promise((resolve, reject) => {
resolve('success1');
reject('error');
resolve('success2');
});

promise
.then(res => {
    console.log('then: ', res)
})
.catch(err => {
    console.log('catch: ', err)
})

答案是：then:success1,这里考查了Promise对象的状态变化，我在07-24的日报里，提到了状态一经变化将成为resolved，也就是固定不再改变。所以这里的then()方法只会返回第一次成功。

（3）下列代码的运行结果是：（ ）

Promise.resolve(1)
.then(2)
.then(Promise.resolve(3))
.then(console.log)
A. 1
B. 2
C. 3
D. Error

答案是A。因为then()函数参数必须是个函数，如果是常量则会发生穿透，不起作用。而resolve（1）状态优先于后面的。

React Router相关学习

在 React 的使用中，我们一般要引入两个包，react 和 react-dom，那么 react-router 和 react-router-dom 是不是两个都要引用呢？

非也，坑就在这里。他们两个只要引用一个就行了，不同之处就是后者比前者多出了 这样的 DOM 类组件。

因此我们只需引用 react-router-dom 这个包就行了。当然，如果搭配 redux ，你还需要使用 react-router-redux。

在你开始项目前，你需要决定你使用的路由器的类型。对于网页项目，存在<BrowserRouter>与<HashRouter>两种组件。当存在服务区来管理动态请求时，需要使用<BrowserRouter>组件，而<HashRouter>被用于静态网站。

通常，我们更倾向选择<BrowserRouter>

mobx的相关学习

Mobx是一个功能强大，上手非常容易的状态管理工具

1.observable和autorun

import { observable, autorun } from 'mobx';

const value = observable(0);
const number = observable(100);

autorun(() => {
console.log(value.get());
});

value.set(1);
value.set(2);
number.set(101);

可以看到，控制台中依次输出0,1,2。
observable可以用来观测一个数据，这个数据可以数字、字符串、数组、对象等类型(相关知识点具体会在后文中详述)，而当观测到的数据发生变化的时候，如果变化的值处在autorun中，那么autorun就会自动执行。
上例中的autorun函数中，只对value值进行了操作，而并没有number值的什么事儿，所以number.set(101)这步并不会触发autorun，只有value的变化才触发了autorun。

2.计算属性——computed

假如现在我们一个数字，但我们对它的值不感兴趣，而只关心这个数组是否为正数。这个时候我们就可以用到computed这个属性了。

const number = observable(10);
const plus = computed(() => number.get() > 0);

autorun(() => {
console.log(plus.get());
});

number.set(-19);
number.set(-1);
number.set(1);

3.action和严格模式

mobx推荐将修改被观测变量的行为放在action中。
来看看以下例子:

import {observable, action} from 'mobx';
class Store {
@observable number = 0;
@action add = () => {
    this.number++;
}
}

const newStore = new Store();
newStore.add();

实际开发的时候建议开起严格模式，这样不至于让你在各个地方很轻易地区改变你所需要的值，降低不确定性。

4.自执行函数

什么是自执行函数？

久违的react相关学习

观看了 慕课网-React打造图片画廊

视频中提到了HTML5的语义化标签学习

<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。

figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

<figure>
<img>
<figcaption>//书写图片有关的描述信息
</figcaption>
</figure>