js 面试题

1：toString

   function A() {
        this.name = "a";
        this.toString = function () {
            return this.name
        }
    }

    function B() {
        this.name = "b";
    }

    var b1 = new B();
    console.log(b1.toString()); //[object Object]
    B.prototype = new A();
    var b2 = new B();
    console.log(b2.toString());  // b

这里非常巧妙的用到了toString()

对与普通的Number，Array,Boolean, 用toString是转化为字符串，但是object.prototype.toString中的toString是

返回当前方法执行执行的主体（方法中的this）所属类的详细信息即"[object Object]",其中第一个object代表当前实例是对象数据类型的(这个是固定死的)，第二个Object代表的是this所属的类是Object。

看实例化这句：

var b1 = new B()

里面存在一个原型链：b1.__proto__ ==B.prototype.__proto__==Objec.prototype

所以最后b1.toString 实际上是 Objec.prototype.toString 

 

B.prototype = new A();
var b2 = new B();
console.log(b2.toString());  // b

2：call apply

 // call和apply(数组)
function AA() {
    this.name = "a";
    this.say = function () {
        console.log("my name is" +" "+ this.name)
    }
}
function BB() {
    this.name = "b";
}
var aa = new AA();
var bb = new BB();
    aa.say.apply(bb); // my name is bb

    // bb调用aa的方法

 

3：定时器  异步事件

// 每隔一秒弹框，五秒结束弹框
    var id = setInterval(function () {
        alert("123")
    }, 1000)
    setTimeout(function () {
        clearInterval(id)
    }, 5000)

 

4： 匿名函数，闭包，let解决作用域问题

首先创建一个input:document.createElement

设置自定义属性：setAttribute(类型) setAttribute(值)

将自定义属性创建的元素添加到页面 documrnt.body.appendChild（）

难点是点击按钮，弹出数字。由于for循环(同步)和点击事件(异步)，js的执行机制是，先执行执行栈里面的同步事件，再执行任务队列的异步代码，这个时候，q已经是，所以永远弹出的是，不可能是每个按钮对应的值。这个时候，用闭包就爽歪歪

使用闭包以后：就可以访问函数内部的变量 也就是点击函数形参，可以是for循环的实参

   //使用js代码 ，为页面动态添加5个按钮，button1，button2,button3...
    // 单击每个按钮，分别弹出1 2 3 4 5
    for (var q = 0; q < 5; q++) {
        var input = document.createElement("input");
        input.setAttribute("type", "button");
        input.setAttribute("value", "button" + q);
        (function (n) {
            input.onclick = function () {
                alert(n)
            }
        })(q)
        document.body.appendChild(input);

    }

另外一种简单的方法：

将var 变为let

for (let q = 0; q < 5; q++) {
        var input = document.createElement("input");
        input.setAttribute("type", "button");
        input.setAttribute("value", "button" + q);
            input.onclick = function () {
                alert(q)
            }
        document.body.appendChild(input);

    }

let是es6引入的，用他声明的变量代表块级作用域。变量只要在{}，内部的函数都可以同步访问。你可能会好奇

js机制怎么被一个块级作用域给解决了？其实闭包又何尝不是，在整个函数体内，所以函数都可以同时访问变量，不存在同步异步。这里需要指出：

一个是同步任务和异步任务的优先顺序

一个是同步任务和异步任务的执行时间

5： 数组方法的使用 转为驼峰

  // 已经有一个字符串
    //foo = "get-element-by-id"； 转化为驼峰表示法 getElementById
    var foo = "get-element-by-id"
    var arr = foo.split("-");
    console.log(arr); //["get", "element", "by", "id"]
    // charAt(n) //返回字符串中的第几个字符串，从0开始
    for (var i = 1; i < arr.length; i++) { //注意这里的i从1开始，是因为转化为驼峰表达式，第一个单词字母开头小写
        // arr[i].charAt(0).toUpperCase() 返回大写字母  E  B  I
        // arr[i].slice(1) +(拼接) splice分割，除了第一个字母(大写)  lement  y， d
        arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1);
//现在的结果是：字符串数组：["get", "Element", "By", "Id"]
    }
    // 想要变为字符串，用join()
    var arr = arr.join("");//里面什么也不写 get,Element,By,Id.join("") 中间什么也没有，返回我们要的结果
    console.log(arr); //getElementById

6： 数组倒排，升序 降序

// 数组倒排
    var numberArray = [5, 1, 4, 2, 6, 3];
    var arr3 = [];
    // 将numberArray的长度作为下标放入数组，最大肯定是length-1，但是总的数量不变，所以i要=0
    for (var i = numberArray.length - 1; i >= 0; i--) {
        arr3.push(numberArray[i]);
    }
    console.log(arr3);
    // 数组降序
    var number = [5, 1, 4, 2, 6, 3];

    for (var m = 0; m < number.length - 1; m++) {
        for (var n = 0; n < number.length - 1 - m; n++) {
            if (number[n] > number[n + 1]) {
                var temp = number[n];
                number[n] = number[n + 1];
                number[n + 1] = temp;
            }
        }
    }
    console.log(number);//[1, 2, 3, 4, 5, 6]
    // 改变if里面的判断条件 ，就是降序
    // if(number[n]

 

7：输出日期

 //输出今天的日期，以yyy-mm-dd的方式，比如2019年6月28日输出2019-06-28
    var d = new Date();
    console.log(d);
    var year = d.getFullYear();
    console.log(year)
    var month = d.getMonth() + 1;  //比较特殊  0-11
    month = month < 10 ? '0' + month : month;
    console.log(month);
    var day = d.getDate();
    day = day < 10 ? "0" + day : day;
    console.log(day);
    alert(year + '-' + month + '-' + day)

8：数组去重

  function f3(arr) {
        var a3 = []
        for (var i = 0; i < arr.length; i++) {
            if (a3.indexOf(arr[i]) == -1) { //a3的索引没有和arr[i] 一样的，放入a3
                a3.push(arr[i])
            }
        }
        return a3;
    }
    var arr = [1, 1, 1, 2, 2, 2, 3]
    console.log(f3(arr));

9：闭包

下面这个 ul，如何点击每一列的时候 alert 其 index?（闭包）

var lis = document.getElementById("test").querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
    lis[i].onclick = function (i) {
        // console.log(i)
        return function () {
            console.log(i)
        }
    }(i);
}