JS 数组对象及方法

数组对象

1.数组是值的有序集合。
每个值叫做一个元素，而每个元素在数组中有一个位置，以数字表示，称为索引。

2.数组是无类型的。
数组元素可以是任意类型，并且同一个数组中的不同元素也可能有不同的类型。
数组的元素可以是对象或其他数组，从而创建复杂的数据结构。

3.数组是动态的。
根据需要它们会增长或缩减，并且在创建数组时无须声明一个固定的大小或者在数组大小变化时无须重新分配空间。

4.数组可以是稀疏的。
1.数组元素的索引不一定要连续的，它们之间可以有空缺。
2.每个JavaScript数组都有一个length属性。
针对非稀疏数组，该属性就是数组元素的个数。
针对稀疏数组，length比实际元素个数要大。

5.数组继承自Array.prototype中的属性。
它定义了一套丰富的数组操作方法，它们不仅对真正的数组有效，而且对“类数组对象”同样有效。如，字符串、arguments等。

创建数组
1.数组字面量

let empty = [];
let primes = [2, 4, 6, 8, 11];
let misc = [2.3, true, "seven"];

2.构造函数Array（）

let a1 = new Array(); //相当于[]
let a2 = new Array(10);
let a3 = new Array(1, 2, 3, "四", "五", "六","七八");

读写数组元素
使用[ ]操作符来访问数组中的一个元素。
1.方括号中是一个返回非负整数值的任意表达式。
2.使用该语法既可以读又可以写数组的一个元素。

数组长度
可以通过使用length 属性获取数组的长度（数组中有多少项元素）
length 属性最常用于循环（循环遍历数组中的所有项）

let primes = [2, 4, 6, 8, 11];
for（let i=0; i<primes.length;i++）{
	console.log(primes[i]);
};

数组方法

push( ) 在数组的末尾添加一个或多个元素，并返回数组的新长度。（更改原数组）
pop( ) 删除数组的最后一个元素，并返回该元素。（更改原数组）

var arr1 = [1, 2, 3, 4, 5];
//push()：在原本的数组最后增加新增的元素（可以更改原数组）
arr1.push(6);
console.log(arr1); //(6) [1, 2, 3, 4, 5, 6]
var count = arr1.push(7, 8, 9);
console.log(count, arr1); //(9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

//pop():删除并返回数组的最后一个元素（可以更改原数组）
var n1 = arr1.pop();
console.log(n1, arr1); //(8) [1, 2, 3, 4, 5, 6, 7, 8]

unshift( ) 在数组的开头添加一个或多个元素，并返回数组的新长度。（更改原数组）
shift( ) 删除数组的第一个元素，并返回该元素。

var arr2 = [1, 2, 3, 4, 5];
//unshift():向数组的开头添加一个或多个新的元素，并返回新的长度
arr2.unshift(0);
console.log(count, arr2); //(6) [0, 1, 2, 3, 4, 5]

//shift():删除并返回数组的第一个元素
var n2 = arr2.shift();
console.log(n2, arr2); //(5) [1, 2, 3, 4, 5]

splice( ) 在任意位置给数组添加、删除或替换任意个元素，并返回包含了被删除元素的数组。（更改原数组）
※splice（开始位置，删除个数，（增加新的数组元素））

var arr3 = [1, 2, 3, 4, 5];
/* 
 * splice():第一个参数：开始位置，第二个参数：删除个数，
 * 第三个及以后参数：增加的新数组元素
 */
var r = arr3.splice(1, 2);
console.log(r, arr3); //  [2, 3] ， [1, 4, 5]
r = arr3.splice(1, 0, 2, 3);
console.log(r, arr3); // [] ， [1, 2, 3, 4, 5]
r = arr3.splice(2, 1, 20, 30, 40)
console.log(r, arr3); // [3] ， [1, 2, 20, 30, 40, 4, 5]

reverse( ) 颠倒数组中元素的排列顺序，并返回倒序后的数组。（更改原数组）
sort( ) 对数组元素进行排序，并返回排序后的数组。（更改原数组）

var arr4 = [20, 12, 13, 4, 51];
//reverse()：颠倒数组中元素的排列顺序，并返回倒序后的数组（可以更改原数组）
var arr4_r = arr4.reverse();
console.log(arr4, arr4_r); //(5) [51, 4, 13, 12, 20] (5) [51, 4, 13, 12, 20]

//sort():对数组元素进行排序，按照字符串的类型排序，并返回排序后的数组   
var arr4_s = arr4.sort();
console.log(arr4, arr4_s); //(5) [12, 13, 20, 4, 51] (5) [12, 13, 20, 4, 51]

sort（）高阶用法
sort( )可以接受一个回调函数为参数，该回调函数必须有两个参数，且返回值大于0，小于0或等于0。
返回值大于0则交换两个数组元素的位置

