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 相关文章推荐
js本身的局限性 别让javascript做太多事
Mar 23 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
Feb 27 Javascript
JS获取后台Cookies值的小例子
Mar 04 Javascript
AngularJS基础知识
Dec 21 Javascript
JQuery radio(单选按钮)操作方法汇总
Apr 15 Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 Javascript
vue.js 上传图片实例代码
Jun 22 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 Javascript
Angularjs中的$apply及优化使用详解
Jul 02 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 Javascript
vue项目中使用scss的方法步骤
May 16 Javascript
JavaScript实现好看的跟随彩色气泡效果
Feb 06 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程序的方法
2009/03/09 PHP
PHP文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
php检测网页是否被百度收录的函数代码
2013/10/09 PHP
php float不四舍五入截取浮点型字符串方法总结
2013/10/28 PHP
PHP+Apache+Mysql环境搭建教程
2016/08/01 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
Vue.js第二天学习笔记(vue-router)
2016/12/01 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
JS实现的A*寻路算法详解
2018/12/14 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
python简易远程控制单线程版
2018/06/20 Python
简单了解Python3里的一些新特性
2019/07/13 Python
Python爬虫运用正则表达式的方法和优缺点
2019/08/25 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
Python selenium的基本使用方法分析
2019/12/21 Python
Python class的继承方法代码实例
2020/02/14 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
给老婆的婚前保证书
2014/02/01 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
倡议书范文大全
2015/04/28 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
HTTP中的Content-type详解
2022/01/18 HTML / CSS