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打造PHP的AJAX表单提交实例
Nov 03 Javascript
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
vue组件Prop传递数据的实现示例
Aug 17 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
重学JS之显示强制类型转换详解
Jun 30 Javascript
解析vue、angular深度作用选择器
Sep 11 Javascript
JavaScript数组排序功能简单实现
May 14 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
smarty实例教程
2006/11/19 PHP
一步一步学习PHP(7) php 字符串相关应用
2010/03/05 PHP
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
php操作MongoDB基础教程(连接、新增、修改、删除、查询)
2014/03/25 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
PHP错误处理函数
2016/04/03 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
python flask实现分页的示例代码
2018/08/02 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
python实现scrapy爬虫每天定时抓取数据的示例代码
2021/01/27 Python
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
广州某公司软件工程师面试题
2014/12/22 面试题
客户接待方案
2014/02/26 职场文书
环保建议书600字
2014/05/14 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
家庭贫困证明
2014/09/23 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
病假证明模板
2015/06/19 职场文书
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL