Javascript数组的基本操作

Javascript数组的基本操作

      • 1.Push()
      • 2.pop()
      • 3.Unshift()
      • 4.shift()
      • 5.splice()
      • 6.reverse()
      • 7.Sort()
      • 8.Concat()
      • 9.join(separator?: string)
      • 10.slice(start?: number, end?: number): number[]
      • 11.Array.**indexOf**()
      • Array.**lastIndexOf**()
      • 12.Array.foreach()
      • 13.Array.map()
      • 14.Array.filter()
      • 15.Array.every()
      • 16.Array.some()
      • 17.Array.find()
      • 18.Array.reduce()

1.Push()

函数功能:从数组末尾添加元素

var arr = [1]
var res = arr.push(4)

arr=[1,4]
返回值是数组的长度

2.pop()

函数功能:从数组末尾删除元素

var arr = [1]
var res = arr.pop()

arr=[]
返回值是删除的元素

3.Unshift()

前面追加元素
返回值是数组的长度

4.shift()

从数组前面删除元素
返回值是删除的元素

5.splice()

splice(start: number, deleteCount?: number): number[] (+1 overload)
Start:起始下标(从哪一个元素开始删除)
deleteCount:步长(删除元素的个数)
number[]:在删除的位置添加元素
eg:

var arr = [1, 2, 3, 4]
var res = arr.splice(1, 2, "gg", "jj")
console.log(arr)
console.log(res)

在这里插入图片描述

返回值是删除的元素
特别的:
实现从中间添加元素

arr.splice(1,0,”gg”)

6.reverse()

数组倒置
返回值是倒置后的数组

7.Sort()

函数功能:将数组进行排序,默认从小到大排
回调函数:可以通过回调函数实现不同的排序规则
【sort回调函数中的原理】
原理总结:return的值可能是一个大于0的数也或者可能是小于等于0的数,如果return后的值大于0则让数组a和b交换一下位置;小于等于0,则原来数组中的位置不变;
①如果没有指明 compareFn ,那么元素会按照转换为的字符串的诸个字符的 Unicode 位点进行排序。例如 “Banana” 会被排列到 “cherry” 之前。当数字按由小到大排序时,9 出现在 80 之前,但因为(没有指明 compareFn),比较的数字会先被转换为字符串,所以在 Unicode 顺序上 “80” 要比 “9” 要靠前。
②如果指明了 compareFn ,那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素:
如果 compareFn(a, b) 大于 0,b 会被排列到 a 之前。
如果 compareFn(a, b) 小于 0,那么 a 会被排列到 b 之前;
如果 compareFn(a, b) 等于 0,a 和 b 的相对位置不变。
compareFn(a, b) 必须总是对相同的输入返回相同的比较结果,否则排序的结果将是不确定的。
解析:

var arr = [2,34,242,12,3,2,23,3];// 定义一个数组
arr.sort(function (a,b) {
     // a -->代表每一次执行匿名函时候,找到的数组中的当前项;
     // b -->代表当前项的后一项;
 
     return a - b; // 升序时: 如果a>b,那么返回的值>0,a和b交换位置;

     return b - a; // 降序时: 如果b>a,那么返回的值>0,a和b交换位置;
     //-> 原理:return的值可能是一个大于0的数也或者可能是小于等于0的数,如果return后的值大于0则让数组a和b交换一下位置;小于等于0,则原来数组中的位置不变;
 
     return  1; // 表示不管a和b谁大,每一次都返回一个恒大于0的数,也就是说每一次a和b都要交换位置,最后的结果就是原有数组倒过来排列了,相当于数组的reverse()方法; 
})
//实现从大到小排序:
    var arr = [1, 2, 4, 3, 5, 2, 1, 4]
    arr.sort(function (x, y) {
        return y-x
    })

在这里插入图片描述

如果直接返回-1(或者其他负数)则实现数组的倒置
如果直接返回正数和0则数组不改变

var arr = [1, 2, 4, 3, 5, 2, 1, 4]
arr.sort(function () {
    return -1
})
console.log(arr)

在这里插入图片描述

以下是对原数组不造成影响的数组操作方法:

8.Concat()

函数功能:数组的拼接操作,不改变原数组,返回值是拼接完成之后的数组。
1)可以输入多个数组或者元素进行拼接
2)由于新生成的数组和原有数组之间相互没有影响,可以利用该函数实现复制操作。

var arr1 = [1, 2, 3, 4]
var arr2 = ["aa", "bb"]
var arr3 = arr1.concat(arr2, 8, ["a", "hj"])
console.log(arr3)
console.log(arr1)
console.log(arr2)

在这里插入图片描述

9.join(separator?: string)

函数功能:将数组转换成字符串
参数意义:
Separator:连接数组之间的分割符

var arr1 = [1, 2, 3, 4]
var arr2 = ["aa", "bb"]
console.log(arr1.join("-"))
console.log(arr2.join(''))

Tips:
直接利用document.write()也可以实现数组-》string的强制转换,默认是“,”进行拼接。

10.slice(start?: number, end?: number): number[]

