Javascript数组方法大串烧

142 阅读23分钟

在JS中,数组方法是非常重要且常用的方法,在此整理总结一番:

Javascript常见数组方法

序号方法名实现功能返回值是否改变原数组
1pop()从数组中删除最后一个元素从数组中删除的元素(数组为空时返回undefined)
2shift()从数组中删除第一个元素从数组中删除的元素(数组为空时返回undefined)
3unshift()将一个或多个元素添加到数组的开头数组的新长度
4push()将一个或多个元素添加到数组的末尾数组的新长度
5reverse()反转数组中的元素颠倒后的数组
6sort()以字符串Unicode码点排序(没有传入排序函数)排序后的数组
7splice()在指定位置删除指定个数元素再增加任意个数元素(实现数组任意位置CRD)删除元素所组成的数组
8slice()截取指定位置数组被截取元素形成的新数组
9concat()通过合并两个或多个数组来创建一个新数组合并后的数组
10join()用特定的字符将数组拼接形成字符串(默认",")拼接后的新数组
11toString()将数组转为字符串表示数组所有元素的字符串
12find()遍历数组,返回满足提供的测试函数条件的第一个元素,不存在返回undefined满足条件第一个元素/否则返回undefined
13findIndex()遍历数组,返回满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1满足条件第一个元素下标,不存在返回-1
14findLast()遍历数组,返回满足提供的测试函数的条件的最后一个元素,不存在返回undefined满足条件的最后一个元素/否则返回undefined
15findLastIndex()遍历数组,返回满足提供的测试函数的最后一个元素的索引。若没有找到对应元素则返回-1满足条件最后一个元素的下标,不存在返回-1
16indexOf()查询某个元素在数组中第一次出现的位置存在该元素返回下标,不存在返回-1
17lastIndexOf()反向查询数组某个元素在数组中第一次出现的位置存在该元素返回下标,不存在返回-1
18includes()判断一个数组是否包含一个指定的值包含就返回true否则返回false
19forEach()(迭代)遍历数组,每次循环中执行传入的回调函数undefined
20map()(迭代)遍历数组,每次循环时执行传入的回调函数,根据回调函数的返回值,生成一个新的数组回调函数返回值组成的新数组
21filter()(迭代)遍历数组,每次循环时执行传入的回调函数,回调函数返回一个条件,把满足条件的元素筛选出来放到新数组一个由通过测试的元素组成的新数组
22some()测试数组中是不是至少有1个元素通过了被提供的函数测试只要有一个通过就返回true否则返回false
23every()测试数组中的所有元素是否都能通过被提供的函数测试如果都通过就返回true否则返回false
24flat()用于将嵌套的数组拉平使它变为一维的数组一个包含将数组与子数组中所有元素的新数组
25flatMap()flat()map()组合版,先通过map()返回一个新数组,再将数组拉平(只能拉平一次)一个新的数组,其中每个元素都是回调函数的结果
26fill()用一个固定值填充一个数组中从起始索引到终止索引内的全部元素(不包括终止索引)修改后的数组
27at()接收一个索引值,并返回该索引对应元素,正负数都可匹配给定索引的数组中的元素(找不到就返回undefined)
28copyWithin()浅复制数组的一部分到同一数组中的另一个位置,且不改变原数组长度修改后的数组
29reduce()(归并)遍历数组,每次循环执行传入的回调函数,回调函数返回的值将作为prev传入下一次执行的回调函数中使用reducer回调函数遍历整个数组后的结果
30reduceRight()用法形似于reduce(),只是方向是从右向左使用reducer回调函数遍历整个数组后的结果

数组方法详解

1. pop()

功能:删除数组最后一位,并返回删除的元素,会改变原数组,且不接受任何参数 示例代码

const arr = [1,2,3,4,5]
const test = arr.pop()
const arr1 = []
const test1 = arr1.pop()
console.log(arr) //[1,2,3,4]
console.log(test) //5
console.log(arr1) //[]
console.log(test1) //undefined

pop.png

2. shift()

