原生 JavaScript（也称为 Vanilla JS）指的是不依赖于任何框架或库的纯 JavaScript。以下是原生 JavaScript 的一些基本内容和常用特性详解。
目录
1. 数据类型
2. 变量声明
3. 控制结构
4. 函数
5. 对象和数组
6. 事件处理
7. DOM 操作
8. Promise 和异步编程
9. 模块化
10. JSON 操作
1. 数据类型
JavaScript 有七种基本数据类型：
-
原始类型：
Number：数字类型，例如42或3.14。String：字符串类型，例如'Hello'或"World"。Boolean：布尔类型，只有两个值：true或false。Undefined：未定义的类型，表示变量未被赋值。Null：表示无值的类型，表示“空”。Symbol：ES6 引入的独特且不可变的数据类型，通常用于对象属性的标识。BigInt：用来表示大于2^53 - 1的整数。
-
引用类型：
Object：对象类型，是键值对的集合。- 数组（Array）：特殊的对象，用于存储有序的数据集合。
- 函数（Function）：也是对象，可以被调用。
2. 变量声明
使用 var、let 和 const 声明变量。
var：函数作用域或全局作用域，允许重复声明。let：块作用域，不允许重复声明。const：块作用域，不允许重新赋值，必须在声明时初始化。
var a = 10;
let b = 20;
const c = 30;
3. 控制结构
JavaScript 提供了多种控制结构，如条件语句和循环语句。
- 条件语句：
if (a > b) {console.log('a is greater than b');
} else if (a < b) {console.log('a is less than b');
} else {console.log('a is equal to b');
}
- 循环语句：
// for 循环
for (let i = 0; i < 5; i++) {console.log(i);
}// while 循环
let i = 0;
while (i < 5) {console.log(i);i++;
}
4. 函数
JavaScript 中的函数也是一种对象，支持高阶函数（即可以接收函数作为参数的函数）。
- 声明函数：
function add(x, y) {return x + y;
}// 箭头函数
const sum = (x, y) => x + y;
5. 对象和数组
- 对象的创建：
let person = {name: 'Alice',age: 25,greet() {console.log(`Hello, my name is ${this.name}`);},
};person.greet(); // Hello, my name is Alice
- 数组的创建和访问：
let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits[0]); // apple
fruits.push('date'); // 添加元素
6. 事件处理
使用原生 JavaScript 可以为 DOM 元素添加事件监听器。
let button = document.getElementById('myButton');
button.addEventListener('click', function() {alert('Button clicked!');
});
7. DOM 操作
JavaScript 可以通过 document 对象操作 HTML 文档。
- 获取元素：
let element = document.querySelector('.myClass');
- 修改内容和样式：
element.textContent = 'New Content';
element.style.color = 'red';
- 创建和添加元素：
let newDiv = document.createElement('div');
newDiv.textContent = 'Hello, World!';
document.body.appendChild(newDiv);
8. Promise 和异步编程
JavaScript 中的 Promise 用于处理异步操作。
let promise = new Promise((resolve, reject) => {setTimeout(() => {resolve('Success!');}, 2000);
});promise.then(result => {console.log(result); // Success!
});
9. 模块化
使用 ES6 语法可以将代码模块化。
- 导出模块：
// myModule.js
export const name = 'Alice';
export function greet() {console.log('Hello!');
}
- 导入模块：
// main.js
import { name, greet } from './myModule.js';
console.log(name); // Alice
greet(); // Hello!
10. JSON 操作
JavaScript 提供了内置的 JSON 对象来处理 JSON 数据格式。
- 字符串化和解析：
let obj = { name: 'Alice', age: 25 };
let jsonString = JSON.stringify(obj); // 转为 JSON 字符串
let parsedObj = JSON.parse(jsonString); // 解析 JSON 字符串
总结
原生 JavaScript 是构建 Web 应用的基础，能够处理 DOM 操作、事件监听、异步请求等核心功能。理解以上这些内容可以帮助你更好地使用和掌握 JavaScript，从而有效地进行 Web 开发。如果你想深入学习原生 JavaScript，可以参考 MDN 文档或其他相关教程。
