几道比较有意思的js面试题

1、[] ? !![] : ![];输出结果是什么?

1
2
3
4
5
let val = [] ? !![] : ![];
console.log(val); 
//true:
//之前的错误解释:[] 是一个null,做判断则为false,false执行![]语句,结果为非空,即true
//更正:[]是一个object,object判断为true(null实际上也是一个object不过比较特殊是6种false之一),true执行 !![] 两次取反为true.多谢@此生只为你倾心指正。

这里顺便说明一下,js用于做判断,只有以下6种情况判断出来的值为false:

值为false:    false    0    null    ""(空字符串)    undefined    NaN   

其他均为true。

延展一下,有个比较有意思的情况是:[] == ![]; //true,

还有[]我们刚刚判断为true对吧? 但是呢 [] == false;  //true,

为什么呢?

== :趋向于先转换成0和1再做判断,一起来看看吧

        先看[] == false首先把比较的双方转成number(双方有一方是布尔值),[]是空数组,转换成基本类型为"",空所以被转化为0,false也被转成0。0 == 0,true(不过如果用恒等于 ===则为false,因为两者数据类型不一致,[]为object(里的array),false为布尔值)

        再看[] == ![]; []是object即true,!true ==> false;  false ==> 0; 而[]我们知道最终转化为0,所以 0 == 0; //true;

        [] == [] 实际上是false哈。是不是很别扭?

所以:慎用 "==",用“===”

2、下面代码输出什么?

1
2
3
4
let k;
for(let i = 0,j = 0;i < 10,j < 8; i++, j++){
  k = i + j;
}

        答案是:14。这里的i和j是同步增长,当j加到7的时候,i也等于7,k执行等于14,j再加1,不满足条件,跳出循环,结果为14,如果再问i和j的值,则都为8。

3、有这样一串杂乱无章的数据————dahsidoai 213907;a  poas198jdo 213089 as13d115。

      我希望它输出["213907", "198", "213089", "13", "115"],请写出实现过程

1
2
3
4
5
6
7
8
9
10
11
12
let str = "dahsidoai 213907;a  poas198jdo 213089 as13d115";
function searchNumUnit(str){
  let arr = [],
     str0 = str, //不影响原数据
     reg = /\d+/;
  while(reg.test(str0)){
    arr.push(reg.exec(str0)[0]);
    str0 = str0.split('').slice(reg.exec(str0).index + reg.exec(str0)[0].length,str0.length).join('');
  }
  return arr;
}
console.log(searchNumUnit(str));

第2种方法,利用js的match函数提取字符串:

1
2
let str = "dahsidoai 213907;a  poas198jdo 213089 as13d115";
console.log(str.match(/\d+/g));//感谢慕姐704907

4、下面是一道综合题,问题会由浅及深一步步问,你需要一步步解决:

        下面的程序输出什么?假如说我用"==>"表示程序延迟了多久输出,比如1,2 ==> 3 ,表示12同时输出,之后间隔1000ms(为避免钻牛角尖,这里的1000只是一个大概数)输出了3

1
2
3
4
5
6
for(var i = 0; i < 6; i ++){
  setTimeout(function(){
    console.log(i);
  },1000);
}
// 输出结果:6,6,6,6,6,6

那我如果想输出0 , 1 , 2 , 3 , 4 , 5呢?得怎么写?能否通过多种方式来写出?(最少2种)

1
2
3
4
5
6
7
8
//第1种方式:
for(var i = 0; i < 6; i ++){
  (function(j){
    setTimeout(function(){
      console.log(j);
    },1000);
  })(i)
}
1
2
3
4
5
6
7
//第2种方式:
for(let i = 0; i < 6; i ++){
  setTimeout(function(){
    console.log(i);
  },1000);
}
//输出结果:0 , 1 , 2 , 3 , 4 , 5

那我如果是想输出0 ==> 1 ==> 2 ==> 3 ==> 4 ==> 5程序得怎么改变?

1
2
3
4
5
6
7
8
// 代码如下:
for(var i = 0; i < 6; i ++){
  (function(j){
    setTimeout(function(){
      console.log(j);
    },1000 * j);
  })(i)
}

       上面这种代码能实现逻辑,但代码太烂,没法给你加分,有没有更好的办法?另外我为什么说你的代码太烂?能顺便说明一下吗?

