面试时必须知道的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年之前或2017年发行的所有电影。因此，调用filter方法时，它将遍历Movies数组并在数组中的每个元素上执行回调函数。如果该元素与布尔语句匹配，它将把该元素添加到新数组中。
注意：filter方法不会更改原始数组，只会创建一个新数组。
8。.map()
该.map()方法映射原始数组中的每个元素，并将其转换为具有所有映射元素的新数组。让我们尝试从Movies数组中获取每个名称。
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
我们得到了电影的所有名称；我们甚至可以从数组内部打印出Years，movie.year或任何其他元素。这使得遍历数组更加容易和简单。
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是数组每次迭代后的总和，第二种方法得分是我们要迭代的元素。该currentTotal服务将有第一次迭代开始，在索引0，我们通过在作为第二个参数。
第一次减少运行，我们得到0，将其加到Ben的得分上，所以0 + 88 =88。现在，88是currentTotal，下一个元素Joel的得分是得分值98，88 + 98 =186。186是newcurrentTotal并迭代直到数组中的最后一个分数。输出为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。
这些是我发现对面试非常有用的一些数组方法。
1. 本站资源转自互联网，源码资源分享仅供交流学习，下载后切勿用于商业用途，否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议，可自由转载、引用，但需署名原版权作者且注明文章出处
3. 未登录无法下载，登录使用金币下载所有资源。
IT小站 » 面试时必须知道的12种数组方法-JavaScript
常见问题FAQ
- 没有金币/金币不足 怎么办？
- 本站已开通每日签到送金币，每日签到赠送五枚金币，金币可累积。
- 所有资源普通会员都能下载吗？
- 本站所有资源普通会员都可以下载，需要消耗金币下载的白金会员资源，通过每日签到，即可获取免费金币，金币可累积使用。
