JS数组的方法&高阶函数

一、创建数组的三种方法:

1、使用 new关键字方法

 let like1 = new Array('李易峰', '毛不易', '谭松韵')

2、使用[]的方法。常用

 let like2 = ['李易峰', '毛不易', '谭松韵']

3、使用Array.of()

 let like3 = Array.of('李易峰', '毛不易', '谭松韵')

二、清空数组的方法

(1)直接创建一个空数组,推荐

   let arr = [];

(2)清空数组

   arr.length=0;

三、数组的属性

1、length:数组的长度,就是数组中元素的个数。使用length属性

  // 修改like1的长度为1
        like1.length = 1
        // 获取like2的长度
        console.log(like2.length)

2、数组中元素的下标从0开始,可以通过下标访问或修改数组的元素。下标写在[]里

       // 访问[]
        // 输出的结果为李易峰
        console.log(like1[0])
        // 修改
        // 输出的结果是:李易峰 张新成 谭松韵
        like3[1] = '张新成'
        console.log(like3)

3、数组中最后一个元素的下标和数组长度的关系。 数组长度-1=最后一个元素的下标。

        // 输出的结果是谭松韵
        console.log(like3[like3.length - 1])

四、数组的方法

1、数组中元素的添加和删除

(1)、在数组的最前面添加和删除元素.
unshift(添加的内容写在里面):添加在数组的最前面添加元素,并返回新的数组长度
shift():删除。()内不写内容。删除在数组的最前面元素;并返回删除的那个值

   let like1 = new Array('李易峰', '毛不易', '谭松韵')
        // 添加:unshift()
        like1.unshift('偶像')
        console.log(like1)
        // 输出的结果是"偶像", "李易峰", "毛不易", "谭松韵"

        // 删除:shift()
        like1.shift()
        console.log(like1)
        // 输出的结果是, "李易峰", "毛不易", "谭松韵"

(2)、在数组的最后面添加和删除元素

(1)、在数组的最后面添加和删除元素
push(添加的内容写在里面):添加在数组的最后面添加元素,并返回新的数组长度
pop():删除。()内不写内容。删除在数组的最后面元素;并返回删除的那个值

     // 添加:push()
        like1.push('偶像')
        console.log(like1)
        // 输出的结果是:"李易峰", "毛不易", "谭松韵", "偶像"

        // 删除:pop()
        like1.pop()
        console.log(like1)
       // 输出的结果是, "李易峰", "毛不易", "谭松韵"

2、concat():合并数组

        let shengri1 = ['0', '5']
        let shengri2 = ['0', '4']
        let shengri = shengri1.concat(shengri2)
        console.log(shengri)
        // 输出的结果是:"0", "5", "0", "4"

3、join():把数组连接成字符串。

        let shengri3 = ['0', '5', '0', '4']
        let shengri4 = shengri3.join("")
        console.log(shengri4)
        // 输出的结果是:0504

()内写内容,就是以写的内容的方式连接成字符串

  let shengri3 = ['0', '5', '0', '4']
        let shengri4 = shengri3.join("+")
        console.log(shengri4)
        // 输出的结果是:0+5+0+4

4、includes():判断数组中是否包含一个元素。结果是布尔值(Boolean)返回的结果是true/false

        // 判断数组中是否包含一个元素:includes()
        let shengri7 = ['李易峰', '毛不易', '谭松韵']
        console.log(shengri7.includes('李易峰'))
        // 输出的结果为:true

5、indexOf():返回某个指定的元素在数组中首次出现的位置,找不到-1.

 let fruits=['苹果','香蕉','梨','香蕉']
        console.log(fruits.indexOf('香蕉'))
        // 输出的结果为1

6、lastIndexOf():返回某一个指定的元素在数组中最后一次出现的位置。

  let fruits=['苹果','香蕉','梨','香蕉']
        console.log(fruits.lastIndexOf('香蕉'))
        // 输出的结果为3

7、遍历数组:把数组中的每个元素找出来.利用for循环.

        let ming=['李易峰','毛不易','谭松韵','张新成','肖战','王一博']
        for (let i = 0; i < ming.length; i++) {
        console.log(ming[i])
        // ming[i]就是数组中的每一项    
        }
        // 输出的结果为:'李易峰','毛不易','谭松韵','张新成','肖战','王一博'

8、slice(start,end):截取数组中的元素;不操作数组本身。

(1)、(字符串也有这个方法,用法一样,但是数组没有substring方法)。
(2)、返回start(包含)到end(不包含)之间的元素组成,位置从0开始。包含开始值不包含结束值。含头不含尾。

    let ming = ['李易峰', '毛不易', '肖战', '王一博', '谭松韵', '张新成']
        // 返回start(包含)到end(不包含)之间的元素组成,位置从0开始。包含开始值不包含结束值
        let ming1 = ming.slice(0, 1)
        console.log(ming1)
        // 输出的结果是李易峰

        let ming2 = ming.slice(2, 4)
        console.log(ming2)
        // 输出的结果是肖战、王一博

(3)、如果start>end,则返回一个空数组

 let ming = ['李易峰', '毛不易', '肖战', '王一博', '谭松韵', '张新成']
  let ming3 = ming.slice(4, 1)
        console.log(ming3)
        // 输出的结果为[]

