Javascript学习笔记之10个原生技巧

简介

这篇学习笔记将会介绍10个用Javascript技巧的原生方法。这些方法将会帮助你提高你的Javascript编程能力，让你写出简单、优雅、高效的代码。

1. 使用 Array.map() 进行数组的元素转换

Array.map() 方法可以将一个数组的所有元素都通过一个提供的函数进行转换。它不会改变原来的数组，而是返回一个新的数组。

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((number) => {
  return number * 2;
});
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

2. 使用 Array.filter() 进行数组的过滤

Array.filter() 方法可以通过一个提供的函数对数组进行过滤。返回一个新的数组，新数组由所有返回值为 true 的元素组成。它不会改变原来的数组。

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

3. 使用 Array.reduce() 进行数组的计算

Array.reduce() 方法可以通过一个提供的函数对数组进行计算，并返回一个计算结果。该函数接收两个参数：第一个是累加器，第二个是当前元素。

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, current) => {
  return accumulator + current;
}, 0);
console.log(sum); // 15

第二个参数，0，代表初始值。在上述示例中，我们从0开始计算每个数字的和，并返回最终结果 15。

4. 使用 Array.concat() 组合两个数组

Array.concat() 方法可以将两个数组进行连接，并返回一个新的数组。

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

5. 使用 Array.slice() 复制一个数组

Array.slice() 方法可以通过指定开始和结束索引，返回一个新的数组，新数组包含原数组指定部分的元素。原来的数组不会被改变。

const originalArray = [1, 2, 3, 4, 5];
const copiedArray = originalArray.slice(0);
console.log(copiedArray); // [1, 2, 3, 4, 5]

6. 使用 Array.some() 进行数组的检查

Array.some() 方法可以检查数组中是否有元素符合提供的函数条件。如果一个元素符合条件，就返回 true，否则返回 false。

const numbers = [1, 2, 3, 4, 5];
const hasEvenNumbers = numbers.some((number) => {
  return number % 2 === 0;
});
console.log(hasEvenNumbers); // true

7. 使用 Array.every() 进行数组的检查

Array.every() 方法可以检查数组中的所有元素是否都符合提供的函数条件。如果所有元素都符合条件，返回 true，否则返回 false。

const numbers = [1, 2, 3, 4, 5];
const isGreaterThanZero = numbers.every((number) => {
  return number > 0;
});
console.log(isGreaterThanZero); // true

8. 使用 Array.find() 查找数组中的元素

Array.find() 方法可以返回数组中符合提供的函数条件的第一个元素。如果没有元素符合条件，则返回 undefined。

const numbers = [1, 2, 3, 4, 5];
const firstEvenNumber = numbers.find((number) => {
  return number % 2 === 0;
});
console.log(firstEvenNumber); // 2

9. 使用 Array.findIndex() 查找数组中元素的索引值

Array.findIndex() 方法可以返回数组中符合提供的函数条件的第一个元素的索引值。如果没有元素符合条件，则返回 -1。

const numbers = [1, 2, 3, 4, 5];
const index = numbers.findIndex((number) => {
  return number % 2 === 0;
});
console.log(index); // 1

10. 使用 Object.assign() 复制对象

Object.assign() 方法可以将一个或多个源对象的属性复制到目标对象中，并返回修改后的目标对象。如果目标对象中已有该属性，则会覆盖原来的属性。

const originalObject = {
  name: 'John',
  age: 25,
  gender: 'male'
};
const copiedObject = Object.assign({}, originalObject);
console.log(copiedObject); // {name: 'John', age: 25, gender: 'male'}

结论

这里展示了10个原生方法。学好这些方法可以帮助你在编写Javascript代码时更加的高效和简单。如果感觉难度较大，可以多用几次，配合相应的代码测试，就可以掌握的更加娴熟。