10分钟弄懂javascript数组
建议阅读时间 : 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数组的更多相关文章
- 10分钟弄懂Raft算法
分布式系统在极大提高可用性.容错性的同时,带来了一致性问题(CAP理论).Raft算法能够解决分布式系统环境下的一致性问题. 我们熟悉的ETCD注册中心就采用了这个算法:你现在看的这篇微信公众号文章, ...
- 这一次,彻底弄懂 JavaScript 执行机制
本文转自https://juejin.im/post/59e85eebf265da430d571f89#heading-4 本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还 ...
- 彻底弄懂 JavaScript 执行机制
本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我. 不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定 ...
- [转帖]10分钟看懂Docker和K8S
10分钟看懂Docker和K8S https://zhuanlan.zhihu.com/p/53260098 2010年,几个搞IT的年轻人,在美国旧金山成立了一家名叫“dotCloud”的公司. 这 ...
- 10分钟搞懂toString和valueOf函数(详细版)
首先要说明的是这两种方法是toPrimitive抽象操作里会经常用到的. 默认情况下,执行这个抽象操作时会先执行valueOf方法,如果返回的不是原始值,会继续执行toString方法,如果返回的还不 ...
- 十分钟读懂JavaScript原型和原型链
原型(prototype)这个词来自拉丁文的词proto,意谓“最初的”,意义是形式或模型.在JavaScript中,原型的探索也有很多有趣的地方,接下来跟随我的脚步去看看吧. 原型对象释义 每一个构 ...
- 【前端知识体系-JS相关】10分钟搞定JavaScript正则表达式高频考点
1.正则表达式基础 1.1 创建正则表达式 1.1.1 使用一个正则表达式字面量 const regex = /^[a-zA-Z]+[0-9]*\W?_$/gi; 1.1.2 调用RegExp对象的构 ...
- 一分钟搞懂JavaScript中的JSON对象
JSON(JavaScript Object Notation)是表示值和对象的通用格式. JavaScript 提供了如下方法: JSON.stringify 将对象转换为 JSON. JSON.p ...
- 5分钟弄懂Docker--转载
编者按:7月3日的“CSDN在线培训:Docker之道”,同时在线人数达到了历史新高,但是最后的QA环节,笔者发现大家的问题 还是很初级的,Docker技术还处在Gartner技术曲线的萌芽期.刚好前 ...
随机推荐
- jquery使用CSS3实现文字动画效果插件Textillate.js
Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...
- angular 实现导航ng-click切换
angular写的导航.自学angular已有一段时间. <!doctype html><html lang="en"><head> <m ...
- c标签和foreach循环不能加载
需要同时导入2个包: jstl.jar和standard.jar(大多数时候只会注意到jstl包,而忽视了standard包) 代码: c标签的写法 <%@ taglib prefix=&quo ...
- jquery easyui的datagrid在初始化的时候会请求两次URL?
我们项目前端用的是jquery easyui,刚开始使用datagrid加载列表初始化时总是请求两次URL,这让人非常不解,怎么总是请求两次呢?数据一多,加载速度明显变慢,通过查资料才知道原来是重复声 ...
- [Git]01 如何安装和配置
简单地说,Git 究竟是怎样的一个系统呢? 请注意,接下来的内容非常重要,若是理解了 Git 的思想和基本工作原理,用起来就会知其所以然,游刃有余.在开始学习 Git 的时候,请不要尝试把各种概 ...
- hibernate 使用 hibernate tool 生成配置文件和实体类
安装Hibernate插件 下载所需的Hibernatetools http://www.hibernate.org/6.html 将下载得到的文件解压得到的features和plugins文件夹, ...
- 浅谈JavaScript匿名函数与闭包
一. 匿名函数 //普通函数定义: //单独的匿名函数是无法运行的.就算运行了,也无法调用,因为没有名称. 如: function(){ alert('123'); ...
- 微信小程序,前端大梦想(五)
微信小程序之综合应用-访问网络加载数据 移动端访问网络加载数据时必不可少的功能,本章将接入豆瓣电影API,以列表的形式展现数据,支持下拉刷新及点击查看详情.重点包括: l 访问网络 l 跳转画面及传参 ...
- 从零开始构建一个的asp.net Core 项目(二)
接着上一篇博客继续进行.上一篇博客只是显示了简单的MVC视图页,这篇博客接着进行,连接上数据库,进行简单的CRUD. 首先我在Controllers文件夹点击右键,添加->控制器 弹出的对话框中 ...
- Lazyman功能实现
题目要求是这样的: 实现一个LazyMan,可以按照以下方式调用: LazyMan("Hank")输出: Hi! This is Hank! LazyMan("Hank& ...