功能:删除数组第一位,并返回删除的元素,会改变原数组,且不接受任何参数 示例代码

const arr = [1,2,3,4,5]
const test = arr.shift()
const arr1 = []
const test1 = arr1.shift()
console.log(arr) //[2,3,4,5]
console.log(test) //1
console.log(arr1) //[]
console.log(test1) //undefined

push.png

3. unshift()

功能:在数组第一位添加一个或多个元素,并返回新数组的长度,会改变原数组 示例代码

const arr = [1,2,3,4,5]
const test = arr.unshift("A",0)
console.log(arr) //["A",0,1,2,3,4,5]
console.log(test) //7

unshift.png

4. push()

功能:在数组最后一位添加一个或多个元素,并返回新数组的长度,会改变原数组
示例代码

const arr = [1,2,3,4,5]
const test = arr.push("A",0)
console.log(arr) //[1,2,3,4,5,"A",0]
console.log(test) //7

push.png

5. reverse()

功能:将数组的数据进行反转,并且返回反转后的数组,会改变原数组 示例代码

const arr = [1, 2, 3, 4, 5]
const test = arr.reverse()
console.log(test) //[5,4,3,2,1]
console.log(arr) //[5,4,3,2,1]

reverse.png

6. sort()

功能:用于对数组的元素进行排序,并返回数组。默认排序顺序是根据字符串Unicode码点
示例代码
例1

const arr = [5,4,3,2,1]
const test = arr.sort()
console.log(test) //[1,2,3,4,5]
console.log(arr) //[1,2,3,4,5]

sort1.png 例2

const arr = [10, 4, 3, 2, 1]
const test = arr.sort()
console.log(test) //[1,10,2,3,4]
console.log(arr) //[1,10,2,3,4]

可以看到这个答案并不是我们想要的结果,因为它是根据Unicode码点排的序 sort2.png 这里我们就要用到sort()方法中可以传入的可选比较函数来进行排序:
语法:arr.sort(function(a,b))
注意:如果传入了这个可选函数那么就会按照这个可选的比较函数的返回值进行比较,如果没传的话,那么就按照Unicode码点进行排序

CompareFn(a,b)排序顺序
>0b都会在a之前
<0b都会在a之后
=0保持a与b的顺序

一般我们比较数字都会采取这种办法:

  • 如果 function(a, b) {return: a - b} ,=>a - b > 0那么 a 会被排列到 b 之后,a - b < 0 那么 a 会被排列到 b 之前
  • 如果 function(a, b) {return: b - a} ,=>b - a > 0那么 b 会被排列到 a 之前,b - a < 0 那么 b 会被排列到 a 之后

这里我们又可以用一种简便的方法:
a>b return 1 a<b return -1 a=b return 0 ......升序
a<b return 1 a>b return -1 a=b return 0 ......降序
例3

        const arr = [10, 1, 5, 2, 3]
        const test = arr.sort(function (a, b) {
            return a - b
        })
        console.log(arr);  //[1,2,3,5,10]
        console.log(test); //[1,2,3,5,10]

sort3.png 同时对于对象而言也可以根据某个属性进行排序:
例4

const arr = [
            { name: "小米", age: "18" },
            { name: "小白", age: "8" },
            { name: "小黑", age: "28" },
        ];
        const test = arr.sort(function (a, b) {
            return b.age - a.age; //类似于b-a降序
        });
        console.log(test);
        console.log(arr);

sort4.png

7. splice()

功能:向数组中添加,或从数组删除,或替换数组中的元素,然后返回被删除/替换的元素所组成的数组。可以实现数组的增删改(表格里面我简称CRD)

说到增删改我们有必要提一下它可传入的参数:

参数类型描述
startIndex必需。整数,规定添加/删除项目的位置(元素下标),使用负数可从数组结尾处规定位置
deleteCount可选。要删除的项目数量。如果设置为 0 或者不设置,那么就不会删除元素
item1...itemX可选。要添加进数组的元素,从start 位置开始。如果不指定,则 splice() 将只删除数组元素

