面试题 题目-答案-扩展

一、下列代码中 当foo是什么值的时候 会执行alert("foo!")

A."false"     B."true"      C.1       D.0    E.-1   F.'  '    G.undefined   H.null    I.NaN     J.false     K.{}    L.[]  

if (!foo) {
        alert("foo!")
    }

分析一下: 

　　 js中的 "  !  " 是什么  这个我们知道是取反，对于布尔类型会将其值true和false互换，那对于非boolean类型呢 ?

对于非boolean类型，js会将值先转换成boolean类型，而后取反。0、null、NaN、undefined、"" 转成布尔值为false 其他则一律返回true;(那么!!呢?就是 取反在取反)

那么为什么{} 和 [] 不是false呢?

 空数组或者是空对象都是 object 那么作为条件就会转成true  !true===false所以无法输出

答案: D  F  G  H  L  J  

二、请将一下属性按照盒模型由内而外的顺序排序

A.padding   B.border   C.height   D.margin    

分析一下 盒子模型有两种 标准盒子模型和IE盒子模型又称怪异盒子

 答案:C   A   B   D   (标准)  和    A   B   C  D  (怪异)

三、要在十秒后调用checkState，下列写法哪个是正确的?

A. window.setTimeout(checkState(),10)
B. window.setTimeout(checkState,10)
C. window.setTimeout(checkState(),10000)
D. window.setTimeout(checkState,10000)

 分析:先回忆一下setTimeout 再来做这道题 

语法:

setInterval(function, milliseconds, param1, param2, ...)  
第一个参数:必需。要调用一个代码串，也可以是一个函数。
第二个参数:必需。周期性执行或调用 code/function 之间的时间间隔，以毫秒计。
param1，param2...:   选填传递给函数的其他参数 

   //代码串
    setTimeout(function () { alert("Hello"); }, 3000);

    //函数
    var fn = function () {
                alert("Hello");
            }
    setTimeout(fn, 3000);

    //函数调用
    var fn = function () {
                alert("Hello");
            }
    setTimeout("fn()", 3000);

　　C会立即执行 

答案:D 

