JavaScript入门之数组:Array类型详解

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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方法对应,两者的关系就如同orand

对于数组的每一项,执行给定函数,如果该函数对有任意一项返回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类型)

JavaScript中的Array数组详解

JavaScript中数组对象详解

JavaScript数组(Array)类型之迭代方法

详解Java数据结构之数组(Array)

JavaScript引用类型之Array数组的concat()和push()方法的区别