js数组常用方法

js数组常用方法有哪些呢？不知道的小伙伴来看看小编今天的分享吧!

数组是一种特殊的变量，它能够一次存放一个以上的值。JS里的"数组"不是数组，而是对象。js里的数组和其他语言中的数组是不同的，实际它并不是数组，而是一种array-like 特性的对象。它只是把索引转化成字符串，用作其属性(键)。

1、filter（）

举例：

我们想要得到这个列表中年龄小于或等于24岁的所有学生。我们需要使用filter方法来过滤掉所有大于 24 岁的学生。

输出：

const students = [

{name: "sam", age: 26, score: 80},

{name: "john", age: 25, score: 86},

{name: "dean", age: 20, score: 78},

{name: "timothy", age: 18, score: 95},

{name: "frank", age: 21, score: 67}

]

const filteredStudents = students.filter((students) => {

//this filter method just takes a single function, which is going to have one parameter of student which is every student/item in the array

// we'd need to return a true or false statement on whether or not we want to include them in the new array

return students.age <= 24

//This line basically stashes all of the students whose ages are less than a 24 in the new filteredStudents array

})

console.log(filteredStudents)

//

所做的就是为每个项目返回 true 或 false。如果为真，则将其添加到新数组中，如果为假，则不添加。它们实际上不会更改你正在过滤的底层对象，因此可以记录学生数组，并且它仍然包含所有项目。在使用这些新数组方法创建新数组时，不必担心更改旧数组。

2、map（）

举例：

map（）允许你获取一个数组并将其转换为一个新数组。在这个中，新数组中的所有项目看起来都略有不同。如果我们想得到每个学生的名字。我们可以通过使用 map() 获取名称数组。

输出：

const students = [

{name: "sam", age: 26, score: 80},

{name: "john", age: 25, score: 86},

{name: "dean", age: 20, score: 78},

{name: "timothy", age: 18, score: 95},

{name: "frank", age: 21, score: 67}

]

const studentNames = students.map((students) => {

//the method takes a single function, with the students/items as a parameter

// here we just return what we want in the new array

return students.name

})

console.log(studentNames)

/*If we print out these student names,

console.log(studentNames)

we get a new array that is just full of all the different names of the students.*/

/******************/

这可以通过数组中的任何内容来完成。例如，当你想要获取一个对象，并且只获取名称或单个键，或者获取一个数组并将其转换为另一个数组时，该方法非常有用。此方法是 JavaScript 数组中最流行的方法之一。

3、find（）

此方法允许你在数组中查找单个对象。这是直截了当的方法。

假设我们想找到一个名叫 john 的学生。

const students = [

{name: "sam", age: 26, score: 80},

{name: "john", age: 25, score: 86},

{name: "dean", age: 20, score: 78},

{name: "timothy", age: 18, score: 95},

{name: "frank", age: 21, score: 67}

]

const singleStudent = students.find((students) => {

return students.name === 'john'

})

console.log(singleStudent)

/*

console.log(singleStudent) will give the everything associated with john in this example, I.e

Object {

age: 25,

name: "john",

score: 86

}

*/

在这个方法中，逻辑是有一个 true 或 false 语句，它将返回第一个计算结果为 true 的数组项。

4、forEach（）

与其他方法不同， forEach() 实际上不返回任何内容，因此不需要 return 语句。假设我们需要打印出 student 数组中所有学生的名字，可以这样做：

const students = [

{name: "sam", age: 26, score: 80},

{name: "john", age: 25, score: 86},

{name: "dean", age: 20, score: 78},

{name: "timothy", age: 18, score: 95},

{name: "frank", age: 21, score: 67}

]

students.forEach((students) => {

console.log(students.name)

})

/*

the result is the name property printed out on the console line after line like so

"sam"

"john"

"dean"

"timothy"

"frank"

*/

这将与 for 循环非常相似，但它将采用一个函数。因此，对于每个数组项，它将执行函数内的代码块。