四、下面哪种方式可以删除节点elm

 A.elm.parentNode.removeChild(elm
 B.document.createElement('fragment').appendChild(elm)
 C.elm.parentNode.deleteChild(elm)
 D.elm.parentNode.remove(elm)    

分析:删除节点的方式

<div id="box">
    <p id="p1">这是一个段落</p>
    <p id="p2">第二个段落</p>
</div>
<script>
    var p1=document.getElementById("p1");
　　//直接找到这个元素删除   
    p1.remove();  
    //或者要删除的子节点的父节点删除子节点
    p1.parentNode.removeChild(p1);                  
</script>

答案:A

扩展一下dom的操作

 　　// 创建：
    createDocumentFragment()    //创建一个DOM片段
    //创建一个具体的元素
    createElement()   
    //创建一个文本节点
    createTextNode()  
    //添加节点
    appendChild()
    //举例
    var node = document.createElement("LI");
    var textnode = document.createTextNode("Water");
    node.appendChild(textnode);
    document.getElementById("myList").appendChild(node);


    // 移出：  
    removeChild()
    remove()

    /*
        替换
        node.replaceChild(newnode,oldnode)
        newnode    你要插入的节点对象。
        oldnode    你要移除的节点对象
    */
    replaceChild()  
    document.getElementById("myList").replaceChild(newnode,oldnode);

    
     /*
        插入
        node.insertBefore(newnode,existingnode)
        newnode    你要插入的节点对象。
        existingnode    可选。在其之前插入新节点的子节点。如果未规定，则 insertBefore 方法会在结尾插入 newnode。
    */

    insertBefore()  
    document.getElementById("myList").insertBefore(newItem,existingItem);
    //末尾插入节点
    document.getElementById("myList").appendChild(newItem)


     /*
        插入
        node.insertBefore(deep)
        deep  (boolean)    可选。该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。
    */

    cloneNode(true) 
　　var node=document.getElementById("myList2").lastChild.cloneNode(true);
　　document.getElementById("myList1").appendChild(node);

五、下列表达式的结果是true的有:

A.typeof(null)==='object'
B.''==false
C.Function instanceof Object
D.[].constructor === Array

分析:
先看B选项

string（字符串类型）和number作比较的时候，string会先转化成number。此时字符串0转化为了数字0，即： 0 == 0；

0是false 1是true  所以 " " == false为真 

==在比较的时候可以转换数据类型，===严格比较，只要类型不匹配就返回flase。
所以" "是string 0是number false是boolean 当它们的比较用===则都为false

 

接下来看一下 

typeof  操作符返回一个字符串，表示未经计算的操作数的类型。

//number
typeof(42)  
typeof 42

// string
typeof ''
typeof String(1)      //String 将任意值转换为字符串，比 toString 更安全
typeof  (3).toString()

//boolean
typeof false
typeof !!(1)   // 两次调用 ! (逻辑非) 操作符相当于 Boolean()

//undefined
var str 
typeof str

typeof declaredButUndefinedVariabl     //声明但未定义变量
typeof undeclaredVariable             //不可声明变量

//function
typeof function() {}

//object
typeof {a: 1}
typeof null 
/*
在 JavaScript 最初的实现中，JavaScript 中的值是由一个表示类型的标签和实际数据值表示的。
对象的类型标签是 0。由于 null 代表的是空指针（大多数平台下值为 0x00），
因此，null 的类型标签是 0，typeof null 也因此返回 "object"
*/

//使用new操作符  除 Function 外的所有构造函数的类型都是 'object'

var str = new String('String');
var num = new Number(100);
typeof str; // 返回 'object'
typeof num; // 返回 'object'

var func = new Function();
typeof func; // 返回 'function'

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

语法 :object instanceof constructor (object-某个实例对象  constructor某个构造函数)

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
var auto = new Car('Honda', 'Accord', 1998);

auto instanceof Car;       //true
auto instanceof Object;   //true

/*
如果表达式 obj instanceof Foo 返回 true，
则并不意味着该表达式会永远返回 true，因为 Foo.prototype 属性的值有可能会改变，
改变之后的值很有可能不存在于 obj 的原型链上，这时原表达式的值就会成为 false。
举例如下
*/
// 定义构造函数
function C(){} 

var o = new C();
o instanceof C; // true

C.prototype instanceof Object // true，同上

C.prototype = {};
var o2 = new C();

o2 instanceof C; // true

/*这里给o重新继承
o = new C();
在执行下一句就是true了*/

o instanceof C; // false，C.prototype 指向了一个空对象,这个空对象不在 o 的原型链上.

constructor 属性返回对创建此对象的数组函数的引用。 这个我也不是很理解这句话的意思等我以后会了再来补充 如果有会的也可以评论教我~~

 语法:object.constructor    

 test='123';
 test.constructor == String

 test=456;
 test.constructor == Number

 test={};
 test.constructor == Object

 test=[];
 test.constructor == Array

 test=true;
 test.constructor == Boolean

 test=new Date();
 test.constructor == Date

 

答案  A B C D

 六、关于数组的说法不正确的是?

A.对数组里数据的排序可以用sort函数，如果排序效果非预期，可以给sort函数加一个排序函数的参数
B.reverse用于数组数据的倒叙排序
C.向数组的最后位置加一个新元素，可以用pop方法
D.unshift方法用于删除数组第一个元素;

 分析:

sort()

    /*
        sort() 方法用于对数组的元素进行排序。
        语法  arrayObject.sort(sortby)
        sortby    可选。规定排序顺序。必须是函数。
    */
    // 调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。
    // 按字母顺序 a-z 排列
    arr=["George","John","Thomas","James","Adrew", "Martin"]
    arr.sort()
　　

//数字排序
    // 无参数
    arr1=["10","5","40","25","100", "1"]
    arr1.sort()
    //有参数 a-b  按照数值大小 -升序
    arr1.sort((a,b)=>{
        return a-b;
    })
    // 有参数 b-a 按照数值大小 -降序
    arr1.sort((a,b)=>{
        return b-a;
    })

    

　　
　　实际应用中可以通过对象的某一个属性进行排序
　　例如:按照person数组中对象的age属性排序

let person = [{
        name: "小可爱",
        age: 12
    }, {
        name: "陈怡baby",
        age: 22
    }, {
        name: "小仙女",
        age: 18
    }]

function sequencing(property) {
   return function (a, b) {
        return a[property] -  b[property];
    }
}
console.log(person.sort(sequencing('age')))

  

 reverse()

/*
        reverse() 方法用于颠倒数组中元素的顺序。
        arrayObject.reverse()  该方法会改变原来的数组，而不会创建新的数组。
    */

    arr = [3,5,7,42,65]
    arr.reverse()
　　
    // 扩展:将数组扁平化并去除其中重复数据，最终得到一个升序且不重复的数组
    var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];
    // 分析一下:先转成一维数组然后去重最后排序 
    [...new Set(arr.flat(Infinity))].sort((a,b)=>{ return a-b})  
    // 或者:
    Array.from(new Set(arr.flat(Infinity))).sort((a,b)=>{ return a-b})


    /*
        flat()默认只会“拉平”一层，
        如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数
        如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。
    */
        let arr1 = [1,2,[3,[4]]];
    // 常用
    /* 
        toString() 方法可把数组转换为字符串，并返回结果。
        join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
        split() 方法用于把一个字符串分割成字符串数组。
    */
        let arr2 = arr1.toString().split(',');  // ["1", "2", "3", "4"]
        let arr3 = arr1.join().split(',');   // ["1", "2", "3", "4"]
    // 但是缺点是 把数组中的每一项都变成了字符串
    // 数组map方法做一个类型转换 arr3一样不做展示
        arr2.map(item => Number(item))      // [1, 2, 3, 4]

    // 有了es6以后一步搞定
        arr1.flat(Infinity)

 选择C D都是对数组的操作 一起总结

