自学内容网 自学内容网
自学内容网 > 正文

万字总结JavaScript面试题（后续持续更新）

🕗 发布于 2024-12-26 16:05 javascript  开发语言  ecmascript  

文章目录

一、JS的数据类型

原始类型

  1. Undefined
    • 当一个变量已被声明但未被赋值时，默认值为undefined。
  2. Null
    • 表示一个空的或不存在的引用值。它是对象类型的特例。
  3. Boolean
    • 表示逻辑值，可以是true或false。
  4. Number
    • 用于表示整数和浮点数。在JavaScript中，所有的数字都是以64位浮点格式存储的。
  5. BigInt（ES11引入）
    • 用于表示任意精度的整数。当你需要处理超过Number类型所能表示的最大整数值时使用。
  6. String
    • 用于表示文本数据。字符串可以包含零个或多个字符。
  7. Symbol（ES6引入）
    • 用于创建唯一的标识符。Symbols是不可变的且独一无二的，常用于对象属性的键。

对象类型

  1. Object
    • 对象是属性的集合，而属性可以是任何数据类型，包括其他对象。对象可以用来构建复杂的数据结构。
  2. Array
    • 数组是一种特殊类型的对象，用于存储有序的项目列表。数组的元素可以是任何数据类型。
  3. Function
    • 函数也是对象，可以被赋值给变量、作为参数传递给其他函数或从函数中返回。
  4. Date
    • 日期对象用于处理日期和时间。
  5. RegExp
    • 正则表达式对象用于匹配文本中的字符串模式。
  6. Map和Set（ES6引入）
    • Map存储键值对，并且任何值（对象或原始值）都可以用作键或值。Set是一个存储唯一值的集合。
  7. WeakMap和WeakSet（ES6引入）
    • 这些数据结构类似于Map和Set，但是它们只接受对象作为键（对于WeakMap），并且这些键是弱引用的，这意味着如果对象的唯一引用是WeakMap或WeakSet中的一个条目，那么垃圾回收器将回收该对象。

二、延迟加载JS的方式

1.script标签的async属性

当在<script>标签中使用async属性时，脚本将异步下载，但一旦下载完成，它会立即执行，而不等待页面解析完成。这种方式适用于那些不需要等待DOM完全加载就可以执行的脚本，如广告或分析脚本。

<script src="" async ></script>

2.script标签的defer属性

带有defer属性的<script>标签会使脚本文件异步下载，并确保所有脚本在文档解析完成后按顺序执行。这对于需要访问DOM的脚本非常有用。

<script src="" defer ></script>

3.动态插入脚本

可以通过JavaScript动态创建<script>元素并将其添加到文档中，这样可以完全控制何时开始下载脚本以及何时执行脚本。

const script = document.createElement('script');
script.src = 'example.js';
document.body.appendChild(script);

4.使用Intersection Observer API

Intersection Observer API可以用来检测元素何时进入视口，这对于图片和脚本的懒加载特别有用。你可以等到某个元素即将进入视口时再加载相关的脚本。

const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const script = document.createElement('script');
            script.src = entry.target.getAttribute('data - src');
            document.body.appendChild(script);
            observer.unobserve(entry.target); // 停止观察
        }
    });
});

// 选择所有需要懒加载的脚本元素
document.querySelectorAll('[data - src]').forEach(el => {
    observer.observe(el);
});

5.使用模块加载

HTML5引入对ES模块的支持，允许将脚本标记为模块。模块脚本默认具有defer行为。这说明会按照出现顺序在文档解析完成后执行。

三、null和undefined的区别

null

  1. 定义：表示一个空的或者不存在的引用值。它是对象类型的特例。
    let y = null;
console.log(y); // 输出: null
console.log(typeof null); // 输出: "object"

undefined

  1. 定义：当一个变量被声明但未被赋值时，默认值为undefined。
    let x;
console.log(x); // 输出: undefined

JS中是先有null后有undefined的。undefined的出现是因为JS最初没有错误处理机制，因为null会自动转换为0，不容易发现错误；并且null在JS中被当成了一个对象，作者觉得表示“无”的值最好不要是对象。

四、==和===的不同

  1. ==：比较的是值，比较时JS会进行隐式转换，然后再进行比较。
  2. ===：比较值也同时比较类型，当值和类型都相同时，才会返回true。
  3. 特殊情况：NaN：因为NaN不等于任何值，也包括自己，不管==或者===返回的都是false。

五、JS的微任务和宏任务

JavaScript异步编程：宏任务与微任务详解_异步中宏任务与微任务 - CSDN博客

六、判断变量是不是数组

var arr = [1, 2, 3];

//方法1 isArray
console.log(Array.isArray(arr)); //返回布尔值

// 方法2 instanceof
console.log(arr instanceof Array); //返回布尔值

//方法3 原型 prototype
console.log(Object.prototype.toString.call(arr).indexOf('Array') > - 1);//返回布尔值

//方法4 isPrototypeOf()
console.log(Array.prototype.isPrototypeOf(arr)); // 返回布尔值

// 方法5 constructor
console.log(arr.constructor.toString().indexOf('Array') > - 1);//返回布尔值

七、slice和splice

slice

截取数组，返回截取的数组，不会修改新的数组。

const arr = [1, 2, 3, 4, 5, 6];
console.log(arr.slice(1, 3)); // [2,3]
console.log(arr.slice(3)); // [4,5,6]
console.log(arr.slice(-3)); // [4,5,6]

splice

功能主要是插入，删除，替换。该方法会改变原本的数组。

const arr = [1, 2, 3, 4, 5, 6];
arr.splice(修改目标的索引，删除几个，添加的元素...);

八、JS数组去重的方法

方式一:new Set

const arr = [1, 1, 2, 3, 4, 5, 5, 6];
function unique(arr) {
    return [...new Set(arr)];
}

方式二：indexOf

var arr = [1, 2, 3, 3, 5, 6, 6, 7, 6];
function unique(arr) {
    var brr = [];
    for (var i = 0; i < arr.length; i++) {
        if (brr.indexOf(arr[i]) == -1) {
            brr.push(arr[i]);
        }
    }
    return brr;
}

方式三：sort

var arr = [1, 2, 3, 3, 5, 6, 6, 7, 6];
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;
}

方式四：filter

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.filter((item, index) => array.indexOf(item) === index);

方式五：reduce

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.reduce((accumulator, currentValue) => {
    return accumulator.includes(currentValue)? accumulator : [...accumulator, currentValue];
}, []);

方式六：双重for循环

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [];
for (let i = 0; i < array.length; i++) {
    if (uniqueArray.indexOf(array[i]) === -1) {
        uniqueArray.push(array[i]);
    }
}

九、找出多维数组最大值

const arr = [
    [4, 5, 6, 1, 4],
    [13, 44, 22, 51],
    [66, 34, 18, 23],
    [233, 55, 11, 999],
];
function fnArr(arr) {
    var newArr = [];
    arr.forEach((item, index) => {
        newArr.push(Math.max(...item));
    });
    return newArr;
}

十、给字符串新增方法实现功能

String.prototype.addPrefix = function (str) {
    return str + this;
}

十一、找出字符串中出现最多的字符

var str = 'aaaaaabbbbccddddddddddddde';
var obj = {};
for (var i = 0; i < str.length; i++) {
    var char = str.charAt(i);
    if (obj[char]) {
        obj[char]++;
    } else {
        obj[char] = 1;
    }
}
console.log(obj);
//统计最大值
var max = 0;
for (var key in obj) {
    if (max < obj[key]) {
        max = obj[key];
    }
}
//拿最大值去对比
for (var key in obj) {
    if (obj[key] == max) {
        console.log('最多的字符是' + key);
        console.log('出现的次数是' + max);
    }
}
console.log(obj);

十二、new操作符具体做了什么

深入理解JavaScript中的new关键字_js new关键字 - CSDN博客

十三、闭包是什么？

深入理解JS闭包：优势、应用场景及最佳实践 - CSDN博客

十四、原型链

JS原型与原型链的设计哲学及应用_course.prototype - CSDN博客


原文地址：https://blog.csdn.net/cx18333/article/details/144667458

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024