1
2
3
4
5
6
7
//首先我的代码太烂是因为我创建了太多的定时器,仅仅这里我就创建了6个定时器,如果i值非常大,会非常消耗资源,大大降低执行性能
//优化代码如下:这里的好处是即使你的i1值达到10000甚至1亿,我始终只有1个定时器。
let i1 = 0;
let time = setInterval(output_i1,1000);
function output_i1(){
  i1 < 6 ? console.log("i1=" + i1++) : clearInterval(time);
}

        这样算可以给你加5分,如果我不是0 , 1 , 2 , 3 , 4 , 5呢?而是0,1,2,3,4,5...简单的说能否给我自定义?

这个简单啊,改成这样不就可以了?

1
2
3
4
5
let i1 = 0;
let time = setInterval(output(6),1000);
function output(num){
  i1 < num-1 ? console.log(++i1) : clearInterval(time);
}

        可惜你这个函数是错的,setInterval接收的是一个function:output,而不是接收一个已经运行的output(),所以呢?你得怎么改?

1
2
3
4
5
6
7
8
9
10
11
//改成这样:
let i2 = 0;
let time1 = setInterval(_output_i2(8),1000);
function _output_i2(num){
  return function(){
    output_i2(num);
  }
}
function output_i2(num){
  i2 < num ? console.log("i2="+ i2++) : clearInterval(time1);
}

        如果你到了这一步,嗯,还行,勉强达到了基本要求,但是呢,其实这里涉及到异步,用promise又得怎么写?还能再进一步吗?答案是肯定的,不过呢,先答下一题吧。

 

5、这是一道简单的数据处理题

一个树形json数据有3层,基本的结构如下:(...代表后续有若干个类似的对象)

数据大概是这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
[
  {
    id : "1",
    name : "dorsey1",
    children: [
      {
        id : "1-1",
        name : "dorsey1-1",
        children : [
          {
            id : "1-1-1",
            name : "dorsey1-1-1",
            children : [
              {
                id : "1-1-1-1",
                name : "dorsey1-1-1-1",
              }
             ...
            ]
          }
        ...
        ]
      }
     ...
    ]
  }
 ...
]

请写一个函数传入id值返回name值,另外呢?这里虽说只是3层,能否拓展到若干层?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
let data = [
  {
  id : "1",
  name : "dorsey1",
  children: [
    {
      id : "1-1",
      name : "dorsey1-1",
      children : [
        {
          id : "1-1-1",
          name : "dorsey1-1-1",
          children : [
            {
              id : "1-1-1-1",
              name : "dorsey1-1-1-1",
            }
          ]
        },
        {
          id : "1-1-2",
          name : "dorsey1-1-2"
        }
      ]
    },
    {
      id : "1-2",
      name : "dorsey1-2",
      children : [
        {
          id : "1-2-1",
          name : "dorsey1-2-1"
        },
        {
          id : "1-2-2",
          name : "dorsey1-2-2"
        }
      ]
    },
    {
      id : "1-3",
      name : "dorsey1-3",
      children : [
        {
          id : "1-3-1",
          name : "dorsey1-3-1"
        },
        {
          id : "1-3-2",
          name : "dorsey1-3-2"
        }
      ]
    }
    ]
  },
  {
    id : "2",
    name : "dorsey2",
    children: [
      {
        id : "2-1",
        name : "dorsey2-1",
        children : [
          {
            id : "2-1-1",
            name : "dorsey2-1-1"
          },
          {
            id : "2-1-2",
            name : "dorsey2-1-2"
          }
        ]
      },
      {
        id : "2-2",
        name : "dorsey2-2",
        children : [
          {
            id : "2-2-1",
            name : "dorsey2-2-1"
          },
          {
            id : "2-2-2",
            name : "dorsey2-2-2"
          }
        ]
      }
    ]
  }
]

