面试时必须知道的12种数组方法-JavaScript

作者 : IT 大叔 本文共4953个字,预计阅读时间需要13分钟 发布时间: 2020-10-9

每个程序员(高级,初级或入门级)的共同点是,我们经常在编码时查找语法和方法,但是在面试中是不可能的。尽管许多面试官会帮助您并给出提示(如果您遇到困难),但是记住一些方法是一种好习惯。

数组方法

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']

.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

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论