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 扩展方法
May 06 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
Dec 10 Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
jquery实现最简单的滑动菜单效果代码
Sep 12 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 Javascript
LayUi数据表格自定义赋值方式
Oct 26 Javascript
解决vue v-for src 图片路径问题 404
Nov 12 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
文件上传的实现
2006/10/09 PHP
怎么在Windows系统中搭建php环境
2013/08/31 PHP
为你总结一些php信息函数
2015/10/21 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
很棒的vue弹窗组件
2017/05/24 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
express框架下使用session的方法
2019/07/31 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
python之wxPython应用实例
2014/09/28 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
英国高街电视:High Street TV
2018/05/22 全球购物
送给他或她的礼物:FUN.com
2018/08/17 全球购物
香港通票:Hong Kong Pass
2019/02/26 全球购物
介绍一下linux的文件系统
2012/03/20 面试题
大学三年的自我评价
2013/12/25 职场文书
公司授权委托书范本
2014/04/03 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
客户答谢会致辞
2015/01/20 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
怎么用Python识别手势数字
2021/06/07 Python