JavaScript 这篇就够了

最新推荐文章于 2024-09-19 11:42:19 发布

探索星辰大海

最新推荐文章于 2024-09-19 11:42:19 发布

阅读量772

点赞数 14

文章标签： javascript 开发语言 ecmascript 前端前端框架

本文链接：https://blog.csdn.net/qq_69183322/article/details/136235461

版权

一、JavaScript概述

        JavaScript是一种轻量级的编程语言，它是一种解释型、面向对象的脚本语言，被广泛用于网页开发中，用于实现网页的动态效果和交互功能。JavaScript最初由Netscape公司的Brendan Eich在1995年发明，后来成为互联网上最流行的脚本语言之一。
JavaScript的主要特点包括：
        1. 动态类型：JavaScript是一种动态类型语言，这意味着在编程时不需要显式声明变量的类型，而是在运行时根据实际赋值的类型来确定。
        2. 基于原型的继承：JavaScript使用原型链来实现对象之间的继承关系，这使得对象可以在不需要明确定义类的情况下进行扩展。
        3. 函数是一等公民：JavaScript中的函数被视为对象，可以作为参数传递，也可以作为对象的属性。这为函数式编程提供了可能。
        4. 事件驱动：JavaScript通过事件来处理用户交互，如点击、键盘输入等，这使得网页能够响应用户的操作并做出相应的反应。
        5. 异步编程：JavaScript通过回调函数、Promise和async/await关键字来实现异步编程，这使得JavaScript能够在不影响主线程的情况下处理耗时的操作。

二、JavaScript的运行环境

JavaScript的运行环境主要有两种：
1. 浏览器：JavaScript在浏览器中以解释器的形式运行，每个主流浏览器都内置了JavaScript解释器，如Google的V8、Mozilla的SpiderMonkey等。
2. 服务器：通过Node.js，JavaScript也可以在服务器端运行。Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，它使得JavaScript能够用于构建服务器端的应用程序。

三、Java和JavaScript的区别

Java和JavaScript是两种不同的编程语言，它们的用途和运行环境有很大差别。
1.用途：
        Java 通常用于开发大型、复杂的应用程序，如服务器端应用、手机应用等。
        JavaScript 主要用于网页开发，为网页添加交互功能。
2.运行环境：
        Java 程序运行在Java虚拟机（JVM）上，可以在任何安装了JVM的平台上运行。
        JavaScript 主要在浏览器中运行，但也可以在服务器端运行（如Node.js）。
3.语法：
        Java 语法比较严格，有严格的类型系统。
        JavaScript 语法较灵活，是动态类型语言。
4.对象模型：
        Java 采用类和对象的方式组织代码。
        JavaScript 使用基于原型的对象模型。

四、JavaScript语法

4.1 基础语法：

变量声明与赋值
数据类型（数值、字符串、布尔值、null、undefined）
类型转换
运算符（算术、比较、逻辑、赋值）
控制结构（if、else、switch、for、while、do-while、break、continue）

示例：

// 变量声明与赋值
var number = 10; // 数值
var message = "Hello, world!"; // 字符串
var isTrue = true; // 布尔值
var nullVar = null; // null
var undefinedVar; // undefined

// 类型转换
console.log(typeof number); // 输出： number
console.log(typeof message); // 输出： string
console.log(typeof isTrue); // 输出： boolean
console.log(typeof nullVar); // 输出： object
console.log(typeof undefinedVar); // 输出： undefined

// 运算符
console.log(number + 5); // 算术运算符：加法
console.log(number > 5); // 比较运算符：大于
console.log(isTrue && false); // 逻辑运算符：与
console.log(isTrue || false); // 逻辑运算符：或
let copyNumber = number;
number = 20;
console.log(copyNumber); // 赋值运算符：拷贝number的值

// 控制结构
if (number > 5) {
    console.log("number 大于 5");
} else {
    console.log("number 小于等于 5");
}

// switch 语句
switch (message.charAt(0)) {
    case 'H':
        console.log("Message starts with 'H'");
        break;
    case 'h':
        console.log("Message starts with 'h'");
        break;
    default:
        console.log("Message does not start with 'H' or 'h'");
}

// for 循环
for (let i = 0; i < 5; i++) {
    console.log("i 的值是：", i);
}

