JavaScript面试题(一）

/*-------------------显式转换---------------------*/
1. toString()      // 转化为字符串，不可以转null和underfined
2. Number()     // 转换为数字，字符串中有一个不是数值的字符，返回NaN
3. parseInt()    // 转换为数字，第一个字符不是数字或者符号就返回NaN
4. String()     // 转换为字符串， 
5. Boolean()     // 转换为布尔值
/*-------------------隐式转换(+-)---------------------*/
当 JavaScript 尝试操作一个 "错误" 的数据类型时，会自动转换为 "正确" 的数据类型
1. num  +  ""  -> String
2. num + bool -> num
// 当加号运算符时，String和其他类型时，其他类型都会转为 String；其他情况，都转化为Number类型
3. string - num -> num
// 其他运算符时， 基本类型都转换为 Number，String类型的带有字符的比如： 
4. 'a1' - num -> NaN
// 与undefined 一样。
/*-------------------隐式转换(逻辑表达式)---------------------*/
1. 对象和布尔值比较
对象和布尔值进行比较时，对象先转换为字符串，然后再转换为数字，布尔值直接转换为数字
[] == true;  //false  []转换为字符串'',然后转换为数字0,true转换为数字1，所以为false
2. 对象和字符串比较
对象和字符串进行比较时，对象转换为字符串，然后两者进行比较。
[1,2,3] == '1,2,3' // true  [1,2,3]转化为'1,2,3'，然后和'1,2,3'， so结果为true;
3. 对象和数字比较
对象和数字进行比较时，对象先转换为字符串，然后转换为数字，再和数字进行比较。
[1] == 1;  // true  `对象先转换为字符串再转换为数字，二者再比较 [1] => '1' => 1 所以结果为true
4. 字符串和数字比较
字符串和数字进行比较时，字符串转换成数字，二者再比较。
'1' == 1 // true
5. 字符串和布尔值比较
字符串和布尔值进行比较时，二者全部转换成数值再比较。
'1' == true; // true 
6. 布尔值和数字比较
布尔值和数字进行比较时，布尔转换为数字，二者比较。
true == 1 // true

/*------------let-----------*/
1. let声明的仅在块级作用域内有效，
2. let不会发生变量提升的现象，所以一定要在定义后使用，否则报错。
3. 暂时性死区：只要块级作用域内存在let命令，它所声明的变量就绑定这个区域，不再受外部影响。
4. 不允许重复声明，let不允许在相同作用域内，重复声明同一个变量：
/*-----------const----------*/
1. 声明一个只读的常量。一旦声明，常量的值就不能改变。
2. 一旦声明，就要立即初始化，否则也报错。
3. const命令声明的常量也不提升，同样存在暂时性死区，只能在声明的位置后使用。
4. 也不可以重复声明。

闭包的作用：
1. 在外部访问函数内部的变量
2. 让函数内的局部变量可以一直保存下去
3. 模块化私有属性和公共属性
闭包的原理：
全局变量生存周期是永久，局部变量生存周期随着函数的调用介绍而销毁。
闭包就是 在函数中定义且成为该函数内部返回的函数的自由变量 的变量，该变量不会随着外部函数调用结束而销毁。 
（注：不光是变量，函数内声明的函数也可以形成闭包）
当函数可以记住并访问所在的词法作用域，即使函数是在当前词法作用域之外执行，这时就产生了闭包。
闭包的应用场景：
// 1. 返回值 最常见的一种形式
    var fun_1 = function () {
      var name = "limo";
      return function () {      
        return name;
      }
    }
    var fun_1 = function () {
      var name = "limo";
      return name;
    }
    var fu_1 = fun_1();
    console.log("fu_1():" + fu_1());
// 2. 函数赋值 一种变形的形式是将内部函数赋值给一个外部变量
    var f2;
    var fun_2 = function () {
      var name = "limop"
      var a = function () {
        return name;
      }
      f2 = a;
    }
    f2();
    console.log(f2);
// 3. 函数参数 通过函数参数引用内部函数产生闭包
    var fn_3 = function (f3) {
      console.log(f3);
    }
    function fun_3() {
      var name = "limo";
      var a = function () {
        return name;
      }
      fn_3(a)
    }
    fun_3();
// 4. IIFE(自执行函数)
    var fn_4 = function (f4) {
      console.log(f4);
    };
    (function fun_4() {
      var name = "limo";
      var a = function () {
        return name;
      }
      fn_3(a)
    })();
// 5. 循环赋值
    function foo(){
      var arr = [];
      for(var i = 0; i < 10; i++){
        arr[i] = (function(n){
          return function(){
            return n;
          }
        })(i)
      }
      return arr;
    }
    var bar = foo();
    console.log(bar[3]());
// 6. getter和setter
    // getter和setter函数来将要操作的变量保存在函数内部，防止暴露在外部
    var getValue, setValue;
    (function () {
      var num = 0
      getValue = function () {
        return num
      }
      setValue = function (v) {
        if (typeof v === 'number') {
          num = v
        }
      }
    })();
    console.log(getValue());    //0
    setValue(10);
    console.log(getValue())     //10
// 7.迭代器（计数器）
    var add = function(){
      var num = 0;
      return function(){
        return ++num;
      }
    }();
    console.log(add());
    console.log(add());
    function setUp(arr){
      var i = 0;
      return function(){
        return arr[i++];
      }
    }
    var next = setUp(['Steve','Alex','LingYi']);
    console.log(next());
    console.log(next());
    console.log(next());
// 8.触发事件
    window.onload = function (){
      var btn = document.querySelector('.btn')
      btn.onclick = function (){//事件相当于在全局触发
        btn.style.color = 'red'//保持对上层作用域的引用 btn
        console.log('abc')
        // this
      }
    }
闭包的this指向问题：
var myNumber = {
  value: 1,
  add: function(i){
    var helper = function(i){
        console.log(this);
          this.value += i;
    }
    helper(i);
  }
}
myNumber.add(1);
1.this指向window对象（因为匿名函数的执行具有全局性，所以其this对象指向window）；
2.不能实现value加1（每个函数在被调用时都会自动取得两个特殊变量，this和arguments，内部函数在搜索这两个对象时，只会搜索到其活动对象为止，所以不能实现访问外部函数的this对象）；
3.修改代码实现正确功能
第一种解决方法：
var myNumber={
    value:1,
    add:function(i){
        var that=this;//定义变量that用于保存上层函数的this对象
        var helper=function(i){
             console.log(that);
        that.value+=i;
    }
    helper(i);
    }
}
myNumber.add(1);
第二种解决方法：
var myNumber={
    value:1,
    add:function(i){
        var helper=function(i){
            this.value+=i;
        }
        helper.apply(this,[i]);//使用apply改变helper的this对象指向，使其指向myNumber对象
    }
}
myNumber.add(1);
第三种解决方法
var myNumber={
    value:1,
    add:function(i){
        var helper=function(i){
            this.value+=i;
        }.bind(this,i);//使用bind绑定，和apply相似，只是它返回的是对函数的引用，不会立即执行
        helper(i);
    }
}
myNumber.add(1);

 this 指向：
1. 全局上下文（函数外）
无论是否为严格模式，均指向全局对象。注意:严格模式下全局对象为undifined
2. 函数上下文（函数内）
默认的，指向函数的调用对象，且是最直接的调用对象：
简单调用，指向全局对象注意:严格模式下全局对象为undifined，某些浏览器未实现此标准也可能会是window
改变this指向的方式：
1. 第一种： new关键字改变this指向
//构造函数版this
function Fn(){
    this.user = "李某";
}
var a = new Fn();
console.log(a.user); //李某
/*----------------------------------------*/
2. 第二种： call()
// 把b添加到第一个参数的环境中，简单来说，this就会指向那个对象
var a = {
    user:"李某",
    fn:function(){
        console.log(this.user); //李某
    }
}
var b = a.fn;
b.call(a);  //若不用call，则b()执行后this指的是Window对象
/*----------------------------------------*/
3. 第三种：apply()
// apply方法和call方法有些相似，它也可以改变this的指向，也可以有多个参数，但是不同的是，第二个参数必须是一个数组
var a = {
    user:"李某",
    fn:function(){
        console.log(this.user); //李某
    }
}
var b = a.fn;
b.apply(a);
/*----------------------------------------*/
4. 第四种：bind()
// bind方法返回的是一个修改过后的函数,
// bind也可以有多个参数，并且参数可以执行的时候再次添加，但是要注意的是，参数是按照形参的顺序进行的。
var a = {
    user:"李某",
    fn:function(){
        console.log(this.user); //李某
    }
}
var b = a.fn;
var c = b.bind(a);
c();

Cookie属性：
name　　字段为一个cookie的名称。
value　　字段为一个cookie的值。
domain　　字段为可以访问此cookie的域名。
path　　字段为可以访问此cookie的页面路径。 比如domain是abc.com,path是/test，那么只有/test路径下的页面可以读取此cookie。
expires/Max-Age 　　字段为此cookie超时时间。若设置其值为一个时间，那么当到达此时间后，此cookie失效。不设置的话默认值是Session，意思是cookie会和session一起失效。当浏览器关闭(不是浏览器标签页，而是整个浏览器) 后，此cookie失效。
Size　　字段 此cookie大小。
http　　字段  cookie的httponly属性。若此属性为true，则只有在http请求头中会带有此cookie的信息，而不能通过document.cookie来访问此cookie。
secure　　 字段 设置是否只能通过https来传递此条cookie
1 secure属性
当设置为true时，表示创建的 Cookie 会被以安全的形式向服务器传输，也就是只能在 HTTPS 连接中被浏览器传递到服务器端进行会话验证，如果是 HTTP 连接则不会传递该信息，所以不会被窃取到Cookie 的具体内容。
2 HttpOnly属性
如果在Cookie中设置了"HttpOnly"属性，那么通过程序(JS脚本、Applet等)将无法读取到Cookie信息，这样能有效的防止XSS攻击。
3 Expire属性
设置Cookie的失效时间：

/*-----解决方法1：-----*/
function add () {
  var args = Array.prototype.slice.call(arguments);
  var fn = function () {
    var sub_arg = Array.prototype.slice.call(arguments);
　　 // 把全部的参数聚集到参数的入口为一个参数： args.concat(sub_arg)
    return add.apply(null, args.concat(sub_arg));
  }
  fn.valueOf = function () {
  return args.reduce(function(a, b) {
      return a + b;
    })
  }
  return fn;
}
console.log(add(1,2)) // 3
console.log(add(1)(2)) // 3
console.log(add(1)(2)(3)) // 6
console.log(add(1,2,3)(4)) // 10
/*-----解决方法2：-----*/
function add () {
    var args = Array.prototype.slice.call(arguments);
    var fn = function () {
        // 把参数都放在一个相当于全局变量的 args 里面　
        args.push(...arguments)
        return fn;
    }
    fn.valueOf = function () {
        return args.reduce(function(a, b) {
            return a + b;
        })
    }
    return fn;
}
console.log(add(1,2)) // 3
console.log(add(1)(2)) // 3
console.log(add(1)(2)(3)) // 6
console.log(add(1,2,3)(4)) // 10

JS数组合并方法:
let arr3 = [1,2].concat([3,[4]]);    //[1,2,3,[4]]

/*-----forEach-----*/
forEach不支持return,对原来的数组也没有影响。但是我们可以自己通过数组的索引来修改原来的数组
var ary = [12,23,24,42,1];
var res = ary.forEach(function (item,index,input) {
     input[index] = item*10;
})
console.log(res);//-->undefined;
console.log(ary);//-->会对原来的数组产生改变；
/*-----map-----*/
map支持return返回值，也不影响原数组，但是会返回一个新的数组
var ary = [12,23,24,42,1];
var res = ary.map(function (item,index,input) {
     return item*10;
})
console.log(res);//-->[120,230,240,420,10];
console.log(ary);//-->[12,23,24,42,1]；
array.slice(start,end)函数是取array数组中指定的一些元素：
根据数组下标start和end，两个参数为取值的开始和结束下标，取出的值不包括end位置的值，生成一个新数组作为返回值；
这里end可以为空，为空则取从start位置到数组结尾的元素，生成新数组。
array.splice(start,length,insert_one......)函数则是直接在原数组进行删除、添加、替换元素的操作：
start为数组删除元素的开始下标，
length为从start位置开始array删除元素的个数，
后面参数为删除之后array重新插入的数据内容，插入位置为删除位置，而非数组开头或末尾，
返回值为array删除的元素组成的数组。
显而易见，splice函数可以用来对数组元素进行替换。由splice操作后的数组array，数组中内容如果已经改变，就再也找不回array在splice之前的模样。

function fun(n){
    return String(n).replace(/(?!^)(?=(\d{3})+\.)/g, ",") 
}

// 答案：1

自定义事件
事件是与DOM交互的最常见的方式。通过实现自定义事件，可以让事件用于非DOM代码中。
思想：创建一个管理事件的对象，让其他对象监听那些事件。
基本模式：
function EventTarget(){
    this.handlers = {};
}
EventTarget.prototype = {
    constructor:EventTarget,
    addHandler:function(type,handler){
        if(typeof this.handlers[type] === "undefined"){
            this.handlers[type] = [];
        }
        this.handlers[type].push(handler);
    },
    fire:function(event){
        if(!event.target){
            event.target = this;
        }
        if(this.handlers[event.type] instanceof Array){
            const handlers = this.handlers[event.type];
            handlers.forEach((handler)=>{
                handler(event);
            })
        }
    },
    removeHandler:function(type,handler){
        if(this.handlers[type] instanceof Array){
            const handlers = this.handlers[type];
            for(var i = 0,len = handlers.length; i < len; i++){
                if(handlers[i] === handler){
                    break;
                }
            }
            handlers.splice(i,1);
        }
    }
}