JS面试题 - 技术栈

JS

预编译
- 全局预编译
- 函数预编译
如何判断数组和对象
数组去重
filter
- 介绍
Set
两次循环
sort
indexof实现
- 介绍
- 参数
- 返回值
filter实现
- 介绍
map
- 介绍
reduce应用
原型链

预编译

预编译发生在代码执行之前

全局预编译

全局上下文创建好之后会生成变量对象VO

VO会寻找变量声明，将var型变量作为VO对象的属性名，属性值为undefined
然后寻找函数声明，属性值为函数本身
如何函数名与变量名冲突，函数声明会覆盖变量声明

函数预编译

寻找变量声明，变量名作为A0对象的属性名，属性值为undefined
寻找形参，形参名作为A0对象的属性名，属性值置为undefined
将实参的值赋予形参，即替换A0对象中形参的属性值
寻找函数声明，函数名作为A0对象的属性名，属性值为函数本身
如果函数名与变量名冲突，函数声明会将变量声明盖

如何判断数组和对象

1. instanceof操作符用来判断一个对象是否是某个构造函数的实例。返回一个布尔值
- 原理：测试构造函数的prototype属性是否出现在对象的原型链中的任何位置。

javascript 复制代码

        // 如何判断数组和对象
        // instanceof
        let arr = []
        console.log(arr instanceof Array)//true
        let arr1 = []
        // 改变原型链之后，无法判断
        arr1.__proto__ = function () { }
        console.log(arr1 instanceof Array)//false

1. Object.getPrototypeof()
- 原理
  Object.getPrototypeOf() 方法返回指定对象的原型（即该对象内部[[Prototype]]属性的值）

javascript 复制代码

        // 如何判断数组和对象
        // instanceof
        let arr = []
        console.log(arr instanceof Array)//true
        let arr1 = []
        // 改变原型链之后，无法判断
        arr1.__proto__ = function () { }
        // 方法二：
        console.log(Object.getPrototypeOf(arr)===Array.prototype) //true
        console.log(Object.getPrototypeOf(arr1)===Array.prototype) //false

1. constructor属性
- 原理：普通数组（Array）对象身上有一个constructor属性。这个属性指向创建该数组实例的构造函数。对于数组来说，这个属性通常是Array构造函数本身。

javascript 复制代码

        // 如何判断数组和对象
        // instanceof
        let arr = []
        console.log(arr instanceof Array)//true
        let arr1 = []
        // 改变原型链之后，无法判断
        arr1.__proto__ = function () { }
        // 方法三：
        console.log(arr.constructor === Array)//true
        console.log(arr1.constructor === Array)//false

1. Array.isArray()
- 缺点
  存在兼容性问题

javascript 复制代码

        // 如何判断数组和对象
        // instanceof
        let arr = []
        console.log(arr instanceof Array)//true
        let arr1 = []
        // 改变原型链之后，无法判断
        arr1.__proto__ = function () { }
        // 方法四：
        console.log(Array.isArray(arr))//true
        console.log(Array.isArray(arr1))//true

1. Object.prototype.toString.call()
- 原理：Object.prototype.toString返回一个表示该对象类型的字符串。这个方法可以被所有对象继承。通过使用call，将Object.prototype.toString方法的上下文设置为任何对象。将数组（在这个例子中是arr）作为上下文传递给Object.prototype.toString.call()时，它会返回一个字符串，该字符串表示数组的内部[[Class]]属性，对于数组来说，这个字符串是[object Array]。

Object.prototype.toString 是JavaScript中一个非常有趣且强大的方法。它返回一个代表该对象类型的字符串。这个方法被设计为可以被所有对象继承，包括用户自定义的对象。当你调用 Object.prototype.toString 方法时，它会返回一个固定格式的字符串，格式为 "[object " + 类型 + "]"。

javascript 复制代码

        // 如何判断数组和对象
        // instanceof
        let arr = []
        console.log(arr instanceof Array)//true
        let arr1 = []
        // 改变原型链之后，无法判断
        arr1.__proto__ = function () { }
        // 方法五：
        console.log(Object.prototype.toString.call(arr)==='[object Array]')//true

