JavaScript Array对象基本方法详解


Posted in Javascript onSeptember 03, 2019

昨天出去前端面试又失败,期间问了个有关于数组对象的问题,下面就这类问题总结下JavaScript常用的数组操作方法。

一、何为数组(Array)对象

数组对象是使用单独的变量名来存储一系列的值。

二、创建数组的三种方式

2.1使用关键词 new 来创建数组对象。

let myStar =new Array();
     myStar[0]="刘德华";
     myStar[1]="成龙";
     myStar[2]="林青霞";
     myStar[3]="王菲";
     console.log(myStar);

2.2 基于2.1的简洁写法

let myStar1=new Array("刘德华","成龙","林青霞","王菲");
    console.log(myStar1[2]);//访问数组,Arry[索引值]

2.3对象字面量创建数组对象

let myStar2=["刘德华","成龙","林青霞","王菲"];
console.log(myStar2);

注:数组中数值可以是不同类型组成,它们可以是string类型,Boolean类型,number类型、空数组,甚至是函数对象。

三、数组对象的基本方法

3.1 concat()

concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,仅会返回被连接数组的一个结果。

var arry1=[1,2,3];
    var arry2=[1];
    var arry3=["Hi",true];
    var arry4=arry1.concat(arry2,arry3);
    console.log(arry4);//[1, 2, 3, 1, "Hi", true]

3.2 join ()

join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的,默认使用','号分割,

var arr=[1,6,8];
    console.log(arr.join('/'));//  1/6/8
    console.log(arr.join('-'));//  1-6-8

3.3 push()

push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。末尾添加,返回的是长度,会改变原数组。

var a =[9,8,5];
    var b=a.push(2,1,1);
    console.log(a);//[9, 8, 5, 2, 1, 1]
    console.log(b); //6

3.4pop()

pop() 方法用于删除并返回数组的最后一个元素。返回最后一个元素,会改变原数组。

var c=[2,9,5];
    console.log(c.pop());//5
    console.log(c);//[2, 9]

3.5 shift()

shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。返回第一个元素,改变原数组。

var arr2=[4,5,6];
    console.log(arr2.shift());//4
    console.log(arr2);//[5, 6]

3.6 unshift()

unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。返回新长度,改变原数组。

var arr3=[4,6,8,9];
    console.log(arr3.unshift(1,2));//6
    console.log(arr3);// [1, 2, 4, 6, 8, 9]

3.7 slice()

返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。

返回选定的元素,该方法不会修改原数组。

 var arr4=[3,3,4,6]
    console.log(arr4.slice(0,3));//[3, 3, 4]
    console.log(arr4);//[3,3,4,6]

3.8 splice()

splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。会改变原始数组。

格式: splice(从哪开始(index),删除的个数,添加一个或多个元素)

var aa = [5,6,7,8];
console.log(aa.splice(1,0,9)); //[]
console.log(aa); // [5, 9, 6, 7, 8]
var bb = [5,6,7,8];
console.log(bb.splice(1,2,3)); //[6, 7]
console.log(bb); //[5, 3, 8]

3.9 substring() 和 substr()

var str = '123456789';
    console.log("123456789".substr(2,5));  // "34567"
    console.log("123456789".substring(2,5)) ;// "345"

区别:;两个参数

substr(从哪开始,选取个数);

substring( 从哪开始,到哪结束);

3.10 sort()排序

var fruit = ['cherries', 'apples', 'bananas',1,2,10];
console.log(fruit.sort())// [1, 10, 2, "apples", "bananas", "cherries"]

3.11 reverse()

var arr = [2,3,4];
console.log(arr.reverse()); //[4, 3, 2]
console.log(arr); //[4, 3, 2]

3.12toLocaleString();toString()

toLocaleString()把数组转换为本地字符串。

toString() 方法可把数组转换为字符串,并返回结果。

var myStar3=["刘德华","成龙","林青霞","王菲"];
var myStar4=["刘德华","成龙","林青霞","王菲"];
console.log(myStar3.toLocaleString());//刘德华,成龙,林青霞,王菲
console.log(myStar4.toString());//刘德华,成龙,林青霞,王菲

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
win7下安装配置node.js+express开发环境
Dec 06 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
Jan 18 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
jquery.masonry瀑布流效果
May 25 jQuery
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
微信小程序通过一个json实现分享朋友圈图片
Sep 03 #Javascript
layui 实现自动选择radio单选框(checked)的方法
Sep 03 #Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 #Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 #Javascript
Layui 动态禁止select下拉的例子
Sep 03 #Javascript
解决Layui中layer报错的问题
Sep 03 #Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 #Javascript
You might like
分享PHP入门的学习方法
2007/01/02 PHP
shopex主机报错误请求解决方案(No such file or directory)
2011/12/27 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
javascript第一课
2007/02/27 Javascript
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
js left,right,mid函数
2008/06/10 Javascript
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
关于JS管理作用域的问题
2013/04/10 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
JavaScript实现动态创建CSS样式规则方案
2014/09/06 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
js创建数组的简单方法
2016/07/27 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
解决vue addRoutes不生效问题
2020/08/04 Javascript
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
python模块之StringIO使用示例
2015/04/08 Python
Python 迭代器与生成器实例详解
2017/05/18 Python
解决PyCharm中光标变粗的问题
2017/08/05 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
老生常谈python中的重载
2018/11/11 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
介绍一下Linux文件的记录形式
2012/04/18 面试题
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
活动总结怎么写啊
2014/05/07 职场文书
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS