JS Array的用法总结

简介

Javascript中的Array是一种有序数据类型，可以用来存储任何类型的数据，包括数字、字符串、甚至对象等。

声明与初始化

可以使用以下两种方式来声明和初始化一个数组：

直接声明并赋值

var arr = [1, 2, 3];

使用Array()构造函数

var arr = new Array(1, 2, 3);

注意，使用Array()构造函数时，可以传入任意数量的参数。

除此之外，还可以使用Array.from()方法从一个可迭代对象中创建一个数组。

常用方法

以下是JS数组中一些常见的方法：

push()

push()方法用于在数组的末尾添加一个或多个元素。

var arr = [1, 2, 3];
arr.push(4);
console.log(arr); // 输出: [1, 2, 3, 4]

pop()

pop()方法用于删除数组中的最后一个元素，并返回该元素。如果数组为空，则返回undefined。

var arr = [1, 2, 3];
var last = arr.pop();
console.log(last); // 输出: 3
console.log(arr); // 输出: [1, 2]

shift()

shift()方法用于删除数组中的第一个元素，并返回该元素。如果数组为空，则返回undefined。

var arr = [1, 2, 3];
var first = arr.shift();
console.log(first); // 输出: 1
console.log(arr); // 输出: [2, 3]

unshift()

unshift()方法用于在数组的开头添加一个或多个元素。

var arr = [1, 2, 3];
arr.unshift(0);
console.log(arr); // 输出: [0, 1, 2, 3]

slice()

slice()方法用于从数组中选取一个子数组，并将其作为新数组返回。可以传入两个参数，分别为起始位置和结束位置。

var arr = [1, 2, 3, 4, 5];
var subArr = arr.slice(1, 3);
console.log(subArr); // 输出: [2, 3]

splice()

splice()方法用于删除数组中的一些元素，并用新的元素替换它们。可以传入三个参数，分别为起始位置、删除的数量和被插入的新元素。

var arr = [1, 2, 3, 4, 5];
arr.splice(1, 2, "a", "b", "c");
console.log(arr); // 输出: [1, "a", "b", "c", 4, 5]

forEach()

forEach()方法用于对数组中的每个元素执行给定的函数。

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(item, index) {
  console.log("第" + (index+1) + "个元素是：" + item);
});
// 输出:
// 第1个元素是：1
// 第2个元素是：2
// 第3个元素是：3
// 第4个元素是：4
// 第5个元素是：5

注意，在使用forEach()方法时，可以传入两个参数，分别为当前元素和当前元素的索引。

filter()

filter()方法用于筛选数组中的元素，并将符合条件的元素作为一个新数组返回。可以传入一个判断函数作为参数。

var arr = [1, 2, 3, 4, 5];
var newArr = arr.filter(function(item) {
  return item % 2 == 0;
});
console.log(newArr); // 输出: [2, 4]

map()

map()方法用于对数组中的每个元素执行一个函数，并将执行的结果作为一个新数组返回。可以传入一个转换函数作为参数。

var arr = [1, 2, 3, 4, 5];
var newArr = arr.map(function(item) {
  return item * item;
});
console.log(newArr); // 输出: [1, 4, 9, 16, 25]

示例

以下是两个使用JS数组的示例：

1. 从一个列表中选取所有的链接

<ul id="links">
  <li><a href="#">链接1</a></li>
  <li><a href="#">链接2</a></li>
  <li><a href="#">链接3</a></li>
  <li><a href="#">链接4</a></li>
</ul>
<script>
var linksArr = Array.from(document.querySelectorAll("#links a")).map(function(a) {
  return a.href;
});
console.log(linksArr);
</script>

上述代码使用了Array.from()方法和querySelectorAll()方法来获取所有链接，并通过map()方法将链接转化为它们的href属性值，最终得到了一个包含所有链接的数组。

2. 统计一个文本中出现最多的单词

var text = "Hello world, hello World, hEllO WORLD. 123.";
var arr = text.toLowerCase().match(/\b\w+\b/g);
var countMap = arr.reduce(function(obj, item) {
  obj[item] = (obj[item] || 0) + 1;
  return obj;
}, {});
var maxCount = 0;
var maxWord;
for(var word in countMap) {
  if(countMap[word] > maxCount) {
    maxCount = countMap[word];
    maxWord = word;
  }
}
console.log("最多出现的单词是：" + maxWord + "，出现了" + maxCount + "次。");

上述代码将一个文本转化为了一个单词数组，并使用reduce()方法来统计出每个单词出现的数量。最后，通过遍历countMap来找到数量最多的单词，然后输出它的数量和出现次数。