JavaScript 常用属性和方法：全面解析与实战应用

原创于 2025-12-04 09:14:13 发布 · 1.1k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript #typescript #vue.js #angular #react

js 专栏收录该内容

4 篇文章

订阅专栏

引言

JavaScript 作为前端开发的核心语言，其属性和方法是构建动态、交互式网页的基础。本文将系统梳理 JavaScript 中常用的属性和方法，涵盖基础数据类型、DOM 操作、函数特性、数组处理、对象操作等核心领域，并结合最佳实践与性能优化建议，帮助开发者高效运用这些技术。

一、基础数据类型属性与方法

1.1 字符串（String）

常用属性

length：返回字符串的字符数（Unicode 字符）。
```
const str = "Hello"; console.log(str.length); // 输出 5
```

常用方法

charAt(index)：返回指定索引处的字符。
```
console.log(str.charAt(1)); // 输出 'e'
```

concat(str1, str2, ...)：拼接字符串。

const result = str.concat(" World"); console.log(result); // 输出 "Hello World"

includes(substr)：检查是否包含子字符串。
```
console.log(str.includes("e")); // 输出 true
```
indexOf(substr)：返回子字符串首次出现的索引。
```
console.log(str.indexOf("l")); // 输出 2
```

replace(old, new)：替换子字符串。

const replaced = str.replace("l", "x"); console.log(replaced); // 输出 "Hexxo"

split(separator)：按分隔符分割字符串为数组。

const arr = str.split(""); console.log(arr); // 输出 ['H', 'e', 'l', 'l', 'o']

toUpperCase()/toLowerCase()：转换大小写。

console.log(str.toUpperCase()); // 输出 "HELLO"

1.2 数字（Number）

常用属性

MAX_VALUE/MIN_VALUE：表示最大/最小正数。

console.log(Number.MAX_VALUE); // 输出 1.7976931348623157e+308

NaN：表示“非数字”值。
```
console.log(Number.NaN); // 输出 NaN
```

常用方法

toFixed(n)：保留 n 位小数。

const num = 3.14159; console.log(num.toFixed(2)); // 输出 "3.14"

toString(radix)：转换为指定进制字符串。
```
console.log(10.toString(2)); // 输出 "1010"
```

1.3 布尔（Boolean）

true/false：表示逻辑真/假。

const isTrue = true; console.log(isTrue); // 输出 true

二、DOM 操作属性与方法

2.1 元素属性

id：元素的唯一标识。

const element = document.getElementById("myElement"); console.log(element.id); 
// 输出 "myElement"

classList：操作元素的类名。

element.classList.add("active"); element.classList.remove("inactive");

2.2 元素方法

getElementById(id)：通过 ID 获取元素。

const element = document.getElementById("myElement");

getElementsByClassName(classname)：通过类名获取元素集合。
```
const elements = document.getElementsByClassName("myClass");
```
getElementsByTagName(tagname)：通过标签名获取元素集合。
```
const elements = document.getElementsByTagName("div");
```

createElement(tagname)：创建新元素。

const newElement = document.createElement("button");

appendChild(child)：添加子元素。
```
parentElement.appendChild(newElement);
```

removeChild(child)：移除子元素。

parentElement.removeChild(childElement);

setAttribute(name, value)：设置属性。

element.setAttribute("href", "https://example.com");

addEventListener(type, callback)：绑定事件监听器。

element.addEventListener("click", function() { console.log("Clicked!"); });

三、函数特性与方法

3.1 函数属性

arguments：函数内部的arguments对象，包含所有传入参数。

