JavaScript数组方法

keithyau 发布于2019-08-26 11:49 / 1855人阅读

摘要：前言从事前端到现在也有快两年了，平时也会收集整理一些笔记放在印象笔记，不过收集过之后就在没有看过，经大佬指点，真正掌握一个知识点，最好的方式就是用自己的话把内容讲明白，就开始将以前零散的东西整合一下，和各位道友一起提高。

前言

从事前端到现在也有快两年了，平时也会收集整理一些笔记放在印象笔记，不过收集过之后就在没有看过，经大佬指点，真正掌握一个知识点，最好的方式就是用自己的话把内容讲明白，就开始将以前零散的东西整合一下，和各位道友一起提高。

操作数组

印象中数组有很多方法，系统的整理一下

Array.map()

此方法是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组
    let arr = [1, 2, 3, 4, 5]
    let newArr = arr.map(x => x*2)
    //arr= [1, 2, 3, 4, 5]   原数组保持不变
    //newArr = [2, 4, 6, 8, 10] 返回新数组

Array.forEach()

此方法是将数组中的每个元素执行传进提供的函数，没有返回值，直接改变原数组，注意和map方法区分
    let arr = [1, 2, 3, 4, 5]
    num.forEach(x => x*2)
    // arr = [2, 4, 6, 8, 10]  数组改变,注意和map区分

Array.filter()

此方法是将所有元素进行判断，将满足条件的元素作为一个新的数组返回
    let arr = [1, 2, 3, 4, 5]
    const isBigEnough => value => value >= 3
    let newArr = arr.filter(isBigEnough )
    //newNum = [3, 4, 5] 满足条件的元素返回为一个新的数组

Array.every()

此方法是将所有元素进行判断返回一个布尔值，如果所有元素都满足判断条件，则返回true，否则为false
    let arr = [1, 2, 3, 4, 5]
    const isLessThan4 => value => value < 4
    const isLessThan6 => value => value < 6
    arr.every(isLessThan4 ) //false
    arr.every(isLessThan6 ) //true

Array.some()

 此方法是将所有元素进行判断返回一个布尔值，如果存在元素都满足判断条件，则返回true，若所有元素都不满足判断条件，则返回false
   let arr= [1, 2, 3, 4, 5]
    const isLessThan4 => value => value < 4
    const isLessThan6 => value => value > 6
    arr.some(isLessThan4 ) //true 
    arr.some(isLessThan6 ) //false

Array.reduce()

 此方法是所有元素调用返回函数，返回值为最后结果,传入的值必须是函数类型
   let arr = [1, 2, 3, 4, 5]
   const add = (a, b) => a + b
   let sum = arr.reduce(add)
   //sum = 15  相当于累加的效果
   与之相对应的还有一个 Array.reduceRight() 方法，区别是这个是从右向左操作的

Array.push()

 此方法是在数组的后面添加新加元素，此方法改变了数组的长度
   let arr = [1, 2, 3, 4, 5]
   arr.push(6, 7)
   console.log(arr) //[1, 2, 3, 4, 5, 6, 7]
   console.log(arr.length) //7

Array.pop()

 此方法在数组后面删除最后一个元素，并返回数组，此方法改变了数组的长度
    let arr = [1, 2, 3, 4, 5]
    arr.pop()
    console.log(arr) //[1, 2, 3, 4]
    console.log(arr.length) //4

Array.shift()

 此方法在数组后面删除第一个元素，并返回数组，此方法改变了数组的长度 
    let arr = [1, 2, 3, 4, 5]
    arr.shift()
    console.log(arr) //[2, 3, 4, 5]
    console.log(arr.length) //4

Array.unshift()

 此方法是将一个或多个元素添加到数组的开头，并返回新数组的长度
    let arr = [1, 2, 3, 4, 5]
    arr.unshift(6, 7)
    console.log(arr) //[6, 7, 2, 3, 4, 5]
    console.log(arr.length) //7

Array.isArray()

 判断一个对象是不是数组，返回的是布尔值

Array.concat()

 此方法是一个可以将多个数组拼接成一个数组
   let arr1 = [1, 2, 3] 
       arr2 = [4, 5]
   let arr = arr1.concat(arr2)
 console.log(arr)//[1, 2, 3, 4, 5]

Array.toString()

 此方法将数组转化为字符串
   let arr = [1, 2, 3, 4, 5];
   let str = arr.toString()
   console.log(str)// 1,2,3,4,5

Array.join()

  此方法也是将数组转化为字符串
   let arr = [1, 2, 3, 4, 5];
   let str1 = arr.toString()
   let str2 = arr.toString(",")
   let str3 = arr.toString("##")
   console.log(str1)// 12345
   console.log(str2)// 1,2,3,4,5
   console.log(str3)// 1##2##3##4##5
   通过例子可以看出和toString的区别，可以设置元素之间的间隔~

