新加坡网站大全网站总是在建设中
基础语法
变量声明
- var：在 ES6 之前用于声明变量，具有函数作用域。例如：
function example() {var x = 10;if (true) {var x = 20; // 这里的 x 会覆盖外部的 x}console.log(x); // 输出 20
}
example();
- let：ES6 引入，具有块级作用域。例如：
function example() {let x = 10;if (true) {let x = 20; // 这里的 x 只在 if 块内有效}console.log(x); // 输出 10
}
example();
- const：同样是 ES6 引入，用于声明常量，一旦赋值就不能再重新赋值，也具有块级作用域。例如：
const PI = 3.14;
// PI = 3.1415; // 这会报错
数据类型
- 基本数据类型：包括
Number、String、Boolean、Null、Undefined、Symbol（ES6 新增）。例如：
let num = 10;
let str = "Hello";
let bool = true;
let n = null;
let und;
let sym = Symbol('unique');
- 引用数据类型：主要是
Object，数组（Array）、函数（Function）等都属于对象的特殊形式。例如：
let obj = { name: "John", age: 30 };
let arr = [1, 2, 3];
function func() {console.log('Hello');
}
函数
- 函数声明：
function add(a, b) {return a + b;
}
- 函数表达式：
const multiply = function(a, b) {return a * b;
};
- 箭头函数：ES6 引入的简洁语法，没有自己的
this、arguments等。例如：
const divide = (a, b) => a / b;
控制流
条件语句
- if…else：
let num = 10;
if (num > 5) {console.log('Greater than 5');
} else {console.log('Less than or equal to 5');
}
- switch：
let day = 3;
switch (day) {case 1:console.log('Monday');break;case 2:console.log('Tuesday');break;default:console.log('Other day');
}
循环语句
- 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);
面向对象编程
构造函数
function Person(name, age) {this.name = name;this.age = age;this.sayHello = function() {console.log(`Hello, my name is ${this.name}`);};
}let person = new Person('John', 30);
person.sayHello();
原型链
JavaScript 通过原型链实现继承。每个对象都有一个原型对象，通过 __proto__ 访问。例如：
Person.prototype.greet = function() {console.log(`Hi, I'm ${this.name}`);
};
person.greet();
类（ES6）
class Animal {constructor(name) {this.name = name;}speak() {console.log(`${this.name} makes a noise.`);}
}class Dog extends Animal {speak() {console.log(`${this.name} barks.`);}
}let dog = new Dog('Buddy');
dog.speak();
异步编程
回调函数
function fetchData(callback) {setTimeout(() => {let data = 'Some data';callback(data);}, 1000);
}fetchData((data) => {console.log(data);
});
Promise
function fetchData() {return new Promise((resolve, reject) => {setTimeout(() => {let data = 'Some data';resolve(data);// reject(new Error('Something went wrong'));}, 1000);});
}fetchData().then((data) => {console.log(data);}).catch((error) => {console.error(error);});
async/await
async function getData() {try {let data = await fetchData();console.log(data);} catch (error) {console.error(error);}
}getData();
DOM 操作
选择元素
// 通过 ID 选择元素
let elementById = document.getElementById('myId');
// 通过类名选择元素
let elementsByClass = document.getElementsByClassName('myClass');
// 通过标签名选择元素
let elementsByTag = document.getElementsByTagName('p');
// 使用 querySelector
let firstParagraph = document.querySelector('p');
修改元素内容
let element = document.getElementById('myElement');
element.innerHTML = 'New content';
事件处理
let button = document.getElementById('myButton');
button.addEventListener('click', function() {console.log('Button clicked');
});
总结
JavaScript 是一种功能强大的编程语言，广泛应用于前端开发、后端开发（Node.js）等领域。它具有动态类型、灵活的语法和丰富的特性，如异步编程、面向对象编程等。掌握 JavaScript 的基础语法、控制流、函数、面向对象编程、异步编程和 DOM 操作等知识点，对于开发高质量的 Web 应用程序至关重要。同时，随着 ES6 及后续版本的不断发展，JavaScript 不断引入新的特性和语法糖，使得代码更加简洁和易于维护。