数组对象原生方法

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