回忆一下数组增删的操作 数组的基本操作不做举例

 

 答案:A B

七、以下代码运行后，控制台输出结果是:

var num = 100;
    function fn (){
        var num = num+1;
        return num;
    }
    console.log(fn())

A.101  B.1   C.undefined D.NaN

 函数外部申明num全局变量 函数内部也声明了一个num局部变量 但是var还存在变量提升

改写:

var num = 100;
    function fn (){
        var num;
        num= num+1;         // undefined + 1
        return num; 
    }
    console.log(fn())   //NAN

    var num = 100;
    function fn (){
        num= num+1;       //内部没有num全局找   
        return num; 
    }
    console.log(fn())   //101

    那么let没有变量提升改用let呢?   let不存在变量提升所有 无法再初始化前访问

      

 答案:D

八、下面哪个不属于Promise的状态

    A.Resolved
    B.Unfulfilled //未完成
    C.Rejected　　//拒绝
    D.Pause　　　　//暂停

Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和Rejected（已失败）。同一时间只能存在一种状态,且状态一旦改变就不能再变。

答案:B D

九、代码运行输出结果是:

 　var Core = {
        title:"Core",
        show:function(){
            return this.title
        }
    }
    title = 'window'
    fn = Core.show;
    fn();

    A.Core  B.window   C.不确定

 这是this指向的问题  this指向当前的函数 当前函数是全局的所以windows.title 

var Core = {
        title:"Core",
        show:function(){
            return this.title
        }
    }
    fn = Core.show;
    fn();  //undefined 因为windows里面没有title属性

 答案 : B

十、以下代码输出什么结果，为什么?

var getFn = function () {
        var arrs = [];
        for (var i = 0; i < 3; i++) {
            arrs.push(function () {
                return i;
            })
        }
        return arrs;
    }

    var fns = getFn();
    console.log(fns[0]()+fns[1]())

按照我们正常的推算 i分别push为 0  1  2   那么打印的就是 0+1 为1  但是控制台可以看一下 这输出的是6