这是基本的json解析,请看下面的实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//最原始的实现如下:
function getJsonDataNameById(dataArr,id) {
  let agent = [];
  let data = dataArr,
  len = data.length;
  for (let i = 0; i < len; i++) {
    let item = data[i];
    if(item.children && item.children.length !== 0){
      for(let j = 0 ; j < item.children.length; j ++){
        agent.push(item.children[j]);
      }
      data = data.concat(agent); //children降维
      len += agent.length;
      agent = [];
    }
  }
  for(let i = 0; i < data.length; i++){
    if(data[i].id === id){
      return data[i].name;
    }
  }
}
let a = getJsonDataNameById(data, "1-3-2");
console.log(a);


作者:dorseyCh
链接:https://www.imooc.com/article/48993
来源:慕课网
本文原创发布于慕课网 ,转载请注明出处,谢谢合作

转载于:https://www.cnblogs.com/justBobo/p/10740542.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249110.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

wepy - 与原生有什么不同(x.wpy)使用实例

源码 1 <template>2 <view classmark wx:if"{{showMark}}">3 <view animation"{{animationData}}" class"animCat">4 <image src"http://osk1hpe2y.bkt.clouddn.com/18-5-30/34559443.jpg"></…

vue从入门到精通之高级篇(一)vue-router的高级用法

今天要介绍的是路由元信息&#xff0c;滚动行为以及路由懒加载这几个的使用方法。 1.路由元信息 什么是路由元信息&#xff0c;看看官网的解释&#xff0c;定义路由的时候可以配置 meta 字段可以匹配meta字段&#xff0c;那么我们该如何使用它&#xff0c;一个简单的例子&…

Java 数组实现堆栈操作

