JS 数组对象
定义数组:
数组对象用来在单独的变量名中存储一系列的值。
创建一个数组有三种方法。
1: 常规方式:
var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";
2: 简洁方式:
var myCars=new Array("Saab","Volvo","BMW");
3: 字面:
var myCars=["Saab","Volvo","BMW"];
访问数组
通过指定数组名以及索引号码,你可以访问某个特定的元素。
以下实例可以访问myCars数组的第一个值:
var name=myCars[0];
以下实例修改了数组 myCars 的第一个元素:
myCars[0]="Opel";
[0] 是数组的第一个元素。[1] 是数组的第二个元素。
在一个数组中你可以有不同的对象
一个数组中可以包含对象元素、函数、数组:
myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;
数组方法和属性
var x=myCars.length // myCars 中元素的数量
var y=myCars.indexOf("Volvo") // "Volvo" 值的索引值
js数组方法大全
方法名 | 对应版本 | 功能 | 原数组是否改变 |
---|---|---|---|
concat() | ES5- | 合并数组,并返回合并之后的数据 | n |
join() | ES5- | 使用分隔符,将数组转为字符串并返回 | n |
pop() | ES5- | 删除最后一位,并返回删除的数据 | y |
shift() | ES5- | 删除第一位,并返回删除的数据 | y |
unshift() | ES5- | 在第一位新增一或多个数据,返回长度 | y |
push() | ES5- | 在最后一位新增一或多个数据,返回长度 | y |
reverse() | ES5- | 反转数组,返回结果 | y |
slice() | ES5- | 截取指定位置的数组,并返回 | n |
sort() | ES5- | 排序(字符规则),返回结果 | y |
splice() | ES5- | 删除指定位置,并替换,返回删除的数据 | y |
toString() | ES5- | 直接转为字符串,并返回 | n |
valueOf() | ES5- | 返回数组对象的原始值 | n |
indexOf() | ES5 | 查询并返回数据的索引 | n |
lastIndexOf() | ES5 | 反向查询并返回数据的索引 | n |
forEach() | ES5 | 参数为回调函数,会遍历数组所有的项,回调函数接受三个参数,分别为value,index,self;forEach没有返回值 | n |
map() | ES5 | 同forEach,同时回调函数返回数据,组成新数组由map返回 | n |
filter() | ES5 | 同forEach,同时回调函数返回布尔值,为true的数据组成新数组由filter返回 | n |
every() | ES5 | 同forEach,同时回调函数返回布尔值,全部为true,由every返回true | n |
some() | ES5 | 同forEach,同时回调函数返回布尔值,只要由一个为true,由some返回true | n |
reduce() | ES5 | 归并,同forEach,迭代数组的所有项,并构建一个最终值,由reduce返回 | n |
reduceRight() | ES5 | 反向归并,同forEach,迭代数组的所有项,并构建一个最终值,由reduceRight返回 | n |
方法详解
1:concat();
功能:合并数组,可以合并一个或多个数组,会返回合并数组之后的数据,不会改变原来的数组;
var str1 = [12,2,"hello"];var str2 = ["world"];
console.log(str1.concat(str2)); //[12, 2, "hello", "world"]
console.log(str1); //[12,2,"hello"];
2:join();
功能:将数组转为字符串并返回转化的字符串数据,不会改变原来的数组;
注意:()中用双引号包括自己想用的分隔符,默认为逗号,这里我用了-
var str1 = [12,2,"hello"];
var str2 = ["world"];
console.log(str1.join("-")); //12-2-hello
console.log(str1); //[12, 2, "hello"]
3:pop();
功能:删除数组的最后一位,并且返回删除的数据,会改变原来的数组
var str1 = [12,2,"hello"];
console.log(str1.pop()) //hello
console.log(str1); //[12, 2]
4:shift();
功能:删除数组的第一位数据,并且返回新数组的长度,会改变原来的数组
var str1 = [12,2,"hello"];
console.log(str1.shift()); //12
console.log(str1); //[2,"hello"]
5:unshift();
功能:在数组的首位新增一个或多数据,并且返回新数组的长度,会改变原来的数组
注意:unshift()方法返回的数据是新数组的长度,它增加的数据可以是一个也可以是多个,可以理解为增加一连串的数据,
var str1 = [12,2,"hello"];
var str2 = [43,2,"test"];
console.log(str1.unshift("你好")); //4
console.log(str2.unshift("hello","world")); //5
console.log(str1); //["你好", 12, 2, "hello"]
console.log(str2); //["hello", "world", 43, 2, "test"]
6:push();
功能:在数组的最后一位新增一个或多个数据,并且返回新数组的长度,会改变原来的数组
注意:push()方法返回的是数据是新数组的长度,它增加的数据可以是一个也可以是多个,可以理解为增加一连串的数据
var str1 = [12,2,"hello"];
var str2 = [43,2,"test"];
console.log(str1.push("你好")); //4
console.log(str2.push("hello","world")); //5
console.log(str1); //[12, 2, "hello","你好"]
console.log(str2); //[43, 2, "test","hello", "world"]
7:reverse();
功能:将数组的数据进行反转,并且返回反转后的数组,会改变原数组
var str1 = [12,2,"hello"];
console.log(str1.reverse()); //["hello", 2, 12]
console.log(str1); //["hello", 2, 12]
8:sort();
功能:对数组内的数据进行排序(默认为升序),并且返回排过序的新数组,会改变原来的数组
注意:
8.1:这里的排序是针对字符的排序,先使用数组的toString()方法转为字符串,再逐位比较,3是大于12的,因为首位3>1,不要与Number型的数据排序混淆
8.2:str2数组中增加了三个字符,可以看到,比较的时候,zoom是最大的,因为首位的英文字母通过ASCII码可以转为相应的数值,再根据数值比较
var str1 = [12,2,43,5,2,5];
var str2 = [92,2,43,"hello",5,2,5];
console.log(str1.sort()); //[12, 2, 2, 43, 5, 5]
console.log(str1); //[12, 2, 2, 43, 5, 5]
console.log(str2.sort()); //[2, 2, 43, 5, 5, 92, "abc", "hello", "zoom"]
console.log(str2); //[2, 2, 43, 5, 5, 92, "abc", "hello", "zoom"]
8.3:排序问题
参数:sort(callback) 如果需要按照数值排序,需要传参。sort(callback),callback为回调函数,该函数应该具有两个参数,比较这两个参数,然后返回一个用于说明这两个值的相对顺序的数字(a-b)。其返回值如下:
若 a 小于 b,返回一个小于 0 的值。
若 a 等于 b,则返回 0。
若 a 大于 b,则返回一个大于 0 的值。
var str3 = [92,2,43,5,2,5];
console.log(str3.sort(fn)); //[2, 2, 5, 5, 43, 92]
console.log(str3); //[2, 2, 5, 5, 43, 92]
function fn (a,b){
return a-b;
};
var str4 = [92, 2, 43, 5, 2, 5];
console.log(str3.sort(fn2)); //[92, 43, 5, 5, 2, 2]
console.log(str4); //[92, 43, 5, 5, 2, 2]
function fn2(a, b) {
return b - a;
};
9:slice();
功能:截取指定位置的数组,并且返回截取的数组,不会改变原数组
参数:slice(startIndex, endIndex)
注意:可从已有的数组中返回选定的元素。该方法接收两个参数slice(start,end),strat为必选,表示从第几位开始;end为可选,表示到第几位结束(不包含end位),省略表示到最后一位;start和end都可以为负数,负数时表示从最后一位开始算起,如-1表示最后一位。

