【JavaScript】数组 Array 总结(202404)

🥰 数组 Array (202404)

数组 🔗

❤️‍🔥 数组是一种有序的多个变量值的集合，可以通过索引来获取元素。

❤️‍🔥 数组是一种特殊的对象类型。

1、创建数组

字面量

// a. 有元素
let arr = ['a', 'b', 'c'];
console.log(arr);
// b. 空数组
let arr1 = [];
console.log(arr1);
// c. 创建初始长度为10的数组
let arr2 = [];
arr2.length = 10;
console.log(arr2);
// 元素为空，访问为 undefined
console.log(arr2[1]); // undefined

构造函数 🔗 Array

Array() 构造函数用于创建 Array 对象。

// 语法
// elementN ： 用于创建数组的元素。

new Array();
new Array(element0);
new Array(element0, element1);
new Array(element0, element1, /* … ,*/ elementN);
new Array(arrayLength);

Array();
Array(element0);
Array(element0, element1);
Array(element0, element1, /* … ,*/ elementN);
Array(arrayLength);

🔹 调用 Array() 时可以使用或不使用 new。两者都会创建一个新的 Array 实例。

let arr3 = new Array('a', 'b', 'c');
console.log(arr3);
let arr4 = Array('a', 'b', 'c');
console.log(arr4);
let arr5 = new Array(10);
console.log(arr5);
console.log(arr5[1]); // undefined

❤️‍🔥 推荐字面量的方式创建数组

创建多维数组

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

Array.of 🔗

Array.of() 静态方法通过可变数量的参数创建一个新的 Array 实例，而不考虑参数的数量或类型。

// 语法
// elementN ： 用于创建数组的元素。
Array.of();
Array.of(element0);
Array.of(element0, element1);
Array.of(element0, element1, /*… ,*/ elementN);

let arr = Array.of();
console.log(arr); // []

arr[10] = 'a';
console.log(arr); // (11) [empty × 10, 'a']

console.log(arr[1]); // undefined

let arr1 = Array.of('a', 'b', 'c');
console.log('arr1:', arr1); // (3) ['a', 'b', 'c']
arr1[10] = '10';
console.log(arr1); //(11) ['a', 'b', 'c', empty × 7, '10']

🆙 Array.of vs Array()
设置一个参数时不会创建空元素数组

let arr = Array.of(10);
console.log(arr); // [10]
console.log(arr.length); // 1
console.log(arr[0]); // 10

let arr1 = new Array(10);
console.log(arr1); // (10) [empty × 10]
console.log(arr1.length); // 10
console.log(arr1[0]); // undefined

类型检测 Array.isArray() 🔗

检测当前变量的数据类型是否为数组。
Array.isArray() 静态方法用于确定传递的值是否是一个数组。

// value:需要检测的值。
// 返回值：如果 value 是 Array，则为 true；否则为 false。
Array.isArray(value);

console.log(Array.isArray([])); // true
console.log(Array.isArray(new Array())); //true
console.log(Array.isArray(Array())); //true

console.log(Array.isArray(new Array(3))); // true
console.log(Array.isArray(new Array(3, 4))); // true

console.log(Array.isArray(Array.of(3))); //true

console.log(Array.isArray({
   })); // false
console.log(Array.isArray(1)); // false
console.log(Array.isArray(1, 2)); // false
console.log(Array.isArray(1, [1, 2])); // false
console.log(Array.isArray('a')); //false

2、类型转换

可以将数组转换为字符串也可以将其他类型转换为数组。

字符串

toString() 🔗

toString() 方法返回一个字符串，表示指定的数组及其元素。

// 1.1 toString()
console.log(['a', 'b', 'c'].toString()); // a,b,c
console.log([1, 2, 3].toString()); // 1,2,3
console.log([1, , , 3].toString()); // 1,,,3
console.log([undefined, null].toString()); // ,

let obj1 = {
   
  name: 'obj1',
};
let obj2 = {
   
  name: 'obj2',
};
console.log([obj1, obj2].toString()); //[object Object],[object Object]

🔗 String()

console.log(String(['a', 'b', 'c'])); // a,b,c
console.log(String([1, 2, 3])); //  1,2,3
console.log(String([1, , , 3])); //  1,,,3
console.log(String([undefined, null])); // ,
console.log(String([obj1, obj2])); // [object Object],[object Object]

🔗 Array.prototype.join()

join();

join(separator);
// 指定一个字符串来分隔数组的每个元素。
//   如果需要，将分隔符转换为字符串。
//   如果省略，数组元素用逗号（,）分隔。
//   如果 separator 是空字符串（""），则所有元素之间都没有任何字符。

