面试时必须知道的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
- 没有金币/金币不足 怎么办?
- 本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
- 所有资源普通会员都能下载吗?
- 本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。