MONON98's Blog

Appearance

JavaScript 数组与对象操作面试题 ​

1. 请简述 JavaScript 中数组的常用方法 ​

Details

JavaScript 数组提供了许多内置方法，用于操作和处理数组数据。以下是一些常用的数组方法：

1. 增删改查方法 ​

1.1 添加元素 ​

  • push()：在数组末尾添加一个或多个元素，返回新的数组长度。

    javascript
    const arr = [1, 2, 3];
const length = arr.push(4, 5);
console.log(arr); // [1, 2, 3, 4, 5]
console.log(length); // 5

  • unshift()：在数组开头添加一个或多个元素，返回新的数组长度。

    javascript
    const arr = [1, 2, 3];
const length = arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]
console.log(length); // 4

1.2 删除元素 ​

  • pop()：删除数组末尾的元素，返回被删除的元素。

    javascript
    const arr = [1, 2, 3];
const element = arr.pop();
console.log(arr); // [1, 2]
console.log(element); // 3

  • shift()：删除数组开头的元素，返回被删除的元素。

    javascript
    const arr = [1, 2, 3];
const element = arr.shift();
console.log(arr); // [2, 3]
console.log(element); // 1

  • splice(start, deleteCount, ...items)：从指定位置删除元素，并可选地添加新元素，返回被删除的元素数组。

    javascript
    const arr = [1, 2, 3, 4, 5];
const deleted = arr.splice(1, 2, 6, 7);
console.log(arr); // [1, 6, 7, 4, 5]
console.log(deleted); // [2, 3]

1.3 查找元素 ​

  • indexOf(value)：返回指定值在数组中首次出现的索引，若不存在则返回 -1。

    javascript
    const arr = [1, 2, 3, 2, 1];
console.log(arr.indexOf(2)); // 1
console.log(arr.indexOf(4)); // -1

  • lastIndexOf(value)：返回指定值在数组中最后出现的索引，若不存在则返回 -1。

    javascript
    const arr = [1, 2, 3, 2, 1];
console.log(arr.lastIndexOf(2)); // 3

  • includes(value)：判断数组是否包含指定值，返回布尔值。

    javascript
    const arr = [1, 2, 3];
console.log(arr.includes(2)); // true
console.log(arr.includes(4)); // false

  • find(callback)：返回第一个满足回调函数条件的元素，若不存在则返回 undefined。

    javascript
    const arr = [1, 2, 3, 4, 5];
const found = arr.find(item => item > 3);
console.log(found); // 4

  • findIndex(callback)：返回第一个满足回调函数条件的元素的索引，若不存在则返回 -1。

    javascript
    const arr = [1, 2, 3, 4, 5];
const index = arr.findIndex(item => item > 3);
console.log(index); // 3

2. 遍历方法 ​

  • forEach(callback)：遍历数组，对每个元素执行回调函数，无返回值。

    javascript
    const arr = [1, 2, 3];
arr.forEach(item => console.log(item)); // 1, 2, 3

  • map(callback)：遍历数组，对每个元素执行回调函数，返回新的数组。

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

  • filter(callback)：遍历数组，返回满足回调函数条件的元素组成的新数组。

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

  • reduce(callback, initialValue)：遍历数组，对数组元素执行累积操作，返回最终结果。

    javascript
    const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 15

  • some(callback)：遍历数组，判断是否至少有一个元素满足回调函数条件，返回布尔值。

    javascript
    const arr = [1, 2, 3, 4, 5];
const hasEven = arr.some(item => item % 2 === 0);
console.log(hasEven); // true

  • every(callback)：遍历数组，判断是否所有元素都满足回调函数条件，返回布尔值。

    javascript
    const arr = [2, 4, 6, 8, 10];
const allEven = arr.every(item => item % 2 === 0);
console.log(allEven); // true

3. 排序和转换方法 ​

  • sort(compareFunction)：对数组元素进行排序，默认按字符串 Unicode 码点排序。

    javascript
    const arr = [3, 1, 4, 1, 5, 9];
arr.sort((a, b) => a - b);
console.log(arr); // [1, 1, 3, 4, 5, 9]

  • reverse()：反转数组元素的顺序。

    javascript
    const arr = [1, 2, 3, 4, 5];
