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插件简单实现代码
Apr 19 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 Javascript
分享一个精简的vue.js 图片lazyload插件实例
Mar 13 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
js中事件对象和事件委托的介绍
Jan 21 Javascript
Angular7.2.7路由使用初体验
Mar 01 Javascript
javascript实现图片轮播代码
Jul 09 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 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过滤html标记属性类用法实例
2014/09/23 PHP
php5.3提示Function ereg() is deprecated Error问题解决方法
2014/11/12 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
Prototype使用指南之selector.js说明
2008/10/26 Javascript
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
Django返回json数据用法示例
2016/09/18 Python
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
基于Python安装pyecharts所遇的问题及解决方法
2019/08/12 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
外贸英语毕业生自荐信
2013/11/14 职场文书
青年文明号服务承诺
2014/03/31 职场文书
全国文明单位申报材料
2014/05/31 职场文书
建筑院校毕业生求职信
2014/06/13 职场文书
公务员中国梦演讲稿
2014/08/19 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
入团申请书格式
2019/06/20 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server