数组操作

我们在js语法基础上已经提到过数组,该篇文章把它单拿出来细细品味一番(毕竟这个大哥在以后的开发过程中是随处可见的-

  • 首先当然要先创建一个数组(废话,没有东西搞毛啊~)
//实例化数组对象来创建数组,这个好规范的说...
var _arr1 = new Array(); //这里也可以直接显示给出数组长度 new Array(3),这样数组长度是3,而不是第一个元素是3。广义来说是没办法用这个方法创建带有一个数字元素的数组的。
//另一种就比较暴力了
var _arr2 = [];
//这里直接将空数组赋值给了变量,(虽然原则上来说不叫创建,因为[]就是数组,但也算曲线救国吧);
///
//上面的两种方式都是创建的空数组,当然也可以创建非空数组
var _arr3 = new Array(1,2,3);
var _arr4 = ['1',2,true];
//数组的元素是没有类型限制的

  • 获取数组元素(这个就简单些了,毕竟没啥可说的)
var _item1 = arr3[0]; //输出1,(兄弟们都知道程序员思维的第一个数应该是0吧^-^);
//下来写一个简单的数组遍历,当然你用for-in也是一样的;
for(var i = 0;i<_arr4.length;i++){
     console.log(_arr4[i]);
}
//这里的length属性是获取数组的长度(英语的直译...);

  • 添加/移除元素,这个就比较乱了,有从数组后面追加/删除,在数组前面添加/删除,中间插入/删除,替换插入/删除
//第一种,如果你知道你的数组,比如我们前面的_arr3;
_arr3[3] = 4 //输入是[1,2,3,4];
_arr3[0] = 5 //输出是[5,2,3,4];
_arr3[5] = 6 //输出是[5,2,3,4,,6];
//当我们输出_arr3[4] 时显示undefined,但是_arr3.length是6;
///
//第二种,通用型方法pop-push,他们是在数组后面移除和添加元素的方法
_arr3.pop(); //输出[5,2,3,4,,]; 它是负责将数组最后一个元素移除。如果你用chrome调试器的话会看到[5,2,3,4]但长度是5
_arr3.push(6,7,8);//输出[5,2,3,4, ,6,7,8],它是负责在数组后面追加元素的,可以是0个或多个,如果是参数为空则不添加。
///
//第三种,通用型方法shift-unshift,他们是在数组的开头移除和添加元素的方法
_arr3.shift(); //它是没有参数的,不要视图用它一次性移除几个元素。返回结果 [2,3,4, ,6,7,8];
_arr3.unshift(0,1); //如果不传参数没有效果,返回结果[0,1,2,3,4,,6,7,8];
///
//第四种,变相添加元素——数组合并,无论你是将元素还是数组合并进去都是通用的。
_arr3.concat(9,10); //输出[0,1,2,3,4,,6,7,8,9,10];
_arr3.concat(_arr4) //输出[0,1,2,3,4,,6,7,8,9,10,'1',2,true];
///
//第五种暴力删除数组后面的元素,可一次删除多个
_arr3.length=8; //输出[0,1,2,3,4,,6,7];
_arr3.length = _arr3.length-3; //输出[0,1,2,3,4];
//这个是不是感觉相当暴力,就像本来一条绳上按次序趴着几个蚂蚱,我把绳从中间间断了,就让下面的摔死吧~
///
//第六种,我们虽然知道了如何暴力切数组,但也只能是从开头开始切,而slice就为我们提供了另一把刀,想怎么切就怎么切
_arr3.slice(1,3); //输出[1,2] ,第一个参数是开头,第二个是结尾(不包含),要注意的是它返回一个新的数组,并不会在原有的数组上做操作
_arr3.slice(-2) //输出[3,4] 如果参数是负数则从后往前算,-2就是倒数第二个,第二个参数可选,不写就是到最后
///
//最后一个方法就是splice ,这个方法可不是slice,相对来说比slice要有更多用途,我们在案例中看他的作用
_arr3.splice(2,0,5); //输出[0,1,5,2,3,4];第一个参数是要替换/删除的位置,第二个参数是要替换/删除的长度,第三个参数如果有则是将前面的几个(或0个)替换为后面的参数(可多个),如果没有则是删除前面的元素。
_arr3.splice(2,1) //输出[0,1,2,3,4];
_arr3.splice(2,2,6,7,8) //输出 [0,1,6,7,8,4];

  • 数组排序
//先说一个简单的reverse,这家伙只是简单的把数组倒置,前面的跑后面,后面的跑前面
_arr3.reverse() //[4,3,2,1,0];  //就这样,没有其他
///
///接下来才是js排序里面的大炮sort
//最简单的用法
_arr3.sort(); //[0,1,2,3,4];就是正序排列,包括字符也是升序
//如果你实际操作了,或者你有一颗探索的心你会发现一些问题,比如下面的demo
[2,13,254,19,57,31].sort() //输出[13,19,2,254,31,57];什么鸟?2比19还大?那倒不是,只是2比1大,sort只对元素的手字符进行排序,需要实现他就需要sort的大炮了
var sortAsc = function(a,b){ //升序函数
    return a-b
}
var sortDesc = function(a,b){ //降序函数
    return b-a;
}
[2,13,254,19,57,31].sort(sortAsc);   //输出 [2,13,19,31,57,254];
[2,13,254,19,57,31].sort(sortDesc); //输出 [254,57,31,19,13,2];
//就这么简单还能叫大炮?不错,sort的参数可是一个函数啊,函数有多厉害它就会有多厉害!

  • 数组格式转换
//数组作为一种数据结构,在实际应用中经常用到格式转换的问题
///
//字符串<-->数组
var _str1 = 'hello';
var _arr1 = str1.split(''); //输出['h','e','l','l','o'];split方法是正则表达中的一个,在进阶篇正则表达式中还会详述。
//
var _str2 = arr1.join('');//输出'hello'; 
//这俩方法可以说是冤家,join负责粘连,split负责切;下面看一下join连接
var _str3 = arr1.join('$'); //输出['h$e$l$l$o'];
var _arr2 = str3.split('$');//输出['h','e','l','l','o'];

基本开发中常用到都在这了,如果您有更好的,请留言~


  • map
// map 无论是前端还是后端开发常常用到的数组函数,参数为一个函数(callbackfn),其中这个函数(callbackfn)的参数为数组的元素,返回函数(callbackfn)返回值组成的函数。
//
let _arr1 = [1,2,3,4,5];
let _arr2 = _arr1.map(function(item){
  return Math.pow(item,2);
}) 
console.log(_arr2)  // 输出 [1,4,9,16,25]
// 这个函数用处很大,比如需要修改json数组的字段等

  • reduce
// reduce 函数常常用作归总等操作,如购物车总价统计等
let _arr1 = [1,2,3,4,5];
let _arr2 = _arr1.reduce(function(pre,cur,index,arr){
  return pre+cur;
},0)
这里面的参数依次是初始值(0)[0 可选,如运费,跑腿费等]或者上一次操作结果,cur为当前元素值,index是当前索引,arr是数组本身_arr1。

  • filter
//filter是数组高阶函数中用来筛选用的。比如用户勾选对象,筛选匹配数据
let _arr1 = [1,2,3,4,5];
let _arr2 = _arr1.filter(function(item,index,arr){return item>3},_arr1) // 函数的第二个参数(_arr1)基本不用。
// index是下标,arr是数组本身,很少用,基本用item一个参数。 
console.log(_arr2) // 输出 [3,4]

... (三个点)数组元素在此展开,这个用处非常多,快速合并数组代替concat,引入对象等,vuex可以参考

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

推荐阅读更多精彩内容