这种方法只是使处理需要循环项目的数组变得更加容易，因为你不必像通常那样写出笨重而长的for循环语句。

5、some（）

这个方法与我们的大多数其他函数有点不同，它不是返回一个全新的数组，而是返回 true 或 false。所以我们可以检查这个数组中是否有一些学生是未成年人。

const students = [

{name: "sam", age: 26, score: 80},

{name: "john", age: 25, score: 86},

{name: "dean", age: 20, score: 78},

{name: "timothy", age: 18, score: 95},

{name: "frank", age: 21, score: 67}

]

const hasUnderageStudents = students.some((students) => {

return students.age < 18

})

console.log(hasUnderageStudents)

/*

this will return false because there is no underage student in the array.

*/

因此，如果任何学生项目的年龄值低于 18，该函数将返回 true。该方法只是检查数组中是否有任何内容返回 true，如果是，则整个内容返回 true。

6、every（）

此方法与 some() 非常相似，除了检查至少一项以评估为真或假之外，它会检查以确保每一项都符合给定的条件。

如果我使用 some() 代码示例中使用的相同代码。

const students = [

{name: "sam", age: 26, score: 80},

{name: "john", age: 25, score: 86},

{name: "dean", age: 20, score: 78},

{name: "timothy", age: 18, score: 95},

{name: "frank", age: 21, score: 67}

]

const hasUnderageStudents = students.every((students) => {

return students.age < 18

})

console.log(hasUnderageStudents)

// this returns false because there are no ages below 18

如果我要将条件更改为每个项目评估为真的条件，则整个事情都会返回真。

const students = [

{name: "sam", age: 26, score: 80},

{name: "john", age: 25, score: 86},

{name: "dean", age: 20, score: 78},

{name: "timothy", age: 18, score: 95},

{name: "frank", age: 21, score: 67}

]

const hasUnderageStudents = students.every((students) => {

return students.age < 40

})

console.log(hasUnderageStudents)

// this will return true because every single age property is below 40

7、reduce（）

此方法与所有其他方法完全不同，因为它实际上是对数组进行一些操作并返回所有这些不同操作的组合。

假设我想要学生数组中所有项目的总分，通常会进行 for 循环并每次都将分数相加，在循环结束时，将打印出总分。为了避免冗长的过程，你可以使用 reduce() 方法来执行此操作。

简化方法的语法与其他方法不同。它不是采用数组本身，而是采用一个数组和一个属性，用于我们想要将所有内容减少到和在我们的示例中的分数。除了函数之外，它还需要第二个参数，这将是你的起点，在我们的例子中，我们希望从零开始我们的总数。

const students = [

{name: "sam", age: 26, score: 80},

{name: "john", age: 25, score: 86},

{name: "dean", age: 20, score: 78},

{name: "timothy", age: 18, score: 95},

{name: "frank", age: 21, score: 67}

]

const totalScore = students.reduce((currentTotal, students) => {

return students.score + currentTotal

}, 0)

console.log(totalScore)

在代码读取时，我们有 reduce() 方法，该方法对数组中的每一项运行一个函数。

该函数的第一个参数将是该数组的前一次迭代返回的任何内容，第二个参数是数组中的实际项目。

currentTotal 将在第一次迭代时开始，使用我们作为 reduce() 方法的第二个参数传入的任何内容，在我们的例子中为零。

这个 reduce() 方法第一次运行，所以我们得到零和“sam”项。所以它只是做了80 加零并返回那个值，也就是 80。

该方法第二次运行时，返回值 80 成为当前总数，我们的下一项是 'john'，所以它计算了 86 加上我们当前的总数 80，即 166，并将其放回当前总数。它一直这样做，直到我们到达数组中的最后一个项目，该项目将作为 totalScore 变量中的总数输出。

这种方法有点混乱，但是，当你需要对数组中的所有项目进行某种累积操作时，它非常有用，例如，获取所有项目的总价，每日股票价格等。

8、includes（）