arr.reverse();
console.log(arr); // [5, 4, 3, 2, 1]

  • join(separator)：将数组元素连接成字符串，使用指定的分隔符。

    javascript
    const arr = [1, 2, 3, 4, 5];
const str = arr.join('-');
console.log(str); // "1-2-3-4-5"

  • toString()：将数组转换为字符串，默认使用逗号分隔。

    javascript
    const arr = [1, 2, 3, 4, 5];
const str = arr.toString();
console.log(str); // "1,2,3,4,5"

  • concat(...arrays)：合并两个或多个数组，返回新的数组。

    javascript
    const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const merged = arr1.concat(arr2);
console.log(merged); // [1, 2, 3, 4, 5, 6]

  • slice(start, end)：返回数组的一部分，从 start 索引开始，到 end 索引结束（不包含 end）。

    javascript
    const arr = [1, 2, 3, 4, 5];
const sliced = arr.slice(1, 4);
console.log(sliced); // [2, 3, 4]

4. 其他方法 ​

  • flat(depth)：将嵌套数组扁平化为指定深度的数组。

    javascript
    const arr = [1, [2, [3, 4]]];
const flattened = arr.flat(2);
console.log(flattened); // [1, 2, 3, 4]

  • flatMap(callback)：先对数组元素执行 map 操作，然后将结果扁平化为一维数组。

    javascript
    const arr = [1, 2, 3];
const result = arr.flatMap(item => [item, item * 2]);
console.log(result); // [1, 2, 2, 4, 3, 6]

  • fill(value, start, end)：用指定值填充数组的指定范围。

    javascript
    const arr = [1, 2, 3, 4, 5];
arr.fill(0, 1, 4);
console.log(arr); // [1, 0, 0, 0, 5]

  • copyWithin(target, start, end)：将数组的一部分复制到同一数组的另一位置。

    javascript
    const arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3, 5);
console.log(arr); // [4, 5, 3, 4, 5]

2. 请简述 JavaScript 中对象的常用操作方法 ​

Details

JavaScript 对象是一种复杂的数据类型，用于存储键值对。以下是一些常用的对象操作方法：

1. 对象创建 ​

  • 对象字面量：

    javascript
    const obj = { name: "John", age: 30 };

  • 构造函数：

    javascript
    function Person(name, age) {
  this.name = name;
  this.age = age;
}
const person = new Person("John", 30);

  • Object.create()：

    javascript
    const prototype = { greet: function() { console.log("Hello"); } };
const obj = Object.create(prototype);
obj.name = "John";

  • Object.assign()：

    javascript
    const obj = Object.assign({}, { name: "John" }, { age: 30 });

  • 展开运算符：

    javascript
    const obj = { ...{ name: "John" }, ...{ age: 30 } };

2. 属性访问 ​

  • 点表示法：

    javascript
    const obj = { name: "John" };
console.log(obj.name); // "John"

  • 方括号表示法：

    javascript
    const obj = { name: "John" };
console.log(obj["name"]); // "John"
const key = "name";
console.log(obj[key]); // "John"

3. 属性修改 ​

  • 添加属性：

    javascript
    const obj = { name: "John" };
obj.age = 30;
console.log(obj); // { name: "John", age: 30 }

  • 修改属性：

    javascript
    const obj = { name: "John", age: 30 };
obj.age = 31;
console.log(obj); // { name: "John", age: 31 }

  • 删除属性：

    javascript
    const obj = { name: "John", age: 30 };
delete obj.age;
console.log(obj); // { name: "John" }

4. 对象遍历 ​

  • for...in 循环：

    javascript
    const obj = { name: "John", age: 30 };
for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key, obj[key]);
  }
}

  • Object.keys()：返回对象自身的可枚举属性名数组。

    javascript
    const obj = { name: "John", age: 30 };
const keys = Object.keys(obj);
console.log(keys); // ["name", "age"]

  • Object.values()：返回对象自身的可枚举属性值数组。

    javascript
    const obj = { name: "John", age: 30 };
const values = Object.values(obj);
console.log(values); // ["John", 30]

  • Object.entries()：返回对象自身的可枚举属性键值对数组。

    javascript
    const obj = { name: "John", age: 30 };
