酒店网站建设方案策划,网站访问量有什么用,网站多语言切换,网站开发执行什么标准号JavaScript (JS) 是一种广泛用于前端开发的编程语言#xff0c;其主要用于实现网页的动态交互功能。要掌握 JavaScript 的基础知识#xff0c;主要需要理解以下几个核心概念#xff1a;
1. 变量与数据类型
JavaScript 提供了不同的数据类型#xff0c;并允许通过 var、le…JavaScript (JS) 是一种广泛用于前端开发的编程语言其主要用于实现网页的动态交互功能。要掌握 JavaScript 的基础知识主要需要理解以下几个核心概念
1. 变量与数据类型
JavaScript 提供了不同的数据类型并允许通过 var、let 和 const 来声明变量。
数据类型 基本类型number数字string字符串boolean布尔值nullundefinedsymbolbigint。引用类型object对象array数组function函数。
let age 25; // number
const name John; // string
let isStudent true; // boolean
let empty null; // null
let unknown; // undefined2. 操作符
算术运算符, -, *, /, %取模**幂运算。赋值运算符, , -, *, /, %。比较运算符!!。逻辑运算符与||或!非。
let a 10;
let b 5;
let result a b; // 15
let isEqual (a b); // false
let logicResult (a b b 10); // true3. 条件语句
条件语句用于根据不同的条件执行不同的代码。
let age 18;
if (age 18) {console.log(You are an adult);
} else {console.log(You are a minor);
}switch 语句用于在多个条件下选择执行某个代码块。
let day 3;
switch (day) {case 1:console.log(Monday);break;case 2:console.log(Tuesday);break;default:console.log(Another day);
}4. 循环
循环允许重复执行某段代码直到满足某个条件。 for 循环 for (let i 0; i 5; i) {console.log(i);
}while 循环 let i 0;
while (i 5) {console.log(i);i;
}do…while 循环 let i 0;
do {console.log(i);i;
} while (i 5);5. 函数
函数是一段可重复使用的代码块可以接受输入参数并返回结果。 声明函数 function greet(name) {return Hello, name;
}
console.log(greet(Alice));箭头函数ES6 引入的简写 const greet (name) Hello, name;
console.log(greet(Alice));6. 对象与数组 对象JavaScript 中的对象是一组键值对的集合键是字符串值可以是任何类型。 let person {name: Alice,age: 25,greet: function() {console.log(Hello, this.name);}
};
person.greet(); // 输出: Hello, Alice数组数组是一种特殊的对象用于存储一组有序的值。 let numbers [1, 2, 3, 4, 5];
console.log(numbers[0]); // 1
numbers.push(6); // 添加元素到数组末尾
console.log(numbers.length); // 67. 作用域与闭包 作用域作用域定义了变量的可访问范围。 全局作用域在代码的任何地方都可以访问全局变量。局部作用域在函数内部声明的变量只能在函数内部访问。 闭包闭包是指函数可以记住并访问它的词法作用域即使函数是在词法作用域之外执行的。 function outer() {let name Alice;return function inner() {console.log(name); // 访问外部函数的变量}
}
let closureFunc outer();
closureFunc(); // 输出: Alice8. 事件与回调函数 事件JavaScript 用于捕捉用户与网页的交互比如点击按钮、输入文本等。 button onclickalert(Button clicked!)Click Me/button回调函数函数作为参数传递并在特定时刻被调用。 function greet(name, callback) {console.log(Hello, name);callback();
}function sayBye() {console.log(Goodbye!);
}greet(Alice, sayBye);9. ES6 新特性
let 和 constlet 用于声明局部变量const 用于声明常量。模板字符串使用反引号 和 ${} 插入变量。let name Alice;
console.log(Hello, ${name}!);解构赋值快速从对象或数组中提取值。let person { name: Alice, age: 25 };
let { name, age } person;
console.log(name, age); // 输出: Alice 25箭头函数简化函数表达式的语法。
10. 异步操作
JavaScript 是单线程语言但可以通过异步操作来避免阻塞程序执行。 Promise用于处理异步操作。 let promise new Promise((resolve, reject) {let success true;if (success) {resolve(Success!);} else {reject(Error!);}
});promise.then((message) {console.log(message);
}).catch((error) {console.error(error);
});async/await简化了异步操作的处理。 async function fetchData() {let result await fetch(https://api.example.com/data);let data await result.json();console.log(data);
}11. 面向对象编程 (OOP)
JavaScript 是一种基于原型的面向对象语言可以通过对象和类来组织代码。
1) 类和对象
类 (Class)ES6 引入了类的语法尽管类在本质上是基于 JavaScript 的原型系统构建的。对象可以通过类来创建对象或使用对象字面量的方式。
class Person {constructor(name, age) {this.name name;this.age age;}greet() {console.log(Hello, my name is ${this.name});}
}let person1 new Person(Alice, 25);
person1.greet(); // 输出: Hello, my name is Alice2) 继承
类可以继承另一个类的属性和方法这使得代码复用更加容易。
class Animal {constructor(name) {this.name name;}speak() {console.log(${this.name} makes a sound.);}
}class Dog extends Animal {speak() {console.log(${this.name} barks.);}
}let dog new Dog(Rex);
dog.speak(); // 输出: Rex barks.12. 模块化
模块化是将代码拆分为多个文件和模块以便于管理和复用。JavaScript 提供了两种常见的模块化方式ES6 模块 和 CommonJS 模块。
1) ES6 模块
使用 export 和 import 关键字来定义和导入模块。
// utils.js
export function add(a, b) {return a b;
}// main.js
import { add } from ./utils.js;
console.log(add(2, 3)); // 输出: 52) CommonJS 模块
在 Node.js 中常用的模块系统使用 module.exports 和 require。
// utils.js
function add(a, b) {return a b;
}
module.exports { add };// main.js
const { add } require(./utils);
console.log(add(2, 3)); // 输出: 513. 异步编程与事件循环
JavaScript 是单线程的但它通过事件循环机制来处理异步任务从而实现非阻塞的执行模式。
1) 事件循环 (Event Loop)
JavaScript 的事件循环负责将异步操作如网络请求、定时器等放入消息队列待主线程空闲时再执行。回调队列 (Callback Queue) 和 微任务队列 (Microtask Queue)微任务队列的优先级高于回调队列Promise.then 属于微任务而 setTimeout 属于回调任务。
console.log(Start);setTimeout(() {console.log(Timeout);
}, 0);Promise.resolve().then(() {console.log(Promise);
});console.log(End);输出顺序
Start
End
Promise
Timeout2) Promise 链式调用
Promise 是异步操作的强大工具可以通过链式调用来处理多个异步操作。
fetch(https://api.example.com/data).then(response response.json()).then(data {console.log(data);}).catch(error {console.error(Error:, error);});3) async/await
async/await 是 Promise 的语法糖使得异步代码更易读和维护。
async function fetchData() {try {let response await fetch(https://api.example.com/data);let data await response.json();console.log(data);} catch (error) {console.error(Error:, error);}
}
fetchData();14. 错误处理
JavaScript 提供了多种方式来捕捉和处理错误确保程序的鲁棒性。
1) try…catch
用于捕获在程序运行时出现的错误并进行处理。
try {let result someUndefinedFunction();
} catch (error) {console.error(An error occurred:, error);
} finally {console.log(This will run regardless of success or failure);
}2) Promise 错误处理
在使用 Promise 时catch 可以用来捕获异步操作中的错误。
fetch(https://api.example.com/data).then(response response.json()).catch(error console.error(Error:, error));3) async/await 错误处理
在 async/await 中推荐使用 try...catch 进行错误处理。
async function fetchData() {try {let response await fetch(https://api.example.com/data);let data await response.json();console.log(data);} catch (error) {console.error(Error:, error);}
}15. DOM 操作
DOM文档对象模型是用于操作网页元素的接口JavaScript 可以通过 DOM API 动态修改页面内容。
1) 获取元素
document.getElementById(id)通过元素的 ID 获取元素。document.querySelector(selector)通过 CSS 选择器获取元素。
let element document.getElementById(myElement);
let button document.querySelector(.myButton);2) 修改元素
修改内容element.textContent 或 element.innerHTML。修改属性element.setAttribute(name, value) 或 element.classList.add(className)。
let heading document.getElementById(heading);
heading.textContent New Heading;let image document.querySelector(img);
image.setAttribute(src, newImage.jpg);3) 添加事件监听器
JavaScript 允许通过 addEventListener 方法为元素绑定事件。
let button document.querySelector(button);
button.addEventListener(click, function() {console.log(Button clicked!);
});16. 本地存储
JavaScript 提供了 Web Storage API 来在浏览器中存储数据。
1) localStorage
localStorage 是持久化的存储除非手动清除或用户清除浏览器数据否则数据不会过期。
localStorage.setItem(key, value);
let value localStorage.getItem(key);
console.log(value); // 输出: value
localStorage.removeItem(key);2) sessionStorage
sessionStorage 只在当前会话期间有效浏览器关闭后数据就会被清除。
sessionStorage.setItem(key, value);
let value sessionStorage.getItem(key);
console.log(value); // 输出: value
sessionStorage.removeItem(key);17. Ajax 和 Fetch API
AJAXAsynchronous JavaScript and XML允许网页在不重新加载的情况下与服务器通信。Fetch API 是现代浏览器提供的用于替代传统 AJAX 请求的工具。
1) XMLHttpRequest
传统的 AJAX 请求方法。
let xhr new XMLHttpRequest();
xhr.open(GET, https://api.example.com/data, true);
xhr.onload function() {if (xhr.status 200) {console.log(xhr.responseText);}
};
xhr.send();2) Fetch API
Fetch API 更现代化返回的是 Promise简化了异步请求的处理。
fetch(https://api.example.com/data).then(response response.json()).then(data console.log(data)).catch(error console.error(Error:, error));
