返回

程序员的JavaScript知识点面试攻略(未完待续,持续更新中)

前端

数据类型

JavaScript中的数据类型主要分为两种:基本数据类型和引用数据类型。

  • 基本数据类型:包括数字、字符串、布尔值、undefined和null。
  • 引用数据类型:包括对象、数组、函数。

引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中,将会影响程序运行的性能;引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体

类型判断

JavaScript中可以使用typeof操作符来判断数据的类型。typeof操作符返回一个字符串,表示数据的类型。例如:

typeof 1; // "number"
typeof "Hello"; // "string"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof null; // "object"
typeof []; // "object"
typeof {}; // "object"
typeof function() {}; // "function"

需要注意的是,typeof null返回"object"是一个历史遗留问题。实际上,null并不是一个对象。

作用域

JavaScript中的作用域是指变量和函数的可访问范围。JavaScript的作用域分为全局作用域和局部作用域。

  • 全局作用域:全局作用域是整个JavaScript程序都可以访问的作用域。在全局作用域中声明的变量和函数可以在程序的任何地方访问。
  • 局部作用域:局部作用域是函数内部的作用域。在局部作用域中声明的变量和函数只能在该函数内部访问。

变量提升

JavaScript中的变量提升是指变量在编译时被提升到函数或全局作用域的顶部。这意味着,变量可以在声明之前使用。例如:

console.log(a); // undefined
var a = 1;

输出结果是undefined,因为变量a在声明之前被提升到了全局作用域,但此时还没有被赋值。

运算符

JavaScript中的运算符包括算术运算符、赋值运算符、比较运算符、逻辑运算符和位运算符。

  • 算术运算符:+、-、*、/、%
  • 赋值运算符:=、+=、-=、*=、/=、%=
  • 比较运算符:==、===、!=、!==、>、>=、<、<=
  • 逻辑运算符:&&、||、!
  • 位运算符:&、|、^、<<、>>、>>>

控制流

JavaScript中的控制流语句用于控制程序的执行顺序。控制流语句包括if语句、else if语句、else语句、switch语句和循环语句。

  • if语句:if语句用于执行条件成立时的代码块。
  • else if语句:else if语句用于执行条件成立时的代码块,如果前面的if语句条件不成立。
  • else语句:else语句用于执行条件不成立时的代码块。
  • switch语句:switch语句用于执行条件匹配时的代码块。
  • 循环语句:循环语句用于重复执行一段代码块。JavaScript中的循环语句包括for循环、while循环和do while循环。

函数

JavaScript中的函数是代码的块,它可以被多次调用。函数可以接受参数,并可以返回一个值。

function sum(a, b) {
  return a + b;
}

console.log(sum(1, 2)); // 3

数组

JavaScript中的数组是一种有序的数据结构,它可以存储多个值。数组中的值可以使用索引访问。

var arr = [1, 2, 3];

console.log(arr[0]); // 1
console.log(arr[1]); // 2
console.log(arr[2]); // 3

对象

JavaScript中的对象是一种无序的数据结构,它可以存储键值对。对象中的键值对可以使用点号或方括号访问。

var obj = {
  name: "John",
  age: 30
};

console.log(obj.name); // John
console.log(obj["age"]); // 30

闭包

JavaScript中的闭包是指一个函数可以访问另一个函数作用域中的变量。闭包在JavaScript中非常重要,它被广泛用于实现私有变量和方法。

function outer() {
  var a = 1;

  function inner() {
    console.log(a); // 1
  }

  return inner;
}

var inner = outer();

inner(); // 1

原型

JavaScript中的原型是指一个对象可以继承另一个对象的方法和属性。原型在JavaScript中非常重要,它被广泛用于实现对象之间的继承。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function() {
  console.log("Hello, my name is " + this.name);
};

var john = new Person("John", 30);

john.greet(); // Hello, my name is John

事件

JavaScript中的事件是指当某个元素发生某种动作时触发的动作。事件在JavaScript中非常重要,它被广泛用于实现用户交互。

document.getElementById("button").addEventListener("click", function() {
  console.log("Button was clicked");
});

BOM

JavaScript中的BOM(Browser Object Model)是指浏览器对象模型。BOM提供了对浏览器窗口、历史记录、位置和导航的访问。

window.open("https://www.google.com");
window.history.back();
window.location.href = "https://www.google.com";
window.navigator.userAgent;

DOM

JavaScript中的DOM(Document Object Model)是指文档对象模型。DOM提供了对HTML文档的访问。

document.getElementById("button").innerHTML = "Click me";
document.querySelector("ul").appendChild(document.createElement("li"));
document.body.style.backgroundColor = "red";

正则表达式

JavaScript中的正则表达式是一种用于匹配字符串的模式。正则表达式在JavaScript中非常重要,它被广泛用于实现字符串的查找和替换。

var regex = /Hello/;
regex.test("Hello, world!"); // true
regex.exec("Hello, world!"); // ["Hello"]

Ajax

JavaScript中的Ajax(Asynchronous JavaScript and XML)是一种用于异步传输数据的技术。Ajax在JavaScript中非常重要,它被广泛用于实现网站的动态更新。

var xhr = new XMLHttpRequest();

xhr.open("GET", "https://www.google.com");

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

xhr.send();

ES6

JavaScript中的ES6(ECMAScript 6)是JavaScript的最新版本。ES6引入了许多新特性,包括箭头函数、类、模板字符串和模块。

const sum = (a, b) => a + b;

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

let person = new Person("John", 30);

person.greet();

模块化

JavaScript中的模块化是指将代码组织成独立的模块。模块化在JavaScript中非常重要,它可以提高代码的可重用性和可维护性。

import { sum } from "./math.js";

console.log(sum(1, 2)); // 3

Git

Git是一个分布式版本控制系统。Git在JavaScript中非常重要,它可以帮助开发者管理代码库。

git clone https://github.com/username/repository.git
cd repository
git add .
git commit -m "Initial commit"
git push origin main

前端框架

JavaScript中的前端框架是一种用于构建用户界面的工具。前端框架在JavaScript中非常重要,它可以提高开发效率和代码质量。

import React from "react";

const App = () => {
  return (
    <div>
      Hello, world!
    </div>
  );
};

ReactDOM.render(<App />, document.