const entries = Object.entries(obj);
console.log(entries); // [["name", "John"], ["age", 30]]

  • Object.getOwnPropertyNames()：返回对象自身的所有属性名（包括不可枚举属性）数组。

    javascript
    const obj = { name: "John", age: 30 };
const props = Object.getOwnPropertyNames(obj);
console.log(props); // ["name", "age"]

5. 对象检测 ​

  • typeof：检查值的类型。

    javascript
    const obj = { name: "John" };
console.log(typeof obj); // "object"

  • instanceof：检查对象是否为指定构造函数的实例。

    javascript
    function Person(name) { this.name = name; }
const person = new Person("John");
console.log(person instanceof Person); // true

  • Object.prototype.toString.call()：检查对象的具体类型。

    javascript
    const obj = { name: "John" };
console.log(Object.prototype.toString.call(obj)); // "[object Object]"
const arr = [1, 2, 3];
console.log(Object.prototype.toString.call(arr)); // "[object Array]"

  • hasOwnProperty()：检查对象是否具有指定的自身属性。

    javascript
    const obj = { name: "John" };
console.log(obj.hasOwnProperty("name")); // true
console.log(obj.hasOwnProperty("toString")); // false

  • in 运算符：检查对象是否具有指定的属性（包括继承的属性）。

    javascript
    const obj = { name: "John" };
console.log("name" in obj); // true
console.log("toString" in obj); // true

6. 对象复制 ​

  • 浅拷贝：

    javascript
    const obj = { name: "John", age: 30 };
const copy = { ...obj };

  • 深拷贝：

    javascript
    const obj = { name: "John", age: 30, address: { city: "New York" } };
const copy = JSON.parse(JSON.stringify(obj));

3. 请解释 JavaScript 中的 Object.keys()、Object.values() 和 Object.entries() 方法 ​

Details

Object.keys()、Object.values() 和 Object.entries() 是 JavaScript 中用于操作对象的常用方法，它们分别返回对象的键、值和键值对数组。

Object.keys() ​

Object.keys() 方法返回一个包含对象自身可枚举属性名的数组。

语法 ​

javascript
Object.keys(obj)

示例 ​

javascript
const obj = { name: "John", age: 30, city: "New York" };
const keys = Object.keys(obj);
console.log(keys); // ["name", "age", "city"]

Object.values() ​

Object.values() 方法返回一个包含对象自身可枚举属性值的数组。

语法 ​

javascript
Object.values(obj)

示例 ​

javascript
const obj = { name: "John", age: 30, city: "New York" };
const values = Object.values(obj);
console.log(values); // ["John", 30, "New York"]

Object.entries() ​

Object.entries() 方法返回一个包含对象自身可枚举属性键值对的数组，每个键值对为一个数组。

语法 ​

javascript
Object.entries(obj)

示例 ​

javascript
const obj = { name: "John", age: 30, city: "New York" };
const entries = Object.entries(obj);
console.log(entries); // [["name", "John"], ["age", 30], ["city", "New York"]]

应用场景 ​

1. 遍历对象 ​

javascript
const obj = { name: "John", age: 30, city: "New York" };

// 使用 Object.keys() 遍历
Object.keys(obj).forEach(key => {
  console.log(key, obj[key]);
});

// 使用 Object.entries() 遍历
Object.entries(obj).forEach(([key, value]) => {
  console.log(key, value);
});

2. 对象转数组 ​

javascript
const obj = { name: "John", age: 30, city: "New York" };

// 转成键值对数组
const entries = Object.entries(obj);
console.log(entries); // [["name", "John"], ["age", 30], ["city", "New York"]]

// 转成 Map
const map = new Map(Object.entries(obj));
console.log(map.get("name")); // "John"

3. 对象操作 ​

javascript
const obj = { name: "John", age: 30, city: "New York" };

// 检查对象是否为空
const isEmpty = Object.keys(obj).length === 0;
console.log(isEmpty); // false

// 获取对象属性数量
const propertyCount = Object.keys(obj).length;
console.log(propertyCount); // 3

注意事项 ​

  • 这些方法只返回对象自身的可枚举属性，不包括继承的属性。
  • 对于数组，Object.keys() 返回数组的索引（字符串形式），Object.values() 返回数组的元素。
  • 这些方法在 ES2017 中引入，在旧版本浏览器中可能需要 polyfill。