数组基本方法

一、转换方法

数组调用toString()时,会给每一项调用toString()然后拼接成字符串,
数组调用toLocaleString()时,会给每一项调用toLocaleString()然后拼接成字符串,
valueOf()方法返回依旧是数组,join()在IE7之前不传参数会以undefined作为分隔符
如果数组中每一项为 null 或者 undefined ,那么在调用 join() ,toString() ,.toLocaleString() ,valueOf() 方法返回结果会以空字符串表示

var colors = ['red', 'blue', 'green', 'OOO'];
colors.join()            // ==>  "red,blue,green,OOO"
colors.toString()        // ==>  "red,blue,green,OOO"
colors.toLocaleString()  // ==>  "red,blue,green,OOO"
colors.valueOf()         // ==>  ['red', 'blue', 'green', 'OOO']

二、栈方法、队列方法

push()

var colors = ['red', 'blue', 'green'];
var count = colors.push('ooo', 'ppp'); 
colors  // ==>  ['red', 'blue', 'green', 'ooo', 'ppp'];
count   // ==>  5

pop()

var colors = ['red', 'blue', 'green'];
var item= colors.pop(); 
colors  // ==>  ['red', 'blue'];
item    // ==>  'green'

unshift()

var colors = ['red', 'blue', 'green'];
var count = colors.unshift('ooo', 'ppp'); 
colors   // ==>  ['ooo', 'ppp', 'red', 'blue', 'green'];
count    // ==>  5

shift()

var colors = ['red', 'blue', 'green'];
var item= colors.shift(); 
colors  // ==>  ['blue', 'green'];
item    // ==>  'red'

三、重排序方法

reverse()

var arr= [1,2,3,4,5];
var result= arr.reverse(); 
arr     // ==>   [5, 4, 3, 2, 1]
result  // ==>   [5, 4, 3, 2, 1]

sort()

调用 sort() 方法时会调用每一项的 toString() 然后比较得到的字符串,即使每一项都是数字,也会转化成字符比较(即:字符串编码排序)

// 简单的字符排序
var arr= [0,28,13,14,5];
var result= arr.sort(); 
arr     // ==>  [0, 13, 14, 28, 5];
result  // ==>  [0, 13, 14, 28, 5];
// 数字排序
var arr= [0,28,13,14,5];
var result= arr.sort((a, b) => {
  return a - b;
 }); 
arr     // ==>  [0, 5, 13, 14, 28];
result  // ==>  [0, 5, 13, 14, 28];
// 随机打乱数组
var arr= [0,28,13,14,5];
var result= arr.sort((a, b) => {
  return Math.random() - 0.5;
 }); 
arr     // ==>  [0, 5, 13, 14, 28];
result  // ==>  随机打乱的数组

四、操作方法

concat()

var colors = ['red', 'blue', 'green'];
var colors2 = colors.concat('ooo', ['ppp', 'iii']); 
colors    // ==>   ['red', 'blue', 'green'];
colors2   // ==>   ["red", "blue", "green", "ooo", "ppp", "iii"]
var colors = ['red', 'blue', 'green'];
var colors2 = colors.concat('ooo', [ 'ppp', 'iii', [ 'ddd', 'fff' ] ]); 
colors    // ==>   [ 'red', 'blue', 'green' ];
colors2   // ==>   [ "red", "blue", "green", "ooo", "ppp", "iii", ['ddd', 'fff'] ];

slice()

截取字符串方法
参数1:开始截取的位置索引值(支持负数)
参数2:结束截取的位置索引值(不包含结束位置,默认到最后,支持负数)
返回截取后的新数组
原数组不会变化

var colors = ['red', 'blue', 'green', "ooo", "ppp"];
var colors2 = colors.slice(1); 
var colors3 = colors.slice(1, 4); 
// colors.slice(-2, -1); 等价于 colors.slice(3, 4);
colors     // ==>  ['red', 'blue', 'green', "ooo", "ppp"];
colors2    // ==>  ["blue", "green", "ooo", "ppp"];
colors3    // ==>  ["blue", "green", "ooo"];

splice()

实现数组增,删,改
参数1:开始删除的位置索引值
参数2:删除的个数(默认删除到最后)
参数3:需要添加的元素
返回删除的那些项组成的数组
原数组会发生变化

var colors = ['red', 'blue', 'green'];
var removeItems = colors.splice(0,2);
colors       // ==>  ["green"];
removeItems  // ==>  ["red", "blue"];
var colors = ['red', 'blue', 'green'];
var removeItems = colors.splice(1, 0, 'yellow', 'orange');
colors       // ==>  ["red", "yellow", "orange", "blue", "green"];
removeItems  // ==>  [];
var colors = ['red', 'blue', 'green'];
var removeItems = colors.splice(1, 2, 'yellow', 'orange');
colors       // ==>  ["red", "yellow", "orange"];
removeItems  // ==> ["blue", "green"];

五、操作方法

indexOf() / lastIndexOf()

查找位置
参数1:要查找的项
参数2:要查找的起点位置
查找均是以严格相等查找(===)

var arr = [1, 2, 4, 5, 7, '8', '10'];
arr.indexOf(8);        // ==>  -1
arr.lastIndexOf(8);    // ==>  -1
arr.indexOf(2);        // ==>   1
arr.lastIndexOf(2);    // ==>   1
arr.indexOf(5,3);      // ==>   3
arr.lastIndexOf(5,3);  // ==>   3
arr.indexOf(5,4);      // ==>  -1
arr.lastIndexOf(5,4);  // ==>   3

六、迭代方法

every() filter() forEach() map() some()
每个方法都有两个参数
参数1:在每一项运行的函数
参数2:运行该函数的作用域对象
传入方法的函数接收三个参数
1,数组项的值
2,该项在数组的位置索引值
3,数组对象本身

// every() 对数组中每一项运行给定函数 只有数组中每一项都返回 true ,则返回 true
// some() 对数组中每一项运行给定函数 只要有其中一项返回 true 就直接返回 true
// filter() 对数组中每一项运行给定函数 返回该函数会返回 true 的项组成的数组
// map() 对数组中每一项运行给定函数 返回函数调用的结果组成的数组
// forEach() 对数组中每一项运行给定函数 无返回值
var arr = [33, 44, 55, 66, 77, 88];
arr.forEach(function(item, index, array){
  // console.log(item, index, array);
});
var everyArr = arr.every(function(item, index, array){
  // console.log(item, index, array);
  return item > 70;
});
var someArr = arr.some(function(item, index, array){
  // console.log(item, index, array);
  return item > 70;
});
var filterArr = arr.filter(function(item, index, array){
  // console.log(item, index, array);
  return item > 70;
});
var mapArr = arr.map(function(item, index, array){
  // console.log(item, index, array);
  return item - 1;
});
everyArr    // ==>  false
filterArr   // ==>  true
filterArr   // ==>  [77, 88]
mapArr      // ==> [32, 43, 54, 65, 76, 87]

七、缩小方法

reduce() / reduceRight()

两个方法都会迭代数组的每一项,然后构建最终返回值
reduce() 从第一项开始
reduceRight() 从最后一项开始
都接收两个参数
参数1:每一项上调用的函数(传入的函数接收四个参数,1、前一个值,2、当前值,3、当前值的索引,4、数组对象)
参数2:(可选)作为缩小基础的初始值

函数返回任何值都会作为第一个参数自动传给下一项

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

推荐阅读更多精彩内容