此方法不接受函数作为参数。它需要一个参数。它通常用于不需要大量繁重操作的简单数组中。假设你有一堆水果，

const Fruits = [ 'mango', 'apple', 'orange', 'pineapple', 'lemon']

contains() 方法实现的是一种简单方法，是检查某个水果是否在数组中。

const fruits = [ 'mango', 'apple', 'orange', 'pineapple', 'lemon']

const includesApple = fruits.includes('apple')

console.log(includesApple) // this will return true because 'apple' is one of the items inside the array.

以上就是小编今天的分享了，希望可以帮助到大家。

js数组属性和常用方法

JavaScript 数组的常用方法

在我们前端来说数组作为一个常用的类型，今天我们讲一下在实际使用中经常用到的方法和使用场景。

concat() 多数组组合

concat() 可以用来连接两个或多个数组，返回要给新的数组并且不会影响之前的数组。

使用方法：arr.concat(arr1,arr2,......,arrn) 他的参数可以是多个数组。实例如下：

var arr = [1,2,3];var arr1 = [4,5,6];var arr2 = [7,8,9];arr.concat(arr1,arr2)输出结果：[1,2,3,4,5,6,7,8,9]join()将数组元素连接到一起

join()方法是把数组中所有的元素通过指定的分隔符连接成一个统一的字符串。

实例如下：

var arr = ["str1","str2","str3"]arr.join("#")输出结果：str1#str2#str3pop()删除数组的最后元素

pop() 是用来删除数组的最后一个元素。咱们直接上实例：

var arr = ["str1","str2","str3"]arr.pop()输出结果：["str1","str2"]push()往数组结尾添加元素

push() 方法适用于向数组的末尾添加一个或多个元素。

使用方法：

arr.push(obj1,obj2,......objn) 我们可以看到这个方法可以添加多个参数。具体实例如下：

var arr = ["str1","str2","str3"]arr.push("obj1","obj2","obj3")输出结果： ["str1","str2","str3","obj1","obj2","obj3"]unshift()往数组开头添加元素

unshift() 方法适用于向数组的末尾添加一个或多个元素。也可以添加多个参数。具体实例如下：

var arr = ["str1","str2","str3"]arr.unshift("obj1","obj2","obj3")输出结果：["obj1", "obj2", "obj3", "str1", "str2", "str3"forEach() 和for()数组循环遍历

共同点：两者都是用于对数组的循环遍历

var arr = ["str1","str2","str3"]for (let index = 0; index < this.arr.length; index ) { const element = this.arr[index]; console.log(element) }this.arr.forEach(element => { console.log(element)});输出结果相同： ["str1","str2","str3"]

不同点：for 可以中途中断 但是forEach不行他会执行完整个数组元素

var arr = ["str1","str2","str3"]for (let index = 0; index < this.arr.length; index ) { const element = this.arr[index]; console.log(element) if(index==1){ return }}this.arr.forEach(element => { console.log(element) return});输出结果： ["str1","str2"]输出结果： ["str1","str2","str3"]

我们看出for函数只输出了两个值就中断了 但是forEach确将所有的数据都输出了。整个地方是特别容易出错并且不容易找出错误的地方。所以大家一定要区分开两个函数的共同点和区别。

map(）函数

map函数可以根据之前的对象根据某个条件进行某种变换，生成另外一个新的对象。

let arr=[1,2,3] let createArr=arr.map(item=>{ return item*2 }) 输出结果： [2,4,6]filter() 函数

filter函数用于数组中获取过滤符合条件的所有元素，返回过滤后的数组，如果没有符合条件的元素则返回空数组。

let arr=[1,2,3]let arr2=arr.filter(item=>{ return item.value>1})输出结果： [2,3]find()函数

find()函数查找符合条件的值，不过有几点注意事项：

1、返回符合条件的第一个元素的值，多符合也只是返回一个。

2、如果没有符合判断条件的则返回 undefined。

let arr=[1,2,3]let arr2=arr.find(item=>{ return item.value==1})输出结果： [1]