前端面试题总结三

前言

学习学习！

正文

1.判断数组的三种方法

1. Object.prototype.toString.call()
   每一个继承 Object 的对象都有 toString 方法，如果 toString 方法没有重写的话，会返回 [Object type]，其中 type 为对象的类型。但当除了 Object 类型的对象外，其他类型直接使用 toString 方法时，会直接返回都是内容的字符串，所以我们需要使用call或者apply方法来改变toString方法的执行上下文。

const an = ['Hello','An'];
an.toString(); // "Hello,An"
Object.prototype.toString.call(an); // "[object Array]"

这种方法对于所有基本的数据类型都能进行判断，即使是 null 和 undefined 。

Object.prototype.toString.call('An') // "[object String]"
Object.prototype.toString.call(1) // "[object Number]"
Object.prototype.toString.call(Symbol(1)) // "[object Symbol]"
Object.prototype.toString.call(null) // "[object Null]"
Object.prototype.toString.call(undefined) // "[object Undefined]"
Object.prototype.toString.call(function(){}) // "[object Function]"
Object.prototype.toString.call({name: 'An'}) // "[object Object]"

2. instanceof
   instanceof 的内部机制是通过判断对象的原型链中是不是能找到类型的 prototype。
   使用 instanceof判断一个对象是否为数组，instanceof 会判断这个对象的原型链上是否会找到对应的 Array 的原型，找到返回 true，否则返回 false。

[]  instanceof Array; // true

但 instanceof 只能用来判断对象类型，原始类型不可以。并且所有对象类型 instanceof Object 都是 true。

[]  instanceof Object; // true

3. Array.isArray()
   功能：用来判断对象是否为数组

Array.isArray([1,2,3])
true

2.Object.assign 原理及其实现
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
我们知道浅拷贝就是拷贝第一层的基本类型值，以及第一层的引用类型地址。
例子：

// 第一步
let a = {
    name: "advanced",
    age: 18
}
let b = {
    name: "muyiy",
    book: {
        title: "You Don't Know JS",
        price: "45"
    }
}
let c = Object.assign(a, b);
console.log(c);
// {
// 	name: "muyiy",
//  age: 18,
// 	book: {title: "You Don't Know JS", price: "45"}
// } 
console.log(a === c);
// true

// 第二步
b.name = "change";
b.book.price = "55";
console.log(b);
// {
// 	name: "change",
// 	book: {title: "You Don't Know JS", price: "55"}
// } 

// 第三步
console.log(a);
// {
// 	name: "muyiy",
//  age: 18,
// 	book: {title: "You Don't Know JS", price: "55"}
// } 

1、在第一步中，使用 Object.assign 把源对象 b 的值复制到目标对象 a 中，这里把返回值定义为对象 c，可以看出 b 会替换掉 a 中具有相同键的值，即如果目标对象（a）中的属性具有相同的键，则属性将被源对象（b）中的属性覆盖。这里需要注意下，返回对象 c 就是 目标对象 a。

2、在第二步中，修改源对象 b 的基本类型值（name）和引用类型值（book）。

3、在第三步中，浅拷贝之后目标对象 a 的基本类型值没有改变，但是引用类型值发生了改变，因为 Object.assign() 拷贝的是属性值。假如源对象的属性值是一个指向对象的引用，它也只拷贝那个引用地址。
Object.assign 模拟实现

if(typeof Object.assign2 !== 'function'){
  Object.defineProperty(Object,"assign2",{
    value:function(target){
      if(target == null){
        throw new TypeError('Cannot convert undefined or null to object');
      }

      let to =Object(target)

      for(let i=0;i<arguments.length;i++){
        let nextSource = arguments[i]

        for(var nextKey in nextSource){
          if(Object.prototype.hasOwnProperty.call(nextSource,nextKey)){
            to[nextKey]  = nextSource[nextKey]
          }
        }
      }
      return to
    },
    writable: true,
    configurable: true
  })
}


var a = "abc";
var b = {
    v1: "def",
    v2: true,
    v3: 10,
    v4: Symbol("foo"),
    v5: null,
    v6: undefined
}

var obj = Object.assign2(a, b);
console.log(obj);
// {
//   [String: 'abc']
//   v1: 'def',
//   v2: true,
//   v3: 10,
//   v4: Symbol(foo),
//   v5: null,
//   v6: undefined
// }

此题难点在于首先要使创建的assing2是不可枚举的，所以采用defineProperty，还要设置enumerable: false 以及 writable: true, configurable: true。因为当且仅当该属性的writable为true时，value才能被赋值运算符改变。
还要让目标是个对象，所以要先把他对象化，最后要用hasOwnProperty遍历要复制的属性，不然可能查找到他的原型链上去。

总结

本文源自github上的前端试题，贴出链接。

github 搜索Advanced-Frontend