建议阅读时间 : 10分钟

主要内容:javascript数组的基本概念、属性、方法

新建数组:

var arr01 = ["a","b","c","d"];
var arr02 = new Array("a","b","c","d");

上面的两个方法都可以创建数组 ["a","b","c","d"];

区别:arr02是通过Array类创建,arr01是通过js内部提供的字面量的方式赋值创建。

new Array()括号中可以接收两种类型的参数,第一种:数组的内布值(如上面代码),第二种:一个数字,规定数组的长度(空数组);

数组的取值与赋值

取值:通过下标 arr01[0]  即可取得arr01中的 "a"

赋值:通过下标 arr01[0] = "m" 即可修改arr01种的"a"为"m"

如果赋值的时候下标比原来的长度大,比如 arr01[6] = "k", 那么数组的长度会变成7,其中的5、6位会赋值undefined

数组的长度

通过 arr01.length 获取

也可以通过长度赋值改变,如 arr01.length=3,及修改了长度

当修改的长度小于原来长度的时候,就会去删掉多余下标上的值,如果大于原来的长度,那多出的长度部分就会赋值undefined

数组的遍历

一般的for循环

for(var i=0; i<arr01.length; i++){
console.log(arr01[i]);
}

for in 循环

for( index in arr01){
console.log(arr01[index]);
}

两个循环都能获取数组的所有值

区别:第一种可以循环出所有下标的值,包括没有赋值的下标的值(undefined), 第二种只循环有值得部分,没有赋值的下标不会被循环

数组的常用方法:

join( ) :把数组的所有元素放入一个字符串,通过一个的分隔符进行分隔

 var arr01 = ["a","b","c","d"];
var str01 = arr01.join("-"); //输出字符串 a-b-c-d

操作后原数组不变,如果参数传""空字符串,就得到abcd

pop( ):删除并返回数组的最后一个元素

var arr01 = ["a","b","c","d"];
var str01 = arr01.pop(); //str01 为 d

经过上面的操作,arr01变成了["a","b","c"]

push( ):向数组的末尾添加一个或更多元素,并返回新的长度

var arr01 = ["a","b","c","d"];
arr01.push("e");

经过上面的操作,arr01变成了["a","b","c","d","e"]

shift():删除并返回数组的第一个元素

var arr01 = ["a","b","c","d"];
var str01 = arr01.shift(); //str01 为 a

经过上面的操作,arr01变成了["b","c","d"]

unshift():向数组的开头添加一个或更多元素,并返回新的长度

var arr01 = ["a","b","c","d"];
arr01.punshift("e");

经过上面的操作,arr01变成了["e","a","b","c","d"]

reverse():颠倒数组中元素的顺序

var arr01 = ["a","b","c","d"];
arr01.reverse();

经过上面的操作,arr01变成了["d","c","b","a"]

其他方法:
sort( ):对数组的元素进行排序,默认按照第一个字符由小到大排序

concat():连接两个或更多的数组,并返回结果

slice():从某个已有的数组返回选定的元素

splice():删除元素,并向数组添加新元素

多维数组:

其实就是数组内部再包含数组。其操作和一维数组完全一致,比如下面的二维数组:

[
["Name0", "Age0", "Address0"],
["Name1", "Age1", "Address1"],
["Name2", "Age2", "Address2"]
]

完!

