web前端面试 js部分

1/如何用原生js给一个按钮绑定过两个click事件

var obtn = document.getElementById('btn');

obtn.addEventListener('click',function(){

       console.log('点击1')

})

obtn.addEventListener('click',function(){

       console.log('点击2')

})

2/如何用js检测变量是string类型还是object类型还是array类型

string:      typeof(obj) ===  'string'   //  typeof obj === 'string'   //  obj.constructor == String

array:     Array.isArray(obj)     //   obj instanceof Array    //   Object.prototype.toString.call(obj) == '[object Array]'  //  判断obj是否有push方法（此方法具有一定的） //   obj.constructor == Array

object:     if( typeof (obj) == 'object')   (array，object都会返回true)   Array.isArray(obj)为false为object    //   obj.toString() == '[object object]' // Object.prototype.toString.call(obj) == '[object object]'

3/js去除字符串空格

（1）replace

去除所有空格：str = str.replace(/s*/g,'');

去除两头空格：str = str.replace(/^\s*|\s*$/g,'')

去除左空格：str = str.replace(/^\s*/,'');

去除右空格： str = str.replace(/(\s*$)/g,'')

(2)trim() ，trimLeft()

str.trim()  无法去除中间的空格  str.trimLeft()   去除左边的空格     str.trimRight()   去除右边的空格

（3）jquery $.trim(str)

$.trim(str)  无法去除中间的空格

4/如何从url中获取参数

let hrefStr = window.location.href itemStr = hrefStr.split('?')[1]  arr = itemStr.split('&') let obj = {} for(let i in arr){item = arr[i].split('=');obj[item[0]] = item[1]} 

5/js排序，冒泡，快排

//快排  二分法 O(n log n)
var arr = [3,1,4,7,2,9,8]
function quickSort (arr) {
  if (arr.length == 0) {
    return arr;
  }
  var cIndex = Math.floor(arr.length/2)
  var c = arr.splice(cIndex,1)
  var pre = []
  var next = []
  var newArr = []
  for (var i in arr) {
    if (arr[i] > c) {
      next.push(arr[i])
    } else {
      pre.push(arr[i])
    }
  }
  return quickSort(pre).concat(c,quickSort(next))
}
console.log(quickSort(arr))
//冒泡  比较相邻   O(n^2)
function bubbleSort (arr) {
  for (var i = 0; i < arr.length - 1; i++) {
    for (var j = 0; j < arr.length - i - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        var temp;
        temp = arr[j]
        arr[j] = arr[j + 1]
        arr[j + 1] = temp 
      }
    }
  }
  for (var i in arr) {
    if (arr[i] > arr[i+1]) {
      var temp
      temp = arr[i]
      arr[i] = arr[i+1]
      arr[i+1] = temp
    }
  }
  return arr
}
console.log('冒泡' + bubbleSort(arr))

6/js 原型

function Test1 (a, b) {
  this.a  = a;
  this.b = b;
}
Test1.prototype = {
  add: function (x, y) {
    return x + y;
  },
  sub: function (x, y) {
    return x - y;
  }
}
var test1 = new Test1()
console.log(test1.add(2,9))

Test1.prototype = function () {
  add = function (x, y) {
    return x + y;
  },
  sub = function (x, y) {
    return x - y;
  }
  return {
    add: add,
    sub: sub
  }
}()
var test1 = new Test1()
console.log(test1.add(4,1))
var Test2 = function () {
  this.dec = 2
}
Test2.prototype.add = function (x, y) {
  return x + y;
}
Test2.prototype.sub = function (x, y) {
  return x - y;
}
var test2 = new Test2()
console.log(test2.add(6,9))
var Test3 = function () {
  this.dec = 2
};
Test3.prototype = {
  add: function(x,y) {
    return x + y;
  },
  sub: function (x, y) {
    return x - y;
  }
};
var Test4 = function () {
  this.tax = 5
};
Test4.prototype = new Test3()
var test4 = new Test4()
console.log(test4.add(7,8))
console.log(test4.dec)

7/原型链

function Foo () {
  this.value = 42
}
Foo.prototype = {
  method: function () {}
}
function Bar () {}
Bar.prototype = new Foo()
Bar.prototype.foo = 'Hellow World'
Bar.prototype.constructor = Bar
var test = new Bar()
// test 是Bar的实例   Bar.prototype是Foo的实例  test可以访问Foo的value和method  若不想让其访问到value  则 染发Bar.prototype = Foo.prototype

8/hasOwnProperty 一个对象是否包含自定义属性而不是原型链中的属性

是javascript中唯一一个处理属性但是不查找原型链的函数

Object.prototype.bar = 1;

var foo = {goo: undefined};

foo.bar; // 1

'bar' in foo; // true

foo.hasOwnProperty('bar'); // false

foo.hasOwnProperty('goo'); // true

缺点：javascript不会保护hasOwnPrototype() 若这个对象含有 hasOwnPrototype() 外部的prototype()验证的时候总是返回对象内部的hasOwnPrototype()设置的内容

var foo = {

    hasOwnProperty: function() {

        return false;

    },

    bar: 'Here be dragons'

};

foo.hasOwnProperty('bar'); // 总是返回 false