15.Array.splice(开始位置，删除的个数，元素)

   万能方法，可以实现增删改
     let arr = [1, 2, 3, 4, 5];
     let arr1 = arr.splice(2, 0 "haha")
     let arr2 = arr.splice(2, 3)
     let arr1 = arr.splice(2, 1 "haha")
     console.log(arr1) //[1, 2, "haha", 3, 4, 5]新增一个元素
     console.log(arr2) //[1, 2] 删除三个元素
     console.log(arr3) //[1, 2, "haha", 4, 5] 替换一个元素

结尾

第一次写，都是很简单的数组用法，千里之行始于足下，重新把基础夯实一下，如果存在错误或者表达不当，还望及时告知，thx

参考

MDN语法还有很多好玩的方法可以去demo
《JavaScript高级权威指南》数组操作

GPU云服务器云服务器 javascript数组方法数组方法数组操作方法构造方法数组

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

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

JavaScript专题系列文章

摘要：专题系列共计篇，主要研究日常开发中一些功能点的实现，比如防抖节流去重类型判断拷贝最值扁平柯里递归乱序排序等，特点是研究专题之函数组合专题系列第十六篇，讲解函数组合，并且使用柯里化和函数组合实现模式需求我们需要写一个函数，输入，返回。 JavaScript 专题之从零实现 jQuery 的 extend JavaScritp 专题系列第七篇，讲解如何从零实现一个 jQuery 的 ext...

Maxiye 2019-08-21 17:57 评论0 收藏0
Array的javascript数据结构描述

摘要：几乎所有的编程语言都有类似的数据结构。然而的数组却略有不同。没有定义中说的那样的数据结构，作为替代。元素通过指定的分隔符进行分隔。返回该对象的源代码。把数组转换为本地数组，并返回结果。写在前面的话：经常看到技术博客上写的内容很详细，对于一个问题，大家的博客内容似乎都是一样的。不难发现这些技术博客已经成为各路教程的汇总地，而教程一般都是参考国外博客翻译或者直接在经典的书籍上大片抄录。...

iOS122 2019-08-21 10:37 评论0 收藏0
JavaScript面向对象编程——Array类型

摘要：中并没有明确的数组数据类型。返回数组对象的原始值。专门用于筛选出数组中符合函数判断条件的元素组成的心数组。专门用于对原数组中每个元素执行相同的函数对象规定的操作。概述一维数组数组是一个有序的数据集合，可以通过数组名称和索引进行访问。JavaScript中并没有明确的数组数据类型。二维数组数组是可以嵌套的，这就意味着一个数组可以作为一个袁旭被包含在另一个数组里面。利用JavaS...

DirtyMind 2019-08-26 12:16 评论0 收藏0
array数组类型

摘要：中并没有明确的数组数据类型。创建一维数组具有以下几种方式二维数组数组是可以嵌套，这就意味着一个数组可以作为一个数组被包含在另外一个数组里面。利用这个特点，创建二维数组，即数组的数组。删除数组的最后一个元素并返回删除的元素。 Array 概述一维数组数组是一个有序的数据集合，可以通过数组名称和索引进行访问。JavaScript中并没有明确的数组数据类型。创建一维数组具有以下几种方式：...

lemanli 2019-08-26 12:16 评论0 收藏0
JavaScript标准库系列——Object对象和Array对象（一）

摘要：目录导语对象对象小结导语本系列文章将重点讲解提供的原生库标准库，只要在支持语言的平台，标准库中的提供的对象的属性和方法都能使用对象对象的理解讲的标准库，首先要从对象谈起，因为之后的所有对象都可以看做是对象构造出来的因此，对象可以看做是一个构目录导语 1. Object对象 2. Array对象 3. 小结导语本系列文章将重点讲解JavaScript提供的原生库——标准库，只要...

Scholer 2019-08-21 11:25 评论0 收藏0
JavaScript学习总结（二）数组和对象部分

摘要：属性是一个值或一组值以数组或对象的形式，是对象的成员。可以使用内置构造函数和创建包装对象。因此下面的代码将会使人很迷惑结果结果，此数组长度为应该尽量避免使用数组构造函数创建新数组。给数组对象添加返回数组中最大元素值的方法。对象部分 Object类型 Object 是一个无序的集合，可以存放任意类型对象，所有其他对象都继承自这个对象。创建Object类型有两种，一种是使用new运算符，...

Lsnsh 2019-08-21 12:27 评论0 收藏0