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 相关文章推荐
IE7提供XMLHttpRequest对象为兼容
Mar 08 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
基于jQuery的ajax方法封装
Jul 14 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
js微信分享实现代码
Oct 11 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
Jun 06 Javascript
ElementUI radio组件选中小改造
Aug 12 Javascript
js实现录音上传功能
Nov 22 Javascript
Javascript模块化机制实现原理详解
Apr 02 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 intval的测试代码发现问题
2008/07/27 PHP
UCenter Home二次开发指南
2009/05/28 PHP
php设计模式 Strategy(策略模式)
2011/06/26 PHP
解析PHP多种序列化与反序列化的方法
2013/06/06 PHP
php压缩文件夹最新版
2018/07/18 PHP
php操作redis常见方法示例【key与value操作】
2020/04/14 PHP
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
JS数组去重(4种方法)
2017/03/27 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
详解Django框架中的视图级缓存
2015/07/23 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
预备党员政审材料
2014/02/04 职场文书
火灾现场处置方案
2014/05/28 职场文书
迎国庆横幅标语
2014/10/08 职场文书
基层党支部承诺书
2015/04/30 职场文书
学会感恩主题班会
2015/08/12 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
详解MySQL连接挂死的原因
2021/05/18 MySQL
Python保存并浏览用户的历史记录
2022/04/29 Python