数组操作

总结:join(),concat(),slice(),filter(),reduce()数组本身保持不变

数组基础

创建数组的方法
// 方法1:使用Array构造函数,new Array()
var arr1 = new Array("HTML","CSS","javascript");

// 方法2:使用数组字面量表示法 [ ]
var arr2 = ["CSS","javascript","HTML"];
数组的特点
  • 一个数组可以存放不同类型的元素
  • 使用array.length,获取数组array的长度
  • 把一个值放在超出当前数组大小的位置上时,会重新计算数组长度值,长度值等于最后一项索引加1
var arr1 = new Array("HTML","CSS","javascript");
arr1[4] = 'test';

console.log(arr1);          // ["HTML", "CSS", "javascript", empty, "test"]
console.log(arr1.length);   // 5

数组操作

push():把它的参数值顺序添加到数组的尾部
var colors = new Array("red","green");
var len = colors.push("blue","yellow","blank");

console.log(colors);  // 改变数组本身的内容:["red", "green", "blue", "yellow", "blank"]
console.log(len);     // 返回值是新数组长度:5
unshift():把它的参数值顺序添加到数组的头部
var nums = [2,7,8,6];
var size = nums.unshift(99,66);

console.log(nums);  // 改变数组本身的内容:[99, 66, 2, 7, 8, 6]
console.log(size);  // 返回值是新数组长度:6
pop():删除数组中的最后一个元素
var nums = [2,7,8,6];
var n = nums.pop();

console.log(nums);  // 改变数组本身的内容:[2, 7, 8]
console.log(n);     // 返回值是被删除的元素:6
shift():删除数组中的第一个元素
var colors = new Array("red","green");
var m = colors.shift();

console.log(colors);    // 改变数组本身的内容:["green"]
console.log(m);         // 返回值是被删除的元素:red
join():把数组装换为字符串
var words=["border","left","color"];
var wordstr=words.join("-");

console.log(words);     // 数组本身保持不变:["border", "left", "color"]
console.log(wordstr);   // 返回值是转化后的字符串:border-left-color
sort():对数组中的元素进行排序
var arr1 = [1, 5, 2, 8, 4];
var arr2 = arr1.sort((a, b) => a - b); // 从小到大排序
console.log(arr1); // 改变数组本身的内容:1, 2, 4, 5, 8
console.log(arr2); // 返回值是排序后的数组:1, 2, 4, 5, 8

var arr3 = [1, 5, 2, 8, 4];
var arr4 = arr3.sort((a, b) => b - a); // 从大到小排序
console.log(arr3); // 改变数组本身的内容:8, 5, 4, 2, 1
console.log(arr4); // 返回值是排序后的数组:8, 5, 4, 2, 1
reverse():颠倒数组中元素的顺序
var arr1 = [1, 2, 3, 4, 5];
var arr2 = arr1.reverse();

console.log(arr1);  // 改变数组本身的内容:[5, 4, 3, 2, 1]
console.log(arr2);  // 返回值是排序后的数组:[5, 4, 3, 2, 1]
concat():连接两个或多个数组
var arr1 = ["a", "b"];
var arr2 = ["c", "d"];
var arr3;

arr3 = arr1.concat(arr2, ["e"]);
console.log(arr1); // 数组本身保持不变:["a", "b"]
console.log(arr3); // 返回值是连接后的数组:["a", "b", "c", "d", "e"]
slice():截取数组
var colors = ["red", "green", "blue", "yellow", "orange"];
var newColors1 = colors.slice(1);       // 从下标1开始到最后
var newColors2 = colors.slice(1, 2);    // 从下标1开始到下标(2-1:1)为止
var newColors3 = colors.slice(-2, 5);   // 从下标-2开始到下标(5-1:4)为止(-1代表最后一个)

console.log(colors);        // 数组本身保持不变:["red", "green", "blue", "yellow", "orange"]
console.log(newColors1);    // 返回值是选定后的数组:["green", "blue", "yellow", "orange"]
console.log(newColors2);    // 返回值是选定后的数组:["green"]
console.log(newColors3);    // 返回值是选定后的数组:["yellow", "orange"]
splice():更新数组内容
//删除
//splice(index,count) 删除从index处开始的0个或多个元素,返回值是被删除元素的数组
var arr1 = ["a", "b", "c", "d", "e", "f"];
var delArr1 = arr1.splice(2);
console.log(arr1);     // 改变数组本身的内容:["a", "b"]
console.log(delArr1);  // 返回值是被删除元素构成的数组:["c", "d", "e", "f"]