// while 循环
let j = 0;
while (j < 5) {
    console.log("j 的值是：", j);
    j++;
}

// do-while 循环
j = 0;
do {
    console.log("j 的值是：", j);
    j++;
} while (j < 5);

// break 和 continue
for (let k = 0; k < 10; k++) {
    if (k === 3) {
        break; // 终止循环
    }
    console.log("k 的值是：", k);
}

for (let l = 0; l < 10; l++) {
    if (l === 3) {
        continue; // 跳过当前迭代
    }
    console.log("l 的值是：", l);
}

4.2 函数与作用域：

函数定义与调用
参数传递（值传递、引用传递）
作用域（全局作用域、局部作用域）
闭包
高阶函数

示例：

// 函数定义与调用
function greet(name) {
    console.log("Hello, " + name + "!");
}
greet("Alice"); // 调用函数并传入参数

// 参数传递
function add(a, b) {
    return a + b;
}
console.log(add(5, 3)); // 值传递：5 和 3 都是基本数据类型，所以是值传递

// 作用域
var globalVar = "我是全局变量";

function showGlobal() {
    console.log(globalVar); // 全局作用域
}

showGlobal(); // 输出：我是全局变量

// 局部作用域
function localScope() {
    var localVar = "我是局部变量";
    console.log(localVar); // 局部作用域
}

localScope(); // 输出：我是局部变量

// 闭包
function createCounter() {
    let count = 0;
    return function() {
        count++;
        console.log("内部计数器的值是：", count);
    }
}

let counter = createCounter();
counter(); // 输出：内部计数器的值是：1
counter(); // 输出：内部计数器的值是：2

// 高阶函数
function highOrderFunction(fn) {
    console.log("高阶函数内部调用：" + fn());
}

function addFive() {
    return 5;
}

highOrderFunction(addFive); // 输出：高阶函数内部调用：5

4.3 对象与类：

对象创建与操作（工厂模式、构造函数、原型链）
类（类定义、继承、方法）
模块化（CommonJS、AMD、ES6模块）

示例：

// 对象创建与操作
// 工厂模式
function createPerson(name, age) {
    var person = {};
    person.name = name;
    person.age = age;
    person.sayName = function() {
        console.log(this.name);
    };
    return person;
}
var person1 = createPerson('Nicholas', 29);
person1.sayName(); // 输出：Nicholas

// 构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayName = function() {
        console.log(this.name);
    };
}
var person2 = new Person('Greg', 25);
person2.sayName(); // 输出：Greg

// 原型链
Person.prototype.sayAge = function() {
    console.log(this.age);
};
person2.sayAge(); // 输出：25

// 类
class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(`${this.name} makes a noise.`);
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name); // 调用父类的constructor(name)
        this.breed = breed;
    }
    speak() {
        console.log(`${this.name} barks.`);
    }
}

let dog = new Dog('Rex', 'German Shepherd');
dog.speak(); // 输出：Rex barks.

// 模块化
// CommonJS
var myModule = require('./myModule');
myModule.doSomething(); // 假设myModule有一个方法doSomething

// AMD
define(['myModule'], function(myModule) {
    myModule.doSomething(); // 假设myModule有一个方法doSomething
});

// ES6模块
import { doSomething } from './myModule';
doSomething(); // 假设myModule有一个方法doSomething

4.4 数组与集合：

数组操作（push、pop、shift、unshift、splice、slice、map、filter、reduce）
集合（Set、Map）
迭代器与生成器
字符串处理：
字符串操作（长度、索引、分割、连接、替换、大小写转换）
正则表达式（匹配、替换、查找、分词）
日期与时间：
Date对象（创建、格式化、操作）
时间对象（性能时间、定时器、延迟执行）
数学运算与随机数：
Math对象（数学运算、随机数生成）

示例：

