数组中常用的方法

一.引言

 数组的类型是一个对象,是特殊的对象。

二.数组中的方法从以下几个方面来讲解

1.方法的作用和含义
2.方法的实参(类型和含义)
3.方法的返回值
4.原来的数组是否发生改变

三.数组中常用方法列举

1.array.push()//从最后添加元素
2.array.unshift()//从头添加
3.array.shift()//删除首部第一个
4.array.pop()从尾部删除一个
5.array.sort()//元素是按ascill码从小到大排列
6.array.reverse()//将数组反序排列
7.array.concat(另一个数组)//将两个数组拼接在一起
8.array.join('字符')//将元素间添加字符,再以字符串的方式返回
9.array.toString()//将数组转化为字符串并用逗号隔开
10.array.slice(开始位置,结束位置)//从哪个位置开始,不包含结束位置,截取个数
11.array.splice(开始位置,要删除几项,要替换的内容)
(1)删除:array.splice(0,2):从第0项开始删除2项
(2)添加:array.splice(0,0,'icey'):从第0项开始,删除0项,添加一个内容
(3)替换:array.splice(0,2,'icey','rain'):从第0项开始,删除2项,替换成后面的两项内容
12.array.indexof(元素):从头查找元素第一次出现位置下标,元素不存在反回-1;
13.array.lastIndexOf(元素):从尾查找元素第一次出现位置下标,元素不存在反回-1;
14.array.forEach(function(item,index){})遍历数组
15.array.every(function(item,index){})//循环数组,只有数组里每一个都满足返回的判断条件才返回true,否则返回false
16.array.some(function(item,index){})//遍历数组,只要数组里有一个元素满足条件就返回true,就不在执行遍历后面的,全都不满足则返回false
17.array.filter(function(item.index){})//过滤筛选符合判断条件的元素,只有为true才会返回
18.array.find(function(item,index){})//筛选符合判断条件的元素,找到返回第一个元素下标,找不到返回-1
19.array.includes(元素):判断数组中是否含这个元素,返回的是布尔值
20.array.map(function(item,index){})//对数组的每一个元素都进行改变,并生成一个新的数组,原数组不变
21.array.findindex(function(v,i){ //判断函数体});//筛选符合判断条件的元素,找到返回第一个元素下标,找不到返回-1

四、代码讲解

1.在首部、尾部添加或删除元素

 <script>
        let arr=[1,2,3,4,5,'icey','rain']
        // 1.在首部和尾部删除
        // let res=arr.shift() //在首部删除一个
        // console.log(res); //res结果是返回被删除的元素
        // console.log(arr); //会改变原数组:结果为: [2, 3, 4, 5, 'icey', 'rain']

        // let res=arr.pop() //在尾部删除一个
        // console.log(res); //res结果是返回被删除的元素rain
        // console.log(arr);// [1, 2, 3, 4, 5, 'icey']

        // 2.再首部和尾部添加
        //  let res=arr.unshift('sally') //再首部添加一个
        // console.log(res); //res结果是返回是添加后的数组的长度为8
        // console.log(arr);// ['sally', 1, 2, 3, 4, 5, 'icey', 'rain']

        // let res=arr.push('Dear') //再尾部添加一个
        // console.log(res); //res结果是返回是添加后的数组的长度为8
        // console.log(arr);//(8) [1, 2, 3, 4, 5, 'icey', 'rain', 'Dear']
    </script>

(2)排序,反序排列,数组拼接,转化为字符串

 // 3.数组排序,反序排列
        // let arr1=[3,2,10,9,66]
        // let res=arr1.sort()//数组排列
        // console.log(res);// 是按照acsill进行排序 [10, 2, 3, 66, 9]
        // console.log(arr1);//会改变原数组  [10, 2, 3, 66, 9]

        // let res=arr.reverse()//数组反序排列
        // console.log(res);//反序排列后的结果 ['rain', 'icey', 5, 4, 3, 2, 1]
        // console.log(arr);//会改变原数组的结果 ['rain', 'icey', 5, 4, 3, 2, 1]


        // 4.数组拼接,转化为字符串
        let arr2=[10,20,30]
        let arr3=[40,50,90]
        // let res=arr2.concat(arr3) //把两个数组合并在一起
        // console.log(res);//结果为:[10, 20, 30, 40, 50, 90]
        // console.log(arr2,arr3); //不改变原数组的值

        // let res=arr2.join('&')//把数组元素用&符号连在一起并返回字符串
        // console.log(res);//10&20&30 
        // console.log(arr2);//不改变原数组的值

        // let res=arr3.toString() //将数组转化为字符串并用,隔开
        // console.log(res); //40,50,90
        // console.log(arr3);//不改变原数组的值

(3)slice截取和splice:删除,添加,替换

  // 5.slice截取
        let arr4=[1,2,3,4,5,6]
        // let res=arr4.slice(0,2)//截取从下标0开始,到下标2结束,不包含结束位置
        // console.log(res);//返回截取的内容:[1, 2]
        // console.log(arr4);//不改变原数组的值


       // 6.splice方法:删除,添加,替换
        // 删除
        // let res=arr4.splice(0,2)//从下标0开始删除两项
        // console.log(res); //返回删除的两项[1, 2]
        // console.log(arr4);//改变原数组:[3, 4, 5, 6]
        // 添加
        // let res = arr4.splice(0, 0,'Icey') //从下标0开始删除0项,再添加一项,默认再从头添加
        // console.log(res); //结果为空数组
        // console.log(arr4); //改变原数组:['Icey', 1, 2, 3, 4, 5, 6]
        // 替换
        // let res = arr4.splice(0, 2,'Icey','Rain') //从下标0开始删除2项,再添加两项,默认再从头添加
        // console.log(res); //返回删除的两项[1, 2]
        // console.log(arr4); //改变原数组:['Icey', 'Rain', 3, 4, 5, 6]

(4)查询元素对应的下标,以及是否包含这个元素

      // 7.查找元素对应的下标,以及是否包含这个元素
        // let arr5=[1,2,3,4,'icey','rain',5]
        // let res=arr5.indexOf('icey')//从头查找元素第一次出现位置下标,元素不存在反回-1;
        // console.log(res);//返回下标4

        // let res=arr5.lastIndexOf(5)//从尾查找元素第一次出现位置下标,元素不存在反回-1;
        // console.log(res);///返回下标:6

        // let res=arr5.includes('rain')//判断数组中是否含这个元素,返回的是布尔值
        // console.log(res);//包含返回:true

(5)循环数组的方法以及区别

  // 8.循环数组的方法
        // let arr6 = [1, 2, 3, 4, 'icey', 'rain', 5]
        // arr6.forEach(function(item,index){
        //     console.log(item,index);//就是遍历每一个元素,item是每一个元素,index是元素对应的下标
        // })

        // let res=arr6.filter(function(item,index){
        //     return item>3
        // })
        // console.log(res);//遍历所有元素,返回满足条件的,只有为true才返回,结果为:[4, 5]



        //map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
        // map() 方法按照原始数组元素顺序依次处理元素。
        // 注意: map() 不会对空数组进行检测。
        // 注意: map() 不会改变原始数组。
        // map主要用于处理数据
    //     let arr7 = [2,4,6,8,10]
    //    let res= arr7.map(function (item, index) {
    //         return item/2
    //     })
    //     console.log(res);//[1, 2, 3, 4, 5]


        // every():遍历所有的元素,只有当所有元素都满足判断条件时才返回true
        // let arr8 = [2,4,6,8,10]
        // let res=arr8.every(function(item,index){
        //     return item>6
        // })
        // console.log(res);//结果为false,


        // some():遍历所有元素,当有一个元素满足条件就返回true,后面元素就不遍历了,
        // 如果所有的元素都不满足条件就返回false
        //  let arr8 = [2,4,6,8,10]
        // let res=arr8.some(function(item,index){
        //     // return item>6
        //     return item>12  //
        // })
        // console.log(res);//结果为false


        //find():返回符合判断条件的第一个数组元素,没有就返回undefined
        // let arr8 = [2,4,4,6,8,10]
        // let res=arr8.find(function(item,index){
        //     return item>4
        // })
        // console.log(res);//结果为:6,返回的是数组中大于4的第一个元素


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

推荐阅读更多精彩内容