var names = ["Jerry", "Tom", "Atom", "Ketty", "Donald", "Pluto"];
// sort()高阶用法：可以接受一个回调函数为参数，该函数必须有两个参数，且返回值大于、小于或等于0
names.sort(function(a, b) {
    return a.length - b.length; //若a的长度-b的长度大于0，则交换，并把值赋予a(sort规则：前一个值-后一个值>0则交换)
})
console.log(names); //(6) ["Tom", "Atom", "Jerry", "Ketty", "Pluto", "Donald"]

slice( ) 抽取当前数组中的一段元素组合成一个新数组，并返回选中的元素组成的新数组。（不会更改原数组）
slice（开始位置，结束位置（但不包括结束位置））

var arr31 = [1, 2, 3, 4, 5];
//slice():第一个参数：选定开始位置，第二个参数：选定结束位置，但不包括;
//不会改变原数组，将选取元素封装到新数组返回;
//第二个参数可以省略，截取内容则是之后所有元素;
//第二个参数可以传递一个负值，负值则是从后往前算;
var r = arr31.slice(1, 2)
console.log(r, arr31); // [2] ， [1, 2, 3, 4, 5]

concat( ) 返回一个由当前数组合其他若干数组或若干非数组值组合而成的新数组。（不会更改相连接的两个数组）

let arr1 = [1, 2, 3, 4];
let arr2 = [5, 6, 7, 8];
let con = arr1.concat(arr2);
console.log(arr1, arr2, con);
// [1, 2, 3, 4]  [5, 6, 7, 8]  [1, 2, 3, 4, 5, 6, 7, 8]

indexOf( ) 返回数组中第一个与指定值相等的元素的索引，如果找不到，则返回-1。（不会更改原数组）

let ido = arr1.indexOf(2);
console.log(arr1, ido); // [1, 2, 3, 4] 1

lastIndexOf( ) 返回数组中最后一个（从右边数第一个）与指定值相等的元素的索引，如果找不到，则返回 -1。（不会更改原数组）

let lido = arr1.lastIndexOf(3);
console.log(arr1, lido); // [1, 2, 3, 4] 2 

join( ) 连接所有数组元素组成一个字符串，并返回该字符串。（不会更改原数组）

let j1 = arr1.join();
console.log(j1); // [1, 2, 3, 4] 1,2,3,4

toString( ) 返回一个由所有数组元素组合而成的字符串，以逗号连接。（不会更改原数组）

let ts = arr1.toString();
console.log(arr1, ts); // [1, 2, 3, 4] 1,2,3,4

※ join（）和toString（）的区别

let a = arr1.join(" ");
let b = arr1.toString();
console.log(a, b); // 1 2 3 4   1,2,3,4

可以在join（）内增加参数来对数组元素进行不同样式的隔离（join（“，”）或join（“|”）等），而toString（）不行，toString（）只能用指定样式“，”来对数组元素进行隔离，但他们的本质都是将数组元素组合成字符串进行输出。

ES6新增了7个方法用于对ES5的补充。

copyWith( ) 会在当前数组内部将指定位置的元素复制到其他位置（会覆盖原有元素），返回当前数组。
第一个参数：从该位置开始替换数据。
第二个参数：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。
第三个参数：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。

let arr = [1, 2, 3, 4, 5];
console.log(arr.copyWithin(0, 2, 4), arr); // [3, 4, 3, 4, 5]  [3, 4, 3, 4, 5]

find() 返回数组中符合测试函数条件的第一个元素，否则返回undefined

let a = arr.find(function (value, index, arr) {
  return value > 2 && index > 3;
});
console.log(a); // 5

findIndex( ) 返回数组中符合测试函数条件的第一个元素索引，否则返回undefined

let a = arr.findIndex(function (value, index, arr) {
  return value > 2 && index > 3;
});
console.log(a); // 4

fill( ) 使用给定值填充一个数组。
第一个参数：填充值。
第二个参数：填充起始位置，可以省略。
第三个参数：填充结束位置，可以省略，实际结束位置是end-1。

arr.fill(100, 1, 3);
console.log(arr); // [1, 100, 100, 4, 5]

entries( ) 返回一个给定对象自身可枚举属性的键值对数组，其排列与使用for…in循环遍历该对象时返回的顺序一致。区别在于for…in 会枚举原型链上的属性。

let obj = { a: 1, b: 2, c: 3 };
console.log(Object.entries(obj)); // [ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ]

keys( ) 返回一个表示给定对象的 所有可枚举属性的 字符串数组

let obj = { a: 1, b: 2, c: 3 };
console.log(Object.keys(obj)); // [ 'a', 'b', 'c' ]

values( ) 返回存储指定对象所有自有可枚举属性值的数组。

let obj = { a: 1, b: 2, c: 3 };
console.log(Object.values(obj)); // [ 1, 2, 3 ]

构造函数方法

Array.from( ) 用于将两类对象转为真正的数组。
1.类似数组的对象
2.可遍历的对象

<body>
    <ul id="list-nums">
      <li>100</li>
      <li>200</li>
      <li>300</li>
    </ul>
    <script>
      let lis = document.querySelectorAll("#list-nums li");
      console.log(lis);
      let items = Array.from(lis, function (item) {
        return item.textContent;
      });
      console.log(items);
    </script>
  </body>