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里访问SharePoint列表数据的实现方法
May 22 Javascript
js中arguments,caller,callee,apply的用法小结
Jan 28 Javascript
javascript实现按回车键切换焦点
Feb 09 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
快速使用node.js进行web开发详解
Apr 26 Javascript
js 概率计算(简单版)
Sep 12 Javascript
360doc网站不登录就无法复制内容的解决方法
Jan 27 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 Javascript
微信小程序控制台提示warning:Now you can provide attr "wx:key" for a "wx:for" to improve performance解决方法
Feb 21 Javascript
Vue源码探究之虚拟节点的实现
Apr 17 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
jquery 学习之二 属性(类)
2010/11/25 Javascript
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
jquery索引在使用中的一些困惑
2013/10/24 Javascript
js分页代码分享
2014/04/28 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
JavaScript判断IE版本型号
2015/07/27 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
浅谈Python 多进程默认不能共享全局变量的问题
2019/01/11 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
荷兰手表网站:Watch2Day
2018/07/02 全球购物
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
自愿离婚协议书范本
2014/09/13 职场文书
甜品店创业计划书
2014/09/21 职场文书
个人作风建设总结
2014/10/23 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
送给客户微信问候语!
2019/07/04 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python
Linux中各个目录的作用与内容
2022/06/28 Servers