数组去重

ES6的Set方法

javascript 复制代码

     let arr=[1,2,3,4,5,6,9,5,3]
    //  利用set实现数组去重
     console.log(Array.from(new Set(arr)))//[1, 2, 3, 4, 5, 6, 9]

ES5的filter方法
两次for循环

javascript 复制代码

        let arr = [1, 3, 4, 5, 6, 9, 5, 3]
        //  利用循环给数组去重
        function fn() {
            for (let i = 0, len = arr.length; i < len; i++) {
                for (let j = i + 1; j < len; j++) {
                    if (arr[i] === arr[j]) {
                        arr.splice(j, 1)
                        j--
                        len--
                    }
                }

            }
            return arr
        }
        fn()
        console.log(arr)//[1, 3, 4, 5, 6, 9]

indexof

filter

介绍

用于创建一个新数组,这个方法不会修改原始数组，而是返回一个过滤后的新数组。

Set

Set介绍

在ES6中，Set 是一种新的数据结构，用于存储任何类型的唯一值。

Set基本用法

javascript 复制代码

let arr=[1,3,5,7,9,1,4,7]
// 创建set
let arr1=new Set(arr)
// 添加元素
arr1.add(0)
// 检查元素是否存在
console.log(arr1.has(0))//true
// 删除元素
arr1.delete(1)
// 遍历set
arr1.forEach(value=>console.log(value))
// 获取set的大小
console.log('大小为:',arr1.size)//6
// 清空set
arr1.clear()
console.log('大小为:',arr1.size)//0

Set的特点

Set 中的值是唯一的，因此添加重复的值不会改变Set。
Set 可以存储任何类型的值，包括原始值和对象引用。
Set 会记住值的原始插入顺序，因此遍历时会按照插入顺序输出。
Set 是可迭代的，可以使用forEach方法或for...of循环进行遍历。

两次循环

sort

java 复制代码

var arr3 = [1,2,3,2,4,1];
function unique( arr ){
    arr = arr.sort();
    var brr = [];
    for(var i=0;i<arr.length;i++){
        if( arr[i] !== arr[i-1]){
            brr.push( arr[i] );
        }
    }
    return brr;
}
console.log( unique(arr3) );

indexof实现

介绍

indexOf 方法是数组原型上的一个方法，用于在数组中查找指定元素的第一个出现位置，并返回该位置的索引。如果数组中不存在该元素，则方法返回 -1。

参数

一个可选参数一个必选参数

searchElement(必选): 要查找的元素。
fromIndex (可选): 开始查找的位置。如果省略该参数，默认从数组的开头（索引 `0）开始查找。

返回值

如果找到元素，返回该元素的索引（一个非负整数）。

如果没找到元素，返回 -1。

javascript 复制代码

        let arr = [1, 3, 4, 5, 6, 9, 5, 3]
        console.log(arr.indexOf(6,5))//-1
        console.log(arr.indexOf(6,4))//4

filter实现

介绍

filter用于对数组进行过滤。

它创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意：filter()不会对空数组进行检测、不会改变原始数组

javascript 复制代码

const array = [1, 2, 3, 4, 5, 6];

// 回调函数返回值为true时，该元素就会留下来，false就会被过滤走
const evenNumbers = array.filter(element => element % 2 === 0);

console.log(evenNumbers); // 输出: [2, 4, 6]

map

介绍

map是 "映射"的意思，用来遍历数组中的每一项，map的回调函数中支持return返回值；return的是啥，相当于把数组中的这一项变为啥（并不影响原来的数组，只是相当于把原数组克隆一份，把克隆的这一份的数组中的对应项改变了）；支持把匿名回调函数中的this进行修改。

javascript 复制代码

        var data = [3, 4, 5, 6];
        var Squares = data.map(function (item) {
            return item * item;
        }).join('|');
        console.log('Squares：' + Squares);//9|16|25|36

reduce应用

原型链

JS的每个函数在创建的时候，都会生成一个属性prototype，这个属性指向一个对象，这个对象就是此函数的原型对象。该原型对象中有个属性为constructor，指向该函数。这样原型对象和它的函数之间就产生了联系。