示例代码

        const arr = [1, 2, 3, 4, 5]
        const test = arr.splice(1, 2, '白菜')
        console.log(arr); //[1,'白菜',4,5]
        console.log(test); //[2,3]

splice.png

8. slice()

功能:裁切指定位置的数组,返回值为被裁切的元素形成的新数组 ,不改变原数组 同concat()方法,如果不传入参数会使用默认值,得到一个与原数组元素相同的新数组 (浅拷贝)
语法:arr.slice(startIndex,endIndex)
注意:起始下标和终止下标的区间是 左闭右开[a,b) 这是我写了endIndex这个参数,如果没写那么就默认取到结尾

示例代码

        const arr = [1, 2, 3, 4, 5]
        const test = arr.slice(1, 4)
        const test1 = arr.slice(1)
        console.log(test); //[2,3,4]
        console.log(test1); //[2,3,4,5]
        console.log(arr); //[1,2,3,4,5]

slice.png

9. concat()

功能:数组的拼接(将多个数组或元素拼接形成一个新的数组),不改变原数组。如果不给该方法任何参数,将返回一个和原数组一样的数组(复制数组)
注意:如果拼接的是数组,它会把数组里面的内容展开,但是只能展开一层 示例代码

        const arr = [1, 2, 3, 4, 5]
        const test = arr.concat([2, [3, 4]])
        const test1 = arr.concat('7')
        console.log(test); //[1,2,3,4,5,2,[3,4]]
        console.log(test1); //[1, 2, 3, 4, 5, '7']
        console.log(arr); //[1, 2, 3, 4, 5]

concat.png

10. join()

功能:用特定的字符,将数组拼接形成字符串 (默认",")
示例代码

        const arr = ["a", "b", "c", "d"];
        const test = arr.join("-");
        const test1 = arr.join("");
        const test2 = arr.join();
        console.log(test); // "a-b-c-d"
        console.log(test1); // "abcd"
        console.log(test2);  // "a,b,c,d"

join.png

11. toString()

功能:返回一个字符串,表示指定的数组及其元素
示例代码

        const arr = ["a", "b", "c", "d"];
        const test = arr.join();
        console.log(test); //"a","b","c","d" 
        console.log(arr); //["a", "b", "c", "d"]

toString.png

12. find()

功能:遍历数组 每次循环 执行回调函数,回调函数接受一个条件 返回满足条件的第一个元素,不存在则返回undefined

它可以传入的参数有两个一个是测试的回调函数,一个是thisArg(可选,执行回调时用作this的对象),这里主要讲一下回调函数里面传入的参数

参数类型描述
item当前遍历到的元素
index当前遍历到的索引
arr当前元素所属的数组对象

示例代码

        const arr = [undefined, 1, 2, 3, 4]
        const test = arr.find(item => item)
        console.log(test); //1
        console.log(arr); //[undefined,1,2,3,4]

可以看到undefined并没有通过测试,这里就得知道true才会通过测试的,而对于js来说,""、0、NaN、null、undefined这几个都会转换为false find.png

同时这个方法也可以快速查找对象数组中满足条件的项

       const arr = [
            { name: 'apples', id: 2 },
            { name: 'bananas', id: 1 },
            { name: 'cherries', id: 3 }
        ];

       function isCherries(fruit) {
            return fruit.name === 'cherries';
        }
       console.log(arr.find(isCherries)) // { name: 'cherries', id: 3 }

find2.png

13. findIndex()

功能:遍历数组 每次循环 执行回调函数,回调函数接收一个条件 返回满足条件第一个元素的下标,不存在则返回-1

它可以传入的参数有两个一个是测试的回调函数,一个是thisArg(可选,执行回调时用作this的对象),这里主要讲一下回调函数里面传入的参数

参数类型描述
item当前遍历到的元素
index当前遍历到的索引
arr当前元素所属的数组对象

示例代码

        const arr = [50, 60, 70, 80, 100]
        const test = arr.findIndex(function (item, index, array) {
            return item > 50
        })

        console.log(test); //1

findIndex.png

14. findLast()

