ES6和React笔试题

时间：2024-12-19 16:11:59

1、var、let、const之间的区别

  • var声明变量可以重复声明，而let不可以重复声明
  • var是不受限于块级的，而let是受限于块级
  • var会与window相映射（会挂一个属性），而let不与window相映射
  • var可以在声明的上面访问变量，而let有暂存死区，在声明的上面访问变量会报错
  • const声明之后必须赋值，否则会报错
  • const定义不可变的量，改变了就会报错
  • const和let一样不会与window相映射、支持块级作用域、在声明的上面访问变量会报错

2、使用箭头函数应注意什么

  • 用了箭头函数，this就不是指向window，而是父级（指向是可变的）
  • 不能够使用arguments对象
  • 不能用作构造函数，这就是说不能够使用new命令，否则会抛出一个错误
  • 不可以使用yield命令，因此箭头函数不能用作 Generator 函数

3、介绍下 Set、Map的区别

Set

  • 成员不能重复
  • 只有键值没有键名，类似数组
  • 可以遍历，方法有add, delete,has

Map

  • 本质上是健值对的集合，类似集合
  • 可以遍历，可以跟各种数据格式转换

4、Promise构造函数是同步执行还是异步执行，then 方法呢

promise构造函数是同步执行的，then方法是异步执行的

5、下面的输出结果是多少，为什么

const promise = new Promise((resolve, reject) => {
	console.log(1);
	resolve();
	console.log(2);
});
promise.then(() => {
	console.log(3);
})
console.log(4);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

输出：1243
理由：Promise 新建后立即执行，所以会先输出 1，2，而 () 内部的代码在当次事件循环的结尾立刻执行 ，所以会继续输出4，最后输出3

6、使用结构赋值，实现两个变量的值的交换

答案

let a = 1;
let b = 2;
[a,b] = [b,a];
  • 1
  • 2
  • 3

7、将下面for循环改成for of形式

let arr = [11,22,33,44,55];
let sum = 0;
for(let i=0;i<arr.length;i++){
    sum += arr[i];
}
  • 1
  • 2
  • 3
  • 4
  • 5

答案

let arr = [11, 22, 33, 44, 55];
let sum = 0;
let value = arr.values();
for (value of arr) {
    sum += value;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

8、forEach、for in、for of三者区别

  • forEach更多的用来遍历数组
  • for in 一般常用来遍历对象或json
  • for of数组对象都可以遍历，遍历对象需要通过和()
  • for in循环出的是key，for of循环出的是value

9、简述mvvm模式和mvc模式

MVC（Model-View-Controller）

MVC 是比较直观的架构模式，用户操作 ->View（负责接收用户的输入操作）->Controller（业务逻辑处理） ->Model（数据持久化）->View（将结果反馈给View）
 
MVC使用非常广泛，比如JavaEE中的SSH框架

MVVM（Model-View-ViewModel）

如果说MVP是对MVC的进一步改进，那么MVVM则是思想的完全变革。它是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应view。

10、简述react的优点，setState何时同步何时异步？

React的优点

  • 它提高了应用的性能
  • 可以方便地在客户端和服务器端使用
  • 由于 JSX，代码的可读性很好
  • React 很容易与 Meteor，Angular 等其他框架集成
  • 使用React，编写UI测试用例变得非常容易

setState何时同步何时异步？

  • 由React控制的事件处理程序，以及生命周期函数调用setState不会同步更新state
  • React控制之外的事件中调用setState是同步更新的。比如原生js绑定的事件、setTimeout、setInterval等。

11、组件的生命周期

组件的生命周期

  • componentWillMount
    在组件将要被挂载前调用
  • componentDidMount
    在组件被挂载之后立即调用
  • shouldComponentUpdate
    组件是否被更新
  • componentWillUpdate
    组件将要被更新
  • componentDidUpdate
    组件被更新
  • componentWillUnmount
    在组件将要被卸载的时候调用

12、react中父子组件传值

父传子（组件嵌套浅）

父组件定义一个属性，子组件通过接收。

子传父

父组件定义一个属性，并将一个回调函数赋值给定义的属性，然后子组件进行调用传过来的函数，并将参数传进去，在父组件的回调函数中即可获得子组件传过来的值。

13、react性能优化的方案

  • 重写shouldComponentUpdate来避免不必要的dom操作
  • 使用 production 版本的
  • 使用key来帮助React识别列表中所有子组件的最小变化

14、Es6中箭头函数与普通函数的区别

  • 普通function的声明在变量提升中是最高的，箭头函数没有函数提升
  • 箭头函数没有this，arguments
  • 箭头函数不能作为构造函数，不能被new，没有property
  • call和apply方法只有参数，没有作用域

15、请描述一下 cookies sessionStorage和localstorage区别

相同点

都存储在客户端

不同点

  • 存储大小
    cookie数据大小不能超过4k
    sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
  • 有效时间
    localStorage：存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
    sessionStorage ：数据在当前浏览器窗口关闭后自动删除
    cookie：设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
  • 数据与服务器之间的交互方式
    cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
    sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

16、减少页面加载时间的方法

  • 压缩css、js文件
  • 合并js、css文件，减少http请求
  • 外部js、css文件放在最底下
  • 减少dom操作，尽可能用变量替代不必要的dom操作

相关文章