函数功能:实现函数的插入、删除
参数意义:
Start:开始索引
End:结束索引
1)包前不包后
2)如果只输入一个参数则默认end=数组的长度
3)不传参数=复制

var arr1 = [1, 2, 3, 4]
console.log(arr1.slice(2))
console.log(arr1.slice(2, arr1.length))
console.log(arr1.slice(1, 2))

在这里插入图片描述

var arr1 = [1, 2, 3, 4]
var arr2 = arr1.slice()
console.log(arr1)
console.log(arr2)
arr1.pop()
console.log(arr1)
console.log(arr2)

在这里插入图片描述
Tips:
Slice(1,-1) //长度+(-1)
即当参数为负数时,意为索引号=长度+该负数 //通俗的说就是从数组的后面开始数

var arr1 = [1, 2, 3, 4]
var arr2 = arr1.slice(1, -1)
console.log(arr2)

在这里插入图片描述

11.Array.indexOf()

函数功能:在数组中查找目标元素
参数意义:
searchElement:目标元素
fromIndex:开始查找的位置索引,不传默认为0(即从哪一个位置开始查找)
1)找不到返回-1
2)有多个重名的仅返回第一个元素的索引

var arr1 = ["aa", "bb", "cc"]
console.log(arr1.indexOf("aa"))
console.log(arr1.indexOf("dd"))

在这里插入图片描述

Array.lastIndexOf()

从数组的后面开始往前查找,其他同Indexof()

12.Array.foreach()

函数功能:实现数组的遍历,需要实现回调函数,回调函数提供三个参数(元素值,索引值,数组)//callbackfn(value: string, index: number, array: string[]): void
参数可以不用全部使用

var arr = ["aa", "bb", "cc"]
//foreach 遍历
arr.forEach(function (item, index, arr) {
    console.log(item, index, arr)
})

在这里插入图片描述

13.Array.map()

函数功能:一一映射数组中的每一个元素,可以将数组中的每一个元素映射成新的元素
需要实现回调函数,回调函数提供三个参数(元素值,索引值,数组)//callbackfn(value: string, index: number, array: string[]): void
参数可以不用全部使用

var arr = ["aa", "bb", "cc"]
//map 映射
var arr1 = arr.map(function (item) {
    return "
  • " + item + "
  • " }) console.log(arr1) document.write(arr1.join(""))
  • 在这里插入图片描述

    14.Array.filter()

    函数功能:过滤数组。实现回调函数,回调函数中return true则保留;return false则去掉
    需要实现回调函数,回调函数提供三个参数(元素值,索引值,数组)//callbackfn(value: string, index: number, array: string[]): void
    参数可以不用全部使用
    代码:

    var arr = [1, 200, 1000]
    //filter 过滤
    var arr1 = arr.filter(function (item) {
        return item < 200 //return true则保留;return false则去掉
    })
    console.log(arr1)
    

    在这里插入图片描述

    15.Array.every()

    函数功能:判断数组中的每一个元素是否符合要求(即所有元素满足条件才返回true)
    需要实现回调函数,回调函数提供三个参数(元素值,索引值,数组)//callbackfn(value: string, index: number, array: string[]): void
    参数可以不用全部使用

    返回值为true或false

        var arr = [60, 70, 90, 94]
    
        var res = arr.every(function (item) {
            return item >= 90
    })
    

    在这里插入图片描述

    16.Array.some()

    函数功能:判断数组中的是否有元素符合要求(即只要有一个满足则返回true)
    需要实现回调函数,回调函数提供三个参数(元素值,索引值,数组)//callbackfn(value: string, index: number, array: string[]): void
    参数可以不用全部使用
    返回值为true或false

    var arr = [1, 200, 1000]
    var res = arr.some(function (item) {
    return item < 200 //return ture 则保留;return false则去掉
    })
    console.log(res)

    Javascript数组的基本操作_第1张图片

    17.Array.find()

    函数功能:找到数组中满足条件的元素
    返回值:目标元素
    Tips:如果有多个满足条件的仅返回第一个【与filter()不同】
    代码:

       var arr = [
        {
            name: "xiaoming",
            grade: 90
        },
        {
            name: "xiaoli",
            grade: 93
        },
        {
            name: "xiaowang",
            grade: 100
        }
    ]
    
    var res = arr.find(function (item) {
        return item.grade > 90
    })
    console.log(res)
    var res1 = arr.filter(function (item) {
        return item.grade > 90
    })
    console.log(res1)
    

    Javascript数组的基本操作_第2张图片

    18.Array.reduce()

    var arr = [1, 2, 3, 4, 5]
    var res = arr.reduce(function (pre, item) {
    return pre + item
    })
    console.log(res)

    res=15

    Pre:初始值为0,记录上一次的返回值
    Item:为数组中的元素值

    该函数执行的过程:
    ①pre=0,item=1 return 1
    ②pre=1,item=2 return 3
    ③pre=3,item=3 return 6
    ④pre=6,item=4 return 10
    ⑤pre=10,item=5 return 15

    你可能感兴趣的:(JS,前端,javascript,前端,开发语言)