功能:遍历数组 每次循环 执行回调函数,回调函数接受一个条件 返回满足条件的最后一个元素,不存在则返回undefined

它可以传入的参数有两个一个是测试的回调函数,一个是thisArg(可选,执行回调时用作this的对象),这里主要讲一下回调函数里面传入的参数

参数类型描述
item当前遍历到的元素
index当前遍历到的索引
arr当前元素所属的数组对象

示例代码

        const arr = [50, 60, 70, 80, 100]
        const test = arr.findLast(function (item, index, array) {
            return item > 50
        })

        console.log(test); //100

findLast1.png

同样的这个方法也可以快速查找对象数组中满足条件的项

        const arr = [
            { name: 'apples', id: 2 },
            { name: 'bananas', id: 1 },
            { name: 'cherries', id: 3 }
        ];

        function isId(fruit) {
            return fruit.id > 1
        }
        console.log(arr.findLast(isId)) // { name: 'cherries', id: 3 }

findLast2.png

15. findLastIndex()

功能:遍历数组 每次循环 执行回调函数,回调函数接收一个条件 返回满足条件最后一个元素的下标,不存在则返回-1

它可以传入的参数有两个一个是测试的回调函数,一个是thisArg(可选,执行回调时用作this的对象),这里主要讲一下回调函数里面传入的参数

参数类型描述
item当前遍历到的元素
index当前遍历到的索引
arr当前元素所属的数组对象

示例代码

        const arr = [50, 60, 70, 80, 100]
        const test = arr.findLastIndex(function (item, index, array) {
            return item > 50
        })

        console.log(test); //4

findLastIndex.png

16. indexOf()

功能:查询给定元素在数组中第一次出现的位置 存在该元素就返回其下标,不存在该元素就返回-1

它是有两个参数(其中一个可选)传递的,并不是只传递一个:

参数类型描述
searchItem被查找的元素
fromIndex可选,从此索引位置开始正向查找

示例代码

        const arr = [50, 60, 90, 60, 100]
        const test = arr.indexOf(60)
        const test1 = arr.indexOf(60, 2)
        console.log(test); //1
        console.log(test1); //3

indexOf.png

17. lastIndexOf()

功能:查询给定元素在数组中最后一次出现的位置 存在该元素就返回其下标,不存在该元素就返回-1

它是有两个参数(其中一个可选)传递的,并不是只传递一个:

参数类型描述
searchItem被查找的元素
fromIndex可选,从此索引位置开始反向查找

示例代码

        const arr = [50, 60, 90, 60, 100]
        const test = arr.lastIndexOf(60)
        const test1 = arr.lastIndexOf(60, 2)
        console.log(test); //3
        console.log(test1); //1

lastIndexOf.png

18. includes()

功能:用来判断数组中是否包含一个指定的值,如果是就返回true否则就返回false

它是有两个参数(其中一个可选)传递的,并不是只传递一个:

参数类型描述
searchItem被查找的元素
fromIndex可选,从此索引位置开始反向查找

但是这里我要提一下前两个方法没有提到的东西

  1. fromIndex如果大于或等于数组的长度,那么意味着不会从数组中进行查找
  2. fromIndex如果为负值,那么它会和数组的长度进行抵消,计算出一个索引值,如果还是小于0,则全部数组会重新搜索

示例代码

        const arr = [50, 60, 90, 60, 100]
        const test = arr.includes(60)
        const test1 = arr.includes(60, 4)
        console.log(test); //true
        console.log(test1); //false

includes.png

19. forEach()

功能:对数组的每个元素执行一次给定的函数,但是返回值为undefined

一般来说,后面的map、filter、some、every都要传递一个回调函数和一个可选的可以执行callback回调函数用的this值,因此我们仅在此处说明,以下是回调函数的可传参数:

参数类型描述
item当前遍历到的元素
index当前遍历到的索引
arr当前元素所属的数组对象

示例代码

        const arr = [50, 60, 90, 60, 100]
        const test = arr.forEach(function (item, index, arr) {
            console.log(item, index, arr);
        })

        console.log(test);//undefined

