JavaScript数组方法教学（包教不包会）

2025-02-08 00:00:13 阅读数 341

数组是什么？

数组是一种特殊的变量,它能够一次存放一个以上的值。

创建数组的方法？

1.创建数组直接量

使用方括号直接创建：[ ]

var arr = [1,2,3,4]

2.构造函数法

构造函数就是构造对象的一种模具（函数）构造对象的时候：任何一个函数在构造对象时都要遵守语法：

var arr = new Array（1，2，3，4）

数组的特点？

1.数组是有索引的：

数组的第1个元素索引是0
数组的第2个元素索引是1
......以此类推
数组的最后一个元素是它的长度减一

arr[length-1]

2.比较数组是地址的比较

简单数据类型是比较值（内存中的值）
复杂数据类型是比较址（内存中的地址）

3.复制数组是复制数组地址

简单数据类型是复制值(内存中的值)
复杂数据类型是复制址(内存中的地址)

如何访问数组？

使用方括号[ ]进行访问
方括号里的元素指定数组内没有时，则返回undefined（未定义）

var  arr = [1,2,3]
arr[1]//返回0
arr[4]//返回undefined

如何遍历数组？

1.使用for循环

 var arr = [1,2,3]
     for(var i = 0 ; i < arr.length; i++){
     }

2.使用for Each

定义：array.forEach()方法使用指定函数遍历数组。就是为数组中的每一个元素调用函数。
*注释：对于没有值的数组元素，不执行forEach() 方法。

语法：

 array.forEach(function(item, index, arr), thisValue)

参数：
function：第一个参数是一个函数，必选
thisValue:第二个参数是设置this指向，默认值undefined，可选。
当执行forEach（）方法的时候，每个数组元素都会调用一次函数参数。

调用函数的时候，可以在函数内传入一下三个参数

item: 数组中的一个元素元素，必须。
index: 数组索引，可选。
arr: 当前数组，可选。

返回值：返回undefined

示例：

  var arr = [1,2,3]
        arr.forEach(function(item,index,arr){
            console.log((item,index,arr))
            //console.log(1,0,[1,2,3])
        })
//返回 Array(3) [ 1, 2, 3 ]  Array(3) [ 1, 2, 3 ] Array(3) [ 1, 2, 3 ]

3.for of

数组的length属性？

定义：length 属性设置或返回数组中元素的长度。

语法：

var arr = [1,2,3]
arr.length

返回值：返回数组的长度

示例：

var arr = [1,2,3]
arr.length//返回3

Array.isArray

定义：
Array.isArray()方法用于检测是否为数组。

语法：

Array.isArray(value)

-value : 是要检测的值

返回值：
----如果是数组返回true 不是数组返回false

示例（原则用最简单的例子诠释原理）：

