javascript引用类型之Array 类型

最新推荐文章于 2022-08-12 17:46:03 发布

weixin_33695450

最新推荐文章于 2022-08-12 17:46:03 发布

阅读量141

点赞数

文章标签：数据结构与算法前端 javascript ViewUI

原文链接：https://segmentfault.com/a/1190000016400678

版权

数组在javascript中是很常用的数据类型

创建数组的几种方式

使用new操作符来创建数组

var arr = new Array() // []创建了一个长度为0的空数组
var arr1 = new Array(2) // [empty × 2]创建了一个长度为2的空数组
var arr2 = new Array('a', 'b', 'c') // ["a", "b", "c"]创建了一个长度为3的数组 
##new操作符是可以省略的## 
var arr = Array()

使用数组字面【数组字面量由一对包含数组项的方括号表示，多个数组项之间以逗号隔开】表示法来创建数组
```
var arr = ['a', 'b', 'c'] // ["a", "b", "c"]
var arr1 = [] // []
```

读取和设置数组的值【要使用方括号并提供相应值的基于 0 的数字索引】

console.log(arr[0]) // 读取arr数组的第1项的值，值为a
arr[1] = 'b1' // 修改arr数组的第2项的值为b1
arr[3] = 'd' // 给arr数组新增第4项，值为d

数组的length属性，返回数组的项数。通过设置这个属性，可以从数组的末尾移除项或向数组中添加新项

console.log(arr.length) // 4
console.log(arr) // ["a", "b1", "c", "d"]
arr.length = 3
console.log(arr) // ["a", "b1", "c"]
arr.length = 4
console.log(arr) // ["a", "b1", "c", empty]
console.log(arr[3]) // undefined 因为这个数组不存在位置3
arr[arr.length] = 'd' // 利用 length 属性也可以方便地在数组末尾添加新项
console.log(arr) // ["a", "b1", "c", empty, "d"]
arr[99] = "unknown"
console.log(arr) // ["a", "b", "c", empty, "d", empty × 94, "unknown"]

检测数组确定某个对象是不是数组

对于一个网页，或者【一个全局作用域】而言，使用 instanceof 操作符就能得到满意的结果
```
if (arr instanceof Array) {
  console.log('abc')
}
```
如果网页中包含多个框架【如有多个iframe】，那实际上就存在两个以上不同的全局执行环境，从而存在两个以上不同版本的 Array
构造函数。如果你从一个框架向另一个框架传入一个数组，那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的构造函数。这种情况下就需要使用Array.isArray()方法。这个方法的目的是最终确定某个值到底是不是数组，而不管它是在哪个全局执行环境中创建的
```
var iframe = document.createElement('iframe');
document.body.appendChild(iframe) // 产生第二个全局执行环境
xArray = window.frames[window.frames.length-1].Array; // 第二个全局执行环境的构造函数 ƒ Array() { [native code] }
Array; // 第一个全局环境中的构造函数ƒ Array() { [native code] }
window.frames[0].Array === Array; // false

var arr = new xArray(1,2,3); // [1,2,3]
arr instanceof Array; // false
Array.isArray(arr); // true
```

转换方法

所有对象都具有 toLocaleString()、toString()和 valueOf()方法 toLocaleString()方法;
数组的 toString()方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串;
valueOf()返回的还是数组;
由于 alert()要接收字符串参数，所以它会在后台调用 toString()方法，由此会得到与直接调用 toString()方法相同的结果;
toLocaleString()方法



```
var arr = ['a', 'b', 'c'];
console.log(arr.toString()); // a,b,c
alert(arr.toString()); // a,b,c
console.log(arr.valueOf()); // ["a", "b", "c"]
alert(arr.valueOf()); // a,b,c
console.log(arr); // ["a", "b", "c"]
alert(arr); // a,b,c 
```

join()方法，则可以使用不同的分隔符来构建这个字符串

如果数组中的某一项的值是 null 或者 undefined，那么该值在 join()、
toLocaleString()、toString()和 valueOf()方法返回的结果中以空字符串表示
```
var arr = ['a', 'b', 'c']
arr.join(','); // "a,b,c"
arr.join(); // "a,b,c" 不传参数会默认以,分割
arr.join('||'); // "a||b||c"
```

栈方法

ECMAScript 数组也提供了一种让数组的行为类似于其他数据结构的方法。具体说来，数组可以表现得就像栈一样，后者是一种可以限制插入和删除项的数据结构。栈是一种 LIFO（Last-In-First-Out，后进先出）的数据结构，也就是最新添加的项最早被移除。而栈中项的插入（叫做推入）和移除（叫做弹出），只发生在一个位置——栈的顶部。ECMAScript 为数组专门提供了 push()和 pop()方法，以便实现类似栈的行为。


