前言

对前端 对象、数组 数据结构处理API收集,不全但细。

对象篇

Object.assign(target, source1, source2, ...)

• 将一个或多个源对象的属性复制到目标对象中。
• 改变原对象。
• 示例

const target = { a: 1 };
const source = { b: 2, c: 3 };

const result = Object.assign(target, source);

console.log(target); // { a: 1, b: 2, c: 3 }
console.log(result); // { a: 1, b: 2, c: 3 }

Object.keys(obj)

• 返回一个包含对象自身可枚举属性名称的数组。
• 不改变原对象。
• 示例

const obj = { a: 1, b: 2, c: 3 };

const keys = Object.keys(obj);

console.log(keys); // ['a', 'b', 'c']

Object.values(obj)

• 返回一个包含对象自身可枚举属性值的数组。
• 不改变原对象。
• 示例

const obj = { a: 1, b: 2, c: 3 };

const values = Object.values(obj);

console.log(values); // [1, 2, 3]

Object.entries(obj)

• 返回一个包含对象自身可枚举属性键值对的数组。
• 不改变原对象。
• 示例

const obj = { a: 1, b: 2, c: 3 };

const entries = Object.entries(obj);

console.log(entries); // [['a', 1], ['b', 2], ['c', 3]]

Object.freeze(obj)

• 冻结对象，使其属性不可修改。
• 改变原对象。
• 示例

const obj = { a: 1, b: 2 };

Object.freeze(obj);

obj.c = 3; // 无效操作，不会改变对象

console.log(obj); // { a: 1, b: 2 }

Object.seal(obj)

• 封闭对象，使其属性不可添加或删除，但可修改。
• 改变原对象。
• 示例

const obj = { a: 1, b: 2 };

Object.seal(obj);

obj.c = 3; // 无效操作，不会添加属性
delete obj.a; // 无效操作，不会删除属性
obj.b = 4; // 有效操作，属性值可修改

console.log(obj); // { a: 1, b: 4 }

Object.create(proto, propertiesObject)

• 使用指定的原型对象创建一个新对象。
• 不改变原对象。
• 示例

const person = {
  greet() {
    console.log(`Hello, ${this.name}!`);
  }
};

const john = Object.create(person, {
  name: { value: 'John' }
});

john.greet(); // Hello, John!

数组篇

map

• 功能：对数组中的每个元素执行指定的函数，并返回一个新数组，新数组的元素是原始数组经过函数处理后的结果。
• 不会改变原数组。
• 示例：

const numbers = [1, 2, 3, 4, 5];
const multipliedNumbers = numbers.map(num => num * 2);
console.log(multipliedNumbers); // [2, 4, 6, 8, 10]

filter

• 功能：对数组中的每个元素进行测试，并返回一个新数组，新数组包含满足条件的元素。
• 不会改变原数组。
• 示例：

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

reduce

• 功能：使用指定的函数对数组中的每个元素进行累积计算，并返回一个累积结果。
• 不会改变原数组。
• 示例：

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 15

sort

• 功能：对数组进行排序，可以使用自定义的比较函数。
• 会改变原数组。
• 示例：

const numbers = [3, 1, 4, 2, 5];
const sortedNumbers = numbers.sort((a, b) => a - b);
console.log(sortedNumbers); // [1, 2, 3, 4, 5]
console.log(numbers); // [1, 2, 3, 4, 5] (原数组已改变)

find

• 功能：返回数组中满足指定条件的第一个元素。
• 不会改变原数组。
• 示例：

const numbers = [1, 2, 3, 4, 5];
const foundNumber = numbers.find(num => num > 3);
console.log(foundNumber); // 4

findIndex

• 功能：返回数组中满足指定条件的第一个元素的索引。
• 不会改变原数组。
• 示例：

const numbers = [1, 2, 3, 4, 5];
const foundIndex = numbers.findIndex(num => num > 3);
console.log(foundIndex); // 3

some

• 功能：检查数组中是否至少存在一个满足指定条件的元素，返回布尔值。
• 不会改变原数组。
• 示例：

const numbers = [1, 2, 3, 4, 5];
const hasEvenNumber = numbers.some(num => num % 2 === 0);
console.log(hasEvenNumber); // true

every

• 功能：检查数组中的所有元素是否都满足指定条件，返回布尔值。
• 不会改变原数组。
• 示例：

const numbers = [1, 2, 3, 4, 5];
const allPositive = numbers.every(num => num > 0);
console.log(allPositive); // true

slice

• 功能：返回一个从原数组中指定开始索引到结束索引（不包括结束索引）的新数组。
• 不会改变原数组。
• 示例：

