JavaScript入门之数组:Array类型详解
数组应该是每个语言中都用得极度频繁的数据类型,JavaScript也不例外。
个人认为,Js中的Array类型非常强大。
首先没有C/C++等语言需要在数组初始化时指定数组长度(并不可变)的要求。
也不需要指定特定的基本数据类型(Number,String,Boolean,Null,Undefined,Object),也就意味着,一个数组中可以存多种数据类型的值。
我想总结一下Array的常用方法,在这之前,先介绍一下Array的基本用法:
基本用法:
1、创建数组:
//创建空数组
var arr = [];
var arr = new Array(); //创建一个指定长度的数组(没有多大意义,因为长度可变)
var arr = new Array(10); //创建一个带初始值的数组
var arr = ["ling", "jia", "wen", 18];
var arr = new Array("ling", "jia", "wen", 18);
2、数组的基本操作:
//数组基于0开始数字索引取值
console.log(arr[2]); // >"wen"
console.log(arr[4]); // >undefined //获取数组长度
console.log(arr.length); //>4 //改变数组长度
arr.length = 3;
console.log(arr[3]); //undefined(本来应该输出18) //巧妙利用数组长度添加元素
arr[arr.length] = "man";
console.log(arr[4]) // >man
//利用push方法添加元素
arr.push("arr")
console.log(arr) //> ling,jia,wen,18,man,arr
3、数组与字符串转换:
1) 数组转为字符串类型:
arr1 = arr.toString(); // "ling,jia,wen,18"
arr2 = arr.join("-"); // "ling-jia-wen-18"
2) 字符串转数组:
var str = "ling,jia,wen,2017";
var arr = str.split(","); //["ling", "jia", "wen", "2017"]
arr[3] = arr[3].parseInt(); //["ling", "jia", "wen", 2017]
push、pop、shift、unshift方法
1、基本用法:
push() 末尾插入
pop() 末尾删除
shift() 首项删除
unshift() 首项插入
arr.push("man") // ["ling", "jia", "wen", 18, "man"]
arr.pop() // ["ling", "jia", "wen", 18]
arr.shift() // ["jia", "wen", 18]
arr.unshift("hello") // ["hello", "jia", "wen", 18]
2、模拟数据结构:
模拟栈(先进先出):
push():入栈
pop():出栈
模拟队列(先进后出):
正向队列:
push():进队列
shift(): 出队列
反向队列:
unshift(): 进队列
pop(): 出队列
splice方法
这个方法特别强大,不得不单独拿出来说说;它可以巧妙地对数组进行删除、插入和替换。
怎么做到的呢?
这个方法可以理解为接收三个参数:起始位置、删除项数、插入项内容
(在这里我把所有的插入项内容当做一个参数,实际上可能是多个参数)
理解这三个参数至关重要。理解了,便可以实现删除、插入和替换操作。
请看下面的例子:
var arr = ["ling", "jia", "wen", 18]
//实现删除操作
// 从第1项开始,删除2项 arr-> [ "wen", 18]
// remove:["ling", "jia"]
// 也就是说,它会返回你删除的项,这个几乎没有在别人的博客中看到,不明白为什么??
var remove = arr.splice(0,2) //实现插入操作
//从第1项开始,删除0项,插入项为"hello"和"world"
// arr->["hello", "world", "wen", 18]
arr.splice(0,0,"hello", "world") //实现替换操作
//从第2项开始,删除1项,插入1项
//arr->["hello", "jia", "wen", 18]
arr.splice(1, 1, "jia")
代码写的很清楚了
在删除时,不插入任何东西,也就是省略第三个参数;
在插入时将删除项设为0即可;
在替换时,只要删除项和插入项数目相同便实现了替换;
迭代方法
array数组有5个迭代方法。他们接受两个参数:
1、每一次迭代运行的函数(该函数接受三个参数:数组当前项的值、数组当前项的索引、数组本身)
2、函数的作用域对象(可省略)
every()
对于数组的每一项,执行给定函数,如果该函数对每一项都返回true,则该方法返回true
栗子:
var numbers = [1,1,1,2,1,1,1];
var everyNum = numbers.every(function(item, index, array){
return (item === 1);
});
console.log(everyNum); //false var numbers1 = [1,1,1,1,1,1,1];
var everyNum = numbers1.every(function(item, index, array){
return (item === 1);
});
console.log(everyNum); //true
some()
some方法和every方法对应,两者的关系就如同or和and
对于数组的每一项,执行给定函数,如果该函数对有任意一项返回true,则该方法返回true
栗子:
var numbers = [1,1,1,2,1,1,1];
var everyNum = numbers.some(function(item, index, array){
return (item === 2);
});
console.log(everyNum); //true
filter()
对于数组的每一项,执行给定函数,如果该函数有些项返回true,则该方法返回true的项重新组成的数组(有点绕)
直接上栗子更好理解:
var numbers = [1,2,3,4,5,6,7,8,0];
var filterNum = numbers.filter(function(item, index, array){
return (item >= 4);
});
console.log(filterNum); //[4,5,6,7,8]
这个方法用于数组的条件查询在合适不过。
forEach()
这个迭代器相信大家都不陌生,就是单纯地枚举,然后dosomething();
// 2 4 6 8
var numbers = [1,2,3,4];
numbers.forEach(function(item, index, array){
console.log(item*2);
});
map()
对于数组的每一项,执行给定函数,返回函数调用结果重新组成的数组
栗子:
//[2, 4, 6, 8]
var numbers = [1,2,3,4];
var mapNum = numbers.map(function(item, index, array){
return item*2;
});
console.log(mapNum);
OK,我所了解和能想起来的Array里面就差不多这么多了,有什么遗漏的欢迎补充!
JavaScript入门之数组:Array类型详解的更多相关文章
- JavaScript中数组Array方法详解
ECMAScript 3在Array.prototype中定义了一些很有用的操作数组的函数,这意味着这些函数作为任何数组的方法都是可用的. 1.Array.join()方法 Array.join()方 ...
- JavaScript中的Array类型详解
与其他语言中的数组的区别: 1.JavaScript数组的每一项都可以保存任何类型的数据,一个数组的数组元素可以是不同类型的数据. 2.数组的大小是动态调整的,可以随着数据的添加自动的增长. 1.两种 ...
- js课程 1-3 Javascript变量类型详解
js课程 1-3 Javascript变量类型详解 一.总结 一句话总结:js对象点(属性方法),json对象冒号(属性方法).属性和方法区别只有一个括号. 1.json对象中的函数的使用? 函数名 ...
- GoLang基础数据类型--->数组(array)详解
GoLang基础数据类型--->数组(array)详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Golang数组简介 数组是Go语言编程中最常用的数据结构之一.顾名 ...
- 转: javascript模块加载框架seajs详解
javascript模块加载框架seajs详解 SeaJS是一个遵循commonJS规范的javascript模块加载框架,可以实现javascript的模块化开发和模块化加载(模块可按需加载或全部加 ...
- js变量类型详解
<html> <title>js变量类型详解</title> <meta http-equiv="content-type" conten ...
- JavaScript进阶知识点——函数和对象详解
JavaScript进阶知识点--函数和对象详解 我们在上期内容中学习了JavaScript的基本知识点,今天让我们更加深入地了解JavaScript JavaScript函数 JavaScript函 ...
- javascript event(事件对象)详解
javascript event(事件对象)详解 1. 事件对象 1. 事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什 ...
- Linux Shell数组常用操作详解
Linux Shell数组常用操作详解 1数组定义: declare -a 数组名 数组名=(元素1 元素2 元素3 ) declare -a array array=( ) 数组用小括号括起,数组元 ...
随机推荐
- 如何使用slice,substr代替substring(原创)
//写这个是为了加深对substring和slice的理解 substring: 任何一个参数小于0,都会被替换成0.两个参数,最小值会被当做start,最大值当做end. 参数 描述 start 必 ...
- win10下安装python
1. 在官网下载python:https://www.python.org/ftp/python/3.5.2/python-3.5.2-amd64.exe 这里下载的是3.5.2版. 2. 双击exe ...
- zabbix的Java API(一)
上文说了,我是对zabbix做第二次开发的小白,既然要对zabbix做第二次开发又是小白,那么就得来研究zabbix提供的相关API了. 于是我在zabbix网站各种找,终于在下面网址找到了: htt ...
- 《JavaScript高级程序设计》 -- 变量、作用域和内存问题(二)
1.基本类型与引用类型 基本类型:值保存在变量中 (Number.String.Boolean.Undefined.Null).在内存中占据固定大小空间,被保存在栈内存中 引用类型:值是保存在内存中的 ...
- iOS内购(IAP)中的那些坑
公司的公共库原来并没有这部分的代码,以前做内购是用两个比较有名的github上的第三方库.一个叫MKStoreKit,另一个叫IAPManager,我看了一下写的都很辣鸡,使用起来很不方便,而且写的还 ...
- static 还是readonly 还是static readonly
一. static 多对象共享一段空间,或者说没有对象概念,就是类的概念,不需要实例化,自动被创建.多用于长期共享.不会为对象的创建或销毁而消失. public class C { ) publi ...
- Async(异步)(一)
在谈到异步的概念时,先要了解几个概念了. 什么是进程? 当一个程序开始运行时,它就是一个进程,进程包括运行中的程序和程序所使用到的内存和系统资源. 而一个进程又是由多个线程所组成的 什么是线程? 线程 ...
- 处理文本,提取数据的脚本-主要就是用sed
处理文本,提取数据的脚本 #! /bin/sh | sed 's/)<\/small><\/td><td>/\n/g' # 用换行符替换 # 删除带有分号的行 # ...
- 小型 Web 页项目打包优化方案
背景 目前团队中新的 Web 项目基本都采用了 Vue 或 React ,加上 RN,这些都属于比较重量级的框架,然而对于小型 Web 页面,又显得过大.早期的一些项目则使用了较原始的 HTML ...
- 初学安卓开发随笔之 Intent 用法
首先,对于安卓开发,目前世界上流行的是使用的是Android studio 2.0 .(hh 学着来呗 书上说用这个,,) 今后就定一个计划 每天更新一个Android 随笔,增强一下自控力吧!!! ...