for循环中设置循环变量的部位是一个父作用域，循环体内部是个子作用域。

每次子作用域中的i改变的时候 污染了父作用域中全局变量 i 最后一次i不符合条件的时候是3 所以全局也被修改成了三   fn[0]，fn[1]，fn[2]  都是3  

改写:

　　//用闭包改写  输出1
    var getFn = function () {
        var arrs = [];
        for (var i = 0; i < 3; i++) {
            (function (i) {
                arrs.push(function () {
                    return i;
                })
            })(i)
        }
        return arrs;
    }
　　
    // 用let  输出1   
    var getFn = function () {
        var arrs = [];
        for (let i = 0; i < 3; i++) {
            arrs.push(function () {
                return i;
            })
        }
        return arrs;
    }

 十一、以下代码输出顺序?

 　　console.log(1);
    new Promise(function(resolve,reject){
        reject(true);
        window.setTimeout(function(){
            resolve(false);
        },0)
    }).then(function(){
        console.log(2)
    },function(){
        console.log(3)
    })
    console.log(4)

答案:1 4 3 

 promise 基础

new Promise(
  function (resolve, reject) {
    // 一段耗时的异步操作
    resolve('成功') // 数据处理完成
    // reject('失败') // 数据处理出错
  }
).then(
  (res) => {console.log(res)},  // 成功
  (err) => {console.log(err)} // 失败
)

对应看一下题目 
1.答应1 先执行
2.promise是异步所以不影响 4 的打印
3.执行promise的时候 里面有reject()  和 resolve() 但是成功的resolve在setTimeout中及时调用时间为0立即调用但是他依然是异步要等待 
　　所以这时候的状态先走一步变成了reject() promise同一时间只能存在一种状态,且状态一旦改变就不能再变。因此就是失败了 
　按照上面语法打印为 1 4 3 

new Promise(resolve => {
  setTimeout(() => {
    resolve('hello')
  }, 3000)
}).then(res => {
  console.log(res)
})

 执行的那一刻就进入了 pending状态 三秒后输出hello

//一般失败都是放在catch中写法如下

new Promise(function(resolve,reject){
        reject(false);
        resolve(true);
    }).then(function(res){
　　　　　console.log(res)
    }).catch(function(res){
        console.log(res)
    }).finally(function(){
        console.log('成功失败都有我')
    })

new Promise(function(resolve,reject){
        resolve(true);
        reject(false);
    }).then(function(res){
　　　　　console.log(res)
    }).catch(function(res){
        console.log(res)
    }).finally(function(){
        console.log('成功失败都有我')
    })

总结:　
　　1.reject() 和 resolve()谁先执行状态就是谁的 不会再改变

　　2. .then()中是正确回调

　　3. .catch()中是错误信息

　　4. .finally()中 无论失败还是成功都会执行

 十二、  最后一个编程题~~~~~~~~~~~~~~

编写一个javascript函数fn，该函数有一个参数n(number)，其返回值是一个数组，该数组是n个随机且不重复的整数，且整数取值范围是[2,32];

先写一个 

　　function fn(n,min,max){}

　　fn(n,min,max)

想想我们的随机数公式  :  Math.floor(Math.random() * (min - max + 1) + max);

n次循环 然后创建一个[]第一次追加进去 其余的判断里面有没有追加过的 如果有就i-- 多一次循环   思路有了 整合一下

function fn(n,min,max) {      
　　　　　if(typeof n !== 'number'){

　　　　　　　　　　return "参数请输入数字"

　　　　　　}

        let arrs = [];
        for (let i = 0; i < n; i++) {
            let rand = Math.floor(Math.random() * (min - max + 1) + max);
            if (arrs.length == 0) {
                arrs.push(rand)
            } else {
                if (arrs.indexOf(rand) != -1) {
                    i--;
                } else {
                    arrs.push(rand)
                }
            }
        }
        return arrs;
    }
    console.log(fn(5,2,32))

 通过这些题学习了很多   到这里就结束了~~~~~~~~~~~~~