【一块磨刀石】- 前端面试扑街记录（1）

凡兵刃，必经百锻，而后千磨万砺，削其筋骨，锐其意志，成其所不能之事。

记录一下答得差强人意的题目。

js 数据类型

• 数字（number）
• 字符串（string）
• 布尔值（boolean）
• undefined、null
• 对象（Object）：其中对象类型包括：数组（Array）、函数（Function）、还有两个特殊的对象：正则（RegExp）和日期（Date）。

我真是脑子瓦特了这题居然死活想不起来布尔。

常用css单位

相对长度单位

单位	相对于
em	在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width
ex	字符“x”的高度
ch	数字“0”的宽度
rem	根元素的字体大小
lh	元素的line-height
vw	视窗宽度的1%
vh	视窗高度的1%
vmin	视窗较小尺寸的1%
vmax	视图大尺寸的1%

绝对长度单位

单位	名称	等价换算
cm	厘米	1cm = 96px/2.54
mm	毫米	1mm = 1/10th of 1cm
Q	四分之一毫米	1Q = 1/40th of 1cm
in	英寸	1in = 2.54cm = 96px
pc	十二点活字	1pc = 1/16th of 1in
pt	点	1pt = 1/72th of 1in
px

rem 和 em 区别

这两个单位分别基于不同的字符调整自身高度大小。

ex 字符“x”的高度
rem 根元素的字体大小（根元素就是在最顶端的，没有父节点的元素！）

es6 array API

• Array.from
• Array.of
• Array.prototype.fill
• Array.prototype.find
• Array.prototype.findIndex
• Array.prototype.copyWithin
• Array.prototype.entries
• Array.prototype.keys
• Array.prototype.values

find 和 map 区别

find() - 返回值

find()  方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

const found = array1.find(element => element > 10);

将返回一个值。

findIndex() - 返回索引

findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));

map() - 创建新数组

map()  方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

ajax

ajax 主要依靠 XMLHttpRequest 对象

function success(text) {
    var textarea = document.getElementById('test-response-text');
    textarea.value = text;
}

function fail(code) {
    var textarea = document.getElementById('test-response-text');
    textarea.value = 'Error code: ' + code;
}

var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象

request.onreadystatechange = function () { // 状态发生变化时，函数被回调
    if (request.readyState === 4) { // 成功完成
        // 判断响应结果:
        if (request.status === 200) {
            // 成功，通过responseText拿到响应的文本:
            return success(request.responseText);
        } else {
            // 失败，根据响应码判断失败原因:
            return fail(request.status);
        }
    } else {
        // HTTP请求还在继续...
    }
}

// 发送请求:
request.open('GET', '/api/categories');
request.send();

alert('请求已发送，请等待响应...');

Object 和 Array 的区别

两种不同类型的数据集合，数组表示有序数据的集合，而对象表示无序数据的集合。如果数据的顺序很重要，就用数组，否则就用对象。

如何区分array和object：

1：通过isarray方法

使用方法： Array.isArray(obj); //obj是检测的对象

2：通过instanceof运算符来判断

instanceof 运算符左边是子对象（待测对象），右边是父构造函数（这里是Array）

instanceof 和 typeof 区别

区别如下： typeof 会返回一个变量的基本类型， instanceof 返回的是一个布尔值

instanceof 用于比较左右两者是否类型统一。

深度比较两个对象

简单方法：JSON.stringfy()

正经方法：

function (oldData, newData) { 
    if (oldData === newData) return true; 
    const arg = Array.prototype.slice.call(arguments); 
    const objCall = (obj, string) =>Object.prototype.toString.call(obj) === `[object ${string}]`; 
    if (arg.every(obj => objCall(obj, 'Object')) && Object.keys(oldData).length === Object.keys(newData).length) { 
    for (const key in oldData) { 
        if (oldData.hasOwnProperty(key) && !compare(oldData[key], newData[key])) 
            return false; 
        } 
    } 
    else if (arg.every(obj => objCall(obj, 'Array')) && oldData.length === newData.length) { 
    for (const key in oldData) { 
        if (!compare(oldData[key], newData[key])) 
        return false; 
        } 
    }
    else { 
        return false; 
    } 
    return true; 
    };