当前位置: 首页 > article >正文

JavaScript 学习总结

一、基础语法

1. 变量声明

  • var:ES5 中用于声明变量,有函数作用域和变量提升现象。变量提升意味着变量可以在声明之前使用,但其值为 undefined
console.log(a); // 输出: undefined
var a = 10;
  • let:ES6 引入,具有块级作用域。在块级作用域内声明的 let 变量,只在该块级作用域内有效。
{
    let b = 20;
    console.log(b); // 输出: 20
}
console.log(b); // 报错: b is not defined
  • const:同样是 ES6 引入,用于声明常量。一旦声明,其值不能被重新赋值,且也具有块级作用域。
const PI = 3.14159;
PI = 3.14; // 报错: Assignment to constant variable.

2. 注释

  • 单行注释:使用 // 开头,注释本行后面的内容。
// 这是一个单行注释
let num = 10;
  • 多行注释:使用 /* */ 包裹注释内容,可以跨越多行。
/* 
这是一个
多行注释
*/
function add(a, b) {
    return a + b;
}

3. 语句与 运算符

  • 条件语句

    • ifelseelse if

    • switch:多分支选择。

  • 循环语句

    • forfor (let i = 0; i < 5; i++) {}

    • whilewhile (condition) {}

    • do...whiledo {} while (condition)

    • for...of:遍历可迭代对象(如数组)。

    • for...in:遍历对象的可枚举属性。

for (let i = 0; i < 5; i++) {
  console.log(i);
}

const obj = { a: 1, b: 2 };
for (let key in obj) {
  console.log(key, obj[key]);
}
  • 算术运算符+-*/%**(幂运算)。

  • 比较运算符==(值相等)、===(值和类型相等)、!=!==><>=<=

  • 逻辑运算符&&(与)、||(或)、!(非)。

  • 赋值运算符=+=-=*=/=

  • 三元运算符condition ? expr1 : expr2

let a = 10;
let b = 5;
console.log(a > b && a !== 10); // false

 

二、数据类型

1. 基本数据类型

  • undefined:表示变量已声明但未赋值。
let var1;
console.log(var1); // 输出: undefined
  • null:表示一个空值,通常用于表示有意的空值。
let var2 = null;
console.log(var2); // 输出: null
  • boolean:有两个值 true 和 false,用于逻辑判断。
let isDone = true;
if (isDone) {
    console.log('任务完成');
}
  • number:表示整数和浮点数。
let num1 = 10;
let num2 = 3.14;
  • string:用于表示文本数据,可使用单引号、双引号或反引号(模板字面量)。
let str1 = 'Hello';
let str2 = "World";
let str3 = `Hello, ${str2}`; // 模板字面量,可以嵌入表达式
console.log(str3); // 输出: Hello, World
  • symbol:ES6 新增,是一种唯一的、不可变的数据类型,常用于对象属性键,以避免属性名冲突。
let sym1 = Symbol('unique');
let sym2 = Symbol('unique');
console.log(sym1 === sym2); // 输出: false
  • bigint:ES2020 新增,用于表示任意精度的整数,解决了 number 类型的安全整数范围限制问题。
let big1 = BigInt(9007199254740991);
let big2 = BigInt('9007199254740991');

2. 引用数据类型

  • Object:是一种无序的键值对集合,可以存储各种类型的数据。对象,如 {}[]function
let person = {
    name: 'John',
    age: 30,
    address: {
        city: 'New York',
        country: 'USA'
    },
    hobbies: ['reading', 'traveling']
};
console.log(person.name); // 输出: John
  • Array:是一种有序的、可变的列表,可以存储不同类型的数据。
let numbers = [1, 2, 3, 4, 5];
numbers.push(6); // 在数组末尾添加元素
console.log(numbers[2]); // 输出: 3
  • Function:是一种特殊的对象,用于封装可重用的代码块。函数可以作为值传递、存储在变量中、作为参数传递给其他函数等。
function add(a, b) {
    return a + b;
}
let sum = add(3, 5);
console.log(sum); // 输出: 8

 

三、函数

1. 函数定义

  • 函数声明:使用 function 关键字定义函数,具有函数提升特性。
function multiply(a, b) {
    return a * b;
}
let result1 = multiply(4, 5);
console.log(result1); // 输出: 20
  • 函数表达式:将函数赋值给一个变量,没有函数提升特性。
