资讯专栏INFORMATION COLUMN

Javascript中几个看起来简单,却不一定会做的题

itvincent / 353人阅读

摘要:作为前端开发必须掌握的一门语言,因为语言的灵活性,有些知识点看起来简单,在真正遇到的时候,却不一定会直接做出来,今天我们就一起来看看几道题目吧题目这道题考察的知识点是运算符的优先级。

Javascript作为前端开发必须掌握的一门语言,因为语言的灵活性,有些知识点看起来简单,在真正遇到的时候,却不一定会直接做出来,今天我们就一起来看看几道题目吧

题目1

var val = "smtg";

console.log(" Value is" + (val === "smtg") ? "Something" : "Nothing");

这道题考察的知识点是运算符的优先级。

首先,小括号的优先级是最高的,所以首先会做判断,val与smtg相等返回true。因此最后这道题等价于判断是执行下面的语句1还是语句2.

//语句1

"Value is" + (true ? "Something" : "Nothing");

//语句2

"Value is true" ? "Something" : "Nothing";

根据运算符优先级我们知道,连接元算符+的优先级要高于条件运算符?的优先级,因此实际执行的是语句2,所以最后返回的结果是

"Something".

题目2

我们再来看看下面这道题。

  var ary = [0,1,2];

  ary[6] = 6;

  var result = ary.filter(function(x){

  return x === undefined; 

  });

  console.log(result);

这道题考察的时候数组的初始化和filter方法。

第一眼看上去,以为会输出[undefined,undefined,undefined],但是实际输出却是undefined,为什么会这样?

这是因为在JavaScript里存在稀疏数组的概念,数组在初始化时,只会对已经确定索引的选项进行初始化,对于不存在索引的选项不进行初始化,通过以下代码可以确定。

  0 in ary;//true

  1 in ary;//true

  3 in ary;//false     

  4 in ary;//false

  6 in ary;//true 

对数组使用in运算符时,是通过枚举数组的索引,通过3和4返回false可以知道,ary[3]和ary[4]实际是不存在的,未进行初始化。

我们再来看看 Array.prototype.filter方法和polyfill,注意代码中标注的地方。

Array.prototype.filter = function(fun /*thisArg*/){

  if(this === void 0 || this === null){

    throw new TypeError();

  }

  var t = Object(this);

  var len = t.length >>> 0;

  if(typeof fun !== "function"){

    throw new TypeError();

  }

  var res = [];

  var thisArg = arguments.length >=2 ? arguments[1]:void 0;

  for(var i = 0;i

在filter方法源码中,我发现使用了in运算符,而arg数组没有对索引为3,4,5的值进行初始化,因此会直接跳过执行,所以最后返回undefined。

题3

function caseshow(val){

  switch(val){

    switch(value){

      case "A":

        console.log("A");

               break;

       case "B":

        console.log("B");

               break;

         case "C":

        console.log("C");

                        break;

      default:
        console.log("do not know!");

    }          

  }      

}    

caseshow(new String("A"));

咋一看,很多人会以为输出"case A",但实际输出"do not know"。why? 这道题考察的知识点是:switch和string,我们需要知道一下两点:

1,JavaScript中switch执行的是严格相等(===)。 2,字符串和string的实例不一样。

第二点我们可以测试下。

var s_p = "foo"; var s_o = new String(s_p)

console.log(typeof s_p) //"string" 
console.log(typeof s_o) //"object"
console.log(s_p === s_o)  //"false"

因此针对题目中的"A"与String("A")并不严格相等,最终会返回‘do not know’

题4 针对上面的题目3,我们稍作一点改动,成为下面的题目4,再看看结果输出什么?

function caseshow2(val){ 
    switch(val){   
       case "A":
    console.log("A");
    break;   case "B":
    console.log("B");
    break;   case undefined:
    console.log("undefined");
    break;   default:
    console.log("do not know!"); 
 } } 
   caseshow2(String("A"));

    题目4相对于题目3,只是在最后调用的时候传入的参数是String("A"),它的结果就变成了"Case A"。这是为什么呢?

其实很简单,String(X)返回的是一个字符串而不会生成一个新的String实例,因此与"A"是严格相等的

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/93688.html

相关文章

  • 为什么你学不会递归?刷题几个月,告别递归,谈谈我的经验

    摘要:第一递归函数功能假设的功能是求第项的值,代码如下找出递归结束的条件显然,当或者我们可以轻易着知道结果。定义递归函数功能假设函数的功能是反转但链表,其中表示链表的头节点。可能很多人在大一的时候,就已经接触了递归了,不过,我敢保证很多人初学者刚开始接触递归的时候,是一脸懵逼的,我当初也是,给我的感觉就是,递归太神奇了! 可能也有一大部分人知道递归,也能看的懂递归,但在实际做题过程中,却不知道怎么...

    Achilles 评论0 收藏0
  • 不可变数据

    摘要:为什么要有不可变数据首先,不可变数据类型是源于函数式编程中的,是一条必备的准则。另外在中的广泛应用,也让函数式编程火热,而函数式编程最重要的原则之一就是不可变数据,所以你在使用的时候,改变必须返回新的。 不可变数据 引入 我是通过使用 React 才去关注 immutable data 这个概念的。事实上,你去搜 immutable 的 JS 相关文章,也基本都是近两年的,大概是随着 ...

    lanffy 评论0 收藏0
  • JavaScript几个重要的知识点(1) ---- 面向对象

    摘要:中几个最重要的大知识点面向对象事件异步交互面向对象在中可以把任意的引用和变量都看成是一个对象。我们可以写一个通用方法来模拟面向对象语言的多态 JavaScript中几个最重要的大知识点 面向对象 DOM事件 异步交互ajax 面向对象 在JS中可以把任意的引用和变量都看成是一个对象。面向对象的主要三个表现形式: 封装 继承 多态 1. 封装 1.1 单例模式 var obj={...

    acrazing 评论0 收藏0
  • JavaScript几个重要的知识点(2) ---- DOM事件

    摘要:使用来移除事件,参数必须与要移除的事件处理函数地址指针相同。在低版本浏览器中,绑定级事件的方法为中的级事件的事件处理程序都是在冒泡阶段执行的。 JavaScript中几个最重要的大知识点 面向对象 DOM事件 异步交互ajax 事件 事件就是文档和浏览器的瞬间交互行为 1.事件类型 点击: click 滚轮: scroll 滑动: move 进入: enter 加载: load ...

    dantezhao 评论0 收藏0

发表评论

0条评论

itvincent

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<