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 相关文章推荐
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
JavaScript中“基本类型”之争小结
Jan 03 Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
Nov 30 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 Javascript
jQuery中的on与bind绑定事件区别实例详解
Feb 28 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 Javascript
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
Vue+Node实现的商城用户管理功能示例
Dec 23 Javascript
ElementUI实现el-form表单重置功能按钮
Jul 21 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
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
php实现Session存储到Redis
2015/11/11 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
如何在MVC应用程序中使用Jquery
2014/11/17 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
2018/07/28 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
Vue 递归多级菜单的实例代码
2019/05/05 Javascript
Async/Await替代Promise的6个理由
2019/06/15 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
使用python实现省市三级菜单效果
2016/01/20 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
python中常见错误及解决方法
2020/06/21 Python
如何一键升级Python所有包
2020/11/05 Python
大学生职业生涯规划书范文
2014/01/04 职场文书
大学新学期计划书
2014/04/28 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
JavaScript实现班级抽签小程序
2021/05/19 Javascript
如何自己动手写SQL执行引擎
2021/06/02 MySQL
python中 Flask Web 表单的使用方法
2022/05/20 Python