程序员的JavaScript知识点面试攻略(未完待续,持续更新中)
2023-10-03 14:15:19
数据类型
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.