(4)、如果只有一个参数,则默认为start,则返回start(包含)到数组的末尾

 let ming = ['李易峰', '毛不易', '肖战', '王一博', '谭松韵', '张新成']
   let ming4 = ming.slice(0)
        console.log(ming4)
        // 输出的结果为"李易峰", "毛不易", "肖战", "王一博", "谭松韵", "张新成"

(5)、如果值为负数,会被当做 数组长度+负数 来处理。输出的结果是从结果开始一直到数组结束

 let ming = ['李易峰', '毛不易', '肖战', '王一博', '谭松韵', '张新成']
  let ming5 = ming.slice(-2)
        console.log(ming5)
        // 输出的结果是"谭松韵", "张新成"

9、splice():操作数组本身同时具备删除、添加和替换的功能;

(1)、删除的时候包含开始的元素

(2)、标准语法:splice(索引也叫下标,删除的数量、添加的元素)

 let ming = ['李易峰', '毛不易', '肖战', '王一博', '谭松韵', '张新成']
    //  从毛不易开始 删除后面连续五个元素。包含 毛不易
     let ming1=ming.splice(1,5)
     console.log(ming)
    //  输出的结果是"李易峰"

(1)、添加:

 let ming = ['李易峰', '毛不易', '肖战', '王一博', '谭松韵', '张新成']
  // 从毛不易开始,后面没有删除 所以添加在开始下标之前。
    let ming2=ming.splice(1,0,'廖俊涛')
    console.log(ming)
    // 输出的结果是:"李易峰", "廖俊涛", "毛不易", "肖战", "王一博", "谭松韵", "张新成"

(2)、替换:

 let ming = ['李易峰', '毛不易', '肖战', '王一博', '谭松韵', '张新成']
  let ming3=ming.splice(1,1,'廖俊涛')
    console.log(ming)
    // 输出的结果是:"李易峰", "廖俊涛",  "肖战", "王一博", "谭松韵", "张新成

9、// reverse()反转数组.操作数组本身。()内不填写内容。

     let arr1 = [5, 7, 3, 4, 2, 8, 10]
        arr1.reverse()
        console.log(arr1)
        // 输出的结果是:10, 8, 2, 4, 3, 7, 5

10、sort():排序。操作数组本身。()内不填写内容。

按照Unicode编码排序。不是数字的大小

let arr1 = [5, 7, 3, 4, 2, 8, 10]
 arr1.sort()
        console.log(arr1)
        // 输出的结果为:10, 2, 3, 4, 5, 7, 8

五、数组的迭代方法--数组的高阶函数

1、forEach()方法用于遍历整个数组

(1)、forEach中不可以使用return。
(2)、forEach(fn) :fn是回调函数,该函数有两个参数(参数名是自定义的)。第1个参数是代表数组中的每一项, 第2个参数是下标

 let arr = [11, 22, 33, 44, 55, 66, 77, 88, 99, 111, 222, 333]
        // 遍历整个数组
        arr.forEach((r, i) => {
            console.log(r, i);
        });

返回的结果为:


image.png

2、filter()过滤。返回让回调函数为true的元素组成的数组.(并返回满足条件的新数组)

let arr = [11, 22, 33, 44, 55, 66, 77, 88, 99, 111, 222, 333]
let arr2=arr.filter(r=>r%2===0)
        console.log(arr2);

返回的结果为:


image.png
image.png

3、findIndex方法,用于查找数组中满足条件的第一个元素的位置(下标),没有找到返回-1

let arr = [11, 22, 33, 44, 55, 66, 77, 88, 99, 111, 222, 333]
 let index1=arr.findIndex(r=>r===55)
        console.log(index1);
//返回的结果为4.

4、find方法用于查找数组中满足条件的第一个元素,没有找到,返回undefined

let arr = [11, 22, 33, 44, 55, 66, 77, 88, 99, 111, 222, 333]
  let num1=arr.find(r=>r%2===0)
        console.log(num1);
//返回的结果是22

5、some方法。用于检查数组中,是否有满足条件的元素;有一个元素让条件为true,则返回true(有一个为真则为真),且剩余的元素不会再进行检测。

let arr = [11, 22, 33, 44, 55, 66, 77, 88, 99, 111, 222, 333]
  let isOk=arr.some(r=>r>100)
        console.log(isOk);
//返回的结果的true

6、every方法,用于检查数组中,所有元素是否都满足条件;有一个元素让条件为false,则返回false(全部为真才返回真),且剩余的元素不会再进行检测。

let arr = [11, 22, 33, 44, 55, 66, 77, 88, 99, 111, 222, 333]
      let isOk2=arr.every(r=>r>100)
        console.log(isOk2);
//返回的结果是false

7、reduce()循环数组中的每一项进行累计操作。

语法:arr.reduce(callback,[initialValue])

(1)、callback:执行数组中每个值的函数,包含四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组。
(2)、initialValue:作为第一次调用 callback 的第一个参数。

let r = arr.reduce((a,b) => a+b)   // arr中的所有项数值之和
let sum = this.goodslist.reduce((a, b) => a + b.price, 0) // 统计goodslist中每一项的price属性之和,设置初始值为0

8、map方法,用于将原始数组中的所有元素,根据条件返回一个全新的数组

let arr = [11, 22, 33, 44, 55, 66, 77, 88, 99, 111, 222, 333]
     let arr3=arr.map(r=>r/2)
        console.log(arr3);

返回结果是:


image.png

image.png

你可能感兴趣的:(JS数组的方法&高阶函数)