forEach.png

20. map()

功能:遍历数组,每次循环时执行传入的回调函数,根据回调函数返回的结果组成一个新的数组,map()方法是有返回值的 注意:有两种情况,则不该使用map()方法:

  1. 你不打算使用创建的新数组
  2. 你没有从回调函数中返回值

示例代码

        const arr = [5, 6, 9, 6, 10]
        const test = arr.map(function (item, index, arr) {
            return item * item
        })

        console.log(test); //[25, 36, 81, 36, 100]

map.png

21. filter()

功能:遍历数组,每次循环时执行传入的回调函数,回调函数返回一个条件,把满足条件的元素筛选出来放到新数组中去 注意:通过检测函数也就是上面说的回调函数的意思是返回的布尔值类型为true
示例代码

const arr = [1, 2, 3, 4, 5, '', false, undefined, NaN, 7]
const test = arr.filter((item => item))

console.log(test); //[1,2,3,4,5,7]

filter.png

22. some()

功能:遍历数组,每次循环时执行传入的回调函数,回调函数返回一个条件,数组中只要有一个满足条件就返回true否则就返回false
示例代码

        const arr = [1, 2, 3, 4, 5, 6, 7]
        const test = arr.some((item => item > 6))
        const test1 = arr.some((item => item > 7))
        console.log(test); //true
        console.log(test1); //false

some.png

23. every()

功能:遍历数组,每次循环时执行传入的回调函数,回调函数返回一个条件,数组中只要有一个满足条件就返回true否则就返回false
示例代码

        const arr = [1, 2, 3, 4, 5, 6, 7]
        const test = arr.every((item => item > 0))
        const test1 = arr.every((item => item >= 7))
        console.log(test); //true
        console.log(test1); //false

some.png

24. flat()

功能:用于将嵌套的数组"拉平",变成一维的数组。该方法返回一个新数组,对原数组没有影响
注意:如果没有传递depth这个可选的深度参数,那么默认深度为1,那么也就只拉平一次,这里需要手动传参,如果想全部拉平传Infinity 示例代码

        const arr = [1, 2, 3, 4, [5, [6, 7]]]
        const test = arr.flat()
        const test1 = arr.flat(2)
        console.log(test); //[1,2,3,4,5,[6,7]]
        console.log(test1); //[1,2,3,4,5,6,7]

flat.png

25. flatMap()

功能flat()map()组合版,先通过map()返回一个新数组,再将数组拉平(只能拉平一次)
这里跟flat()方法又有点区别,它的可传参数和map()类似,它也是传回调函数和thisArg

参数类型描述
item当前遍历到的元素
index当前遍历到的索引
arr当前元素所属的数组对象

示例代码 这里我演示一下组合版flatMap()和拆分版flat()map(),这个适用于深度为1
例1 拆分版对于深度为1的两步到位

        const arr = [1, 2, 3, 4, 5]
        const test = arr.map(item => [item * 2])
        console.log(test); //[[2],[4],[6],[8],[10]]
        const newTest = test.flat()
        console.log(newTest); //[2,4,6,8,10]

例2 组合版则一步就能到位

        const arr = [1, 2, 3, 4, 5]
        const test = arr.map(item => [item * 2])
        const test1 = arr.flatMap(item => [item * 2])
        console.log(test1); //[2,4,6,8,10]

flatMap.png

26. fill()

功能:用一个固定值填充一个数组中从起始索引到终止索引内的全部元素
注意:此类涉及start和end的方法,当起始位置为负数,它总会和数组的长度进行抵消后执行运算,这是没传入end的情况下

参数类型描述
value用来填充数组元素的值
start可选,开始填充位置
end可选,终止填充位置,默认为arr.length

示例代码

        const arr = [1, 2, 3, 4, 5]
        const test = arr.fill('a', 3, 4)
        console.log(test); //[1,2,3,'a',5]
        console.log(arr); //[1,2,3,'a',5]

fill.png

27. at()