let divide = function (a, b) {
    return a / b;
};
let result2 = divide(10, 2);
console.log(result2); // 输出: 5
  • 箭头函数:ES6 引入的简洁函数定义方式,没有自己的 thisargumentssuper 和 new.target
let square = (x) => x * x;
let result3 = square(3);
console.log(result3); // 输出: 9

// 多个参数
let addNumbers = (a, b) => a + b;

// 无参数
let greet = () => console.log('Hello');

2. 函数参数

  • 默认参数:在函数定义时可以为参数指定默认值。
function greet(name = 'Guest') {
    console.log(`Hello, ${name}`);
}
greet(); // 输出: Hello, Guest
greet('John'); // 输出: Hello, John
  • 剩余参数:使用 ... 语法将多个参数收集到一个数组中。
function sumAll(...numbers) {
    let total = 0;
    for (let num of numbers) {
        total += num;
    }
    return total;
}
let sumResult = sumAll(1, 2, 3, 4, 5);
console.log(sumResult); // 输出: 15

3. 函数作用域和闭包

  • 函数作用域:函数内部可以访问外部作用域的变量,而外部作用域不能访问函数内部的变量。
let outerVar = 10;
function outerFunction() {
    let innerVar = 20;
    console.log(outerVar); // 可以访问外部变量
    console.log(innerVar); // 可以访问内部变量
}
outerFunction();
console.log(innerVar); // 报错: innerVar is not defined
  • 闭包:函数可以记住并访问其所在的词法作用域,即使在函数执行完毕后。闭包常用于创建私有变量和模拟面向对象的封装。
function outer() {
  let count = 0;
  return function inner() {
    count++;
    console.log(count);
  };
}

const counter = outer();
counter(); // 1
counter(); // 2

 

四、对象和数组

1. 对象创建

  • 对象字面量:最常用的创建对象的方式,使用花括号 {} 定义对象的属性和方法。
let car = {
    brand: 'Toyota',
    model: 'Corolla',
    year: 2020,
    start: function () {
        console.log('The car has started.');
    }
};
  • new Object():使用 Object 构造函数创建对象,然后逐个添加属性。
let person = new Object();
person.name = 'Alice';
person.age = 30;

2. 属性访问

  • 点表示法:使用点号 . 访问对象的属性。
console.log(car.brand); // 输出: Toyota
  • 方括号表示法:使用方括号 [] 访问对象的属性,适用于属性名是变量或包含特殊字符的情况。
let propName ='model';
console.log(car[propName]); // 输出: Corolla

3. 继承

  • 传统原型链继承:通过构造函数和原型链实现继承。
function Animal(name) {
    this.name = name;
}
Animal.prototype.speak = function () {
    console.log(this.name +'makes a sound.');
};
function Dog(name, breed) {
    Animal.call(this, name);
    this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
let myDog = new Dog('Buddy', 'Golden Retriever');
myDog.speak(); // 输出: Buddy makes a sound.
  • ES6 class 继承:使用 class 和 extends 关键字实现继承,语法更简洁。
class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(this.name +'makes a sound.');
    }
}
class Dog extends Animal {
    constructor(name, breed) {
        super(name);
        this.breed = breed;
    }
}
let myDog2 = new Dog('Charlie', 'Labrador');
myDog2.speak(); // 输出: Charlie makes a sound.

4. 数组

  • 定义const arr = [1, 2, 3]

  • 常用方法

    • push()pop()shift()unshift()

    • map()filter()reduce()

    • slice()splice()

const numbers = [1, 2, 3];
const doubled = numbers.map((n) => n * 2); // [2, 4, 6]

五、异步编程

1 回调函数

  • 异步操作完成后执行的函数。

setTimeout(function () {
    console.log('First timeout');
    setTimeout(function () {
        console.log('Second timeout');
    }, 1000);
}, 1000);
  • 回调地狱:当多个异步操作嵌套时,代码会变得难以阅读和维护,形成回调地狱。

2. Promise

  • 基本概念Promise 是一个表示异步操作最终完成(或失败)及其结果值的对象。它有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。
  • 方法:then()catch()finally()

