数组对象原生方法
JavaScript 数组和对象的常用原生方法汇总
问题
列举一下 JavaScript 数组和对象有哪些原生方法?
解答
数组方法
修改原数组的方法
const arr = [1, 2, 3];
// push - 末尾添加元素,返回新长度
arr.push(4); // [1, 2, 3, 4]
// pop - 删除末尾元素,返回被删除的元素
arr.pop(); // [1, 2, 3]
// unshift - 开头添加元素,返回新长度
arr.unshift(0); // [0, 1, 2, 3]
// shift - 删除开头元素,返回被删除的元素
arr.shift(); // [1, 2, 3]
// splice - 删除/替换/添加元素
arr.splice(1, 1, 'a'); // [1, 'a', 3]
// sort - 排序
[3, 1, 2].sort((a, b) => a - b); // [1, 2, 3]
// reverse - 反转
[1, 2, 3].reverse(); // [3, 2, 1]
// fill - 填充
[1, 2, 3].fill(0); // [0, 0, 0]
不修改原数组的方法
const arr = [1, 2, 3, 4, 5];
// concat - 合并数组
arr.concat([6, 7]); // [1, 2, 3, 4, 5, 6, 7]
// slice - 截取数组
arr.slice(1, 3); // [2, 3]
// join - 转为字符串
arr.join('-'); // '1-2-3-4-5'
// indexOf / lastIndexOf - 查找索引
arr.indexOf(3); // 2
// includes - 是否包含
arr.includes(3); // true
// find / findIndex - 查找元素/索引
arr.find(x => x > 3); // 4
arr.findIndex(x => x > 3); // 3
// filter - 过滤
arr.filter(x => x > 2); // [3, 4, 5]
// map - 映射
arr.map(x => x * 2); // [2, 4, 6, 8, 10]
// reduce / reduceRight - 累积
arr.reduce((sum, x) => sum + x, 0); // 15
// every / some - 判断
arr.every(x => x > 0); // true
arr.some(x => x > 4); // true
// forEach - 遍历(无返回值)
arr.forEach(x => console.log(x));
// flat / flatMap - 扁平化
[[1, 2], [3, 4]].flat(); // [1, 2, 3, 4]
// at - 按索引取值(支持负数)
arr.at(-1); // 5
静态方法
// Array.isArray - 判断是否为数组
Array.isArray([1, 2]); // true
// Array.from - 类数组转数组
Array.from('abc'); // ['a', 'b', 'c']
Array.from({ length: 3 }, (_, i) => i); // [0, 1, 2]
// Array.of - 创建数组
Array.of(1, 2, 3); // [1, 2, 3]
对象方法
静态方法
const obj = { a: 1, b: 2, c: 3 };
// Object.keys / values / entries - 获取键/值/键值对
Object.keys(obj); // ['a', 'b', 'c']
Object.values(obj); // [1, 2, 3]
Object.entries(obj); // [['a', 1], ['b', 2], ['c', 3]]
// Object.assign - 合并对象(浅拷贝)
Object.assign({}, obj, { d: 4 }); // { a: 1, b: 2, c: 3, d: 4 }
// Object.fromEntries - 键值对转对象
Object.fromEntries([['a', 1], ['b', 2]]); // { a: 1, b: 2 }
// Object.freeze / isFrozen - 冻结对象(不可修改)
Object.freeze(obj);
Object.isFrozen(obj); // true
// Object.seal / isSealed - 密封对象(不可增删属性)
Object.seal(obj);
Object.isSealed(obj); // true
// Object.defineProperty - 定义属性
Object.defineProperty(obj, 'x', {
value: 10,
writable: false,
enumerable: true,
configurable: false
});
// Object.getOwnPropertyDescriptor - 获取属性描述符
Object.getOwnPropertyDescriptor(obj, 'a');
// { value: 1, writable: true, enumerable: true, configurable: true }
// Object.create - 创建对象(指定原型)
const newObj = Object.create(obj); // newObj.__proto__ === obj
// Object.getPrototypeOf / setPrototypeOf - 获取/设置原型
Object.getPrototypeOf(newObj); // obj
// Object.is - 严格相等判断
Object.is(NaN, NaN); // true(比 === 更准确)
// Object.hasOwn - 判断自有属性(ES2022)
Object.hasOwn(obj, 'a'); // true
实例方法
const obj = { a: 1 };
// hasOwnProperty - 判断自有属性
obj.hasOwnProperty('a'); // true
// isPrototypeOf - 判断原型关系
Object.prototype.isPrototypeOf(obj); // true
// toString - 转字符串
obj.toString(); // '[object Object]'
// valueOf - 返回原始值
obj.valueOf(); // { a: 1 }
关键点
- 数组方法分两类:修改原数组(push/pop/splice/sort)和不修改原数组(map/filter/slice)
reduce是最灵活的数组方法,可以实现 map、filter 等功能Object.keys/values/entries只遍历可枚举的自有属性Object.freeze是浅冻结,嵌套对象仍可修改Object.is解决了===的两个问题:NaN === NaN为 false,+0 === -0为 true
目录