功能:接收一个整数值并返回该索引对应的元素,允许正数和负数。负整数从数组中的最后一个元素开始倒数。
注意:这和方括号选择器(它不支持负索引)不同,支持从数组末端开始相对索引,也就是说如果使用负数将从数组末端开始倒数,它只传递一个参数index
示例代码

        const arr = [1, 2, 3, 4, 5]
        const test = arr.at(-2)
        const test1 = arr.at(3)
        console.log(test); //4
        console.log(test1); //4

at.png

28. copyWithin()

功能:方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度
注意:移动位置,那肯定有截取的部分,和终止位置,很显然这也是传递三个参数

参数类型描述
target复制序列到该位置也就是我们说的终止位置
start可选,开始复制元素的起始位置
end可选,开始复制元素的终止位置,默认为arr.length

示例代码

        const arr = [1, 2, 3, 4, 5]
        const test = arr.copyWithin(3, 0, 2)
        console.log(test); //[1,2,3,1,2]
        console.log(arr); //[1,2,3,1,2]

copyWithin.png

29. reduce()

功能:遍历数组,每次循环时执行传入的回调函数,回调函数会返回一个值,将该值作为初始值perv,传入到下一次函数中,返回最终操作的结果
注意:第一次执行回调函数时,不存在"上一次的计算结果"。如果需要回调函数从数组索引为 0 的元素开始执行,则需要传递初始值。否则,数组索引为 0 的元素将被作为初始值 initialValue,迭代器将从第二个元素开始执行(索引为 1 而不是 0)

reduce()方法它传的话是传回调函数,和初始值两个参数,其中回调函数内部一共有四个可以传的参数

参数类型描述
previousValue上一次调用 callbackFn 时的返回值,若指定了初始值 initialValue,其值则为 initialValue
currentValue数组中正在处理的元素
currentIndex可选,数组中正在处理的元素的索引
array可选,用于遍历的数组

示例代码
一般来说reduce()的用处是计算数组所有元素的总和
例1:不设置初始值累加

        const arr = [1, 2, 3, 4, 5]
        const test = arr.reduce(function (pv, cv) {
            console.log(pv, cv);
            return pv + cv
        })
        console.log(test);

解析

  • 第一次循环 pv=1,cv=2,由于没有给定初始值,因此pv的值将为数组中的第一个元素,遍历从第二个元素开始
  • 第二次循环 pv=3=1+2(上次循环的元素),cv=3
  • ......以此类推,最后一次循环,pv=10,cv=5(最后一次遍历的元素),算出sum=15 reduce1.png 例2:设置初始值累加
        const arr = [1, 2, 3, 4, 5]
        const test = arr.reduce(function (pv, cv) {
            console.log(pv, cv);
            return pv + cv
        }, 100)
        console.log(test);

解析

  • 这里只有一个初始值的问题,这里设置了初始值那么第一次的pv=100(初始值),cv=1(给定初始值遍历将从第一个元素开始) reduce2.png

30. reduceRight()

功能:接受一个函数作为累加器(accumulator)和数组的每个值(从右到左)将其减少为单个值
注意:这个和reduce()方法只有一个不同就是reduce()方法的执行方向为从左向右,而reduceRight()是从右向左 示例代码

        const arr = [1, 2, 3, 4, 5]
        const test = arr.reduceRight(function (pv, cv, index, array) {
            console.log(pv, cv);
            return pv + cv
        })
        console.log(test);
callbackpreviousValuecurrentValueindexarray返回值
第一次调用543[1,2,3,4,5]9
第二次调用932[1,2,3,4,5]12
第三次调用1221[1,2,3,4,5]14
第四次调用1410[1,2,3,4,5]15

这个也是可以加入初始值的,加入初始值还是同理 reduceRight.png

数组的相关练习题

  1. 现有一个彩票系统,开奖规则是nums数组尾数是单数的即中奖,示例代码如下:
let cp = [
      { name: 'xp', nums: [4, 5, 43, 45, 34, 7] },
      { name: 'dc', nums: [6, 7, 8, 9, 33, 4] },
      { name: 'ys', nums: [6, 7, 8, 9, 33, 9] }
        ]
