Javascript中数组的使用方式、Array的属性和方法的使用以及解释理解

简介：

数组是值得有序集合，每个值叫做一个元素，而每个元素在数组中有一个位置，以数字表示，称为索引。js的数组是无类型的，数组元素可以是任意类型，同一个数组中的不同元素可能是对象或数组。数组元素的索引不一定要连续，元素之间可以有空隙，叫做稀疏数组
。每个数组都具有一个lengrh属性。针对非稀疏数组，length属性就是数组元素的个数，针对稀疏数组，元素的length属性比所有元素的索引要大。非稀疏是我们学习掌握的主要知识点。

一、数组的几种创建方式

实例化Array对象的方式。
实例化Array对象的方式创建数组，是通过new关键字实现的。

<script>
// 元素值类型为字符串
var area = new Array('Beijing', 'Shanghai', 'Shenzhen');
// 元素值类型为数值型
var score = new Array(56, 68, 98, 44);
// 元素值类型为混合型
var mix = new Array(123, 'abc', null, true, undefined);
// 空数组
var arr1 = new Array();   或    var arr2 = new Array;
</script>

小结： a.new 关键字是可省略的
b.当只传一个number类型参数时，创建的是参数指定长度的数组。即构造函数形式创建数组，不能创建只包含一个number类型元素的数组

二、Array 属性

1、constructor：返回创建Array对象原型的函数

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.constructor;
// 返回 function Array() { [native code] }

2、length：设置或返回数组中元素的数量

返回数组的长度：array.length；
设置数组的长度：array.length = number；

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;
//返回4

//也可以设置数组的长度
arr.length = 5;
//或者
var arr = new Array(4);
//这个4就是数组的长度

3、prototype：允许向数组添加属性的方法

定义和用法：
prototype 是可用于所有 JavaScript 对象的全局构造函数。
prototype 引用全局 Array() 对象。
prototype 构造函数允许您向数组添加新的属性和方法。
当构造新属性时，所有数组都将获得此属性及其值。
当构造新方法时，所有数组都将获得此方法。

//创建一个新的数组方法，将数组值转换为大写：
Array.prototype.myUcase = function() {
  for (i = 0; i < this.length; i++) {
    this[i] = this[i].toUpperCase();
  }
};
//创建一个数组，然后调用 myUcase 方法：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.myUcase();

三、Array 方法

1、concat()：连接两个或多个数组，并返回已连接数组的副本。

定义和用法:
concat() 方法用于连接两个或多个数组。
concat() 方法不会更改现有数组，而是返回一个新数组，其中包含已连接数组的值。

//连接两个数组：
var sedan = ["S60", "S90"];
var SUV = ["XC40", "XC60", "XC90"];
var Volvo = sedan.concat(SUV);
//返回：S60,S90,XC40,XC60,XC90

2、copyWithin()：将数组中的数组元素复制到指定位置或从指定位置复制。

定义和用法
copyWithin() 方法将数组元素复制到数组中的另一个位置，覆盖现有值。
copyWithin() 方法永远不会向数组添加更多项。
提示：copyWithin() 方法会覆盖原始数组。

//将前两个数组元素复制到最后两个数组元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 0);

3、entries()：返回键/值对数组迭代对象。

定义和用法
entries() 方法返回带有键/值对的 Array Iterator 对象。
对于原始数组中的每一项，新的迭代对象将包含一个以索引为键，以项值为值的数组：

[0, “Banana”]
[1, “Orange”]
[2, “Apple”]
[3, “Mango”]
注释：entries() 不会更改原始数组。

//创建一个 Array Iterator 对象，并创建一个循环来迭代每个键/值对：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var f = fruits.entries();

for (x of f) {
  document.getElementById("demo").innerHTML += x;
}

4、every()：检查数组中的每个元素是否通过测试。

定义和用法
every() 方法检查数组中的所有元素是否都通过了测试（被作为函数提供）。

every() 方法对数组中存在的每个元素执行一次函数：

如果找到函数返回 false 值的数组元素，every() 返回 false（并且不检查剩余值）
如果没有出现 false，every() 返回 true
注释：every() 不对没有值的数组元素执行函数。
注释：every() 不改变原始数组。

//检查 age 数组中的所有值是否都为 18 或以上：
var ages = [32, 33, 16, 40];

function checkAdult(age) {
  return age >= 18;
}

function myFunction() {
  document.getElementById("demo").innerHTML = ages.every(checkAdult);
}

5、fill()：用静态值填充数组中的元素。

定义和用法
fill() 方法用静态值填充数组中的指定元素。
您可以指定开始和结束填充的位置。如果未指定，则将填充所有元素。

注释：fill() 会覆盖原始数组。

//用静态值填充所有数组元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Kiwi");

6、filter()：使用数组中通过测试的每个元素创建新数组。

定义和用法
filter() 方法创建数组，其中填充了所有通过测试的数组元素（作为函数提供）。

注释：filter() 不会对没有值的数组元素执行该函数。
注释：filter() 不会改变原始数组。

//返回由 ages 数组中所有 18 岁或以上的值组成的数组：
var ages = [32, 33, 16, 40];

function checkAdult(age) {
  return age >= 18;
}

function myFunction() {
  document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}

7、find()：返回数组中第一个通过测试的元素的值。

定义和用法
find() 方法返回数组中第一个通过测试的元素的值（作为函数提供）。
find() 方法对数组中存在的每个元素执行一次函数：

如果找到函数返回 true 值的数组元素，则 find() 返回该数组元素的值（并且不检查剩余值）
否则返回 undefined
注释：find() 不对空数组执行该函数。
注释：find() 不会改变原始数组。

//获取数组中第一个值为 18 或更大的元素的值：
var ages = [3, 10, 18, 20];

function checkAdult(age) {
  return age >= 18;
}

function myFunction() {
  document.getElementById("demo").innerHTML = ages.find(checkAdult);
}

8、findIndex()：返回数组中通过测试的第一个元素的索引。

定义和用法
findIndex() 方法返回数组中通过测试的第一个元素的索引（作为函数提供）。
findIndex() 方法对数组中存在的每个元素执行一次函数：

如果找到函数返回 true 值的数组元素，则 findIndex() 返回该数组元素的索引（并且不检查剩余值）
否则返回 -1
注释：findIndex() 不会为没有值的数组元素执行函数。

注释：findIndex() 不会改变原始数组。

//获取数组中第一个值等于或大于 18 的元素的索引：
var ages = [3, 10, 18, 20];

function checkAdult(age) {
  return age >= 18;
}

function myFunction() {
  document.getElementById("demo").innerHTML = ages.findIndex(checkAdult);
}

9、forEach()：为每个数组元素调用函数。

定义和用法
forEach() 方法按顺序为数组中的每个元素调用一次函数。
注释：对于没有值的数组元素，不执行forEach() 方法。

//列出数组中的每一项：
var fruits = ["apple", "orange", "cherry"];
fruits.forEach(myFunction);

function myFunction(item, index) {
  document.getElementById("demo").innerHTML += index + ":" + item + "<br>"; 
}

10、from()：从对象创建数组。

定义和用法
from() 方法从具有 length 属性或可迭代对象的任何对象返回 Array 对象.

//从字符串创建数组：
var myArr = Array.from("ABCDEFG");
//返回A,B,C,D,E,F,G

11、includes()：检查数组是否包含指定的元素。

定义和用法
includes() 方法确定数组是否包含指定的元素。
如果数组包含元素，则此方法返回 true，否则返回 false。

注释：includes() 方法区分大小写。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var n = fruits.includes("Mango");
//true

12、indexOf()：在数组中搜索元素并返回其位置。

定义和用法
indexOf() 方法在数组中搜索指定项目，并返回其位置。

搜索将从指定位置开始，如果未指定开始位置，则从头开始，并在数组末尾结束搜索。

如果未找到该项目，则 indexOf() 返回 -1。
如果该项目出现多次，则 indexOf() 方法返回第一次出现的位置。
注释：第一项的位置为 0，第二项的位置为 1，依此类推。
提示：如果您想从尾到头搜索，请使用 lastIndexOf() 方法。

//在数组中搜索 "Apple" 项：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

13、isArray()：检查对象是否为数组。

定义和用法
isArray() 方法确定对象是否为数组。
如果对象是数组，则此函数返回 true，否则返回 false。

//检查对象是否为数组：
function myFunction() {
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  var x = document.getElementById("demo");
  x.innerHTML = Array.isArray(fruits);
}

14、join()：将数组的所有元素连接成一个字符串。

定义和用法
join() 方法将数组作为字符串返回。
元素将由指定的分隔符分隔。默认分隔符是逗号 (,)。
注释：join() 方法不会改变原始数组。

//将数组元素转换为字符串：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();

15、keys()：返回Array Iteration对象，包含原始数组的键.

定义和用法
keys() 方法返回带有数组键的 Array Iterator 对象。
注释：keys() 方法不改变原数组。

//创建一个 Array Iterator 对象，只包含数组的键，然后遍历每个键：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var fk = fruits.keys();

for (x of fk) {
  document.getElementById("demo").innerHTML += x + "<br>";
}

16、lastIndexOf()：在数组中搜索元素，从末尾开始，并返回其位置。

定义和用法
lastIndexOf() 方法在数组中搜索指定项目，并返回其位置。

搜索将从指定位置开始，如果未指定开始位置，则从末尾开始，并在数组的开头结束搜索。
如果未找到该项目，则 lastIndexOf() 方法返回 -1。
如果要搜索的项目不止一次出现，lastIndexOf() 方法将返回最后一次出现的位置。

提示：如果要从头到尾搜索，使用 indexOf() 方法。

//在数组中搜索 "Apple" 项：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

17、map()：使用为每个数组元素调用函数的结果创建新数组。

定义和用法
map() 方法使用为每个数组元素调用函数的结果创建新数组。
map() 方法按顺序为数组中的每个元素调用一次提供的函数。
注释：map() 对没有值的数组元素不执行函数。
注释：map() 不会改变原始数组。

//返回原始数组中所有值的平方根的数组：
var numbers = [4, 9, 16, 25];
var x = numbers.map(Math.sqrt)
document.getElementById("demo").innerHTML = x;

18、pop()：删除数组的最后一个元素，并返回该元素。

定义和用法
pop() 方法移除数组的最后一个元素，并返回该元素。
注释：pop() 方法会改变数组的长度。

提示：如需删除数组的第一个元素，请使用 shift() 方法。

删除数组的最后一个元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();

19、push()：将新元素添加到数组的末尾，并返回新的长度。定义和用法

push() 方法向数组末尾添加新项目，并返回新长度。
提示：新的项目将被添加到数组的末尾。
注释：push() 方法会改变数组的长度。

提示：如需在数组的开头添加项目，请使用 unshift() 方法。

//向数组添加一个新项目：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");

20、reduce()：将数组的值减为单个值（从左到右）。

定义和用法
reduce() 方法将数组缩减为单个值。

reduce() 方法为数组的每个值（从左到右）执行提供的函数。

函数的返回值存储在累加器中（结果/总计）。

注释：对没有值的数组元素，不执行 reduce() 方法。

注释：reduce() 方法不会改变原始数组。

//从头开始减去数组中的数字：

var numbers = [175, 50, 25];

document.getElementById("demo").innerHTML = numbers.reduce(myFunc);

function myFunc(total, num) {
  return total - num;
}

21、reduceRight()：将数组的值减为单个值(从右到左)

定义和用法
reduceRight() 方法将数组缩减为单个值。
reduceRight() 方法为数组的每个值（从右到左）执行提供的函数。

函数的返回值存储在累加器中（结果/总计）。

注释：对没有值的数组元素，不执行 reduceRight() 方法。

减去数组中的数字，从末尾开始：

var numbers = [175, 50, 25];

