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 相关文章推荐
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
js 3种归并操作的实例代码
Oct 30 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 Javascript
AngularJS实现表单验证
Jan 28 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
Jan 17 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
快速解决brew安装特定版本flow的问题
May 17 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
微信小程序通过一个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 中的一些经验积累
2006/10/09 PHP
让PHP以ROOT权限执行系统命令的方法
2011/02/10 PHP
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
JS实现的系统调色板完整实例
2016/12/21 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
Python脚本实现自动发带图的微博
2016/04/27 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
目标责任书范文
2014/04/14 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android