class Stack {private int stck[] ; private int tos ; Stack(int size) { // 一个参数的构造参数stck new int[size] ; // 创建数组&#xff08;创建堆栈&#xff09;tos -1 ; // 空堆栈标识 -1}// 堆栈操作的特性&#xff1a;先进后出、后进先出void push(int…

re模块

什么是正则表达式 一组特殊符号组成的表达式&#xff0c;用于描述某种规则。该应用场景生活中随处可见。 例如&#xff1a;让有志青年过上体面的生活&#xff0c;这里面就由规则&#xff0c;即有志青年。 正则表达式的作用&#xff0c;以及使用场景 用于从字符串中匹配满足某种…

CSS实现div梯形分割

原理 使用的border边框属性结合svg 转换 详见代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>css实现div边框斜角</title><style type"text/css"> .labels {display: i…

算法学习——决策单调性优化DP

update in 2019.1.21 优化了一下文中年代久远的代码 的格式…… 什么是决策单调性&#xff1f; 在满足决策单调性的情况下&#xff0c;通常决策点会形如1111112222224444445555588888..... 即不可能会出现后面点的决策点小于前面点的决策点这种情况。 那么这个性质应该如何使用…

SVG画一个箭头

参考菜鸟手册&#xff1a; https://www.runoob.com/svg/svg-tutorial.html 打开菜鸟中的在线工具 在可视化截图拖拉元素绘制箭头 点击command U 查看源码 将源码拷入html代码中&#xff0c;查看效果 最后&#xff0c;贴出源码供大家参考 <!DOCTYPE html> <…

HP Instant Information

HP Instant Information before HP-UX 11i v3 《管理系统和工作组&#xff1a;HP-UX系统管理员指南》 After HP-UX 11i v3 《HP-UX系统管理指南》(由多个文档组成的文档集) 《HP-UX系统管理员指南&#xff1a;概述》 《HP-UX系统管理员指南&#xff1a;配置管理》 《HP-UX系统管…

CodeForces 258D Little Elephant and Broken Sorting(期望)

CF258D Little Elephant and Broken Sorting 题意 题意翻译 有一个\(1\sim n\)的排列&#xff0c;会进行\(m\)次操作&#xff0c;操作为交换\(a,b\)。每次操作都有\(50\%\)的概率进行。 求进行\(m\)次操作以后的期望逆序对个数。 \(n,m\le 1000\) 输入输出格式 输入格式&#x…

记一次vue项目yarn打包环境配置失效的解决方案

项目中使用到了yarn打包工程&#xff0c;主要有以下几个命名。 # build for production with minification yarn run build# build for production and view the bundle analyzer report yarn run build --report# 自定义API地址 baseurl"http://127.0.0.1:8080/api/&quo…

数字签名与HTTPS详解

因为HTTP协议本身存在着明文传输、不能很好的验证通信方的身份和无法验证报文的完整性等一些安全方面的确点&#xff0c;所以才有了HTTPS的缺陷。HTTPS确切的的说不是一种协议&#xff0c;而是HTTP SSL (TSL)的结合体。HTTP报文经过SSL层加密后交付给TCP层进行传输。SSL(安全套…

[BZOJ4320][ShangHai2006]Homework(根号分治+并查集)

对于<sqrt(300000)的询问&#xff0c;对每个模数直接记录结果&#xff0c;每次加入新数时暴力更新每个模数的结果。 对于>sqrt(300000)的询问&#xff0c;枚举倍数&#xff0c;每次查询大于等于这个倍数的最小数是多少&#xff0c;这个操作通过将询问逆序使用并查集支持。…

VScode 结局插件prettier和vetur格式化冲突

先上配置代码 {"workbench.iconTheme": "vscode-icons","workbench.startupEditor": "newUntitledFile","workbench.colorTheme": "One Dark Pro","editor.fontSize": 14,"editor.tabSize":…

WPF效果(GIS三维续篇)

去年这个时候简单的摸索了一下三维的GIS相关的东西,也就是仅仅玩耍了一把,这次来点真正用的上的干货效果效果&#xff1a; 1、加载自定义百度样式的瓦片效果 2、加载自定义百度样式的缩放效果 3、快速手动进去咱的大帝都 4、加载海量Mark效果 5、加载海量Mark和简单模型效果 6、…

vue 表单 验证 async-validator

1、使用插件async-validator async-validator 地址&#xff1a;https://github.com/yiminghe/async-validator 2、示例&#xff08;vueelement-ui&#xff09; <el-form :model"numberValidateForm" ref"numberValidateForm" label-width"100px&qu…

[19/04/23-星期二] GOF23_创建型模式(工厂模式、抽象工厂模式)

一、工厂模式(分为&#xff1a;简单工厂模式、工厂方法模式、抽象工厂模式) 实现了创建者和调用者的分离 核心本质&#xff1a;1、实例化对象&#xff0c;用工厂方法代替new操作&#xff1b;2、将选择实现类、创建对象统一管理和控制&#xff0c;从而将调用者跟实现类解耦。 简…

Chrome浏览器12px问题-webkit-text-size-adjust: none 已失效的解决方案

对于早期的chrome, 如果要想显示12px以下的字体&#xff0c;一般通用的方案都是在对应的元素中添加 div {-webkit-text-size-adjust: none; }但是我今天遇到的需求&#xff0c;添加了之后没有反应&#xff0c;而且浏览就根本不支持这种写法。 在网上看到了博客《Chrome浏览器…

CSRFGuard工具介绍

理解CSRFGuard的基础&#xff1a;http://www.runoob.com/jsp/jsp-tutorial.html 1&#xff1a;您需要做的第一件事是将OWASP.CSRFARGAD.JAR库复制到类路径中。放置Owasp.CsrfGuard.jar最常见的类路径位置在Web应用程序的WEB-INF文件夹的lib目录中。 OWASP CSRFGARD 3在传统Java…

[19/04/24-星期三] GOF23_创建型模式(建造者模式、原型模式)

一、建造者模式 本质&#xff1a;分离了对象子组件的单独构造(由Builder负责)和装配的分离(由Director负责)&#xff0c;从而可以构建出复杂的对象&#xff0c;这个模式适用于&#xff1a;某个对象的构建过程十分复杂 好处&#xff1a;由于构建和装配的解耦&#xff0c;不同的构…

深入理解vue中的slot与slot-scope

写在前面 vue中关于插槽的文档说明很短&#xff0c;语言又写的很凝练&#xff0c;再加上其和methods&#xff0c;data&#xff0c;computed等常用选项在使用频率、使用先后上的差别&#xff0c;这就有可能造成初次接触插槽的开发者容易产生“算了吧&#xff0c;回头再学&#…