// 数组操作
let array = [1, 2, 3, 4, 5];
array.push(6); // 末尾添加
console.log(array); // 输出：[1, 2, 3, 4, 5, 6]
array.pop(); // 末尾移除
console.log(array); // 输出：[1, 2, 3, 4, 5]
array.shift(); // 开头移除
console.log(array); // 输出：[2, 3, 4, 5]
array.unshift(0); // 开头添加
console.log(array); // 输出：[0, 2, 3, 4, 5]
array.splice(1, 1); // 从索引1开始删除1个元素
console.log(array); // 输出：[0, 3, 4, 5]
let slicedArray = array.slice(0, 3); // 切片
console.log(slicedArray); // 输出：[0, 3, 4]
let mappedArray = array.map(x => x * 2); // 映射
console.log(mappedArray); // 输出：[0, 6, 8, 10]
let filteredArray = array.filter(x => x > 3); // 过滤
console.log(filteredArray); // 输出：[4, 5]
let reducedArray = array.reduce((acc, x) => acc + x, 0); // 归约
console.log(reducedArray); // 输出：15

// 集合
let set = new Set([1, 2, 3, 4, 4, 5]);
console.log(set); // 输出：Set(5) {1, 2, 3, 4, 5}
let map = new Map();
map.set('key1', 'value1');
map.set('key2', 'value2');
console.log(map.get('key1')); // 输出：value1

// 迭代器与生成器
function* generateNumbers() {
    yield 1;
    yield 2;
    yield 3;
}
let iterator = generateNumbers();
console.log(iterator.next()); // 输出：{ value: 1, done: false }
console.log(iterator.next()); // 输出：{ value: 2, done: false }
console.log(iterator.next()); // 输出：{ value: 3, done: false }
console.log(iterator.next()); // 输出：{ value: undefined, done: true }

// 字符串操作
let str = "Hello, world!";
console.log(str.length); // 输出：13
console.log(str.indexOf('world')); // 输出：7
console.log(str.split(' ')); // 输出：["Hello,", "world!"]
console.log(str.replace('world', 'JavaScript')); // 输出：Hello, JavaScript!
console.log(str.toUpperCase()); // 输出：HELLO, WORLD!

// 正则表达式
let regex = /world/gi;
console.log(str.match(regex)); // 输出：["world", "world"]
console.log(str.search(regex)); // 输出：7（第一个匹配项的索引）

// 日期与时间
let date = new Date();
console.log(date.toString()); // 输出：当前日期和时间
let time = performance.now(); // 性能时间
console.log(time); // 输出：从页面加载开始到现在的毫秒数

// 定时器
setTimeout(() => console.log('定时器执行'), 2000); // 2秒后执行

// 数学运算与随机数
console.log(Math.round(5.7)); // 输出：6
console.log(Math.random()); // 输出：0到1之间的随机数

4.5 DOM操作：

DOM树（节点、属性、内容、样式）
事件处理（事件流、事件类型、事件处理程序）
动画与过渡（CSS动画、JavaScript动画）
表单与文件处理：
表单提交与验证
文件读取与上传

示例：

// DOM操作
// 获取元素
let body = document.body;
let header = document.getElementById('header');
let list = document.getElementsByTagName('li');
let querySelector = document.querySelector('.menu');

// 修改内容
header.textContent = '欢迎来到我的网站';

// 修改属性
header.style.backgroundColor = 'blue';

// 修改样式
header.classList.add('new-class');

// 事件处理
// 事件流
document.addEventListener('click', function(event) {
    console.log('点击了文档');
});

header.addEventListener('click', function(event) {
    console.log('点击了头部');
});

// 事件类型
document.addEventListener('mousemove', function(event) {
    console.log('鼠标移动了', event.clientX, event.clientY);
});

// 事件处理程序
function handleSubmit(event) {
    event.preventDefault(); // 阻止表单默认提交行为
    console.log('表单提交了', event.target);
}

// 动画与过渡
// CSS动画
header.style.transition = 'background-color 1s';
header.style.backgroundColor = 'red';

// JavaScript动画
function animateHeader() {
    let currentColor = header.style.backgroundColor;
    if (currentColor === 'red') {
        header.style.backgroundColor = 'blue';
    } else {
        header.style.backgroundColor = 'red';
    }
}

setInterval(animateHeader, 1000);

// 表单与文件处理
// 表单提交与验证
const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

// 文件读取与上传
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            console.log(e.target.result); // 文件内容
        };
        reader.readAsText(file); // 以文本形式读取文件
    }
});

4.6 网络请求与通信：

