极客笔记js top顶级
Javascript 是一种广泛应用于网页开发的脚本语言，也被称为 JS。它拥有许多强大的功能，可以让网页变得更加交互和生动。在这篇文章中，我们将会详细讨论Javascript的一些顶级特性和用法。
变量声明
变量在Javascript中是用于存储数据值的容器。变量的声明可以使用 var, let, const 关键字来实现。其中，var 是ES5中引入的关键字，而 let 和 const 是ES6中引入的关键字。
使用var关键字声明变量
var x = 10;
var y = "Hello";
使用let关键字声明变量
let a = 20;
使用const关键字声明常量
const PI = 3.14;
数据类型
Javascript中的数据类型包括基本数据类型和引用数据类型。基本数据类型有：String(字符串), Number(数字), Boolean(布尔值), undefined, null。引用数据类型包括：Object, Array, Function。
// 基本数据类型
let name = "Alice";
let age = 25;
let isStudent = true;
// 引用数据类型
let person = {
name: "Bob",
age: 30
};
let fruits = ["apple", "banana", "orange"];
function greet() {
return "Hello!";
}
运算符
Javascript中的运算符包括算术运算符、赋值运算符、比较运算符、逻辑运算符等。以下是一些常用的运算符示例：
算术运算符
let a = 10;
let b = 5;
let sum = a + b;
let difference = a - b;
let product = a * b;
let quotient = a / b;
let remainder = a % b;
比较运算符
let x = 10;
let y = 5;
console.log(x > y); // true
console.log(x < y); // false
console.log(x === y); // false
console.log(x !== y); // true
逻辑运算符
let isSunny = true;
let isRainy = false;
console.log(isSunny && isRainy); // false
console.log(isSunny || isRainy); // true
console.log(!isRainy); // true
控制流
Javascript中的控制流语句包括条件语句和循环语句。条件语句有 if语句、switch语句，循环语句有 for循环、while循环等。
if语句
let age = 20;
if(age >= 18) {
console.log("You are an adult.");
} else {
console.log("You are a minor.");
}
switch语句
let fruit = "apple";
switch(fruit) {
case "apple":
console.log("You like apples.");
break;
case "banana":
console.log("You like bananas.");
break;
default:
console.log("You like other fruits.");
}
for循环
for(let i = 0; i < 5; i++) {
console.log(i);
}
while循环
let count = 0;
while(count < 5) {
console.log(count);
count++;
}
函数
函数是Javascript中的一种重要概念，用于封装可重复使用的代码块。以下是一个简单的函数示例：
function add(a, b) {
return a + b;
}
let result = add(10, 20);
console.log(result); // 30
DOM操作
DOM（文档对象模型）是HTML文档的标准编程接口，它将文档表示为一个树形结构。在Javascript中，可以使用DOM来操作和修改HTML文档。
获取元素
<!DOCTYPE html>
<html>
<body>
<h1 id="title">Hello World!</h1>
<script>
let title = document.getElementById("title");
console.log(title.innerHTML);
</script>
</body>
</html>
修改元素
<!DOCTYPE html>
<html>
<body>
<h1 id="title">Hello World!</h1>
<button onclick="changeText()">Change Text</button>
<script>
function changeText() {
let title = document.getElementById("title");
title.innerHTML = "Goodbye World!";
}
</script>
</body>
</html>
异步编程
Javascript是一种单线程语言，但可以通过异步编程来处理耗时操作，如网络请求、文件读写等。常用的异步编程方式有回调函数、Promise、async/await等。
回调函数
function fetchData(callback) {
setTimeout(() => {
callback("Data fetched successfully");
}, 2000);
}
function displayData(data) {
console.log(data);
}
fetchData(displayData);
Promise
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Data fetched successfully");
}, 2000);
});
}
fetchData().then(data => {
console.log(data);
});
async/await
function fetchData() {
return new Promise(resolve => {
setTimeout(() => {
resolve("Data fetched successfully");
}, 2000);
});
}
async function displayData() {
let data = await fetchData();
console.log(data);
}
displayData();
ES6新特性
ES6是Javascript的一个重大升级版本，其中引入了许多新特性和语法糖，例如箭头函数、模块化、解构赋值等。
箭头函数
let add = (a, b) => a + b;
console.log(add(10, 20)); // 30
模块化
// math.js
export function add(a, b) {
return a + b;
}
// index.js
import { add } from './math.js';
console.log(add(10, 20)); // 30
解构赋值
let person = {
name: "Alice",
age: 25
};
let { name, age } = person;
console.log(name); // Alice
console.log(age); // 25
总结
Javascript是一种强大灵活的脚本语言，具有丰富的功能和特性。本文涵盖了Javascript的一些顶级特性和用法，包括变量声明、数据类型、运算符、控制流、函数、DOM操作、异步编程、ES6新特性等。