var arr = ["T1","J1","L1","L2","M1"];
console.log(arr.slice(1,3)); //["J1","L1"]
console.log(arr.slice(1)); //["J1","L1","L2","M1"]
console.log(arr.slice(-4,-1)); //["J1","L1","L2"]
console.log(arr.slice(-2)); //["Lily","M1"]
console.log(arr.slice(1,-2)); //["J1","L1"]
console.log(arr); //["T1","J1","L1","L2","M1"]

10:splice();
功能:向数组中添加,或从数组删除,或替换数组中的元素,然后返回被删除/替换的元素。
删除:指定 2 个参数:要删除的第一项的位置和要删除的项数。 书写格式:arr.splice( 1 , 3 )
插入:可以向指定位置插入任意数量的项,只需提供 3 个参数:起始位置、 0(要删除的项数)和要插入的任意数量的项。 书写格式:arr.splice( 2,0,4,6 )
替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定 3 个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。 书写格式:arr.splice( 2,0,4,6 )
参数:splice(start,num,data1,data2,...); 所有参数全部可选。
var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);
console.log(arr); //[5, 7, 9, 11]----原数组改变
console.log(arrRemoved); //[1, 3]
var arrRemoved2 = arr.splice(2,0,4,6);
console.log(arr); // [5, 7, 4, 6, 9, 11]
console.log(arrRemoved2); // []
var arrRemoved3 = arr.splice(1,1,2,4);
console.log(arr); // [5, 2, 4, 4, 6, 9, 11]
console.log(arrRemoved3); //[7]
11:toString();
功能:将数组转换成字符串,类似于没有参数的join()。该方法会在数据发生隐式类型转换时被自动调用,如果手动调用,就是直接转为字符串。不会改变原数组
var str = [1,2,3];
console.log(str.toString()); //1,2,3
console.log(str); //[1,2,3]
12:valueOf();
功能:返回数组的原始值(一般情况下其实就是数组自身),一般由js在后台调用,并不显式的出现在代码中
var str = [1,2,3];
console.log(str.valueOf()); //[1,2,3]
console.log(str); //[1,2,3]
//为了证明返回的是数组自身
console.log(str.valueOf() == str); //true
13:IndexOf();
功能:根据指定的数据,从左向右,查询在数组中出现的位置,如果不存在指定的数据,返回-1,找到了指定的数据返回该数据的索引
参数:indexOf(value, start);value为要查询的数据;start为可选,表示开始查询的位置,当start为负数时,从数组的尾部向后数;如果查询不到value的存在,则方法返回-1
注意:如果找到该数据,立即返回该数据的索引,不再往后继续查找
var str = ["h","e","l","l","o"];
console.log(str.indexOf("l")); //2
console.log(str.indexOf("l",3)); //3 /////索引值为3开始,l索引值为3,即返回3(返回数组中本事的索引值)
console.log(str.indexOf("l",4)); //-1 ////索引值为4开始,向后找l,没有,返回-1
console.log(str.indexOf("l",-1)); //-1 ////-1即最后一个,向后找l,
console.log(str.indexOf("l",-3)); //2 ////从尾部开始数找倒数第三个,刚好是l,索引值为2
14:lastIndexOf();
功能:根据指定的数据,从右向左,查询在数组中出现的位置,如果不存在指定的数据,返回-1,找到了指定的数据返回该数据的索引
参数:lastIndexOf(value, start);value为要查询的数据;start为可选,表示开始查询的位置,当start为负数时,从数组的尾部向前数;如果查询不到value的存在,则方法返回-1
var str = ["h","e","l","l","o"];
console.log(str.lastIndexOf("l")); //3
console.log(str.lastIndexOf("l",3)); //3
console.log(str.lastIndexOf("l",4)); //3
console.log(str.lastIndexOf("l",-1)); //3
console.log(str.lastIndexOf("l",-3)); //2
JS 数组对象的更多相关文章
- 判断js数组/对象是否为空
/** * 判断js数组/对象是否为空 * isPrototypeOf() 验证一个对象是否存在于另一个对象的原型链上.即判断 Object 是否存在于 $obj 的原型链上.js中一切皆对象,也就是 ...
- js 数组对象的操作方法
在jquery中处理JSON数组的情况中遍历用到的比较多,但是用添加移除这些好像不是太多. 今天试过json[i].remove(),json.remove(i)之后都不行,看网页的DOM对象中好像J ...
- JS数组&对象遍历
遍历的总结,经常用到的,希望帮助你我成长. JS数组遍历: 1,普通for循环 var arr = [1,2,3,4,9]; for ( var i = 0; i <arr.length; i+ ...
- js数组对象排序详解
一.js对象遍历输出的时候真的是按照顺序输出吗? 下边就来实践一下: var obj={'3':'ccc',name:'abc',age:23,school:'sdfds',class:'dfd',h ...
- 【原】js数组对象去重最简单的方法
简单的数组去重是比较简单的,方法也特别多,如给下面的数组去重: let arr = [1,2,2,4,9,6,7,5,2,3,5,6,5] 最常用的可以用for循环套for循环,再用splice删除重 ...
- Js 数组对象排序
1.定义函数 /** * 数组对象排序函数 * @param {any} name 排序字段 * @param {any} order 升.降(这里事true.false记得处理下) */ var b ...
- js数组对象去重
转: https://www.cnblogs.com/gaoht/p/9850449.html 在数组对象中去掉重复的对象: export function deteleObject(obj) { v ...
- Js数组对象的属性值升序排序,并指定数组中的某个对象移动到数组的最前面
需求整理: 本篇文章主要实现的是将一个数组的中对象的属性值通过升序的方式排序,然后能够让程序可以指定对应的数组对象移动到程序的最前面. 数组如下所示: var arrayData= [{name: & ...
- js 数组对象,数组的使用
var a =new Array(1,2,3,4,'a','b','c',{x:1,y:2}); alert(a[7].x); //数组之中可以定义数组. var b=['a','b','c']; c ...
随机推荐
- centos7下SVN服务器搭建
1,安装 yum install subversion 2,输入rpm -ql subversion查看安装位置 3,创建svn版本库目录 mkdir -p /var/svn/svnrepos 4,创 ...
- vue-cli axios ie9 问题
vue在ie9中碰到的问题 最近我们的项目选择用vue来做开发,在这个过程我们还要兼容ie9这个坑,在这里我写一点我碰到的坑 开发选用:vue+vue-cli+axios+router+iview+m ...
- python打印水仙花数的个人总结
面试过程中,提到python,面试最多的就是让你现场写代码实现水仙花.冒泡.九九乘法表,这些面试方法旨在校验面试者的python基础和思维逻辑. 先从水仙花说起,水仙花是指一个n位正整数(n>= ...
- 【论文阅读】An Empirical Study of Architectural Decay in Open-Source Software
2020-06-19这篇文章是我学习 软件架构与中间件 课程时分享的论文.可以说,这篇文章塑造了我基本的科研观,也养成了我如今看论文的习惯.感谢老师们,也感谢恒恒对我的帮助. 论文地址: https: ...
- Learn day8 re正则表达式\search函数\反射\tcp发送消息(循环)\udp发送消息
1.匹配单个字符 # ### 正则表达式 - 单个字符匹配 import re ''' findall 把匹配的结果直接返回到列表中 lst = re.findall("正则表达式" ...
- python实现经典的排序算法
排序 关注公众号"轻松学编程"了解更多. 1.冒泡排序 基本思想:比较相邻的元素大小,将小的前移,大的后移,就像水中的气泡一样,最小的元素经过几次移动,会最终浮到水面上.原地排序, ...
- 【Luogu】 P6274 [eJOI2017]六 题解
首先,题目说了最多\(6\)个质因数. 如此小的数据范围,不是状压还是啥? 然后,我们可以发现一个性质:只要两个因数有相同的质因数(不管次数是多少),两者就不互质. 这启示我们用一个二进制数来表示一类 ...
- C++实现学校运动会管理系统
本文实例为大家分享了C++实现学校运动会管理系统的具体代码,供大家参考,具体内容如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...
- 文科妹子都会用 GitHub,你这个工科生还等什么
在某乎上刷到一条关于 GitHub 的留言,如下: 点赞人数还不少,这说明还真有不少工科生不会用 GitHub,你看大小写都没有区分(手动狗头).所以我就想写篇文章科普下,"新手如何使用 G ...
- 白话科普系列——最好用的浏览器 Chrome,你用了么?
市面上的浏览器多种多样,而浏览器的王者--IE 浏览器,它在 2002 年市场份额高达 95.4%.直到后续 Firefox,Safari,Chrome 相继问世才动摇了 IE 浏览器的地位,其中 C ...