资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/Javascript数组常见的方法

Javascript数组常见的方法

trilever / 3119人阅读

摘要：它的参数是一个回调函数参数依次为当前的值当前的位置和原数组，所有数组成员依次执行该回调函数，直到找出第一个返回值为的成员，然后返回该成员。

分为两种：原型（实例）方法和静态函数 第一类：原型方法：

栈方法（后进先出）
push
参数：任意个
作用：将任意数量的参数逐个添加到数组尾部
返回值： 新数组的长度
影响：破坏了原数组

pop
参数：无
作用：删除数组最后一项
返回值：删除的项
影响：破坏了原数组

队列方法（先进先出）
unshift
参数：任意个
作用：将任意个参数逐个添加到数组前端
返回值：新数组的长度
影响：破坏了原数组

shift
参数：无
作用：删除数组第一项
返回值：删除的项
影响：破坏了原数组

重排序方法
reverse
参数：无
作用：反转数组
返回值：排序后的数组
影响：破坏了原数组

sort
1）不推荐使用默认排序方法
2）接受一个比较函数作为参数，
3）比较函数接受两个参数，如果第一个参数位于第二个参数之前则返回一个负数，如两个参数相等则返回0，若第一个参数位于第二个参数之后则返回一个正数
4）比较数值数组的比较函数

function ascendingCompare(num1, num2) {
    return num1 - num2;
}

function descendingCompare(num1, num2) {
    return num2 - num1;
}
   

var arr = [1 , 2, 3];
console.log(arr.sort(ascendingCompare) // [1,2,3]
console.log(arr.sort(descendingCompare) // [3,2,1]

5）根据对象数组里的对象的某个指定属性的比较函数（闭包）

function compare(propertyName) {
    return function (object1, object2) {
        return object1[propertyName] - object2[propertyName]
    }
}

var arr [{name: "子虚", age: 12}, {name: "乌有", age: 13}]
console.log(arr.sort(compare(age)) // {name: "子虚", age: 12}, {name: "乌有", age: 13}]

6）返回值：排序后的数组
7）影响：破坏了原数组

操作方法
concat
1）先创建当前数组的一个副本，然后将接收到的参数添加到这个副本的尾部，最后返回这个副本
2）如果参数是一个或多个数组，这该方法会将这些数组中的每一项都添加到结果数组中
3）如果参数不是数组，这些值会被简单的添加到结果数组的末尾
4）如果不传参数，它只是复制数组并返回副本（可用于复制数组）
5）不会破坏原数组

join
1） 将数组中的所有元素拼接成一个字符串并返回
2）可以在join传递一个字符串作为参数，该参数表示连接的方式
3）不会破坏原数组

slice
1）从当前数组中取出一个或多个指定的连续的元素创建数组并返回
2）当只有一个参数时，该方法从该参数位置开始到当前数组的所有项
3）当有两个参数时，该方法返回起始和结束位置之间的项，但不包括结束位置的项
4）当参数中有负数的时候，用数组长度加上该数来确定相应的位置
5）不会破坏原数组

splice
1）删除数组中的指定的连续的元素，也可向数组的中部插入项
2）删除：提供两个参数：删除第一项的起始位置，删除的个数
3）插入：提供三个参数：起始位置，0（删除的项数），要插入的项
4）编辑：提供三个参数：起始位置，删除的项数，要添加的项（删除的项数不一定要等于添加的项数）
5）返回从原始数组删除的项组成的数组
6）破坏了原数组

以下为es6新增

位置方法
indexOf和lastIndexOf：
1）这两个方法都接受两个参数：要查找的项和（可选的）起始位置，
2）indexOf从数组开头向后查找，lastIndexOf从数组末尾向前查找
3）返回查找的项在数组中的位置，或者在没找到的情况下返回-1
4）使用全等操作符 （NaN不等于NaN）

遍历
forEach
1）对数组每一项运行给定函数作为参数
2）该函数分别接受三个参数：数组元素，数组索引（可选），数组本身（可选）
3）无返回值
4）缺点：无法像for循环那样用break语句提前终止遍历

映射
map
1）对数组每一项运行给定函数，返回每次函数调用的结果组成的数组
2）该函数分别接受三个参数：数组元素，数组索引（可选），数组本身（可选）

过滤
filter
1）对数组每一项运行给定函数，返回该函数会返回true的项组成的数组
2）该函数分别接受三个参数：数组元素，数组索引（可选），数组本身（可选）

检测
every和some
1）它们对数组元素应用指定的函数进行判定，返回true或false
2）every就像数学中的“针对所有”的量词∀，当前仅当数组中的每一项调用指定函数都返回true，它才返回true
3）some就像数学中的“存在”的量词ョ，只要数组中有一项调用指定函数返回true，它就返回true
4）一旦every和some确认返回值就会停止遍历
5）根据数学上的惯例，空数组调用every返回true，some返回false

归纳
reduce和reduceRight
1）使用指定的函数对数组元素进行组合，生成单个值，这在函数式编程中是常见操作，也可成为“注入”和“折叠”
2）reduce第一个参数是执行简化操作的化简函数，化简函数的任务是用某种方法把两个值组合或化简为一个值，并返回化简后的值，第二个参数（可选）是作为化简函数的第一个参数的初始值，如果不传就取数组的第一项
3）化简函数的第一个参数是到目前为止的化简操作累计的结果，第2-4个参数分别是数组元素、数组索引和数组本身
4）reduceRight类似于reduce，不同的是它是从右往左处理

const a = [1,2,3,4,5]
const sum = a.reduce(function(x,y){return x+y}, 0) // 数组求和
const max = a.reduce(function(x,y){return (x>y)?x:y}) // 数组求最大值

includes
1)参数：要检测的元素
2）作用：检测某个数组是否包含给定的元素
3）返回值：布尔值
4）使用不一样的判断算法

[NaN].includes(NaN) // true

fill
1）参数：参数1用来填充数组的元素，参数2填充数组的起始位置（可选），参数3填充数组的结束位置（可选，不包括结束位置）

["a", "b", "c"].fill(7, 1) // ["a", 7, 7]

2）返回值：新数组
3）破坏了原数组
4）如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象

let arr = new Array(3).fill({name: "Mike"});
// [{name: "Mike"}, {name: "Mike"}, {name: "Mike"}]
arr[0].name = "Ben";
// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]

find和findIndex
1)find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数(参数依次为当前的值、当前的位置和原数组)，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined
2)findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1
3）这两个方法都可以接受第二个参数，用来绑定回调函数的this对象
4）这两个方法都可以发现NaN，弥补了数组的indexOf方法的不足