var arr2 = ["a", "b", "c", "d", "e", "f"];
var delArr2 = arr2.splice(2, 2);
console.log(arr2);    // 改变数组本身的内容: ["a", "b", "e", "f"]
console.log(delArr2); // 返回值是被删除元素构成的数组:["c", "d"]

//插入
// splice(index,0,item1...,itemX) 从index之前开始插入数组,返回值是空数组
var arr3 = ["a", "b", "c", "d", "e", "f"];
var insertArr = arr3.splice(3, 0, "m", "n");
console.log(arr3);       // 改变数组本身的内容: ["a", "b", "c", "m", "n", "d", "e", "f"]
console.log(insertArr);  // 返回值是空数组:[]

//替换
//先删除,再追加,返回值是被删除元素的数组
var arr4 = ["a", "b", "c", "d", "e", "f"];
var replaceArr = arr4.splice(1, 2, "x", "y", "z");
console.log(arr4);          // 改变数组本身的内容: ["a", "x", "y", "z", "d", "e", "f"]
console.log(replaceArr);    // 返回值是被删除元素构成的数组:["b", "c"]
indexOf():从数组的开头(位置0)开始向后查找某个元素的位置
//indexOf(searchvalue,satartIndex)
    //searchvalue:必须,要查找的内容
    //startIndex:可选,起点位置的索引
var nums1 = [1,7,5,7,8,1,6,9];
var pos1 = nums1.indexOf(99);
var pos2 = nums1.indexOf(7,3);

console.log(pos1);  // -1(没有找到)
console.log(pos2);  // 3
lastIndexOf():从数组的末尾开始向前查找某个元素的位置
//lastIndexOf(searchvalue,satartIndex)
var nums2 = [1, 7, 5, 7, 8, 1, 6, 9];
var pos3 = nums2.lastIndexOf(1);
var pos4 = nums2.lastIndexOf(1, 3);

console.log(pos3); // 5
console.log(pos4); // 0
forEach():遍历所有元素
var arr = ['a','b','c'];
arr.forEach((item,index,array) => {
    // 遍历数组的所有元素
    console.log(item,index,array);
    // a 1 ['a','b','c']
    // b 2 ['a','b','c']
    // c 3 ['a','b','c']
});
every():判断所有元素是否都符合条件
var arr1 = [1, 2, 3, 4];
var result1 = arr1.every((item) => item < 4);
console.log(result1);   // false

var arr2 = [1, 2, 3];
var result2 = arr2.every((item) => item < 4);
console.log(result2);   // true
some():判断是否有至少一个元素符合条件
var arr1 = [2, 3, 4];
var result1 = arr1.some((item) => item < 2);
console.log(result1);   // false

var arr2 = [1, 3, 4];
var result2 = arr2.some((item) => item < 2);
console.log(result2);   // true
map():对元素进行重新组装,生成新数组
var arr1 = [1, 2, 3, 4];
var arr2 = arr1.map(item => item + 1);
console.log(arr1); // 1, 2, 3, 4
console.log(arr2); // 2, 3, 4, 5
filter():过滤符合条件的元素
var arr1 = [1, 2, 3, 4];
var arr2 = arr1.filter(item => item > 2);
console.log(arr1); // 1, 2, 3, 4
console.log(arr2); // 3, 4
// 注意:数组本身保持不变
reduce():数组中的每个值(从左到右)开始缩减,最终为一个值
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,185评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,652评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,524评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,339评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,387评论 6 391
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,287评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,130评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,985评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,420评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,617评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,779评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,477评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,088评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,716评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,857评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,876评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,700评论 2 354

推荐阅读更多精彩内容

  • ECMAScript为操作已经包含在数组中的项提供了很多方法。这里本人总结一下自己对这些方法的理解,如此之多的方法...
    强哥科技兴阅读 547评论 0 0
  • 转载:在开发中,数组的使用场景非常多,平日中也涉及到很多数组的api/相关操作,一直也没有对这块内容进行一块整理总...
    七色烟火阅读 3,219评论 0 3
  • 首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组...
    JamHsiao_aaa4阅读 1,930评论 0 2
  • 1.1 定义数组 声明有10个元素的数组 复制代码代码如下: var a = new Array(10); 此时为...
    Otherthing阅读 316评论 0 0
  • 我丢了一只猫。 记忆里我从未养过猫,可我真真切切地感觉到我丢了一只猫。 天色已近傍晚,五彩的云簇拥起来,编织出一个...
    Rosebud668阅读 354评论 2 4