AJAX（XMLHttpRequest、Fetch API）
WebSockets
CORS（跨源资源共享）
错误处理与调试：
错误类型（SyntaxError、ReferenceError、TypeError、RangeError、URIError）
try-catch-finally

示例：

// AJAX（通过Fetch API实现）
function fetchData() {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
        .then(response => response.json())
        .then(data => {
            console.log('Fetched data:', data);
        })
        .catch(error => {
            console.error('Error fetching data:', error);
        });
}

// WebSockets
function connectWebSocket() {
    const socket = new WebSocket('ws://localhost:3000');
    socket.onopen = function(event) {
        console.log('WebSocket connection opened:', event);
        socket.send('Hello, Server!');
    };
    socket.onmessage = function(event) {
        console.log('WebSocket message received:', event.data);
    };
    socket.onclose = function(event) {
        console.log('WebSocket connection closed:', event);
    };
    socket.onerror = function(error) {
        console.error('WebSocket error:', error);
    };
}

// CORS（跨源资源共享）
function handleCORS() {
    fetch('https://example.com/api/data', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
        },
    })
    .then(response => response.json())
    .then(data => {
        console.log('CORS data:', data);
    })
    .catch(error => {
        console.error('CORS error:', error);
    });
}

// 错误处理与调试
try {
    // 故意引发错误
    const notExistingVar = null.toString();
    console.log(notExistingVar);
} catch (error) {
    // 错误类型
    if (error instanceof SyntaxError) {
        console.error('SyntaxError:', error.message);
    } else if (error instanceof ReferenceError) {
        console.error('ReferenceError:', error.message);
    } else if (error instanceof TypeError) {
        console.error('TypeError:', error.message);
    } else if (error instanceof RangeError) {
        console.error('RangeError:', error.message);
    } else if (error instanceof URIError) {
        console.error('URIError:', error.message);
    } else {
        console.error('An unknown error occurred:', error);
    }
} finally {
    console.log('This will always run');
}

4.7 ES6及以后的新特性：

let和const
箭头函数
模板字符串
默认参数、扩展操作符
解构赋值
类与继承
模块化（ES6模块、NPM）
集合（Set、Map）
Proxy和Reflect
Promise和async/await

示例：

// let和const
let message = 'Hello, World!';
const pi = 3.14159;

// 箭头函数
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;

// 模板字符串
const name = 'Alice';
const greeting = `Hello, ${name}!`;

// 默认参数、扩展操作符
function greet(name, greeting = 'Hello') {
    return `${greeting},${name}!`;
}

const numbers = [1, 2, 3];
const sum = (...numbers) => numbers.reduce((a, b) => a + b, 0);

// 解构赋值
const { square, cube } = require('./mathFunctions');

// 类与继承
class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(`${this.name} makes a sound.`);
    }
}

class Dog extends Animal {
    constructor(name) {
        super(name);
    }
    bark() {
        console.log(`${this.name} barks.`);
    }
}

const dog = new Dog('Buddy');
dog.speak(); // Buddy makes a sound.
dog.bark(); // Buddy barks.

// 模块化（ES6模块、NPM）
// 假设我们有mathFunctions.js模块
// const { square, cube } = require('./mathFunctions');

// 集合（Set、Map）
const numbersSet = new Set([1, 2, 3, 4, 4, 5]);
numbersSet.add(6);

const numbersMap = new Map();
numbersMap.set('one', 1);
numbersMap.set('two', 2);

// Proxy和Reflect
const person = {
    name: 'Alice',
    age: 25
};

const personProxy = new Proxy(person, {
    get(target, prop) {
        return target[prop] || 'Not Found';
    }
});

console.log(personProxy.name); // Alice
console.log(personProxy.age); // Not Found

// Promise和async/await
function getNumber() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(10);
        }, 1000);
    });
}

async function getSum() {
    const num1 = await getNumber();
    const num2 = await getNumber();
    return num1 + num2;
}

getSum().then(sum => console.log(sum)); // 20

// 使用async/await处理Promise链
function getFirstNumber() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(1);
        }, 1000);
    });
}

function getSecondNumber() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2);
        }, 2000);
    });
}

async function examplePromiseChain() {
    const first = await getFirstNumber();
    const second = await getSecondNumber();
    return first + second;
}

examplePromiseChain().then(sum => console.log(sum)); // 3