const numbers = [1, 2, 3, 4, 5];
const slicedNumbers = numbers.slice(1, 4);
console.log(slicedNumbers); // [2, 3, 4]

concat

• 功能：将多个数组合并为一个新数组。
• 不会改变原数组。
• 示例：

const numbers1 = [1, 2];
const numbers2 = [3, 4, 5];
const mergedNumbers = numbers1.concat(numbers2);
console.log(mergedNumbers); // [1, 2, 3, 4, 5]

push

• 功能：将一个或多个元素添加到数组的末尾，并返回新数组的长度。
• 会改变原数组。
• 示例：

const numbers = [1, 2, 3];
const newLength = numbers.push(4, 5);
console.log(numbers); // [1, 2, 3, 4, 5]
console.log(newLength); // 5

pop

• 功能：移除数组的最后一个元素，并返回移除的元素。
• 会改变原数组。
• 示例：

const numbers = [1, 2, 3];
const removedElement = numbers.pop();
console.log(numbers); // [1, 2]
console.log(removedElement); // 3

shift

• 功能：移除数组的第一个元素，并返回移除的元素。
• 会改变原数组。
• 示例：

const numbers = [1, 2, 3];
const removedElement = numbers.shift();
console.log(numbers); // [2, 3]
console.log(removedElement); // 1

unshift

• 功能：在数组的开头添加一个或多个元素，并返回新数组的长度。
• 会改变原数组。
• 示例：

const numbers = [2, 3, 4];
const newLength = numbers.unshift(0, 1);
console.log(numbers); // [0, 1, 2, 3, 4]
console.log(newLength); // 5

字符串篇

concat

• 功能：将一个或多个字符串与原始字符串连接起来，返回一个新的字符串。
• 不会改变原始字符串。
• 示例：

let str = "Hello";
let newStr = str.concat(", world!");
console.log(str); // 输出 "Hello"
console.log(newStr); // 输出 "Hello, world!"

substring

• 功能：返回一个新的字符串，包含原始字符串的指定部分。
• 不会改变原始字符串。
• 示例：

let str = "Hello, world!";
let newStr = str.substring(0, 5);
console.log(str); // 输出 "Hello, world!"
console.log(newStr); // 输出 "Hello"

slice

• 功能：返回一个新的字符串，包含原始字符串的指定部分。
• 不会改变原始字符串。
• 示例：

let str = "Hello, world!";
let newStr = str.slice(7, 12);
console.log(str); // 输出 "Hello, world!"
console.log(newStr); // 输出 "world"

replace

• 功能：返回一个新的字符串，其中指定的模式被替换为另一个字符串。
• 不会改变原始字符串。
• 示例：

let str = "Hello, world!";
let newStr = str.replace("world", "JavaScript");
console.log(str); // 输出 "Hello, world!"
console.log(newStr); // 输出 "Hello, JavaScript!"

toUpperCase

• 功能：返回一个新的字符串，其中所有字符被转换为大写。
• 不会改变原始字符串。
• 示例：

let str = "Hello, world!";
let newStr = str.toUpperCase();
console.log(str); // 输出 "Hello, world!"
console.log(newStr); // 输出 "HELLO, WORLD!"

toLowerCase

• 功能：返回一个新的字符串，其中所有字符被转换为小写。
• 不会改变原始字符串。
• 示例：

let str = "Hello, world!";
let newStr = str.toLowerCase();
console.log(str); // 输出 "Hello, world!"
console.log(newStr); // 输出 "hello, world!"

trim

• 功能：返回一个新的字符串，其中移除了原始字符串两端的空格。
• 不会改变原始字符串。
• 示例：

let str = "   Hello, world!   ";
let newStr = str.trim();
console.log(str); // 输出 "   Hello, world!   "
console.log(newStr); // 输出 "Hello, world!"

charAt

• 功能：返回指定索引位置的字符。不会改变原始字符串。
• 不会改变原始字符串。
• 示例：

let str = "Hello, world!";
let char = str.charAt(4);
console.log(str); // 输出 "Hello, world!"
console.log(char); // 输出 "o"

split

• 功能：将字符串分割成一个字符串数组，基于指定的分隔符。不会改变原始字符串。
• 不会改变原始字符串。
• 示例：

let str = "Hello, world!";
let arr = str.split(",");
console.log(str); // 输出 "Hello, world!"
console.log(arr); // 输出 ["Hello", " world!"]

indexOf

• 功能：返回指定字符或子字符串在原始字符串中第一次出现的索引位置。
• 不会改变原始字符串。
• 示例：

let str = "Hello, world!";
let index = str.indexOf("o");
console.log(str); // 输出 "Hello, world!"
console.log(index); // 输出 4