console.log(['a', 'b', 'c'].join()); // a,b,c
console.log(['a', 'b', 'c'].join('-')); //a-b-c'
console.log([1, 2, 3].join()); // 1,2,3
console.log([1, 2, 3].join('')); // 123
console.log([1, , , 3, , ,].join('.')); // 1...3..
console.log([undefined, null].join()); // ,
console.log([obj1, obj2].join('-')); //[object Object]-[object Object]

🔗 Array.from()

Array.from() 静态方法从🔗 可迭代或🔗 类数组对象创建一个新的浅拷贝的数组实例。

Array.from(arrayLike);
Array.from(arrayLike, mapFn);
Array.from(arrayLike, mapFn, thisArg);

arrayLike : 想要转换成数组的类数组或可迭代对象。
- JavaScript 中的“类(似)数组对象”是指一个有 length 属性，具体说是大于等于 0 的整数值的对象。
- 如果你把类数组对象作为第一个参数传给 Array.from(…)，它的行为方式和 slice() (没有参数)或者 apply(…) 是一样的，就是简单地按照数字命名的属性从 0 开始直到 length 值在这些值上循环。
- 第一个参数是否为 iterable ，如果是的话，就使用迭代器来产生值并“复制”进入返回的数组。因为真正的数组有一个这些值之上的迭代器，所以会自动使用这个迭代器。
mapFn : 【可选】第二个参数是一个映射回调(和一般的 Array#map(…) 所期望的几乎一样)，这个函数会被调用，来把来自于源的每个值映射/转换到返回值。
thisArg : 这个参数为作为第二个参数传入的回调指定 this 绑定。否则，this 将会是 undefined。

console.log('Array.from()');
let str = 'hello world';
console.log(Array.from(str)); 
//(11) ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']
let num = 10;
console.log(Array.from(num)); // []

❇️ 将类数组转换为数组

// 类数组对象 转为 数组
let likeArr = {
   
  length: 3,
};
console.log(Array.from(likeArr)); // (3) [undefined, undefined, undefined]
console.log(new Array(3)); // (3) [empty × 3]

let likeArr1 = {
   
  0: 'a',
  1: 'b',
  length: 2,
};
console.log(Array.from(likeArr1)); //(2) ['a', 'b']

为对象设置 length 属性后也可以转换为数组，但要下标为数值或数值字符串

let obj = {
   
  0: 'zhangsan',
  1: 19,
  2: 1.88,
  length: 3,
};

console.log(obj);
console.log(Array.from(obj)); //(3) ['zhangsan', 19, 1.88]

DOM 元素转换为数组后来使用数组函数，第二个参数类似于 map 函数的方法，可对数组元素执行函数处理

<button message="a">button</button> <button message="b">button</button>

const btns = document.querySelectorAll('button');
console.log(btns); // NodeList(2) [button, button] 有length属性
console.log(Array.isArray(btns)); //false

// btns.map((item)=>item.style.color = 'yellow') // btns.map is not a function

Array.from(btns, (item, index) => {
   
  item.style.background = 'red';
  item.style.color = 'yellow';
});

Array.from(btns).map((item) => (item.style.margin = '40px'));

展开语法:使用展开语法将 NodeList 转换为数组操作

.hidden {
   
  display: none;
}

<!-- 展开语法 -->
<div>aaa</div>
<div>bbb</div>

const divs = document.querySelectorAll('div');
console.log(divs); //NodeList(2) [div, div]
[...divs].map((item) => {
   
  item.style.backgroundColor = '#ccc';
  item.style.margin = '40px';
  item.style.height = '40px';
  item.style.width = '200px';
  item.style.lineHeight = '40px';
  item.style.textAlign = 'center';

  console.log(this);

  item.addEventListener('click', function () {
   
    console.log(this);
    this.classList.toggle('hidden');
  });
});

3、展开语法 🔗 Spread syntax

数组合并

const arr1 = ['a', 'b', 'c'];
const arr2 = [1, 2, 3];

console.log([...arr1, ...arr2]); //(6) ['a', 'b', 'c', 1, 2, 3]

const obj = {
   
  name: 'info',
};
console.log([...arr1, obj]); //(4) ['a', 'b', 'c', {name:"info"}]

// 复制数组 浅拷贝
const arr3 = ['c', 'o', 'p', 'y', {
    name: 'copy' }];
const copyArr3 = [...arr3];
console.log(copyArr3); //(4) ['c', 'o', 'p', 'y',{name: 'copy'}]

console.log(arr3 === copyArr3); //false

console.log(arr3[4] === copyArr3[4]); //true

函数参数

等价于 apply 的方式
使用展示语法可以替代 arguments 🔗来接收任意数量的参数
剩余参数🔗Rest parameters

function fn(...args) {
   
  console.log(args); // (6) [1, 2, 3, 4, 'a', 'b']
  console.log(Array.isArray(args)); // true
}
fn(1, 2, 3, 4, 'a', 'b');

function bar(a, ...args) {
   
  console.log(a, args); // hello (4) [1, 2, 3, 4]
}
bar('hello', 1, 2, 3, 4);

节点转换

将 DOM 节点转为数组 NodeList 🔗

<button>aaa</button> <button>bbb</button>

const btns = document.querySelectorAll('button');
console.log(btns); // NodeList(2) [button, button]
// btns.filter((item)=>item.innerHtml = '按钮') // btns.filter is not a function

console.log([...btns]); //(2) [button, button]

[...btns].filter((item, index) => (item.innerHTML = `按钮${
     index}`));

4、解构赋值

Destructuring assignment 🔗
解构赋值语法是一种 Javascript 表达式。
可以将数组中的值或对象的属性取出，赋值给其他变量。

// 数组
const [name, age] = ['张三', 18];
console.log(name, age); //张三 18

let [[p1], [p2, p3]] = [['a'], ['b', 3]];
console.log(p1, p2, p3); // a b 3

let [obj] = [
  {
   
    name: 'obj',
  },
];
console.log(obj); // {name: 'obj'}
// 解构赋值数组
function getData() {
   
  return ['李四', 19];
}
const [name1, age1] = getData();
console.log(name1, age1);

// 剩余解构
let [num1, ...nums] = [1, 2, 3, 4, 5];
console.log(num1, nums); // 1 (4)[2, 3, 4, 5]

// 只赋值部分变量
let [num2, , ...num3] = [1, 2, 3, 4, 5];
// 索引为1的数组元素将被跳过
console.log(num2, num3); // 1 (3) [3, 4, 5]

// 字符串解构
let [...str] = 'hello world';
console.log(str); // (11) ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']

// 默认值
let [a = 'name', b] = ['王五'];
console.log(a); //王五

// 函数参数
function foo([a, b]) {
   
  console.log(a, b);
}
foo(['hello', 'world']); // hello world

const result = [
  [1, 2],
  [3, 4],
].map(([a, b]) => a + b);
console.log(result); //[3,7]

5、💠 管理元素

基本使用

通过索引改变数组

// 1.通过索引添加元素
let arr = [];
arr[1] = '1';
console.log(arr); // (2) [empty, '1']

arr[4] = '4';
console.log(arr); // (5) [empty, '1', empty × 2, '4']

// 2.通过索引改变元素
console.log('更改前：', arr[0]); // 更改前： undefined
arr[0] = '0';
console.log('更改后：', arr[0]); // 更改后： 0

通过 length 改变

// 2. 通过length
let arr = [];
console.log(arr.length); // 0
// 2.1. 通过 length的值 创建数组
arr.length = 5;
console.log(arr); // (5) [empty × 5]
console.log(arr[0]); // undefined

// 2.2 通过length 向数组最后追加一个元素 5
arr[arr.length] = '5';
console.log(arr); // (6) [empty × 5, '5']
console.log(arr.length); // 6

扩展语法 - 展开语法批量添加元素

// 3. 通过扩展语法 形成新数组

let arr1 = ['0', '1'];
let arr2 = ['2', '3'];

// 给数组首位添加元素 形成新数组
let arr3 = ['a', ...arr1];
console.log(arr3); // (3) ['a', '0', '1']

// 给数组末尾添加元素
let arr4 = [...arr2, 'd'];
console.log(arr4); //  ['2', '3', 'd']

// 合并数组
let arr = [...arr1, ...arr2];
console.log(arr); //(4) ['0', '1', '2', '3']

// arr1 除了 arr1[0] 元素，其余元素与 arr2 合并
let [, x1] = arr1;
let arrEx = [x1, ...arr2];
console.log('arrEx', arrEx);

Array.prototype.push()🔗

push() 方法将指定的元素添加到数组的末尾，并返回新的数组长度。

🔸 语法

push();
// elementN : 添加到数组末尾的元素。
push(element0);
push(element0, element1);
push(element0, element1, /*… ,*/ elementN);

// 原数组
const animals = ['pigs', 'goats', 'sheep'];

// 1.push 改变原数组 返回值为数组长度
let count <