```
var arr = []
arr.push('a', 'b'); // 返回修改后数组的长度  2
arr.push('c'); // 返回修改后数组的长度  3
arr.pop(); // 返回移除的数组的最后一项 'c'
arr.length; // 2
```

队列方法

栈数据结构的访问规则是 LIFO（后进先出），而队列数据结构的访问规则是 FIFO（First-In-First-Out，先进先出）。队列在列表的末端添加项，从列表的前端移除项。由于 push()是向数组末端添加项的方法，因此要模拟队列只需一个从数组前端取得项的方法。实现这一操作的数组方法就是 shift()，它能够移除数组中的第一个项并返回该项，同时将数组长度减 1。结合使用 shift()和 push()方法，可以像使用队列一样使用数组。

var arr = ['a', 'b', 'c']
arr.push('d', 'e'); // 返回数组的长度5
arr.shift(); // 返回数组的第一项，并将数组长度减1 'a'
arr.length; // 4

ECMAScript 还为数组提供了一个 unshift()方法。顾名思义，unshift()与 shift()的用途相反：它能在数组前端添加任意个项并返回新数组的长度。因此，同时使用 unshift()和 pop()方法，可以从相反的方向来模拟队列，即在数组的前端添加项，从数组末端移除项

var arr = []
arr.unshift('a', 'b', 'c'); // 3
arr.unshift('d'); // 4
console.log(arr); // ["d", "a", "b", "c"]
arr.pop(); // 'c'

重排序方法

数组中已经存在两个可以直接用来重排序的方法：reverse()和 sort()

var arr = [1, 2, 3]
arr.reverse(); // [3, 2, 1]
console.log(arr) // reverse()方法会改变原数组 [3, 2, 1]

sort()方法

sort()方法按升序排列数组项——即最小的值位于最前面，最大的值排在最后面。为了实现排序，sort()方法会调用每个数组项的 toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值，sort()方法比较的也是字符串。

var arr = [0, 1, 5, 10, 15]
arr.sort(); // [0, 1, 10, 15, 5]

这里有一个疑问？不是说sort()方法是按升序排列数组项么，怎么得到的结果不是我们想要的结果呢？？？？因为数值 5 虽然小于 10，但在进行字符串比较时，"10"则位于"5"的前面，于是数组的顺序就被修改了。
为了解决这个问题。因此 sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。比较函数接收两个参数

// 数组项升序排列
function compare(value1, value2) { 
 if (value1 < value2) { 
 return -1; 
 } else if (value1 > value2) { 
 return 1; 
 } else { 
 return 0; 
 } 
}
var values = [0, 1, 5, 10, 15]
values.sort(compare); // [0, 1, 5, 10, 15]
// 数组项降序排列，只要交换比较函数返回的值即可
function compare(value1, value2) { 
 if (value1 < value2) { 
 return 1; 
 } else if (value1 > value2) { 
 return -1; 
 } else { 
 return 0; 
 } 
}
var values = [0, 1, 5, 10, 15]; 
values.sort(compare); // 15,10,5,1,0

对于数值类型或者其 valueOf()方法会返回数值类型的对象类型，可以使用一个更简单的比较函数。这个函数只要用第二个值减第一个值即可。

function compare(value1, value2){ 
 return value2 - value1; 
}
var arr = [0, 5,10 ,2,3]
arr.sort(compare); // [10, 5, 3, 2, 0]
var arr = ['0', '5','10' ,'2','3']
arr.sort(compare); //  ["10", "5", "3", "2", "0"]

对象数组进行排序

function fuc(perpertyName)  {
  return function (object1, object2) {
    var value1 = object1[perpertyName]
    var value2 = object2[perpertyName]
    if (value1 < value2) {
      return -1;
    } else if (value1 > value2) {
      return 1;
    } else {
      return 0;
    }
  };
}
let arr = [{id: 1, name: 2}, {id: 4, name: 1}, {id: 2, name: 3}]
let newArr = arr.sort(fuc('name'))
console.log(newArr)

操作方法

concat()方法
concat()会返回一个新数组，concat()不会改变原数组,

var arr = ['a', 'b', 'c']
var arr0 = arr.concat(); // 这里concat不传参数，它只是复制当前数组并返回副本
console.log(arr === arr0); // false
arr.concat('d'); // ["a", "b", "c", "d"]
console.log(arr); // ["a", "b", "c"]
var arr1 = arr.concat('d');
console.log(arr1); // ["a", "b", "c", "d"]
arr1.concat('f', 'g', arr); // ["a", "b", "c", "d", "f", "g", "a", "b", "c"]

