js注意点：数组比较大小方法及数组与对象的区别

Posted 2021-02-04 Ming的博客

(迁移自旧博客2017-04-19)

快速复制数组及数组比较大小方法

首先介绍一下复制数组的方法：

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
var aCopy = arr.slice();
aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G'];

这样就成功复制数组了，是不是很神奇？
slice()就是对应String的substring()版本，它截取Array的部分元素，然后返回一个新的Array：

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 从索引0开始，到索引3结束，但不包括索引3: ['A', 'B', 'C']
arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']

注意到slice()的起止参数包括开始索引，不包括结束索引。
如果不给slice()传递任何参数，它就会从头到尾截取所有元素。利用这一点，我们可以很容易地复制一个Array。也就是我们第一段程序的原理所在。

然后给出一段代码：

var arr=[1,2,3];
var copyarr=arr.slice();
console.log(arr===copyarr);

这时你就会想copyarr数组是由arr复制而来的，它们应该相等才对。然而你发现这时浏览器返回的是false，它们不相等。这是为什么呢？
原来，两个数组比较大小是不能通过==或者===来比较的，无论是相等还是全等都不行，都会返回false。
正确比较方法：要判断JS中的两个数组是否相同，需要先将数组转换为字符串，再作比较。
以下两行代码将返回true。

alert([].toString()== [].toString());
alert([].toString()===[].toString());

延伸：如果要比较两个数组是否具有相同的元素，即两个数组所有元素都相同，但元素的顺序不一定一致。只就需要先将数组进行排序，再比较两个数组是否相等。看下面两行代码：

alert([1,2,3].toString()== [3,2,1].toString());
alert([1,2,3].sort().toString()== [3,2,1].sort().toString());

第一行返回false，第二行返回true。第二行是正确姿势！

接下来解释下为什么两个数组比较大小是不能通过==或者===来比较的。
因为在js中数组是对象，即使是相同的数组也会有不同的地址，所以返回的是false。

js数组和对象的区别

最后，既然说到数组是对象，那么来看下js数组和对象的区别。

两者都可以用来表示数据的集合：比如有一个数组a=[1,2,3,4]，还有一个对象a={0:1,1:2,2:3,3:4}，然后你运行alert(a[1])，两种情况下的运行结果是相同的！这就是说，数据集合既可以用数组表示，也可以用对象表示，那么我到底该用哪一种呢？数组表示有序数据的集合，而对象表示无序数据的集合。如果数据的顺序很重要，就用数组，否则就用对象。
数组和对象的另一个区别是，数组的数据没有”名称”（name），对象的数据有”名称”（name）。很多编程语言中，都有一种叫做”关联数组”（associative array）的东西。这种数组中的数据是有名称的。
比如在javascript中，可以这样定义一个对象：

var a={“城市”:”北京”,”面积”:16800,”人口”:1600};

但是，也可以定义成一个关联数组：

a["城市"]=”北京”;
a["面积"]=16800;
a["人口"]=1600;

其实在Javascript中，关联数组就是对象，对象就是关联数组。这一点与php语言完全不同，在php中，关联数组也是数组。
比如运行下面这段javascript：

var a=[1,2,3,4];
a['foo']=’Hello World’;
alert(a.length);

最后的结果是4，也就是说，数组a的元素个数是4个。
但是，运行同样内容的php代码就不一样了：

< ? php
$a=array(1,2,3,4);
$a["foo"]=”Hello world”;
echo count($a);
? >

最后的结果是5，也就是说，数组a的元素个数是5个。