Web前端面试考点（1）

Web前端面试考点（1）

1、for…in与object.keys（）的区别

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用。
for…in 循环遍历该对象时返回的顺序一致

   // 一、for..in..和objec.keys的区别
   var obj = {a:1}
   for(var key in obj){console.log(key)} // a
   obj.__proto__.b = 2
   for(var key in obj){console.log(key)} // a，b
   console.log(Object.keys(obj)) // ['a']

唯一的区别：两者之间最主要的区别就是Object.keys( )不会走原型链（只是当前对象的当前属性），而for in 会走原型链

2、前提：后端返回的数据是一个数组对象，要求处理数据。var data = [{id:1},{id:2},{id:1}]

问题1：js数组对象去重

方法1：使用key的唯一性

var data = [{id:1},{id:2},{id:1}]
var arr = []
var obj = {}
//首先遍历数组中的每一个对象
data.forEach(item=>{  //item是数组中的每一个对象{id:1}
	if(!obj[item.id]){
		obj[item.id]=item.id // {1:1} {2:2}
		arr.push(item) //item -> {id:1}
		console.log(arr)
	}
})

方法2（方法1的另一种写法）：直接for循环，利用对象属性的唯一性

 var arr = [
     {id:'1',data:'1'},
     {id:'2',data:'2'},
     {id:'1',data:'1'},
 ]
 var result = {}
 for(var i=0;i<arr.length;i++){
 	 console.log(arr[i]['id']) //1
 	 console.log([arr[i]['id']])//["1"]
 	 console.log(arr[i]) //{id:'1',data:'1'} 
     result[arr[i]['id']] = arr[i] 
 }
console.log('11',result) 

方法3：借助数组中reduce方法，访问遍历数组，其也是借助访问对象属性方法。

	var data = [{id:1},{id:2},{id:1}]
	var arr =data.reduce(function(pre,cur){
	    console.log(pre,cur,pre.includes(cur))
		if(!pre.includes(cur.id)){
			return pre.concat(cur.id)
		}else{
			return pre
		}
	},[])
	console.log(arr)

JS数组reduce()方法详解及高级技巧.

JS三大组成部分

• BOM（浏览器），DOM（页面），ECMAScript（语法）
• 关系
  • ECMAScript（语法）规定，在 BOM（浏览器）中，如何操作 DOM（页面），做什么交互。

BOM（Browser Object Model）： 浏览器对象模型 主要操作浏览器的一些能力。
（1）控制浏览器的前进后退刷新等于历史记录相关的功能（history）
（2）获取一些浏览器的相关信息（窗口的大小） （screen）
（3）操作浏览器进行页面跳转
（4）获取当前浏览器地址栏的信息 （location）
（5）让浏览器出现一个弹出框（alert/confirm/prompt）
BOM的核心是window对象，window 是浏览器内置的一个对象，里面包含着操作浏览器的方法

DOM(Document Object Model)的首字母缩写，即文档对象模型
（1）用来描绘一个层次化的节点树，允许开发人员获取、添加、移除和修改页面的某一部分元素。

类数组和数组的区别

类数组拥有length属性，其他属性（索引）为非负整数（对象中的索引会被当做字符串来处理）。它的原型是object。
javascript中常见的类数组有 arguments对象和 DOM方法的返回结果。比如 document.getElementsByTagName()。
什么是类数组.

判断引用类型是否是一个数组

1.通过instanceof判断。instanceof运算符用于检验构造函数的prototype属性是否出现在对象的原型链中的任何位置，返回一个布尔值。

let a = [];
a instanceof Array; //true
let b = {};
b instanceof Array; //false

在上方代码中，instanceof运算符检测Array.prototype属性是否存在于变量a的原型链上，显然a是一个数组，拥有Array.prototype属性，所以为true。

2、通过constructor判断我们知道，实例的构造函数属性constructor指向构造函数，那么通过constructor属性也可以判断是否为一个数组。

let a = [1,3,4];
a.constructor === Array;//true

3、通过Object.prototype.toString.call()判断 Object.prototype.toString().call()可以获取到对象的不同类型

let a = [1,2,3]
Object.prototype.toString.call(a) === '[object Array]';//true

4、 es6通过Array.isArray()判断(最佳) Array.isArray() 用于确定传递的值是否是一个数组，返回一个布尔值。

let a = [1,2,3]
Array.isArray(a);//true

接口调试过程中，常见接口返回码404，问题原因分析。

404 - Not Found 无法找到指定位置的资源。
1、检查传的参数中是否有乱码，或则传参格式是否正确；
2、接口请求地址资源实际不存在外
3、接口请求地址错误，或接口请求地址中含空格
4、