slice()方法
slice()，它能够基于当前数组中的一或多个项创建一个新数组。slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下，slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。注意，slice()方法不会影响原始数组。
```
var arr = ['a', 'b', 'c']
var arr1 = arr.slice(1)
console.log(arr); // ["a", "b", "c"]
console.log(arr1); // ["b", "c"]
var arr2 = arr.slice(1, 2)
console.log(arr2) // ["b"]
var arr3 = arr.slice(1, 5)
console.log(arr3) // ["b", "c"]
//如果 slice()方法的参数中有一个负数，则用数组长度加上该数来确定相应的位置,如果结束位置小于起始位置，则返回空数组。
```

splice()方法
splice()方法始终都会返回一个数组，该数组中包含从原始数组中删除的项（如果没有删除任何项，则返回一个空数组） splice()方法会改变原数组

// 删除 可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数
var arr = ['a', 'b', 'c']
arr.splice(0, 2); // 返回删除的项组成的数组["a", "b"]
console.log(arr) // ["c"] 此处看到原数组已经 被改变了
// 插入 可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、0（要删除的项数）和要插入的项。如果要插入多个项，可以再传入第四、第五，以至任意多个项
var arr = ['a', 'b', 'c']
arr.splice(1, 0 , 'a1', 'a2', 'a3') // []
console.log(arr) // ["a", "a1", "a2", "a3", "b", "c"]
// 替换 可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。
var arr = ['a', 'b', 'c']
arr.splice(1, 2, 'b1', 'c1') // ["b", "c"]
console.log(arr); // ["a", "b1", "c1"]

位置方法

indexOf()和 lastIndexOf()。这两个方法都接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回-1

indexOf()方法从数组的开头（位置 0）开始向后查找,indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

var numbers = [1,2,3,4,5,4,3,2,1];
numbers.indexOf(4) // 4在Numbers数组的3位置
numbers.indexOf(4, 4) // 返回5 ，查找4在numbers数组中首次出现的位置，查找的起点位置是4
var person = { name: "Nicholas" }; 
var people = [{ name: "Nicholas" }]; 
var morePeople = [person];
console.log(people.indexOf(person)); // -1
console.log(morePeople.indexOf(person)); // 0

lastIndexOf()方法则从数组的末尾开始向前查找,lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。

var numbers = [1,2,3,4,5,4,3,2,1];
numbers.lastIndexOf(4); // 5
numbers.lastIndexOf(4, 4) // 返回3 ，查找4在numbers数组中最后一次出现的位置，查找的起点位置是4，从后向前找

迭代方法

every()方法、some()方法、filter()方法、forEach()方法、map()方法。以上方法都不会修改数组中的包含的值

every()方法对数组中的每一项运行给定函数，如果该函数对每一项都返回 true，则返回 true

var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item, index, array){ 
 return (item > 2); 
});
console.log(everyResult) // false

some()方法对数组中的每一项运行给定函数，如果该函数对任一项返回 true，则返回 true

var numbers = [1,2,3,4,5,4,3,2,1]; 
var someResult = numbers.some(function(item, index, array){ 
 return (item > 2); 
});
console.log(someResult) // true

filter()方法对数组中的每一项运行给定函数，返回该函数会返回 true 的项组成的数组

var numbers = [1,2,3,4,5,4,3,2,1]; 
var filterResult = numbers.filter(function(item, index, array){ 
 return (item > 2); 
});
console.log(filterResult) // [3, 4, 5, 4, 3]

map()方法对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组

var numbers = [1,2,3,4,5,4,3,2,1];
var mapResult = numbers.map(function(item, index, array){ 
 return item * 2; 
});
console.log(mapResult) // [2, 4, 6, 8, 10, 8, 6, 4, 2]

forEach()方法对数组中的每一项运行给定函数。这个方法没有返回值，本质上与使用 for 循环迭代数组一样
```
var numbers = [1,2,3,4,5,4,3,2,1]; 
numbers.forEach(function(item, index, array){ 
 //执行某些操作 
}); 
```

归并方法

这两个方法都会迭代数组的所有项，然后构建一个最终返回的值。其中，reduce()方法从数组的第一项开始，逐个遍历到最后。而 reduceRight()则从数组的最后一项开始，向前遍历到第一项。这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值,传给reduce()和reduceRight()的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项

var values = [1,2,3,4,5]; 
var sum = values.reduce(function(prev, cur, index, array){ 
 return prev + cur; 
}); 
console.log(sum) // 15 
var sum1 = values.reduceRight(function(prev, cur, index, array){ 
 return prev + cur; 
}); 
console.log(sum1) // 15