JavaScript 知识总结与面试题

// typeoftypeof 'hello'  // 'string'typeof 42       // 'number'typeof null     // 'object'（历史遗留问题）// instanceof[] instanceof Array  // true{} instanceof Object // true// Object.prototype.toStringObject.prototype.toString.call([])  // '[object Array]'Object.prototype.toString.call(null) // '[object Null]'

// 显式转换Number('42')      // 42String(42)        // '42'Boolean(0)        // false// 隐式转换'5' + 3           // '53'（字符串拼接）'5' - 3           // 2（数字运算）!!'hello'         // true（布尔转换）

function outer() {    var x = 1;        function inner() {        var y = 2;        console.log(x + y); // 3，x 来自外层作用域    }        inner();}

function createCounter() {    let count = 0;        return {        increment() {            count++;            return count;        },        getCount() {            return count;        }    };}const counter = createCounter();counter.increment(); // 1counter.increment(); // 2counter.getCount();  // 2

// 函数声明function add(a, b) {    return a + b;}// 函数表达式const multiply = function(a, b) {    return a * b;};// 箭头函数const divide = (a, b) => a / b;

// 没有自己的 thisconst obj = {    name: 'test',    sayHello: () => {        console.log(this.name); // undefined    }};// 不能作为构造函数const Person = () => {};new Person(); // TypeError// 没有 arguments 对象const fn = () => console.log(arguments); // ReferenceError

// 全局上下文console.log(this); // window（浏览器）/ global（Node.js）// 对象方法const obj = {    name: 'test',    greet() {        console.log(this.name); // 'test'    }};// 构造函数function Person(name) {    this.name = name;}const p = new Person('Alice');console.log(p.name); // 'Alice'// 显式绑定obj.greet.call({ name: 'Bob' }); // 'Bob'

function Person(name) {    this.name = name;}Person.prototype.sayHello = function() {    console.log(`Hello, ${this.name}`);};const p = new Person('Alice');p.sayHello(); // 'Hello, Alice'// 原型链p.__proto__ === Person.prototype // truePerson.prototype.__proto__ === Object.prototype // trueObject.prototype.__proto__ === null // true

function fetchData(callback) {    setTimeout(() => {        callback(null, { data: 'hello' });    }, 1000);}fetchData((error, result) => {    if (error) {        console.error(error);    } else {        console.log(result);    }});

const promise = new Promise((resolve, reject) => {    setTimeout(() => {        resolve('success');        // reject(new Error('failed'));    }, 1000);});promise    .then(result => console.log(result))    .catch(error => console.error(error));

async function fetchData() {    try {        const result = await fetch('https://api.example.com/data');        const data = await result.json();        return data;    } catch (error) {        console.error(error);    }}fetchData();

console.log('1'); // 同步setTimeout(() => {    console.log('2'); // 宏任务}, 0);Promise.resolve().then(() => {    console.log('3'); // 微任务});console.log('4'); // 同步// 输出顺序：1, 4, 3, 2

// 对象解构const { name, age } = { name: 'Alice', age: 25 };// 数组解构const [a, b, ...rest] = [1, 2, 3, 4, 5];// 默认值const { name = 'Unknown' } = {};

// 数组扩展const arr1 = [1, 2, 3];const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]// 对象扩展const obj1 = { a: 1 };const obj2 = { ...obj1, b: 2 }; // { a: 1, b: 2 }

const name = 'Alice';const greeting = `Hello, ${name}!`;

class Person {    constructor(name) {        this.name = name;    }        sayHello() {        console.log(`Hello, ${this.name}`);    }}class Student extends Person {    constructor(name, grade) {        super(name);        this.grade = grade;    }}

// 导出export const name = 'Alice';export function greet() {    console.log('Hello');}// 导入import { name, greet } from './module.js';

const arr = [1, 2, 3, 4, 5];// map：映射arr.map(x => x * 2); // [2, 4, 6, 8, 10]// filter：过滤arr.filter(x => x > 2); // [3, 4, 5]// reduce：归约arr.reduce((acc, x) => acc + x, 0); // 15// find：查找第一个匹配项arr.find(x => x > 2); // 3// findIndex：查找索引arr.findIndex(x => x > 2); // 2

// 拼接arr.concat([6, 7]); // [1, 2, 3, 4, 5, 6, 7]// 切片arr.slice(1, 3); // [2, 3]// 排序arr.sort((a, b) => a - b); // 升序// 反转arr.reverse(); // [5, 4, 3, 2, 1]

try {    // 可能出错的代码    throw new Error('Something went wrong');} catch (error) {    // 处理错误    console.error(error.message);} finally {    // 无论是否出错都会执行    console.log('Done');}

// 通过 IDdocument.getElementById('myId');// 通过类名document.getElementsByClassName('myClass');// 通过标签名document.getElementsByTagName('div');// 通过选择器document.querySelector('.myClass');document.querySelectorAll('.myClass');

// 修改内容element.textContent = 'Hello';element.innerHTML = '<strong>Hello</strong>';// 修改样式element.style.color = 'red';element.classList.add('active');element.classList.remove('active');// 修改属性element.setAttribute('src', 'image.jpg');element.getAttribute('src');

// 添加事件监听element.addEventListener('click', handleClick);// 移除事件监听element.removeEventListener('click', handleClick);// 事件委托document.addEventListener('click', (e) => {    if (e.target.matches('.btn')) {        // 处理点击    }});

// 深拷贝实现function deepClone(obj) {    if (obj === null || typeof obj !== 'object') return obj;    if (obj instanceof Date) return new Date(obj);    if (obj instanceof Array) return obj.map(item => deepClone(item));    const clone = {};    for (let key in obj) {        if (obj.hasOwnProperty(key)) {            clone[key] = deepClone(obj[key]);        }    }    return clone;}

// 防抖：在事件触发后延迟执行，若期间再次触发则重新计时function debounce(fn, delay) {    let timer = null;    return function(...args) {        clearTimeout(timer);        timer = setTimeout(() => fn.apply(this, args), delay);    };}// 节流：在一定时间内只执行一次function throttle(fn, interval) {    let lastTime = 0;    return function(...args) {        const now = Date.now();        if (now - lastTime >= interval) {            fn.apply(this, args);            lastTime = now;        }    };}

// ES5 原型继承function Parent(name) {    this.name = name;}Parent.prototype.sayHello = function() {    console.log(this.name);};function Child(name, age) {    Parent.call(this, name);    this.age = age;}Child.prototype = Object.create(Parent.prototype);Child.prototype.constructor = Child;