17个实用的Javascript数组对象方法

您所在的位置：网站首页 › 红色边框背景图 › 17个实用的Javascript数组对象方法

17个实用的Javascript数组对象方法

2022-06-10 10:29| 来源: 网络整理| 查看: 265

使用这些数组和对象方法，你将无需再次使用for或while循环。.filter()

根据数组的条目是否通过特定条件来创建新数组。

举例

创建一组符合法定饮酒年龄的学生年龄。

const studentsAge = [17, 16, 18, 19, 21, 17]; const ableToDrink = studentsAge.filter( age => age > 18 ); // ableToDrink will be equal to [19, 21] .map()

通过操作另一个数组中的值来创建一个新数组。非常适合数据操作，它经常用于React，因为它是一种不可变的方法。

举例

创建一个数组，在每个数字的开头添加一个$。

const numbers = [2, 3, 4, 5]; const dollars = numbers.map( number => '$' + number); // dollars will be equal to ['$2', '$3', '$4', '$5'] .reduce()

这种经常被忽视的方法使用累加器将数组中的所有项目都减少为单个值。非常适合计算总数。返回的值可以是任何类型（即对象，数组，字符串，整数）。

举例

在数组中添加整数。

const numbers = [5, 10, 15]; const total = numbers.reduce( (accumulator, currentValue) => accumulator + currentValue); // total will be equal to 30

在MDN文档中列出的.reduce（）有一些非常棒的用例，它们提供了有关如何执行平铺数组，通过属性分组对象，以及删除数组中的重复项等操作的示例。

.forEach()

在数组中的每个项目上应用一个函数。

举例

将每个数组项目记录到控制台。

const emotions = ['happy', 'sad', 'angry']; emotions.forEach( emotion => console.log(emotion) ); // Will log the following: // 'happy' // 'sad' // 'angry' .some()

检查数组中是否有项目通过该条件。一个好的用例就是检查用户权限。它也可以类似地用于.forEach（），你可以在每个数组项上执行操作，并在返回真值后跳出循环。

举例

检查数组中是否有'admin'。

const userPrivileges = ['user', 'user', 'user', 'admin']; const containsAdmin = userPrivileges.some( element => element === 'admin'); // containsAdmin will be equal to true .every()

与.some（）类似，但检查数组中的所有项是否通过条件。

举例

检查所有评级是否等于或大于3星。

const ratings = [3, 5, 4, 3, 5]; const goodOverallRating = ratings.every( rating => rating >= 3 ); // goodOverallRating will be equal to true .includes()

检查数组是否包含某个值。类似于.some（），但不是查找通过的条件，而是查看数组是否包含特定值。

举例

检查数组是否包含字符串'waldo'的项目。

const names = ['sophie', 'george', 'waldo', 'stephen', 'henry']; const includesWaldo = names.includes('waldo'); // includesWaldo will be equal to true Array.from()

这是一种基于数组或字符串创建数组的静态方法。还可以将map回调函数作为参数传递给新数组中的数据。老实说，我不太确定为什么有人会通过.map（）方法使用它。

举例

从一个字符串创建一个数组。

const newArray = Array.from('hello'); // newArray will be equal to ['h', 'e', 'l', 'l', 'o']

创建一个数组，该数组的值是其他数组中每个项的值的两倍。

const doubledValues = Array.from([2, 4, 6], number => number * 2); // doubleValues will be equal to [4, 8, 12] Object.values()

返回一个对象值的数组。

举例

const icecreamColors = { chocolate: 'brown', vanilla: 'white', strawberry: 'red', } const colors = Object.values(icecreamColors); // colors will be equal to ["brown", "white", "red"] Object.keys()

返回对象的键阵列。

举例

const icecreamColors = { chocolate: 'brown', vanilla: 'white', strawberry: 'red', } const types = Object.keys(icecreamColors); // types will be equal to ["chocolate", "vanilla", "strawberry"] Object.entries()

创建一个包含对象的键/值对数组的数组。

举例

const weather = { rain: 0, temperature: 24, humidity: 33, } const entries = Object.entries(weather); // entries will be equal to // [['rain', 0], ['temperature', 24], ['humidity', 33]] Array spread

使用扩展运算符（...）扩展数组允许展开数组中的元素。将一堆数组连接在一起时非常有用。当从数组中删除某些元素时避免使用直接splice（）方法，因为它可以与slice（）方法结合使用，以防止数组的直接变异。

举例

合并两个数组。

const spreadableOne = [1, 2, 3, 4]; const spreadableTwo = [5, 6, 7, 8]; const combined = [...spreadableOne, ...spreadableTwo]; // combined will be equal to [1, 2, 3, 4, 5, 6, 7, 8]

删除一个数组元素而不改变原始数组。

const animals = ['squirrel', 'bear', 'deer', 'salmon', 'rat']; const mammals = [...animals.slice(0,3), ...animals.slice(4)]; // mammals will be equal to ['squirrel', 'bear', 'deer', 'rat'] Object spread

扩展对象允许为没有突变的对象添加新的属性和值（即创建新对象），也可以将多个对象组合在一起。需要指出的是，传播对象不会嵌套复制。

举例

添加一个新的对象属性和值，而不会改变原始对象。

const spreadableObject = { name: 'Robert', phone: 'iPhone' }; const newObject = { ...spreadableObject, carModel: 'Volkswagen' } // newObject will be equal to // { carModel: 'Volkswagen', name: 'Robert', phone: 'iPhone' } Function Rest

函数可以使用其余参数语法来接受任意数量的参数作为数组。

举例

显示传递参数的数组。

function displayArgumentsArray(...theArguments) { console.log(theArguments); } displayArgumentsArray('hi', 'there', 'bud'); // Will print ['hi', 'there', 'bud'] Object.freeze()

防止修改现有的对象属性或向对象添加新的属性和值。一般认为const会这样做，但是const只允许修改一个对象。

举例

冻结对象以防止更改name属性。

const frozenObject = { name: 'Robert' } Object.freeze(frozenObject); frozenObject.name = 'Henry'; // frozenObject will be equal to { name: 'Robert' } Object.seal()

停止将任何新属性添加到对象，但仍允许更改现有属性。

举例

密封对象以防止添加wearsWatch属性。

const sealedObject = { name: 'Robert' } Object.seal(sealedObject); sealedObject.name = 'Bob'; sealedObject.wearsWatch = true; // sealedObject will be equal to { name: 'Bob' } Object.assign()

允许将对象组合在一起。此方法也可不用，因为可以改为使用对象扩展语法。与对象扩展运算符一样，Object.assign（）也不会执行深层克隆。

举例

将两个对象组合成一个。

const firstObject = { firstName: 'Robert' } const secondObject = { lastName: 'Cooper' } const combinedObject = Object.assign(firstObject, secondObject); // combinedObject will be equal to { firstName: 'Robert', lastName: 'Cooper' } 文章摘自：17个Javascript数组对象方法更多IT课程，请戳☞在线做实验，高效学编程

【本文地址】

公司简介

联系我们