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
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,076评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,658评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,732评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,493评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,591评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,598评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,601评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,348评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,797评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,114评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,278评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,953评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,585评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,202评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,442评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,180评论 2 367
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,139评论 2 352

推荐阅读更多精彩内容