function sum() { console.log(arguments.length); // 输出参数数量 } sum(1, 2, 3); 
// 输出 3

3.2 函数方法

call(thisArg, ...args)：调用函数并指定this。

function sayName() { console.log(this.name); } 
const obj = { name: "Alice" }; 
sayName.call(obj); // 输出 "Alice"

apply(thisArg, [args])：类似call，但参数为数组。
```
sayName.apply(obj, ["Bob"]); // 输出 "Bob"
```

bind(thisArg, ...args)：返回新函数，绑定this和参数。

const boundSayName = sayName.bind(obj); 
boundSayName(); // 输出 "Alice"

四、数组（Array）属性和方法

4.1 数组属性

length：数组长度。

const arr = [1, 2, 3]; console.log(arr.length); // 输出 3

4.2 数组方法

push(item1, item2, ...)：添加元素到末尾。

arr.push(4, 5); console.log(arr); // 输出 [1, 2, 3, 4, 5]

pop()：移除并返回最后一个元素。

const last = arr.pop(); console.log(last); // 输出 5

shift()：移除并返回第一个元素。

const first = arr.shift(); console.log(first); // 输出 1

unshift(item1, item2, ...)：添加元素到开头。

arr.unshift(0); console.log(arr); // 输出 [0, 2, 3, 4]

splice(start, deleteCount, item1, item2, ...)：修改数组。

arr.splice(1, 2, "a", "b"); 
// 删除 1 个元素，从索引 1 开始
console.log(arr); 
// 输出 [0, "a", "b"]

slice(start, end)：返回新数组。

const subArray = arr.slice(1, 3); 
console.log(subArray); 
// 输出 ["a", "b"]

concat(arr1, arr2, ...)：合并数组。

const merged = arr.concat([5, 6]); 
console.log(merged); 
// 输出 [0, "a", "b", 5, 6]

indexOf(item)：返回元素索引。

console.log(arr.indexOf("a")); // 输出 1

includes(item)：检查是否包含元素。

console.log(arr.includes("b")); // 输出 true

forEach(callback)：遍历数组。

arr.forEach((item) => console.log(item));

map(callback)：创建新数组。

const doubled = arr.map((x) => x * 2); 
console.log(doubled); 
// 输出 [0, 2, 4]

filter(callback)：过滤数组。

const filtered = arr.filter((x) => x > 1); 
console.log(filtered); 
// 输出 [2, 3]

reduce(callback, initialValue)：累积计算。

const sum = arr.reduce((acc, x) => acc + x, 0); 
console.log(sum); // 输出 6

五、对象（Object）属性和方法

5.1 对象属性

constructor：对象的构造函数。

const obj = { name: "Alice" }; 
console.log(obj.constructor); // 输出 Object

5.2 对象方法

hasOwnProperty(property)：检查属性是否存在。

console.log(obj.hasOwnProperty("name")); // 输出 true

toString()：返回对象字符串表示。

console.log(obj.toString()); // 输出 "[object Object]"

valueOf()：返回对象原始值。

console.log(obj.valueOf()); // 输出 { name: "Alice" }

六、Date 对象属性和方法

6.1 Date 属性

now()：返回当前时间戳。

console.log(Date.now()); // 输出当前时间戳

6.2 Date 方法

getFullYear()：获取年份。

const date = new Date(); console.log(date.getFullYear()); // 输出当前年份

getMonth()：获取月份（0-11）。

console.log(date.getMonth()); // 输出当前月份

getDate()：获取日期（1-31）。

console.log(date.getDate()); // 输出当前日期

getDay()：获取星期几（0-6）。

console.log(date.getDay()); // 输出 0-6

getHours()/getMinutes()/getSeconds()：获取时间。
```
console.log(date.getHours()); // 输出当前小时
```

setDate(date)：设置日期。

date.setDate(15); console.log(date); // 输出设置后的日期

七、最佳实践与性能优化

7.1 避免全局变量污染

使用 IIFE（立即执行函数表达式）或模块模式隔离作用域。
```
(function() { const privateVar = "I'm private"; })();
```

7.2 优化 DOM 操作

批量操作：使用 DocumentFragment 减少重绘。

const fragment = document.createDocumentFragment(); 
for (let i = 0; i < 100; i++) { 
    const div = document.createElement("div"); 
    fragment.appendChild(div); 
} 
document.body.appendChild(fragment);