JavaScript数组方法

JavaScript数组方法总结


push() 可以接受一个或者多个参数,将参数追加到数组的尾部,返回添加后的数组的长度,原数组会发生改变。

pop() 从数组尾部删除一个元素,返回这个被删除的元素,原数组发生改变。

unshift() 可以接受一个或者多个参数,将参数放到数组的头部,返回添加后的数组的长度,原数组会发生改变。

shift() 从数组头部删除一个元素,返回这个被删除的元素,原数组发生改变。

slice() 截取类 如果不传参数,会返回原数组;如果一个参数,从该参数表示的索引开始截取,直至数组结束,返回这个截取数组,原数组不变;两个参数,从第一个参数对应的索引开始截取,到第二个参数对应的索引结束,但不包括第二个参数对应的索引上值,原数组不改变;最多接受两个参数。

splice() 截取类 没有参数,返回空数组,原数组不变;一个参数,从该参数表示的索引位开始截取,直至数组结束,返回截取的 数组,原数组改变;两个参数,第一个参数表示开始截取的索引位,第二个参数表示截取的长度,返回截取的 数组,原数组改变;三个或者更多参数,第三个及以后的参数表示要从截取位插入的值。

reverse() 不接受参数,数组翻转。

sort()排序。

arr.sort(function(a,b){                

    return a-b; //从小到大排序

    return b-a; //从大到小排序          

}); 

join()参数来拼接;分隔符。

concat()将参数放入原数组后返回,原数组本身不变,如果参数是数组,将值提出来。

isArray()判断是否是数组。

toString()数组转字符串。

ES5新增的数组方法2个索引方法:indexOf() 和 lastIndexOf();

indexOf()从前往后遍历,返回item在数组中的索引位,如果没有返回-1;通常用来判断数组中有没有某个元素。可以接收两个参数,第一个参数是要查找的项,第二个参数是查找起点位置的索引。lastIndexOf()与indexOf一样,区别是从后往前找。

5个迭代方法:forEach()、map()、filter()、some()、every();

forEach()forEach方法与map方法很相似,也是对数组的所有成员依次执行参数函数。但是,forEach方法不返回值,只用来操作数据。这就是说,如果数组遍历的目的是为了得到返回值,那么使用map方法,否则使用forEach方法;forEach的用法与map方法一致,参数是一个函数,该函数同样接受三个参数:当前值、当前位置、整个数组。map()将数组的所有成员依次传入参数函数,然后把每一次的执行结果组成一个新数组返回;map方法接受一个函数作为参数。该函数调用时,map方法向它传入三个参数:当前成员、当前位置和数组本身。

filter()用于过滤数组成员,满足条件的成员组成一个新数组返回;它的参数是一个函数,所有数组成员依次执行该函数,返回结果为true的成员组成一个新数组返回。该方法不会改变原数组;可以接受三个参数:当前成员,当前位置和整个数组。

some()该方法对数组中的每一项运行给定函数,如果该函数对任何一项返回 true,则返回true。(some方法会在数组中任一项执行函数返回true之后,不在进行循环。)

every()该方法对数组中的每一项运行给定函数,如果该函数对每一项都返回 true,则返回true。2个归并方法:reduce()、reduceRight();reduce()依次处理数组的每个成员,最终累计为一个值。reduce是从左到右处理(从第一个成员到最后一个成员)。参数是一个函数,该函数接受以下两个参数:1累积变量,默认为数组的第一个成员;2当前变量,默认为数组的第二个成员。reduceRight()从右往左。

ES6新增的数组方法Array.from()用于类似数组的对象(即有length属性的对象)和可遍历对象转为真正的数组。

let json ={    '0':'hello',    '1':'123',    '2':'panda',    length:3 } 

let arr = Array.from(json); console.log(arr);

//打印:["hello", "123", "panda"]

Array.of()将一组值转变为数组。

let arr1 = Array.of('你好','hello'); 

console.log(arr1); //["你好", "hello"]