const winner = cp.filter(item => {
       if (item.nums[5] % 2 === 1) return true
       return false
        })
        console.log('winner is', winner);

1.png 2. 现在有一个数组,里面都是一些人的名字,请得到一个姓氏全为小的数组,示例代码如下:

    const peoples = ['小米', '小王', '刘哥', '瑟奇', '阿方']
const xiaoFamily = peoples.filter(item => item.startsWith('小'))
        console.log('xiaoFamily', xiaoFamily);

2.png 3. 现在给定一个数组,请告诉我它用map方法后执行的结果,示例代码如下:

    const arr=[1,2,3,4,5,6,7]
    const test=arr.map(item=>item>3)
    console.log(test)

假设我把item>3换成true或者false,那么得到的数组就会被映射成一个全是true或者false的数组 3.png 4. 现在给定一个数组,请告诉我它用findIndex方法后执行的结果(x3),示例代码如下:

        const arr = [undefined, 1, 2, 3, 4, 5]
        const arr1 = ['', 1, 0, 3, 4, 5]
        let k1 = arr.findIndex(item => {item>2})
        let k2 = arr.findIndex(item => ({ item: 2 }))
        let k3 = arr1.findIndex(item => item && 5)
        console.log(k1)
        console.log(k2);
        console.log(k3);

解析

  • 第一个题,注意我这里用的箭头函数,我这里面这个函数有返回值吗,没有返回值,javaScript中函数无返回值时,函数默认返回undefined,那么它对应的不就是false吗,所以根本不存在返回条件,所以执行的结果就为-1
  • 第二个题,返回的是一个对象,空对象或是对象都是对应true,所以很显然第一个满足条件的就是undefined,其索引为0
  • 第三个题,这是个且运算符,如果左边为false就直接返回左边的值,如果左边为true就返回右边的值,第一个item对应空字符串(false),就返回空字符串,它对应的布尔值为false不满足;第二个item是1,就返回5,5对应true吧,那么这个item就直接通过了,那执行的结果就是1

4.png 5. 现在给定一个数组,请告诉我它用someevery方法返回的结果,示例代码如下:

        const arr = ['', 1, 0, 3, 4, 5]
        let k1 = arr.some(item => !!item)
        let k2 = arr.every(item => !!item)
        console.log(k1);
        console.log(k2);

解析
两个!代表强制转换为布尔值类型,!表示"非",如果变量不是布尔值类型,会将变量转换为布尔值类型,再取非,这样再加一个感叹号不就相当于直接转布尔值类型了嘛,所以很显然第一个返回true,第二个返回false

5.png 6. 给定一个数组,说一下下面这串代码干了什么,示例代码如下:

const arr = ['刘能', "金子", "影子", "刘哥"]
const test = arr.filter(item => item.split("").shift() === '刘');
console.log(test);

解析
遍历每一项,每一项的值都是一个字符串方法,调用字符串的split方法,将字符串转为数组,如['刘','能'],然后shift方法删除数组的第一个元素,返回删除的元素,也就是刘,到这里我们就明白它是为了过滤出刘姓氏的数组

6.png

  1. 现在给定一个数组,请告诉我它用pop方法返回的结果,示例代码如下:
    const arr = [1,2,4,7]
    const k = arr.pop(4)
    console.log(k)

解析
pop()方法是不是返回数组最后一个被删除的元素哇,这跟传入的参数根本就没有关系,故它返回的值就是7,它爱传参数就传,你只需清楚它返回的到底是啥玩意

7.png

小结

我们在学习数组的时候不要去具体的记它的应用场景,那一两个案例,我们要牢记它的基础运算规则,只有你的思维逻辑跟着它的运算规则走,你才可以兼容它的绝大多数应用场景!!!

给大家推荐一个学习js的网站:网道,里面有很多关于js的教程,当然我给的是关于数组的,点开就可以看其他的教程啦!!

后面我也会出字符串方法,Math方法以及Date方法的学习文档,学习笔记,仅供参考,如有不足,欢迎多多交流!!!

微信图片_20221211104555.png