题目1

1
2
3
4
5
6
7
8
9
下面有关JavaScript内部对象的描述，正确的有？(多选)
A: History 对象包含用户（在浏览器窗口中）访问过的 URL

B: Location 对象包含有关当前 URL 的信息

C: Window 对象表示浏览器中打开的窗口

D: Navigator 对象包含有关浏览器的信息

  • 答案
    • 牛客网的答案为A,B,C,D
    • 我个人认为history不包含访问过的URL(当然源代码我没看过)
  • 解析
    • Navagator：提供有关浏览器的信息
    • Window：Window对象处于对象层次的最顶层，它提供了处理Navagator窗口的方法和属性
    • Location：提供了与当前打开的URL一起工作的方法和属性，是一个静态的对象
    • History：提供了与历史清单有关的信息
    • Document：包含与文档元素一起工作的对象，它将这些元素封装起来供编程人员使用

题目2

1
2
3
4
5
6
7
8
9
以下哪些表达式的结果为true(多选) (多选)
A: undefined == null

B: isNaN("100")

C: parseInt("1a") === 1

D: [] instanceof Array

  • 答案

    • A,C,D

  • 解析

    • A: 二个等于号( == ) ,类型不相同的时候,会发生隐式转换,隐式转换具体可以看这个博客

    • B: isNaN() 用来判断一个数是否是NaN

      1
      2
      3
      4
      5
      6
      7
      //isNaN(转换的值),当要'转换的值'为NaN的时候或者是'转换的值'转换后为NaN
      console.log(isNaN('e'));//ture
      console.log(isNaN('11'));//false 因为字符串可以被转化为数字,不能转换为NaN
      console.log(isNaN('a111'));//true 字符串转换不了数字
      console.log(isNaN('1a11'));//true 字符串转换不了数字
      console.log(isNaN('null'));//false 因为null被转化为数字为0,0不会为NaN
      console.log(isNaN(NaN));//true

    • C: parseInt(string,radix) 解析一个字符串并返回指定基数的十进制整数(未指定radix则返回10进制)， radix 是2-36之间的整数，表示被解析字符串的基数。

      1
      2
      3
      4
      5
      注意:string字符串只会被解析从第一个字符开始直到不是数字的字符部分(第0个开始,直到遇到是非数字的就截断返回)
      console.log(parseInt('223'));//返回数字223
      console.log(parseInt('223a18'));//返回数字223
      console.log(parseInt('a223'));//返回NaN,因为第一个字符不是数字,所以直接返回NaN

    • D: 空数组也是数组的实例化对象

题目3

1
2
3
4
5
6
7
8
以下哪些操作会触发Reflow：(多选)
A: alert(obj.className)

B: alert(obj.offsetHeight)

C: obj.style.height = "100px"

D: obj.style.color = "red"

  • 答案

    • B,C

  • 解析

    • Reflow 回流 原文链接：http://www.cnblogs.com/Peng2014/p/4687218.html）

      • 简要:

        整个在浏览器的渲染过程中（页面初始化，用户行为改变界面样式，动画改变界面样式等）reflow(回流)和repaint(重绘) 会大大影响web性能，尤其是手机页面。因此我们在页面设计的时候要尽量减少reflow和repaint。

      • Reflow几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显 示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。

      • 下面情况会导致reflow发生(是可能会!)

        1. 改变窗口大小
        2. 改变文字大小
        3. 内容的改变(比如用户在输入框中输入文字)
        4. 操作伪类 如:hover
        5. 操作class属性(会引发样式的改变情况下)
        6. js操作DOM
        7. 计算offsetWidth和offsetHeight
        8. 设置style属性

    • Repaint 重绘

      • 如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器 repaint（重绘）。repaint 的速度明显快于 reflow

    • 回流重绘说简单点

      • 回流,当页面的元素发生大小改变的时候的时候,会发生回流
        • 比如说里一个div里面字体大小发生改变,或者是这个div大小发生改变都会引起回流
        • 再通俗点就是,你变这么胖,我要改变下布局了,这就是回流!
      • 重绘
        • 只改变某个dom元素的颜色或者文字颜色，则会进行重绘
        • 再通俗点就是,我皮肤晒黑了,没有变胖,不需要改变布局,只需要重新绘制下就可以!

题目4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
请问以下JS代码的输出是？
function father() {
  this.num = 935;
  this.work = ['read', 'write', 'listen'];
}
function son() {}
son.prototype = new father();
let son1 = new son();
let son2 = new son();
son1.num = 117;
son1.work.pop();
console.log(son2.num);
console.log(son2.work);

A: 117、['read', 'write']

B: 935、['read', 'write','listen']

C: 935、['read', 'write']

D: 117、['read', 'write','listen']

  • 答案

    • C

  • 解析

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    function father() {
        this.num = 935;
        this.work = ['read', 'write', 'listen'];
    }
    function son() {}
    son.prototype = new father(); 
    // son.prototype = {  num:935, work:['read','write','listen'] }

    let son1 = new son(); // son1 = { }
    let son2 = new son(); // son2 = { }

    son1.num = 117; // son1 = { num: 117 }

    son1.work.pop(); 
    //son1自己没有work，去原型里找到work,并删除work里的最后一项，
    //此时son.prototype = {  num:935, work:['read','write'] }

    console.log(son2.num);// son2自己没有num，去原型里找，有num:935

    console.log(son2.work);
    //son1和son2原型是同一个，所以此时原型里的work是['read', 'write']

题目5

1
2
3
4
5
6
7
8
9
10
11
12
上面这段代码运行后得到的结果分别是什么？
console.log(([])?true:false); 
console.log(([]==false?true:false)); 
console.log(({}==false)?true:false) 
A: false true true

B: true true true

C: true false true

D: true true false

  • 答案

    • D

  • 解析

    • 布尔类型里只有这几参数个返回false，其它都为true

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      Boolean(undefined) // false

      Boolean(null) // false 

      Boolean(0) // false 

      Boolean(NaN) // false 

      Boolean('') // false

      //其他转换均为true
      Boolean([]) //true

    • 需要知道: 布尔类型与其它任何类型进行比较，布尔类型和其他类型均会转换为number类型进行比较

      • Number([]) => 为0
      • Number(true) => 为1 Number(false) => 为0
      • Number({}) => 为NaN (Number转换类型的参数如果为对象返回的就是NaN)
    • //相当于 true?true:false
console.log(([])?true:false);//返回true

//相当于 0 == 0 ? true : false
console.log(([]==false?true:false));//返回true

//相当于 NaN == 0 ? true : false
console.log(({}==false)?true:false);//返回false