find()和findIndex()用于找出第一个符合条件的数组成员。参数是个回调函数,所有数组成员依次执行该回调函数,直到找到第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,就返回undefined;可以接收3个参数,依次为当前值、当前位置、原数组。fill()使用fill()方法给定值填充数组。

如:new Array(3).fill(7); //[7,7,7]

可以接收第二个和第三个参数,用于指定填充的起始位置和结束位置(不包括结束位置)。

let arr3 = [0,1,2,3,4,5,6,7]; 

arr3.fill('error',2,3); 

console.log(arr3); //[0,1,"error",3,4,5,6,7]

遍历数组的方法:entries()、values()、keys()这三个方法都是返回一个遍历器对象,可用for...of循环遍历,唯一区别:keys()是对键名的遍历、values()对键值的遍历、entries()是对键值对的遍历。

for(let item of ['a','b'].keys()){    

    consloe.log(item);    //0    //1

}

for(let item of ['a','b'].values()){    

    consloe.log(item);    //'a'    //'b'

}

let arr4 = [0,1];

for(let item of arr4.entries()){    

    console.log(item);    //  [0, 0]    //  [1, 1]

}

如果不用for...of进行遍历,可用使用next()方法手动跳到下一个值。

let arr5 =['a','b','c']

let entries = arr5.entries();

console.log(entries.next().value); //[0, "a"]

console.log(entries.next().value); //[1, "b"]

console.log(entries.next().value);//[2,"c"]

console.log(entries.next().value); //undefined

copyWithin()在数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),改变原数组。该函数有三个参数。target:目的起始位置。start:复制源的起始位置(从0开始),可以省略,可以是负数。end:复制源的结束位置,可以省略,可以是负数,实际结束位置是end-1。

const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];

arr1.copyWithin(1, 3, 6); //把第3个元素(从0开始)到第5个元素,复制并覆盖到以第1个位置开始的地方。

console.log('%s', JSON.stringify(arr1)) //[1,4,5,6,5,6,7,8,9,10,11]

start和end都是可以省略。start省略表示从0开始,end省略表示数组的长度值。目标的位置不够的,能覆盖多少就覆盖多少。

const arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

arr2.copyWithin(3)

console.log('%s', JSON.stringify(arr2)) //[1,2,3,1,2,3,4,5,6,7,8]

start和end都可以是负数,负数表示从右边数过来第几个(从-1开始)。start小于end,两者为负数时也是。

const arr3 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

arr3.copyWithin(3, -3, -2)

console.log('%s', JSON.stringify(arr3))

end永远大于end(取值必须是start右边的),end小于start(取start左边的值)时会返回原数组。

ES7新增的数组方法includes()表示某个数组是否包含给定的值,如果包含则返回 true,否则返回false。可以接收两个参数:要搜索的值和搜索的开始索引。当第二个参数被传入时,该方法会从索引处开始往后搜索(默认索引值为0)。若搜索值在数组中存在则返回true,否则返回false。

['a', 'b', 'c', 'd'].includes('b')      // true

['a', 'b', 'c', 'd'].includes('b', 1)    // true

['a', 'b', 'c', 'd'].includes('b', 2)    // false

数组迭代方法的重写


数组迭代方法的重写

下文中出现的深拷贝函数deepClone

深拷贝方法

forEach重写

/** * forEach循环 :

* 第一个参数是回调函数 回调函数的参数为( 元素,下标,当前数组 )

* 第二个参数要修改的this指向 *

* arr.forEach( function(item,index,array){ 

    console.log(this.name)

    console.log(item,index,array)

} , obj) */


重写forEach代码

filter方法重写

* 重写思路:

        首先filter会返回一个新数组 所以需要创建一个新数组去接收

        根据用户的条件判断返回的true和false去判断要不要添加到新数组中


filter重写代码

every重写

· 首先every最终返回了一个布尔值,只有当我们传入的函数中所返回的值都为true才会返回true只要有一个返回false那么就返回false


every方法

map方法

*  思路和forEach差不多

*  Map方法需要return 会返回一个新数组

*  如果没有return返回一个都是undefined的数组且和forEach循环操作一样


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

推荐阅读更多精彩内容