let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Success!');
    }, 1000);
});
promise.then(value => {
    console.log(value);
}).catch(error => {
    console.error(error);
});
  • 链式调用:通过 .then() 方法可以将多个 Promise 操作链接起来,解决回调地狱问题。
const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Success"), 1000);
});

promise.then((result) => console.log(result));

3. async/await

  • 基本概念async 函数是一种异步函数,它返回一个 Promise 对象。await 只能在 async 函数内部使用,用于暂停异步函数的执行,直到 Promise 被解决(fulfilled)或被拒绝(rejected)。
  • 基于 Promise 的语法糖,使异步代码看起来像同步代码。

async function fetchData() {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  console.log(data);
}

六、DOM 操作

1 选择元素

  • document.getElementById()

  • document.querySelector()

  • document.querySelectorAll()

const element = document.querySelector("#myElement");

2 修改元素

  • 修改内容:element.textContentelement.innerHTML

  • 修改样式:element.style.property = value

  • 修改属性:element.setAttribute()

element.textContent = "Hello, World!";
element.style.color = "red";

3 事件处理

  • 添加事件监听器:element.addEventListener()

let button = document.getElementById('myButton');
button.addEventListener('click', function () {
    console.log('Button clicked!');
});

4.常见事件类型

  • 鼠标事件:如 click(点击)、dblclick(双击)、mouseover(鼠标悬停)、mouseout(鼠标离开)、mousedown(鼠标按下)、mouseup(鼠标释放)等。
  • 键盘事件:如 keydown(键盘按下)、keyup(键盘释放)、keypress(键盘按下并产生字符)等。
  • 表单事件:如 submit(表单提交)、input(输入框内容改变)、change(表单元素值改变)等。
let form = document.getElementById('myForm');
form.addEventListener('submit', function (event) {
    event.preventDefault(); // 阻止表单默认提交行为
    console.log('Form submitted');
});

七、ES6+ 新特性

1 解构赋值

  • 从数组或对象中提取值。

const [a, b] = [1, 2];
const { name, age } = { name: "Alice", age: 25 };

2 模板字符串

  • 使用反引号(``)定义字符串,支持多行和嵌入表达式。

const name = "Alice";
console.log(`Hello, ${name}!`);

3 模块化

  • 使用 import 和 export 导入和导出模块。

// math.js
export const add = (a, b) => a + b;

// main.js
import { add } from "./math.js";
console.log(add(2, 3)); // 5

八、 常用 API__内置函数方法

1 数组方法

数组是 JavaScript 中最常用的数据结构之一,以下是一些常用的数组方法:

map():对数组中的每个元素执行函数,并返回新数组。

const numbers = [1, 2, 3];
const doubled = numbers.map((n) => n * 2); // [2, 4, 6]

filter():过滤数组,返回满足条件的元素组成的新数组。

const evens = numbers.filter((n) => n % 2 === 0); // [2]

reduce():将数组元素累积为一个值。

const sum = numbers.reduce((acc, n) => acc + n, 0); // 6

find():返回数组中第一个满足条件的元素。

const firstEven = numbers.find((n) => n % 2 === 0); // 2

 some():检查数组中是否有元素满足条件。

const hasEven = numbers.some((n) => n % 2 === 0); // true

 every():检查数组中的所有元素是否都满足条件。

const allEven = numbers.every((n) => n % 2 === 0); // false

2.字符串 API

字符串是 JavaScript 中的基本数据类型之一,以下是一些常用的字符串方法:

split():将字符串按指定分隔符拆分为数组。

const str = "hello,world";
const arr = str.split(","); // ["hello", "world"]

join():将数组元素按指定分隔符拼接为字符串。

const newStr = arr.join("-"); // "hello-world"

substring():提取字符串的子串。

const sub = str.substring(0, 5); // "hello"

replace():替换字符串中的内容。

const newStr = str.replace("world", "JavaScript"); // "hello,JavaScript"

 toUpperCase():将字符串转换为大写。

const upper = str.toUpperCase(); // "HELLO,WORLD"

toLowerCase():将字符串转换为小写。

const lower = str.toLowerCase(); // "hello,world"

3. 对象 API

对象是 JavaScript 中的核心数据结构,以下是一些常用的对象方法:

Object.keys():返回对象的所有键组成的数组。

const obj = { a: 1, b: 2 };
const keys = Object.keys(obj); // ["a", "b"]

