ReactNative面试题

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011272795/article/details/79977054
1 . 打印出a的值是?
if(true){let a = 1} alert(a)

答: a is not defined
let不存在变量提升,且作用域只在代码块
这样看你可能有点不太清楚,我们来格式化代码

if (true) {
    let a = 1
}
alert(a)

这样是不是一目了然了?! 博主第一看的的时候没有仔细看,匆匆就写了个1 ,尴尬.
扩展

1.var 语句用来声明一个或者多个变量,如果出现在函数体内,
那么他定义的是一个局部变量,作用域就是这个函数,

2.let 语句声明一个块级作用域的本地变量,并且可选的将其初始化为一个值,
它声明的变量只能是全局或者整个函数块的

3.const 与使用 let 语句定义的变量类似, 但是它声明的是常量,不能通过重新赋值更改,并且不能重复声明

4.function 函数声明定义一个具有指定参数的函数,一个被函数声明创建的函数是一个 Function 对象,
具有 Function 对象的所有属性、方法和行为

5.function* 这种声明方式(function关键字后跟一个星号)会定义一个生成器函数,
它返回一个 Generator 对象,生成器函数在执行时能中途退出,
后面又能重新进入继续执行。而且在函数内定义的变量的状态都会保留,不受中途退出的影响。

6.async function 函数声明将定义一个异步函数,返回 AsyncFunction 对象。
调用 async 函数时会返回一个 Promise 对象。当这个 async 函数返回一个值时,
Promise 的 resolve 方法将会处理这个值;当 async 函数抛出异常时,
Promise 的 reject 方法将处理这个异常值。async 函数中可能会有 await 表达式,
这将会使 async 函数暂停执行,等待 Promise 正常解决后继续执行 async 函数并返回解决结果。

综上可见 : let是作用于块级的 , 出了这个块,其他地方就相当于没有这行代码,自然alert(a) 这个a也就是没定义过的了.

2 . const name = ‘mike’;const age = 18;const person = { [name]: true,[age]: true} 问:person的两个key分别是什么?

答 : mike,18
照例先格式化代码:

const name = {a: 'mike'};
        const age = 18;
        const person = {
            [name]: true,
            [age]: true
        };
console.log(person) //自己手动加的

打印出来发现,key是mike和18.
在对象字面量中可以使用中括号作为属性,表示属性也能是一个变量了.在ant-design的源码实现中,就大量使用了这种方式来拼接当前元素的className,例如:

let alertCls = classNames(prefixCls, {
      [`${prefixCls}-${type}`]: true,
      [`${prefixCls}-close`]: !this.state.closing,
      [`${prefixCls}-with-description`]: !!description,
      [`${prefixCls}-no-icon`]: !showIcon,
      [`${prefixCls}-banner`]: !!banner,
 }, className);

ant-design是一个认可度非常高的UI组件库,官方使用react的方式进行了实现,除此之外,还有vue也有对应的实现,有兴趣的同学可以去他们的官网了解学习。https://ant.design/index-cn

3.如下面代码实现,使用数组的reduce方法求和,给出4个参数的定义,并给出最终total的值
let total = [1, 2, 3, 4, 5].reduce((total, currentValue) => total + currentValue);

答 : 参数分别为:初始值,遍历时当前的值,当前值的索引,遍历的数组,15
先来了解一下reduce:
reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始合并,最终为一个值。

reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,
接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组。

回调函数第一次执行时,previousValue 和 currentValue 可以是一个值,
如果 initialValue 在调用 reduce 时被提供,那么第一个 previousValue 等于 initialValue ,
并且currentValue 等于数组中的第一个值;如果initialValue 未被提供,
那么previousValue 等于数组中的第一个值,currentValue等于数组中的第二个值。

如果数组为空并且没有提供initialValue, 会抛出TypeError 。
如果数组仅有一个元素(无论位置如何)并且没有提供initialValue, 
或者有提供initialValue但是数组为空,那么此唯一值将被返回并且callback不会被执行。

再来看,我们现在第一个参数是previousValue, 是上一次回调函数返回的值而现在是第一次执行, 没有上一次的回调函数返回值,所以是数组的第一个值,currentValue是数组的第二个值, 之后箭头函数求和:1+2=3, 第一次算的结果是3,也就意味着下一次的previousValue即total是3,currentValue是数组第三个元素为3,求和为6, …
然后依次是6+4 , 10+6 最终为15 .

例如执行下面的代码

[0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){
return previousValue + currentValue;
});
回调被执行四次,每次的参数和返回值如下表:

执行次数 previousValue currentValue index array return value
first call 0 1 1 [0,1,2,3,4] 1
second call 1 2 2 [0,1,2,3,4] 3
third call 3 3 3 [0,1,2,3,4] 6
fourth call 6 4 4 [0,1,2,3,4] 10

reduce 的返回值是回调函数最后一次被调用的返回值(10)。

4. reactJS中和子组件如何通信

答: 一般是控制子组件的显示状态,可以用改变props,
或者调用子组件的方法进行:子组件事件传递给父组件回调就好

5. reactJS兄弟组件之间如何通信

答 : 事件用通知:DeviceEventEmitter、数据传递刷新等用Redux, mobx ,数据库

6. 传入setState函数的第二个参数作用是什么

答 : setState方法调用刷新完毕后执行回调

7. reactJS中如何去写组件

答:
建议把生命周期写完整

export default class NAME extends React.Component{
    constructor(props){
    super(props);
    this.state={
        a:1 
        }
    }

    componentWillMount...
    componentDidMount...
    ...
    render
    ...
    componentWillUnmount...
}
8. 下面的输出结果是?
window.name='window'
function foo(){
setTimeout(()=>{
alert('name:'+this.name)
},1000)}
foo.call({'name:foo'})

答: 箭头函数初始化时就绑定了作用域,为foo函数的代码块,所以输出为foo

9. 使用es6的class封装一个Car对象,有name和color两个属性,以及一个print方法,实现以下结果:let myCar = new Car(‘奇瑞’,’红色’);myCar.print(); // 打印出汽车名称:奇瑞 颜色:红色

答:

class Car = {
    super(name,color){
        this.name=name;
        this.color=color;
    }
    print(){
        console.log(`汽车名称`${this.name}颜色:${this.color})
    }
}
10. 完成isNumber函数,返回Promise对象给调用者。isNumber(num){coding….}

答:

isNumber(num) {
        return new Promise((resolve, reject) => {
            resolve(typeof num == 'number')
        })
    }
11. 使用async、await以及Promise实现调用asyncPrint函数后可以指定多少毫秒后打印出传入的值,比如asyncPrint(‘hello’,500),实现500ms后输出hello

答:


    delayFunc() {
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve
            }, delay)
        })
    }

    asyncPrint = async (str, delay) => {
        await this.delayFunc(delay);
        alert(str)
    }
12. reactJS在生命周期中哪一部调用AJAX请求?

答 : ComponentDidMount

13. reactJS的props.children.map函数来遍历会收到异常提示,为什么?应该如何遍历?

答 : this.props.children 的值有三种可能:如果当前组件没有子节点,它就是 undefined;如果有一个子节点,数据类型是 object ;如果有多个子节点,数据类型就是 array 。系统提供React.Children.map()方法安全的遍历子节点对象

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页