10分钟弄懂javascript数组的更多相关文章

  1. 10分钟弄懂Raft算法

    分布式系统在极大提高可用性.容错性的同时,带来了一致性问题(CAP理论).Raft算法能够解决分布式系统环境下的一致性问题. 我们熟悉的ETCD注册中心就采用了这个算法:你现在看的这篇微信公众号文章, ...

  2. 这一次,彻底弄懂 JavaScript 执行机制

    本文转自https://juejin.im/post/59e85eebf265da430d571f89#heading-4 本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还 ...

  3. 彻底弄懂 JavaScript 执行机制

    本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我. 不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定 ...

  4. [转帖]10分钟看懂Docker和K8S

    10分钟看懂Docker和K8S https://zhuanlan.zhihu.com/p/53260098 2010年,几个搞IT的年轻人,在美国旧金山成立了一家名叫“dotCloud”的公司. 这 ...

  5. 10分钟搞懂toString和valueOf函数(详细版)

    首先要说明的是这两种方法是toPrimitive抽象操作里会经常用到的. 默认情况下,执行这个抽象操作时会先执行valueOf方法,如果返回的不是原始值,会继续执行toString方法,如果返回的还不 ...

  6. 十分钟读懂JavaScript原型和原型链

    原型(prototype)这个词来自拉丁文的词proto,意谓“最初的”,意义是形式或模型.在JavaScript中,原型的探索也有很多有趣的地方,接下来跟随我的脚步去看看吧. 原型对象释义 每一个构 ...

  7. 【前端知识体系-JS相关】10分钟搞定JavaScript正则表达式高频考点

    1.正则表达式基础 1.1 创建正则表达式 1.1.1 使用一个正则表达式字面量 const regex = /^[a-zA-Z]+[0-9]*\W?_$/gi; 1.1.2 调用RegExp对象的构 ...

  8. 一分钟搞懂JavaScript中的JSON对象

    JSON(JavaScript Object Notation)是表示值和对象的通用格式. JavaScript 提供了如下方法: JSON.stringify 将对象转换为 JSON. JSON.p ...

  9. 5分钟弄懂Docker--转载

    编者按:7月3日的“CSDN在线培训:Docker之道”,同时在线人数达到了历史新高,但是最后的QA环节,笔者发现大家的问题 还是很初级的,Docker技术还处在Gartner技术曲线的萌芽期.刚好前 ...

随机推荐

  1. jquery使用CSS3实现文字动画效果插件Textillate.js

    Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...

  2. angular 实现导航ng-click切换

    angular写的导航.自学angular已有一段时间. <!doctype html><html lang="en"><head> <m ...

  3. c标签和foreach循环不能加载

    需要同时导入2个包: jstl.jar和standard.jar(大多数时候只会注意到jstl包,而忽视了standard包) 代码: c标签的写法 <%@ taglib prefix=&quo ...

  4. jquery easyui的datagrid在初始化的时候会请求两次URL?

    我们项目前端用的是jquery easyui,刚开始使用datagrid加载列表初始化时总是请求两次URL,这让人非常不解,怎么总是请求两次呢?数据一多,加载速度明显变慢,通过查资料才知道原来是重复声 ...

  5. [Git]01 如何安装和配置

     简单地说,Git 究竟是怎样的一个系统呢? 请注意,接下来的内容非常重要,若是理解了 Git 的思想和基本工作原理,用起来就会知其所以然,游刃有余.在开始学习 Git 的时候,请不要尝试把各种概 ...

  6. hibernate 使用 hibernate tool 生成配置文件和实体类

    安装Hibernate插件 下载所需的Hibernatetools  http://www.hibernate.org/6.html 将下载得到的文件解压得到的features和plugins文件夹, ...

  7. 浅谈JavaScript匿名函数与闭包

    一. 匿名函数   //普通函数定义: //单独的匿名函数是无法运行的.就算运行了,也无法调用,因为没有名称. 如: function(){             alert('123');    ...

  8. 微信小程序,前端大梦想(五)

    微信小程序之综合应用-访问网络加载数据 移动端访问网络加载数据时必不可少的功能,本章将接入豆瓣电影API,以列表的形式展现数据,支持下拉刷新及点击查看详情.重点包括: l 访问网络 l 跳转画面及传参 ...

  9. 从零开始构建一个的asp.net Core 项目(二)

    接着上一篇博客继续进行.上一篇博客只是显示了简单的MVC视图页,这篇博客接着进行,连接上数据库,进行简单的CRUD. 首先我在Controllers文件夹点击右键,添加->控制器 弹出的对话框中 ...

  10. Lazyman功能实现

    题目要求是这样的: 实现一个LazyMan,可以按照以下方式调用: LazyMan("Hank")输出: Hi! This is Hank! LazyMan("Hank& ...