原生 JavaScript基本内容和常用特性详解
原生 JavaScript（也称为 Vanilla JS）指的是不依赖于任何框架或库的纯 JavaScript。以下是原生 JavaScript 的一些基本内容和常用特性详解。
目录
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 文档或其他相关教程。
原文地址：https://blog.csdn.net/fengyiyangdeli/article/details/143719342
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！