[NaN].indexOf(NaN) // -1
[NaN].findIndex(y => Object.is(NaN, y)) // 0
第二类：静态函数：

Array.of()
1)诞生原因：Array()构造器有一个总所周知的陷阱，就是只传一个参数，且这个参数是数字的话，那么不会构造出一个值为这个数字的单元素的数组，而是一个空数组，其length属性为这个数字；
2）Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组。

Array.from()
1）用于将两类对象转为真正的数组：类似数组的对象（arguments, nodelist）和可遍历（iterable）的对象（Set ,Map, 字符串）

var arrLike = {
    length: 4,
    2: "foo",
}
Array.from(arrLike) // [undefined, undefined, "foo", undefined]

2）第一个参数是要转换的数据，第二个是可选参数，是一个映射回调函数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组，还可以传第三个可选参数，用于指定第二个参数回调函数的this

var arrLike = {
    length: 4,
    2: "foo",
}
Array.from(arrLike, item => item || 0)  // [0, 0 , "foo", 0]

参考资料：《黄皮书》《红皮书第三版》《犀牛书》《阮大神es6》

海外云主机 GPU服务器 javascript数组方法 常见的数据分析方法 判断数组的方法 定义数组的方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95342.html

相关文章

  • 细说 Javascript 数组篇（二） : 数组的构造函数和常见操作

    摘要：数组的构造函数由于数组的构造函数在处理参数时的不确定性，因此强烈建议使用符号来创建一个新数组。总结综上所述，我们应该尽量使用来创建新函数，而不是数组的构造函数，这样代码将有更好的可读性。 数组的构造函数 由于数组的构造函数在处理参数时的不确定性，因此强烈建议使用 [] 符号来创建一个新数组。 [1, 2, 3]; // Result: [1, 2, 3] new Array(1, ...

    kaka 评论0 收藏0

  • javascript数组常见的22种方法总结

    摘要：创建数组的基本方式有两种。为数组专门提供了和方法，以便实现类似栈的行为。反转数组，按升序排列数组项即最小的值位于最前面。例如，会删除数组中的前两项。对数组中的每一项运行给定函数，返回该函数会返回的项组成的数组。 ===什么是数组=== 数组是数据的有序列表。创建数组的基本方式有两种。第一种是使用 Array 构造函数：var colors = new Array();创建数组的第二种基...

    DesGemini 评论0 收藏0

  • javascript的几种常见遍历数据结构的语法

    摘要：接触这么多年，第一次总结一下它的遍历语法。而且你必须借助特定的结构才能遍历数据结构。它的作用是遍历对象的键名。建议仅在遍历数组的时候使用。另一个优点是，它可以遍历任何部署了接口的数据结构，甚至是非的数据类型，即自己定义的数据结构。 接触JavaScript这么多年，第一次总结一下它的遍历语法。以前我大部分时间都在老版本的JavaScript下写代码，所以大部分时间都是用for...in...

    kohoh_ 评论0 收藏0

  • JavaScript中的算法（附10道面试常见算法题解决方法和思路）

    摘要：中的算法附道面试常见算法题解决方法和思路关注每日一道面试题详解面试过程通常从最初的电话面试开始，然后是现场面试，检查编程技能和文化契合度。值得记住的数组方法有和。一个好的解决方案是使用内置的方法。 JavaScript中的算法（附10道面试常见算法题解决方法和思路） 关注github每日一道面试题详解 Introduction 面试过程通常从最初的电话面试开始，然后是现场面试，检查编程...

    Cruise_Chan 评论0 收藏0

  • JavaScript中8个常见的陷阱

    摘要：然而，不会在年的基础上加，而只是表示年。闭包这是一个经典的面试题虽然期望输出，然而实际上却不会。因为第行的没有在正确的环境下执行。 译者按: 漫漫编程路，总有一些坑让你泪流满面。 原文: Who said javascript was easy ? 译者: Fundebug 为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。 这里我们针对JavaScri...

    doodlewind 评论0 收藏0

发表评论

登陆后可评论

0条评论

trilever

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<