数组应该是每个语言中都用得极度频繁的数据类型,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类型详解的更多相关文章

  1. JavaScript中数组Array方法详解

    ECMAScript 3在Array.prototype中定义了一些很有用的操作数组的函数,这意味着这些函数作为任何数组的方法都是可用的. 1.Array.join()方法 Array.join()方 ...

  2. JavaScript中的Array类型详解

    与其他语言中的数组的区别: 1.JavaScript数组的每一项都可以保存任何类型的数据,一个数组的数组元素可以是不同类型的数据. 2.数组的大小是动态调整的,可以随着数据的添加自动的增长. 1.两种 ...

  3. js课程 1-3 Javascript变量类型详解

    js课程 1-3  Javascript变量类型详解 一.总结 一句话总结:js对象点(属性方法),json对象冒号(属性方法).属性和方法区别只有一个括号. 1.json对象中的函数的使用? 函数名 ...

  4. GoLang基础数据类型--->数组(array)详解

    GoLang基础数据类型--->数组(array)详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Golang数组简介 数组是Go语言编程中最常用的数据结构之一.顾名 ...

  5. 转: javascript模块加载框架seajs详解

    javascript模块加载框架seajs详解 SeaJS是一个遵循commonJS规范的javascript模块加载框架,可以实现javascript的模块化开发和模块化加载(模块可按需加载或全部加 ...

  6. js变量类型详解

    <html> <title>js变量类型详解</title> <meta http-equiv="content-type" conten ...

  7. JavaScript进阶知识点——函数和对象详解

    JavaScript进阶知识点--函数和对象详解 我们在上期内容中学习了JavaScript的基本知识点,今天让我们更加深入地了解JavaScript JavaScript函数 JavaScript函 ...

  8. javascript event(事件对象)详解

    javascript event(事件对象)详解   1. 事件对象     1. 事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什 ...

  9. Linux Shell数组常用操作详解

    Linux Shell数组常用操作详解 1数组定义: declare -a 数组名 数组名=(元素1 元素2 元素3 ) declare -a array array=( ) 数组用小括号括起,数组元 ...

随机推荐

  1. web前段学习2016.6.6

    目前上网的方式:手机平板电脑移动端:智能手机.平板PC:电脑.笔记本运行在移动端的东西:APPios:object-candroid:javapc端的东西:桌面应用程序 c++ 我们上网的方式都是通过 ...

  2. Java虚拟机-----------Java内存区域与内存溢出异常

    Java内存区域划分 Java虚拟机运行时的数据区大致可划分为五部分:方法区,堆(两部分组成Java堆内存),虚拟机栈,本地方法栈(Java栈内存),程序计数器. 1.程序计数器 程序计数器占较小的内 ...

  3. ExtJs的Ext.Ajax.request实现waitMsg等待提示效果

    一.  fp.form.submit 有waitMsg 属性来设置等待效果,如下.但是对于Ext.Ajax.request来说 waitMsg 并不起作用.                     f ...

  4. Educational Codeforces Round 22.B 暴力

    B. The Golden Age time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  5. red hat 6.5 红帽企业Linux.6.5 yum This system is not registered to Red Hat Subscription Management. You can use subscription-manager to register. 解决办法

    1.删除redhat原有的yum rpm -aq|grep yum|xargs rpm -e --nodeps 2.下载yum安装文件 wget http://mirrors.163.com/cent ...

  6. Python之编写登陆接口

    1.输入用户名密码: 2.认证成功后显示欢迎信息: 3.错误三次后,账号被锁定. 账号文件:user.txt 锁定文件:locked.txt 流程图如下: # -*- coding:utf-8 -*- ...

  7. Luogu 1894 [USACO4.2]完美的牛栏The Perfect Stall / POJ 1274 The Perfect Stall(二分图最大匹配)

    Luogu 1894 [USACO4.2]完美的牛栏The Perfect Stall / POJ 1274 The Perfect Stall(二分图最大匹配) Description 农夫约翰上个 ...

  8. docker~大叔对术语的解释

    回到目录 接触和使用docker已经有1年多了,起初对概念本身理解的不是很好,或者说,没有找到一本比较好的书,在自己的研究下,对docker一些基本的概念有了自己的一些认识和看法,现在分享给正在学习d ...

  9. SetConsoleTextAttribute 函数--设置控制台文本属性

    SetConsoleTextAttribute函数 来源:https://msdn.microsoft.com/en-us/library/windows/desktop/ms686047(v=vs. ...

  10. 内核对象kobject和sysfs(2)——kref分析

    内核对象kobject和sysfs(2)--kref分析 在介绍ref之前,先贴上kref的结构: struct kref { atomic_t refcount; }; 可以看到,kref只是包含一 ...