Object.values():返回对象的所有值组成的数组。

const values = Object.values(obj); // [1, 2]

Object.entries():返回对象的键值对组成的数组。

const entries = Object.entries(obj); // [["a", 1], ["b", 2]]

 Object.assign():将一个或多个对象的属性复制到目标对象。

const target = { a: 1 };
const source = { b: 2 };
const result = Object.assign(target, source); // { a: 1, b: 2 }

4. 日期 API

JavaScript 提供了 Date 对象来处理日期和时间。

 new Date():创建日期对象。

const now = new Date(); // 当前时间

getFullYear():获取年份。

const year = now.getFullYear(); // 2025

 getMonth():获取月份(0-11)。

const month = now.getMonth(); // 1 (表示 2 月)

getDate():获取日期(1-31)。

const date = now.getDate(); // 12

getHours():获取小时(0-23)。

const hours = now.getHours(); // 14

5.网络请求 API

JavaScript 提供了 fetch API 用于发送网络请求。

fetch():发送 HTTP 请求并获取响应。

fetch("https://api.example.com/data")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

6. 浏览器环境 API

JavaScript 可以通过浏览器提供的 API 操作 DOM 和浏览器环境。

 document.querySelector():选择 DOM 元素。

const element = document.querySelector("#myElement");

 element.addEventListener():为 DOM 元素添加事件监听器。

element.addEventListener("click", () => {
  console.log("Element clicked");
});

localStorage:在浏览器中存储数据。

localStorage.setItem("name", "Alice");
const name = localStorage.getItem("name"); // "Alice"

 sessionStorage:在浏览器会话中存储数据。

sessionStorage.setItem("token", "12345");
const token = sessionStorage.getItem("token"); // "12345"

7. 数学 API

JavaScript 提供了 Math 对象来处理数学运算。

Math.random():生成 0 到 1 之间的随机数。

const random = Math.random(); // 0.123456789

 Math.floor():向下取整。

const num = Math.floor(3.7); // 3

 Math.ceil():向上取整。

const num = Math.ceil(3.2); // 4

 Math.round():四舍五入。

const num = Math.round(3.5); // 4

九、最佳实践

1 代码风格

  • 使用 const 和 let 代替 var

  • 使用箭头函数简化代码。

  • 使用模板字符串代替字符串拼接。

2 错误处理

  • 使用 try...catch 捕获异常。

try {
  // 可能出错的代码
} catch (error) {
  console.error(error);
}

3 性能优化

  • 避免全局变量。

  • 使用事件委托减少事件监听器数量。

  • 使用 requestAnimationFrame 优化动画。

 


http://www.kler.cn/a/502403.html

相关文章:

  • 【Uniapp-Vue3】页面生命周期onLoad和onReady
  • SOME/IP 协议详解——服务发现
  • OceanBase数据库设计与管理:构建高效分布式数据架构基石
  • 金融项目实战 04|JMeter实现自动化脚本接口测试及持续集成
  • android framework.jar 在应用中使用
  • 非PHP开源内容管理系统(CMS)一览
  • linux设置http,https代理
  • 系统看门狗配置--以ubuntu为例
  • 数据分析-使用Excel透视图/表分析禅道数据
  • linux网络 | 深度理解https加密过程 | 模拟设计方案
  • Springcloudgateway 请求无响应,要怎么处理
  • 在 Alpine Linux 下通过 Docker 部署 PostgreSQL 服务器
  • FFmpeg硬件解码
  • Redis HyperLogLog
  • linux 安装docker-compose
  • 黑马linux笔记(03)在Linux上部署各类软件 MySQL5.7/8.0 Tomcat(JDK) Nginx RabbitMQ
  • 基于单片机的数字气压计设计
  • 《零基础Go语言算法实战》【题目 2-25】goroutine 的执行权问题
  • 全网首发:嵌入式交叉编译libssh,正确编译脚本
  • LLM进化下的Agent演变及软件重构下的一点思考
  • Golang学习笔记_22——Reader示例
  • java项目之在线文档管理系统源码(springboot+mysql+vue+文档)
  • 从光子到图像——相机如何捕获世界?
  • 53_多级缓存基础环境搭建
  • doris:数据类型
  • win10电脑 定时关机