深圳房地产网站设计,重庆电子网站建设,小说网站建设目的,wordpress led主题1. 变量与数据类型
变量声明
JavaScript 提供了三种方式来声明变量#xff1a;
var#xff08;全局或函数作用域#xff0c;不推荐#xff09;let#xff08;块级作用域#xff0c;推荐#xff09;const#xff08;常量#xff0c;块级作用域#xff0c;推荐…1. 变量与数据类型
变量声明
JavaScript 提供了三种方式来声明变量
var全局或函数作用域不推荐let块级作用域推荐const常量块级作用域推荐
var a 10; // 可重新赋值函数作用域
let b 20; // 可重新赋值块级作用域
const c 30; // 不能重新赋值块级作用域数据类型
基本数据类型值类型 Number数字String字符串Boolean布尔值Undefined未定义Null空值Symbol独特值BigInt大整数
let num 42; // Number
let str Hello; // String
let bool true; // Boolean
let notDefined; // Undefined
let emptyValue null; // Null
let uniqueKey Symbol(key); // Symbol
let bigIntNum 9007199254740991n; // BigInt引用数据类型 Object对象Array数组Function函数
let obj { name: Alice, age: 25 };
let arr [1, 2, 3, 4, 5];
let func function() { return Hello; };2. 运算符
JavaScript 提供了多种运算符
算术运算符, -, *, /, %, , --赋值运算符, , -, *, /比较运算符, , !, !, , , , 逻辑运算符, ||, !三元运算符条件 ? 值1 : 值2
let x 10;
let y 5;console.log(x y); // 15
console.log(x y); // true
console.log(x 10); // false严格相等
console.log(x 10); // true类型转换后相等
console.log(x 0 y 0); // true3. 条件语句
let age 18;if (age 18) {console.log(Adult);
} else if (age 13) {console.log(Teenager);
} else {console.log(Child);
}switch 语句
let fruit apple;switch (fruit) {case apple:console.log(Apple selected);break;case banana:console.log(Banana selected);break;default:console.log(Unknown fruit);
}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 j 0;
do {console.log(j);j;
} while (j 5);5. 函数
// 普通函数
function add(a, b) {return a b;
}// 箭头函数
const multiply (a, b) a * b;console.log(add(2, 3)); // 5
console.log(multiply(2, 3)); // 66. 数组操作
let arr [1, 2, 3, 4, 5];// 添加元素
arr.push(6); // [1, 2, 3, 4, 5, 6]// 删除最后一个元素
arr.pop(); // [1, 2, 3, 4, 5]// 遍历数组
arr.forEach((num) console.log(num));// 映射数组每个元素乘以 2
let newArr arr.map(num num * 2);
console.log(newArr); // [2, 4, 6, 8, 10]7. 对象
let person {name: Alice,age: 25,greet: function() {console.log(Hello, this.name);}
};console.log(person.name); // Alice
person.greet(); // Hello, Alice8. 作用域与闭包
function outer() {let count 0;return function inner() {count;console.log(count);};
}const counter outer();
counter(); // 1
counter(); // 2闭包 允许内部函数访问外部函数的变量即使外部函数已经执行完毕。 9. 异步编程
Promise
function fetchData() {return new Promise((resolve) {setTimeout(() resolve(Data loaded), 2000);});
}fetchData().then((data) console.log(data)); // 2秒后输出 Data loadedasync/await
async function getData() {let result await fetchData();console.log(result);
}
getData();10. ES6 语法
解构赋值
let [a, b] [1, 2];
console.log(a, b); // 1 2let { name, age } { name: Alice, age: 25 };
console.log(name, age); // Alice 25展开运算符
let arr1 [1, 2, 3];
let arr2 [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]let obj1 { a: 1, b: 2 };
let obj2 { ...obj1, c: 3 };
console.log(obj2); // {a: 1, b: 2, c: 3}11. DOM 操作
document.getElementById(btn).addEventListener(click, function () {alert(Button clicked!);
});12. 模块化
在现代 JavaScript 中import 和 export 用于模块化
// 导出
export function greet() {return Hello!;
}// 导入
import { greet } from ./module.js;
console.log(greet()); // Hello!总结
概念关键点变量var、let、const数据类型数值、字符串、对象、数组运算符, -, *, /, , 条件语句if-else, switch循环for, while, do-while函数普通函数、箭头函数数组push(), pop(), map(), forEach()对象this 关键字、方法调用作用域块级作用域、闭包异步Promise、async/awaitES6解构、展开运算符DOM 操作document.getElementById