var str = "hello"
var arr = [1,2,3]
conlose.log(Array.isArrag(str)//false
conlose.log(Array.isArrag(arr)//true

arr.push

定义：push() 方法（在数组结尾处）向数组添加新的元素

语法：

Arr.push("kiwi")
kiwi:需要添加的元素。

返回值：
返回新数组长度

示例：

var arr = [1, 2, 3];
console.log(arr.push(4))      //  向 arr添加一个新元素  返回4
console.log(arr.push(4,5,6))//返回7

arr.unshift()

定义：在数组开头添加一个或多个元素

语法：

var arr = [2,3]
arr.unshift(1)//括号里是要在最前面添加的元素

返回值：返回新数组长度

示例：

var arr = [2, 3, 4,5];
arr.unshift(1);    // 返回 5
console.log(arr)//返回[1,2,3,4,5]

arr.pop()

定义：用于删除数组最后一个元素
语法：

var arr = [1,2,3]
arr.pop() 没有参数

返回值：返回删除元素
示例：

var arr = [1,2,3]
arr.pop()//返回3

arr.shift()

定义：用于删除数组开头一个元素

语法：

var arr = [1,2,3]
arr.shift() 没有参数

返回值：返回删除元素

示例：

var arr = [1,2,3]
arr.shift()//返回1

arr.reverse()

定义：反转数组中元素的顺序

语法：

arr.reverse()//无参数。

返回值：数组，表示反转后的数组。

示例：

var arr = [1,2，3, 4];
arr.reverse();//返回[4,3,2,1]

arr.join()

定义：将数组的所有元素连接成一个字符串

语法：

语法

array.join(separator)
//参数separator   描述：可选。要使用的分隔符。如果省略，默认用逗号分隔。

返回值：字符串值，表示数组值，由指定的分隔符分隔

示例：

var arr = ["你", "不", "靠", "秒"];
var str = arr.join("|");//返回：你|不|靠|秒

arr.sort()

定义：对数组的元素进行排序。

语法：参数compareFunction

可选。定义替代排序顺序的函数。该函数应返回负值、零值或正值，具体取决于参数，
例如：
function(a, b){return a-b}
sort() 方法比较两个值时，将值发送给比较函数，根据返回的（负、零、正）值对值进行排序。
举例：

array.sort(compareFunction)

compareFunction 可选。定义替代排序顺序的函数。工作原理：
sort() 方法比较两个值时，将值发送给比较函数，
比较函数应返回负值、零值或正值。例如：function(a, b){return a-b}
根据返回的（负、零、正）值对值进行排序。

返回值：排序后的原数组。

示例：

var arr = [40,60,50] 
arr.sort(function(a,b){
  return a > b 
})
console.log(arr) // [40,50,60]

示例：

// [40,60,50] 
var arr = [40,60,50] 
arr.sort(function(a,b){
  return a < b 
})
console.log(arr) // [60,50,40]

示例：

// [40,60,50] 
var arr = [40,60,50] 
arr.sort(function(a,b){
  return a = b 
})
console.log(arr) // [40,60,50]

该函数计算 40-100，并返回 -60（负值）。
sort 函数会将 40 排序为小于 100 的值。

array.concat()

定义：用于连接两个或多个数组。
concat() 方法不会更改现有数组，而是返回一个新数组，其中包含已连接数组的值。

语法：

array1.concat(array2, array3, ..., arrayX)

参数
array2, array3, ..., arrayX 必需有参数。参数是要连接的数组。

返回值：已连接的数组。

示例：

连接三个数组：
var sedan = [1, 2];
var SUV = [3, 4, 5];
var wagon = [6, 7, 8];
var Volvo = sedan.concat(SUV, wagon);//返回 [1,2,3,4,5,6,7,8]

array.indexOf()

定义：indexOf() 方法在数组中搜索指定元素，并返回其索引。
搜索将从指定位置开始，如果未指定开始位置，则从头开始，并在数组末尾结束搜索。

语法：

array.indexOf(item, start)

参数：
item 必需。要搜索的项目。
start 可选。从哪里开始搜索。负值给定的位置将从结尾计数，然后搜索到最后。

返回值：
如果未找到该元素，则 indexOf() 返回 -1。
如果该项目出现多次，则 indexOf() 方法返回第一次出现的位置

示例：

var arr = [1, 2, 3, 4];
var a =arr.indexOf(1);//返回0

array.slice()

定义：提取指定数组里的一节数组，并成为新的数组

语法：

array.slice(start, end)

参数：
start ：可写。整数，指定从哪里开始选择（第一个元素的索引为 0）。
使用负数从数组的末尾进行选择。如果省略，则类似于 "0"。

end ：可写。整数，指定结束选择的位置。
如果没有写，将选择从开始位置到数组末尾的所有元素。使用负数从数组末尾进行选择。

返回值：新的数组，包含选定的元素。

示例：

var arr = [1,2,3, 4, 5];
var arr1 =arr.slice(-3, -1);//返回3,4

for Each

定义：array.forEach()方法使用指定函数遍历数组。就是为数组中的每一个元素调用函数。
*注释：对于没有值的数组元素，不执行forEach() 方法。

语法：

 array.forEach(function(item, index, arr), thisValue)

调用函数的时候，可以在函数内传入以下三个参数

item: 数组中的一个元素元素，必须。
index: 数组索引，可选。
arr: 当前数组，可选。

返回值：返回undefined

示例1：
求数组的和

 var arr2 = [3,6,7,8]
      var  arr3 = 0
        arr2.forEach(function (item, index, arr2) {
           arr3 += item
        })
        console.log(arr3)
//返回 24

示例2：
求数组的和

   var arr = [1,2,3]
        arr.forEach(function(item,index,arr){
            console.log((item,index,arr))
            //console.log(1,0,[1,2,3])
        })
//返回 Array(3) [ 1, 2, 3 ]  Array(3) [ 1, 2, 3 ] Array(3) [ 1, 2, 3 ]

array.every()

定义：检验数组中的所有元素是否都通过了设定的条件（被作为函数提供）。every() 方法对数组中存在的每个元素执行一次函数。
语法：

array.every(function(currentValue, index, arr), thisValue)

参数：
返回值：布尔值。如果数组中的所有元素都通过设定的条件，则返回 true，否则返回 false.
示例：检查survey数组中的answer元素是否都相等。

 var survey = [
            { name: "Steve", answer: "Yes" },
            { name: "Jessica", answer: "Yes" },
            { name: "Peter", answer: "Yes" },
            { name: "Elaine", answer: "No" }
        ];

        function jy(el, index, arr) {
            if (index === 0) {
                return true;
            } else {
                return (el.answer === arr[index - 1].answer);
            }
        }

        function mm() {
            console.log(survey.every(jy))
        }
        console.log(mm())//返回false

array.filter()

定义：创建数组，其中填充了所有通过测试的数组元素（作为函数提供）。
语法：

array.filter(function(currentValue, index, arr), thisValue)

参数：

第一个参数：function(currentValue, index, arr) 必需。为数组中的每个元素运行的函数。

函数参数：
currentValue 必需。当前元素。
index 可选。当前元素的数组索引。
arr 可选。当前元素所属的数组对象

第二个参数：thisValue

可选。要传递给函数以用作其 "this" 值的值。
如果此参数为空，则值 "undefined" 将作为其 "this" 值传递。
返回值：包含所有通过测试的数组元素的数组。如果没有元素通过测试，则返回一个空数组。
示例：

 <p>获取数组中等于或大于 10 的每个元素。</p>、
   <p id="ccc"></p>

 var arr = [20,30,10,17]
        function bj(num){
            return num > 10;
        }
        document.querySelector("#ccc").innerHTML = arr.filter(bj)
//页面输出为20，30，17

array.find()

定义：返回数组中第一个通过测试的元素的值
语法：

array.find(function(currentValue, index, arr), thisValue)

参数：

第一个参数：function(currentValue, index, arr) 必需。为数组中的每个元素运行的函数。

函数参数：
currentValue 必需。当前元素。
index 可选。当前元素的数组索引。
arr 可选。当前元素所属的数组对象

第二个参数：thisValue

可选。要传递给函数以用作其 "this" 值的值。
如果此参数为空，就是undefined。

返回值： 如果数组中的任何元素通过测试，则返回数组元素值，否则返回 undefined。

示例：获取数组中第一个值为 18 或更大的元素的值

var arr = [3, 10, 18, 20];
function fn(age) {
  return age >= 19;
}
console.log(arr.find(fn))//返回20

array.findeIndex()

定义：返回数组中通过条件的第一个元素的索引
语法：

array.findIndex(function(currentValue, index, arr), thisValue)

参数：

第一个参数：function(currentValue, index, arr) 必需。为数组中的每个元素运行的函数。

函数参数：
currentValue 必需。当前元素。
index 可选。当前元素的数组索引。
arr 可选。当前元素所属的数组对象

第二个参数：thisValue

可选。要传递给函数以用作其 "this" 值的值。
如果此参数为空，就是undefined。

返回值：如果数组中的任何元素通过条件，则返回数组元素索引，否则返回 -1。
示例：获取数组中第一个值等于或大于 19 的元素的索引

var arr = [3, 10, 18, 20];
function fn(age) {
  return age >= 19;
}
console.log(arr.findIndex(fn))//返回4

array.map()

定义：使用为每个数组元素调用函数的结果创建新数组。
语法：

array.map(function(currentValue, index, arr), thisValue)

参数：

第一个参数：function(currentValue, index, arr) 必需。为数组中的每个元素运行的函数。

函数参数：
currentValue 必需。当前元素。
index 可选。当前元素的数组索引。
arr 可选。当前元素所属的数组对象

第二个参数：thisValue

可选。要传递给函数以用作其 "this" 值的值。
如果此参数为空，就是undefined。

返回值：数组，包含为原始数组中的每个元素调用提供的函数的结果。
示例：将arr数组里的每个元素乘以2

 const arr = [4, 9, 16, 25];
        console.log(arr.map(fn))
        function fn(num) {
        return num * 2;
        }//返回[8,18,32,50]

array.reduce()

定义：将数组缩减为单个值。数组的每个元素从左到右执行提供的函数。
语法：

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数：

第一个参数：function(currentValue, index, arr) 必需。为数组中的每个元素运行的函数。

函数参数：
currentValue 必需。当前元素。
index 可选。当前元素的数组索引。
arr 可选。当前元素所属的数组对象

第二个参数：thisValue

可选。作为初始值传递给函数的值。

返回值：返回上次调用回调函数的累积结果。

示例：从头开始减去数组中的数字

  var arr = [100,20,30]
        function fn(total, num) {
       return total - num;
       }
       console.log(arr.reduce(fn))//返回50

array.some()

定义：检查数组中的任何元素是否通过特定条件
语法：

array.some(function(currentValue, index, arr), thisValue)

参数：

第一个参数：function(currentValue, index, arr) 必需。为数组中的每个元素运行的函数。

函数参数：
currentValue 必需。当前元素。
index 可选。当前元素的数组索引。
arr 可选。当前元素所属的数组对象

第二个参数：thisValue

可选。要传递给函数以用作其 "this" 值的值。
如果此参数为空，则值 "undefined" 将作为其 "this" 值传递。

返回值：布尔值。如果数组中的任何元素通过测试，则返回 true，否则返回 false。
示例：检测有没有大于15的数字

 var arr = [3, 10, 18, 20];
function fn1(aaa) {
  return aaa >= 15
}
 console.log( arr.some(fn1))//返回true

数组是什么？

创建数组的方法？

1.创建数组直接量

2.构造函数法

数组的特点？

1.数组是有索引的 ：

2.比较数组是地址的比较

3.复制数组是复制数组地址

如何访问数组？

如何遍历数组？

1.使用for循环

2.使用for Each

调用函数的时候，可以在函数内传入一下三个参数

3.for of

数组的length属性？

Array.isArray

arr.push

arr.unshift()

arr.pop()

arr.shift()

arr.reverse()

arr.join()

arr.sort()

array.concat()

array.indexOf()

array.slice()

for Each

调用函数的时候，可以在函数内传入以下三个参数

array.every()

array.filter()

第一个参数：function(currentValue, index, arr) 必需。为数组中的每个元素运行的函数。

第二个参数：thisValue

array.find()

第一个参数：function(currentValue, index, arr) 必需。为数组中的每个元素运行的函数。

第二个参数：thisValue

array.findeIndex()

第一个参数：function(currentValue, index, arr) 必需。为数组中的每个元素运行的函数。

第二个参数：thisValue

array.map()

第一个参数：function(currentValue, index, arr) 必需。为数组中的每个元素运行的函数。

第二个参数：thisValue

array.reduce()

第一个参数：function(currentValue, index, arr) 必需。为数组中的每个元素运行的函数。

第二个参数：thisValue

array.some()

第一个参数：function(currentValue, index, arr) 必需。为数组中的每个元素运行的函数。

第二个参数：thisValue

1.数组是有索引的：