返回

ES6与以上版本中数组与对象的常见方法

前端

前言

ES6(ECMAScript 6)作为JavaScript的最新版本之一,为JavaScript带来了许多新特性和改进,其中包括对数组和对象的方法的改进。这些改进使JavaScript开发人员能够更轻松、更有效地处理数据。

数组方法

find()

find() 方法返回数组中第一个符合条件(返回值为true)的值,若找不到符合条件的值,则会返回undefined。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const firstEvenNumber = numbers.find((number) => {
  return number % 2 === 0;
});

console.log(firstEvenNumber); // 2

findIndex()

findIndex() 方法返回数组中第一个符合条件(返回值为true)的成员位置,若找不到符合条件的值,则会返回-1。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const indexOfFirstEvenNumber = numbers.findIndex((number) => {
  return number % 2 === 0;
});

console.log(indexOfFirstEvenNumber); // 1

includes()

includes() 方法检查数组是否包含给定的值,如果包含,则返回true;否则,返回false。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const doesArrayInclude5 = numbers.includes(5);

console.log(doesArrayInclude5); // true

some()

some() 方法检查数组中是否至少有一个元素符合给定的条件,如果至少有一个元素符合,则返回true;否则,返回false。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const isAnyNumberEven = numbers.some((number) => {
  return number % 2 === 0;
});

console.log(isAnyNumberEven); // true

every()

every() 方法检查数组中是否所有元素都符合给定的条件,如果所有元素都符合,则返回true;否则,返回false。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const areAllNumbersEven = numbers.every((number) => {
  return number % 2 === 0;
});

console.log(areAllNumbersEven); // false

map()

map() 方法创建一个新数组,其中每个元素都是原数组中每个元素经过指定函数处理后的结果。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const doubledNumbers = numbers.map((number) => {
  return number * 2;
});

console.log(doubledNumbers); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]

filter()

filter() 方法创建一个新数组,其中只包含原数组中符合指定条件的元素。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter((number) => {
  return number % 2 === 0;
});

console.log(evenNumbers); // [2, 4, 6, 8, 10]

reduce()

reduce() 方法将数组中的所有元素累积为单个值。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const sumOfNumbers = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(sumOfNumbers); // 55

sort()

sort() 方法对数组中的元素进行排序。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

numbers.sort((a, b) => {
  return a - b;
});

console.log(numbers); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

对象方法

Object.assign()

Object.assign() 方法将一个或多个对象的属性拷贝到另一个对象。

const obj1 = {
  name: 'John Doe',
  age: 30,
};

const obj2 = {
  city: 'New York',
  country: 'USA',
};

Object.assign(obj1, obj2);

console.log(obj1); 
// {
//   name: 'John Doe',
//   age: 30,
//   city: 'New York',
//   country: 'USA',
// }

Object.keys()

Object.keys() 方法返回一个数组,其中包含对象的所有属性名称。

const obj = {
  name: 'John Doe',
  age: 30,
  city: 'New York',
  country: 'USA',
};

const keys = Object.keys(obj);

console.log(keys); 
// [ 'name', 'age', 'city', 'country' ]

Object.values()

Object.values() 方法返回一个数组,其中包含对象的所有属性值。

const obj = {
  name: 'John Doe',
  age: 30,
  city: 'New York',
  country: 'USA',
};

const values = Object.values(obj);

console.log(values); 
// [ 'John Doe', 30, 'New York', 'USA' ]

Object.entries()

Object.entries() 方法返回一个数组,其中包含对象的所有属性的键值对。

const obj = {
  name: 'John Doe',
  age: 30,
  city: 'New York',
  country: 'USA',
};

const entries = Object.entries(obj);

console.log(entries); 
// [ [ 'name', 'John Doe' ], [ 'age', 30 ], [ 'city', 'New York' ], [ 'country', 'USA' ] ]

结语

ES6(ECMAScript 6)为JavaScript带来了许多新特性和改进,其中包括对数组和对象的方法的改进。这些改进使JavaScript开发人员能够更轻松、更有效地处理数据。

希望本文对您有所帮助。如果您有任何问题或建议,请随时提出。