简单聊聊数组

创建的数组的两种方式

  1. 第一种是使用Array构造函数,代码如下:
var colors = new Array();

如果预先知道数组要保存的项目数目,也可以直接给函数传递该数量:var colors = new Array(20),这个20表示的数组的长度为20;
2. 第二种是数组字面量表示法,代码如下:

var colors = [];

检测数组

  1. 对于一个网页或者一个全局作用域而言,使用instanceof就能得到满意的答案;
var colorarr = ["red","blue","green"];
var colorstr = "red";
console.log(colorarr instanceof Array) // true
console.log(colorstr instanceof Array) // false

但是,如果从一个框架向另外一个框架传入一个数组,这个方法就不可用了;代码如下:

// parent.html
    // html
    <iframe src="child.html" id="child" width="100%" height="100%" frameborder="0"></iframe>
    // script
    function toChildValue(){
        var arr = ["red","blue"];
        return arr;
    }
// child.html
    // script
    var getParentVule = window.parent.toChildValue();
    console.log(getParentVule instanceof Array) // false

所以ECMAScript5新增了Array.isArray()的方法,用这个方法再看上面的值就变成了true。

console.log(Array.isArray(getParentVule)) // true

兼容了的浏览器有IE 9+、Firefox 4+、Safari 5+、Opera 10.5+和Chrome。

转化方法

调用valueOf()返回的是数组本身,而调用数组的toString()方法会返回由数组中每一个值的字符串形式拼接成的一个以逗号分隔的字符串。

var colors = ["red","blue","green"];
console.log(typeof colors.valueOf()) // object ["red","blue","green"]
console.log(typeof colors.toString()) // string  red,blue,green

在默认情况下,都是以逗号进行分隔的,如果想用不同的符号进行分隔,可以使用join()方法;

console.log(colors.join("-")) // red-blue-green

队列方法

向数组末尾添加的方法push();
向数组前端添加的方法unshift();
取出数组末尾项的方法pop();
取出数组第一项的方法shift();

var num = [1,2,3];
// push
num.push(4)
console.log(num) // [1,2,3,4]
// unshift
num.unshift(0)
console.log(num) // [0,1,2,3]]
// pop
var newNum = num.pop();
console.log(num) // [1,2]
console.log(newNum) // 3
// shift
var newNum = num.shift();
console.log(num) // [2,3]
console.log(newNum) // 1

重排序方法

重排序的方法有两种,一种是reverse(),一种是sort()
reverse()这个方法就很简单了,就是单纯的将数组的反过来;

var num = [1,4,3,2];
num.reverse();
console.log(num);//[2,3,4,1]

主要说一下sort()方法;
默认sort()方法按升序排列数组,此方法会调用每个数组项的toString()转型方法,然后去比较得到的字符串,以确定如何排序。所以此方法会有瑕疵,如下:

var num = [1,5,15,10];
num.sort();
console.log(num); // [1,10,15,5]

可以看到它会像咱们电脑文件的排序似得,会先排1开始的,如果我们想要一个正常升序的排列方式应该怎么做呢?见下方代码:

function compare(val1,val2){
    if(val1 < val2){
	return -1;
    }else if(val1 > val2){
	return 1;
    }else{
	return 0;
    }
}
num.sort(compare);
console.log(num); // [1,5,10,15]

如果想要实现降序,只需要将判断条件中的±1换个位置即可。因为它是根据正负值算的,所以还有一种简单点的写法:

function compare(val1,val2){
    return val1 - val2;
}
num.sort(compare);
console.log(num); // [1,5,10,15]

操作方法

  • 数组的拼接:cancat(),下边列几种拼接的例子
var color = ["red","blue"];
var color1 = color.concat("yellow");
var color2 = color.concat("yellow",["green","gray"]);
console.log(color1); // ["red","blue","yellow"]
console.log(color2); // ["red","blue","yellow","green","gray"]
  • 基于当前数组创建一个或者多个新数组的方法slice(),注意此方法不影响原数组。只传入一个参数时表示从位置为1开始复制,两个参数表示复制从位置为1开始到位置为4的新数组,但是不包括位置是4的那个值。
var color = ["red","blue","yellow","green","gray"];
var color1 = color.slice(1);
var color2 = color.slice(1,4);
console.log(color) // ["red","blue","yellow","green","gray"]
console.log(color1) // ["blue","yellow","green","gray"]
console.log(color2) // ["blue","yellow","green"]
  • splice方法:这个方法是非常强大的一个方法,可以实现数组的删除、插入、替换。注意此方法会改变原数组。
    删除:可以删除任意数量的项,只需要2个参数。第一个参数是起始位置,第二个是要删除的项数。
var color = ["red","blue","yellow","green","gray"];
var color1 = color.splice(0,2);
console.log(color) // ["yellow","green","gray"]
console.log(color1) // ["red","blue"];

插入:向指定位置插入任意数量的项,需要3个参数:起始位置,0,要插入的项(可以是任意数量)。

var color = ["red","blue","yellow","green","gray"];
color.splice(1,0,"1","2");
console.log(color) //  ["red", "1", "2", "blue", "yellow", "green", "gray"]

替换:替换指定位置的项,需要3个参数:起始位置,要删除的项数、要替换的项(可以是任意数量)。

var color = ["red","blue","yellow","green","gray"];
color.splice(1,1,"1");
console.log(color) // ["red","1","yellow","green","gray"]
color.splice(1,1,"1","2");
console.log(color) // ["red","1","2","yellow","green","gray"] //删除一项填两项

位置方法

位置方法有两种,分别是indexOf()lastIndexOf();
indexOf()是从左到右依次查找并返回下标;
lastIndexOf()是从右到左依次查找并返回下标;

var color = [1,2,3,4,5,4,3,2,1];
var index = color.indexOf(3);
console.log(index) // 2
var index1 = color.lastIndexOf(3);
console.log(index1) // 6

迭代方法

我们说五种迭代方法:
every():对数组中的每一项运行给定函数,每一项都为true就返回true,有一个为false就返回false;
filter():对数组中的每一项运行给定函数,返回为true的项组成的数组;
forEach():对数组中的每一项运行给定函数,这个方法没有返回值;
map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组;
some():对数组中的每一项运行给定函数,有一项返回为true,就返回true;
下面举一些简单的例子说明:

var num = [1,2,3,4,5,4,3,2,1];
// every
var resultEvery = num.every(function (item,index){
    return item > 2;
})
console.log(resultEvery) // false
// some
var resultSome = num.some(function (item,index){
    return item > 2;
})
console.log(resultSome) // true
// filter
var resultFilter = num.filter(function (item,index){
    return item > 2;
})
console.log(resultFilter) // [3,4,5,4,3]
// map
var resultMap = num.map(function (item,index){
    return item * 2;
})
console.log(resultMap) // [2, 4, 6, 8, 10, 8, 6, 4, 2]
// forEach
num.forEach(function (item,index){
    console.log(item + "-" + index) // 1-0,2-1,...,1-8
})

归并方法

归并方法有两种:reduce()reduceRight(),这两个方法都会迭代数组的所有项,然后构建一个最终的返回值;不同的地方就是reduce()是从左向右,reduceRight()是从右向左;下面举个reduce()的例子:

var num = [1,2,3,4,5,4,3,2,1];
var val = num.reduce(function(prev,cur){
    return prev + cur;
})
console.log(val) // 25

关于数组的一些方法就先聊到这0.0

猜你喜欢

转载自www.cnblogs.com/hiluckyboy/p/12791910.html