document.getElementById("demo").innerHTML = numbers.reduceRight(myFunc);

function myFunc(total, num) {
  return total - num;
}

22、reverse()：反转数组中元素的顺序。

定义和用法
reverse() 方法反转数组中元素的顺序。
注释：reverse() 方法将改变原始数组。

//反转数组中元素的顺序：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();

23、shift()：删除数组的第一个元素，并返回该元素。

定义和用法
shift() 方法移除数组的第一项。

注释：shift() 方法会改变数组的长度。
注释：shift 方法的返回值是被移除的项目。
注释：shift() 方法会改变原始数组。

提示：如需删除数组的最后一项，请使用 pop() 方法。
//删除数组中的第一个项目：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();

24、slice()：选择数组的一部分，并返回新数组。

定义和用法
slice() 方法以新的数组对象，返回数组中被选中的元素。
slice() 方法选择从给定的 start 参数开始的元素，并在给定的 end 参数处结束，但不包括。

注释：slice() 方法不会改变原始数组。

//从数组中选择元素：
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);

25、some()：检查数组中的任何元素是否通过测试。

定义和用法
some() 方法检查数组中的任何元素是否通过测试（作为函数提供）。
some() 方法对数组中存在的每个元素执行一次函数：

如果找到函数返回真值的数组元素，some() 返回真（并且不检查剩余值）
否则返回 false
注释：some() 对没有值的数组元素不执行函数。
注释：some() 不改变原始数组。

//检查 ages 数组中是否有 18 或以上的值：

var ages = [3, 10, 18, 20];

function checkAdult(age) {
  return age >= 18;
}

function myFunction() {
  document.getElementById("demo").innerHTML = ages.some(checkAdult);
}

26、sort()：对数组的元素进行排序。

定义和用法
sort() 方法对数组的项目进行排序。

排序顺序可以是按字母或数字，也可以是升序（向上）或降序（向下）。
默认情况下，sort() 方法将按字母和升序将值作为字符串进行排序。
这适用于字符串（“Apple” 出现在 “Banana” 之前）。但是，如果数字按字符串排序，则 “25” 大于 “100” ，因为 “2” 大于 “1”。
正因为如此，sort() 方法在对数字进行排序时会产生不正确的结果。
您可以通过提供“比较函数”来解决此问题（请参阅下面的“参数值”）。
注释：sort() 方法会改变原始数组。

//排序数组：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();

27、splice()：从数组中添加/删除元素。

定义和用法
splice() 方法向/从数组添加/删除项目，并返回删除的项目。
注释：splice() 方法会改变原始数组。

//将项目添加到数组：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

28、toString()：将数组转换为字符串，并返回结果。

定义和用法
toString() 方法返回包含所有数组值的字符串，以逗号分隔。
注释：toString() 方法不会改变原始数组。

//将数组转换为字符串：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.toString();

29、unshift()：将新元素添加到数组的开头，并返回新的长度。

定义和用法
unshift() 方法将新项添加到数组的开头，并返回新的长度。
注释：unshift() 方法会改变数组的长度。
提示：如需在数组末尾添加新项，请使用 push() 方法。

//将新项目添加到数组的开头：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");

30、valueOf()：返回数组的原始值。

定义和用法：

valueOf() 方法返回数组。
valueOf() 方法是数组对象的默认方法。
注释：valueOf() 方法不会改变原始数组。
//valueOf() 是数组对象的默认方法。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var v = fruits.valueOf();	// 返回 fruits
//fruits.valueOf() 返回的结果与 fruits 相同

总结：

㈠ 数组的知识是用来解决大量的相同类型数据(排序，查找，按要求赋值，按要求输出)
㈡ 数组起的最大作用就是让数据有了他们的存储空间。
㈢ 字符串的优势在于输入、输出和赋初值，输入输出不需要使用循坏。字符数组需要用循环依次输出每个字符。
㈣ 虽然学习了编码知识有段时间了，但还是要注意细节，防止粗心出现代码错误，还有就是注意代码区的美观，好方便检查。