原生 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 文档或其他相关教程。