JavaScript中对象和数组的常用方法

JavaScript 数组常用方法代码示例

一、遍历与转换

1. forEach()
   遍历数组元素，执行回调函数：

   const arr = [1, 2, 3];
   arr.forEach((item, index) => {
     console.log(`索引：${index}，值：${item}`);
   });
   // 输出：0 1 → 1 2 → 2 3
   

2. map()
   转换数组元素，返回新数组：

   const doubled = [1, 2, 3].map(item => item * 2);
   console.log(doubled); // [2, 4, 6]
   

3. reduce()
   聚合数组元素为单一值（如求和、扁平化数组）：

   // 求和
   const sum = [1, 2, 3].reduce((acc, item) => acc + item, 0);
   console.log(sum); // 6
   // 扁平化二维数组
   const flattened = [[1, 2], [3]].reduce((acc, arr) => acc.concat(arr), []);
   console.log(flattened); // [1, 2, 3]
   

二、元素操作

1. push() / pop()
   尾部增删元素：

   const arr = [1, 2];
   arr.push(3); // [1, 2, 3]
   arr.pop();   // [1, 2]
   

2. splice()
   动态修改数组（删除、插入元素）：

   const arr = [1, 2, 3];
   arr.splice(1, 1, 99); // 从索引1删除1个元素，插入99 → [1, 99, 3]
   

3. slice()
   截取子数组（浅拷贝）：

   const subArr = [1, 2, 3].slice(1, 3); // [2, 3]
   

三、过滤与查找

1. filter()
   筛选满足条件的元素：

   const even = [1, 2, 3].filter(item => item % 2 === 0);
   console.log(even); // [2]
   

2. find() / findIndex()
   查找首个符合条件的元素或索引：

   const found = [1, 2, 3].find(item => item > 1); // 2
   const index = [1, 2].findIndex(item => item === 2); // 1
   

3. includes()
   判断是否包含某值：

   const hasTwo = [1, 2].includes(2); // true
   

四、排序与合并

1. sort()
   按规则排序（默认字符串排序，需自定义数值排序）：

   const sorted = [3, 1, 2].sort((a, b) => a - b); // [1, 2, 3]
   

2. concat() / 扩展运算符
   合并数组（浅拷贝）：

   const merged1 = [1, 2].concat([3]); // [1, 2, 3]
   const merged2 = [...[1, 2], ...[3]]; // [1, 2, 3]
   

3. 自定义合并排序数组
   合并两个有序数组并保持顺序：

   function mergeSorted(a, b) {
     return [...a, ...b].sort((x, y) => x - y);
   }
   console.log(mergeSorted([1, 3], [2, 4])); // [1, 2, 3, 4]
   

JavaScript对象常用方法的DEMO代码示例

一、属性遍历与获取

1. Object.keys() - 获取对象键数组

const person = { name: "Alice", age: 25 };
console.log(Object.keys(person)); // ["name", "age"] 

2. Object.values() - 获取对象值数组

const scores = { math: 90, english: 85 };
console.log(Object.values(scores)); // [90, 85] 

3. Object.entries() - 获取键值对数组

const car = { brand: "Tesla", model: "Model3" };
console.log(Object.entries(car)); 
// [ ["brand", "Tesla"], ["model", "Model3"] ] 

二、属性操作

1. Object.assign() - 对象合并

const target = { a: 1 };
const source = { b: 2 };
const merged = Object.assign(target, source);
console.log(merged); // { a:1, b:2 }（注意是浅拷贝）

2. Object.defineProperty() - 定义属性特性

const obj = {};
Object.defineProperty(obj, "id", {
  value: 1001,
  writable: false,
  enumerable: true
});
obj.id = 2000; // 修改无效（writable:false）
console.log(obj.id); // 1001 

3. delete 操作符

const user = { name: "Bob", temp: "test" };
delete user.temp;
console.log(user); // { name: "Bob" } 

三、属性判断

1. hasOwnProperty() - 检查自有属性

const animal = { type: "cat" };
console.log(animal.hasOwnProperty("type")); // true
console.log(animal.hasOwnProperty("toString")); // false（继承属性）

2. in 操作符

const protoObj = { inheritedProp: true };
const myObj = Object.create(protoObj);
console.log("inheritedProp" in myObj); // true 

四、对象控制

1. Object.freeze() - 冻结对象

const config = { apiUrl: "/data" };
Object.freeze(config);
config.apiUrl = "/new"; // 严格模式下报错
console.log(config.apiUrl); // "/data" 

2. Object.seal() - 密封对象

const sealedObj = { x: 10 };
Object.seal(sealedObj);
sealedObj.x = 20; // 允许修改
sealedObj.y = 30; // 禁止添加
console.log(sealedObj); // { x:20 } 

3. Object.create() - 原型继承

const parent = { greet() { return "Hello!" } };
const child = Object.create(parent);
console.log(child.greet()); // "Hello!" 

注意事项

1. 浅拷贝问题：Object.assign 不会复制嵌套对象（需使用深拷贝工具）
2. 冻结层级：Object.freeze 仅冻结第一层属性（需递归冻结嵌套对象）
3. 原型链操作：Object.create(null) 创建无原型链的纯净对象

完整API文档可参考：MDN Web Docs - JavaScript Objects