【JS基础回顾】Array对象及其常用属性以及方法
目的很简单,主要回顾下javascript里面Array常用的一些属性以及方法,虽然经常使用,但其实一些细节没有注意到,总是等到用到的时候再去查有点浪费时间,因此总结了下加深印象
一、Array的几种声明方式var arr = [1, 2, 3]; var arr = new Array(2); //声明一个数组,长度为2,默认填充值为undefined的元素 var arr = new Array(1, 2, 3); var arr = new Object([1, 2, 3]);
关于第二种声明方式,有些想吐槽。假如想要声明只有一个元素的数组,该元素为3,可能会情不自禁地写下这么条语句,然后就悲剧了
var arr = new Array(2); //实际声明了一个有两个元素的数组二、Array的常用属性、方法
arrayObj.length
作用:返回arrayObj的数组长度
[1, 2, 3].length; //输出 3
arrayObj.push(newElement1, newElement2, ... newElementX)
作用:向数组末尾添加一个或多个元素,并返回修改后的数组长度
注意:会修改原数组;返回修改后的数组长度
var arr = [1, 2, 3]; arr.push(4, 5); //输出 5,此时arr= [1,2,3,4,5]
arrayObj.pop()
作用:删除并返回数组最后一个元素
var arr = [1, 2, 3]; arr.pop(); //输出 3,此时arr= [1, 2] [].pop(); //输出 undefined
arrayObj.shift()
作用:删除并返回数组第一个元素
var arr = [1, 2, 3]; arr.shift(); //输出 1,此时arr= [2, 3] [].shift(); //输出 undefined
arrayObj.unshift()
作用:向数组开头添加一个或多个元素,返回修改后的数组长度
注意:会修改原数组;返回的是修改后的数组长度;在IE6里,返回的是undefined
var arr = [4, 5]; arr.unshift(1, 2, 3); //输出 5,此时arr= [1, 2, 3, 4, 5]
arrayObj.join([seperator])
作用:将数组的各个元素转成字符串,再以seperator为分隔符,将数组连接成一个字符串后
注意:seperator可选,如没有指定seperator,默认用“,”来连接字符串
[1, 2, 3].join(-); //输出 1-2-3 var arr = new Array(); arr[0] = {name: casper}; arr[1] = 2; arr.join(,); //输出 [object Object],2,需注意 [null, 2].join(,); //输出 ,2
arrayObj.reverse()
作用:将数组元素的排序全部颠倒过来
arrayObj.concat(element1, element2, ..., elementX)
作用:连接两个或多个数组,返回连接后的数组;
注意:不修改原数组;如果不传任何参数,则返回原数组的一份拷贝;如果参数不是数组,则将参数添加到连接的数组后面;如果传入的参数是数组,则将参数数组的每个元素添加到连接的数组后面;
var arr = [1, 2, 3]; arr.concat(); //返回 [1, 2, ,3 ],此时arr= [1, 2 ,3] arr.concat(4, 5); //返回 [1, 2, ,3 ,4, 5],此时arr= [1, 2 ,3] arr.concat(4, [5, 6]); //返回 [1, 2, 3, 4, 5, 6] arr.concat(4, [5, 6], 7); //返回 [1, 2, 3, 4, 5, 6, 7]
arrayObj.slice(start, end)
作用:从已有的数组中返回指定元素组成的新数组,类似与String对象的slice方法,包括start指定位置的元素,但不包含end处包含的元素;
注意:start必选,end可选;当start或end为负值时,表示从数组最后一个元素开始,倒数第n个元素,比如数组最后一个元素为倒数第一个;当没有指定end时,则截取从start开始,一直到最后一个元素;
var arr = [1, 2, 3]; arr.slice(0 ,2); //输出 [1, 2],此时arr= [1, 2, 3] arr.slice(-2, -1); //输出 [2] arr.slice(1); //输出 [2, 3]
arrayObj.splice(index, howmany, element1, element2..., elementX)
作用:从index处开始,从数组里删除howmany个元素后,将element1~elementX插入到数组中,插入开始的位置为index;返回值为删除的元素组成的数组;
注意:会修改原数组;howmany可选,如只传入index,则删除从index开始的所有元素;如howmany为0,则删除0个元素;如果传入的element为数组,不会像slice方法那样插入单个元素,而是将数组作为整个元素插入;
var arr = [1, 2, 3]; arr.splice(0, 1); //输出 [1],此时arr= [2, 3] arr = [1, 2, 3]; arr.splice(1, 0, hello); //输出 [],此时 arr= [1, hello, 2, 3] arr = [1, 2, 3]; arr.splice(1); //输出 [2, 3],此时arr= [1] arr = [1, 2, 3]; arr.splice(1, 0, [hello, world]); //输出 [],此时arr= [1, [hello, world], 2, 3]
arrayObj.toString()
作用:将数组转化成字符串,与不穿参调用join方法相似
[1, 2, 3].toString(); //输出 1, 2, 3 [1, 2, [3, 4]].toString(); //输出 1, 2, 3, 4
arrayObj.sort([sortFunc])
作用:对数组元素进行排序;
注意:的确需要注意,由于不同浏览器排序算法的不同,传入同一个排序函数,得出的结果竟然会是不一样的,还没仔细研究过差别,暂不举例,避免误导读者,可先参考:http://www.w3school.com.cn/js/jsref_sort.asp,里面没提到这点
三、写在后面
一些比较不常用的方法,比如arrayObj.toLocalString,这里没有进行说明,如欲了解,可点击下面的链接查看
相关文章
- html如何只刷新页面指定,js控制页面刷新 JS刷新当前页面的几种方法总结
- 在线客服系统源码开发实战总结:动态加载js文件实现粘贴一段js的sdk代码,直接引入插件效果
- 【说站】js中对象的两种属性
- js遍历对象属性的一些方法有哪些_js面试遍历对象的所有属性
- Js如何修改元素的属性值
- 【源码】PDF.js批注注释插件库(纯JS). 创建和保存PDF批注(PDF 高亮/签名/插图/截屏/文本框/画笔/多边形)-pdf.js
- js中模拟栈详解编程语言
- js常用属性详解编程语言
- JS setAttribute()方法:设置元素的属性值
- JS removeAttribute()方法:删除元素的某个属性
- JS getComputedStyle()方法和currentStyle属性
- JS属性节点的操作
- 快速掌握JS操作MySQL数据库技巧(js操作mysql数据库)
- 使用JS技术实现Oracle数据库链接(js 链接 oracle)
- 妙用JS获取Oracle信息的快速方法(js获取Oracle)
- jsdefineSetter-给js的"class"自动增加一个set的属性(方法)
- js中巧用cssText属性批量操作样式
- JS定时器实例
- css样式标签和js语法属性区别
- JS批量操作CSS属性详细解析
- setTimeout自动触发一个js的方法
- 使用node.js获取客户端信息代码分享