后端开发教程 - Java、Spring Boot 实战 - msg200.com
面试必知的 12 个 JavaScript 数组方法
无论是高级程序员、初级程序员还是入门级程序员，我们都有一个共同点：在编程时，我们经常会查阅语法和方法，但在面试中却不可能做到这一点。虽然很多面试官会在你遇到困难时提供帮助和提示，但记住一些方法仍然是一个好习惯。
数组方法
1.push()方法用于在数组末尾添加项目。
const books = ['Cracking the Coding Interview', 'C++ Without Fear'];
books.push('JavaScript');
books;
#Output: ['Cracking the Coding Interview', 'C++ Without Fear', 'JavaScript']
2.unshift()在数组的开头添加值。
books.unshift('');
books;
#Output: ['Cracking the Coding Interview', 'C++ Without Fear', 'JavaScript']
3..pop()从数组中删除最后一个元素。
const cartoons = ['Bugs Bunny', 'Scooby-Doo', 'Mickey Mouse', 'The Powerpuff Girls', 'Dora', 'Pooh']
cartoons.pop();
# 'Pooh'
certoons;
# Output: ['Bugs Bunny', 'Scooby-Doo', 'Mickey Mouse', 'The Powerpuff Girls', 'Dora']
4..shift()从数组中删除第一个元素。
const cartoons = ['Scooby-Doo', 'Mickey Mouse', 'The Powerpuff Girls', 'Dora', 'Pooh']
cartoons.shift();
# 'Bugs Bunny'
certoons;
# Output: ['Bugs Bunny', 'Scooby-Doo', 'Mickey Mouse', 'The Powerpuff Girls', 'Dora', 'Pooh']
5..slice()顾名思义，该方法会从数组中切出一部分。它不会从数组中删除任何元素，而是返回原始数组的副本。
const cartoons = ['Scooby-Doo', 'Mickey Mouse', 'The Powerpuff Girls', 'Dora', 'Pooh']
cartoons.slice();
certoons;
# Output: ['Scooby-Doo', 'Mickey Mouse', 'The Powerpuff Girls', 'Dora', 'Pooh']
.slice()方法接受两个参数，切片开始的索引和切片结束之前的索引。
const cartoons = ['Scooby-Doo', 'Mickey Mouse', 'The Powerpuff Girls', 'Dora', 'Pooh']
cartoons.slice(1, 3);
# Output:['Mickey Mouse', 'The Powerpuff Girls']
If we pass in only one parameter, the .slice() method will slice from the given index to the end of the array.
const cartoons = ['Scooby-Doo', 'Mickey Mouse', 'The Powerpuff Girls', 'Dora', 'Pooh']
cartoons.slice(2);
# Output: ['The Powerpuff Girls', 'Dora', 'Pooh']
6..splice()
该.splice()方法用于向数组中添加、替换和删除项目。
它可以包含多个参数，第一个参数表示元素的索引。第二个参数表示要移除的元素数量。前两个参数之后的每个参数都定义了要添加到数组中的元素。
我们来看下面的例子：
const cartoons = ['Scooby-Doo', 'Mickey Mouse', 'The Powerpuff Girls', 'Dora', 'Pooh']
// # 1
cartoons.splice(1, 0, 'SpongeBob');
// add 'SpongeBob' at index 1
// remove 0 elements
//Output: ['Scooby-Doo', 'SpongeBob', 'Mickey Mouse', 'The Powerpuff Girls', 'Dora', 'Pooh']
// # 2
cartoons.splice(4, 2, 'Patrick Star');
// add 'Patrick Star' at index 5
// remove 2 elements, starting at index 4, which is first given parameter
// Output: ['Scooby-Doo', 'SpongeBob', 'Mickey Mouse', 'The Powerpuff Girls', 'Patrick Star']
// # 3
cartoons.splice(2, 1);
// The item at index 2 will be removed as there aren't any defined parameter to replace it with
// remove 1 elements
// Output: ['Scooby-Doo', 'SpongeBob', 'The Powerpuff Girls', 'Patrick Star']
7..filter()
该.filter()方法传入一个回调函数，该函数会在数组中的每个元素上调用。它接收元素作为参数，并根据该元素是否应包含在新数组中返回一个布尔值。
让我们看下面的例子：
const movies = [
{ name: 'Wonder Woman', year: 2017 },
{ name: 'Dark Phoenix', year: 2019 },
{ name: 'Spider-Man Homecoming', year: 2017 },
{ name: 'Avengers Endgame', year: 2019 },
{ name: 'The Dark Knight', year: 2008 }
]
const filterMovies = movies.filter((movie) => {
return movie.year <= 2017
})
//test filterMovie
console.log(filterMovies)
/*[
{ name: 'Wonder Woman', year: 2017 },
{ name: 'Spider-Man Homecoming', year: 2017 },
{ name: 'The Dark Knight', year: 2008 }
]*/
这里，新数组必须包含 2017 年或之前上映的所有电影。因此，当调用 filter 方法时，它会循环遍历电影数组，并对数组中的每个元素执行回调函数。如果元素与布尔语句匹配，它会将该元素添加到新数组中。
注意：filter方法不会改变原始数组，只会创建一个新数组。
8..map()
该.map()方法映射原始数组中的每个元素，并将其转换为包含所有映射元素的新数组。让我们尝试从电影数组中获取每个名字。
const movies = [
{ name: 'Wonder Woman', year: 2017 },
{ name: 'Dark Phoenix', year: 2019 },
{ name: 'Spider-Man Homecoming', year: 2017 },
{ name: 'Avengers Endgame', year: 2019 },
{ name: 'The Dark Knight', year: 2008 }
]
const moviesName = movies.map((movie) => {
return movie.name
})
console.log(moviesName)
// ['Wonder Woman', 'Dark Phoenix', 'Spider-Man Homecoming', 'Avengers Endgame', 'The Dark Knight']
与方法类似.filter()，.map()接受一个带有单个参数的回调函数，并返回包含我们想要的元素的新数组，在本例中为 movie.name。
9..find()
该方法的目的.find()是在数组中查找单个对象。它仅返回找到的第一个满足指定条件的元素。
const movies = [
{ name: 'Wonder Woman', year: 2017 },
{ name: 'Dark Phoenix', year: 2019 },
{ name: 'Spider-Man Homecoming', year: 2017 },
{ name: 'Avengers Endgame', year: 2019 },
{ name: 'The Dark Knight', year: 2008 }
]
const findMovie = movies.find((movie) => {
return movie.name === 'Dark Phoenix'
})
//Output: { name: 'Dark Phoenix', year: 2019 }
10..forEach()
该.forEach()方法与 for 循环非常相似，但它接受一个函数和一个参数 movie，并且对于每部电影它都会打印出它的名字movie.name。
const movies = [
{ name: 'Wonder Woman', year: 2017 },
{ name: 'Dark Phoenix', year: 2019 },
{ name: 'Spider-Man Homecoming', year: 2017 },
{ name: 'Avengers Endgame', year: 2019 },
{ name: 'The Dark Knight', year: 2008 }
]
movies.forEach((movie) => {
console.log(movie.name)
})
// Wonder Woman
// Dark Phoenix
// Spider-Man Homecoming
// Avengers Endgame
// The Dark Knight
我们获取了所有电影的名称；我们甚至可以打印出年份、电影年份或数组中的任何其他元素。这使得遍历数组变得更加轻松和简单。
11..reduce()
该.reduce()方法对数组中的每个元素运行一个函数，并返回数组中简化后的单个值。我们以测试成绩数组为例，检索数组中所有不同元素的总成绩。
const testScore = [
{ name: 'Ben', score: 88 },
{ name: 'Joel', score: 98 },
{ name: 'Judy', score: 77 },
{ name: 'Anne', score: 88 },
{ name: 'Mike', score: 99 }
]
const filterMovies = testScore.reduce((currentTotal, score) => {
return test.score + currentTotal
}, 0)
//Output: 450
第一个方法currentTotal, 是每次迭代数组后的总和，第二个方法 score 是我们将要迭代的元素。currentTotal将从第一次迭代开始，即我们作为第二个参数传入的索引 0 处。
Reduce 函数第一次运行时，我们得到 0，将其加到 Ben 的分数上，即 0 + 88 = 88。此时，88 为分数currentTotal，下一个元素 Joel 的分数是 98，即 88 + 98 = 186。186 为新的分数currentTotal，迭代器一直迭代到数组中的最后一个分数。输出为 450，这是所有数字相加后得到的结果。
12..includes()
该.include()方法检查数组是否包含某个特定值，并根据该值是否存在返回 true 或 false。让我们最后一次修改示例数组，使用整数代替对象。
const nums= [3, 8, 22, 45, 65, 99]
const includesNum = nums.includes(99)
console.log(includesNum)
// output: true
此函数检查 99 是否是数组中的元素。在这种情况下，输出为 true。如果我们将值更改为 100，则输出将为 false，因为数组不包含值 100。
这些是我发现对于面试非常有用的一些数组方法。
鏂囩珷鏉ユ簮锛�https://dev.to/tanuka16/12-must-know-array-methods-for-the-next-interview-javascript-5dmo