【14.0】JavaScript之数组

【一】什么是数组

• 数组是一组有序的数据集合，数组内部可以存放多个数据，不限制数据类型，数组的长度可以动态调整

• 数组类似于Python当中的列表

【二】创建数组

• 创建数据的最简单方式是通过字面量

var arr = []

• 也可以通过数组对象去创建

var arr = new Array()

• 存放多个数据，每个数据之间用，分隔

【三】数组获取元素

• 可以通过索引获取数组内元素，索引从0开始

var arr = [1,2,3] 

arr[2] 
// 3

• 如果索引超过最大值 得到的结果是 undefined

【四】数组的长度

• 数组的length的属性表示数字的长度

var arr = [1,2,3] 

arr.length
// 3

• 数组的长度等于最大索引值+1
• 可以通过修改数组的length可以改变数组的长度，拉长了数组获取后续项的值是undefined
• 如果缩短数组的长度，后续的项数会被删除，且不可逆

【五】数组常用的方法

方法名称	功能描述	返回值类型	是否改变原数组
forEach/for...of	遍历数组(forEach处理每个元素，for...of可读取元素并自动解包)	无	不会
concat	合并数组	新数组	不会
join	将数组转化为字符串	字符串	不会
pop	删除数组最后一个元素	删除的数据(即数组最后一个元素)	会
shift	删除数组第一个元素	删除的数据(即数组第一个元素)	会
unshift	在数组开头插入元素	新数组长度	会
push	在数组末尾添加元素	新数组长度	会
reverse	翻转数组顺序	翻转后的数组	会
sort	对数组元素排序	排序后的数组	会
slice	截取数组部分元素	新数组	不会
splice	插入、删除或替换数组元素	被删除或替换的元素	会
toString	数组转为字符串	字符串	不会
valueOf	获取数组原始值	原始值	不会
indexOf	查找指定元素在数组中的位置	元素索引(若不存在则返回 -1)	不会
lastIndexOf	查找指定元素在数组中最后一次出现的位置	元素索引	不会
map	应用函数映射数组元素	新数组	不会
filter	根据条件筛选数组元素	新数组	不会
every	判断数组所有元素是否都满足条件	布尔值	不会
some	判断数组是否有元素满足条件	布尔值	不会
reduce	按规则累积数组元素生成单个返回值	单一返回值	可以，但通常不会直接改变原数组
rightReduce	类似于reduce，但从数组末尾开始累积	单一返回值	可以，但通常不会直接改变原数组

【1】forEach 和 for...of

• 遍历数组(forEach处理每个元素，for...of可读取元素并自动解包)

let arr = [1, 2, 3, 4, 5];

// forEach 示例
arr.forEach((item, index) => {
  console.log(`Element at index ${index}: ${item}`);
});

arr.forEach(function (item,index)  {
  console.log(`Element at index ${index}: ${item}`);
});

// for...of 示例
for (const item of arr) {
  console.log(item);
}

【2】concat

• 合并数组

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = arr1.concat(arr2); // [1, 2, 3, 4, 5, 6]
console.log(arr1); // [1, 2, 3]  - 原数组未变

【3】join

• 将数组转化为字符串

let arr = ['apple', 'banana', 'cherry'];
let str = arr.join(', '); // "apple, banana, cherry"
console.log(str);

【4】pop 和 shift

• pop删除数组最后一个元素

• shift删除数组第一个元素

let arr = ['a', 'b', 'c'];

// pop 示例
let poppedItem = arr.pop(); // "c"
console.log(poppedItem); // "c"
console.log(arr); // ["a", "b"]  - 原数组已变

// shift 示例
let shiftedItem = arr.shift(); // "a"
console.log(shiftedItem); // "a"
console.log(arr); // ["b"]    - 原数组已变

【5】unshift

• 在数组开头插入元素

let arr = ['b', 'c'];
arr.unshift('a'); // 在数组开头插入元素
console.log(arr); // ["a", "b", "c"]

【6】push

• 在数组末尾添加元素

let arr = ['a', 'b'];
arr.push('c', 'd'); // 在数组末尾添加元素
console.log(arr); // ["a", "b", "c", "d"]

【7】reverse

• 翻转数组顺序

let arr = ['a', 'b', 'c'];
arr.reverse(); // 翻转数组顺序
console.log(arr); // ["c", "b", "a"]

【8】sort

• 对数组元素排序

let arr = [3, 1, 4, 1, 5, 9];
arr.sort((a, b) => a - b); // 自定义排序规则，升序排列
console.log(arr); // [1, 1, 3, 4, 5, 9]

【9】slice

• 截取数组部分元素

let arr = ['a', 'b', 'c', 'd', 'e'];
let slicedArr = arr.slice(1, 4); // 截取下标从1到3的子数组
console.log(slicedArr); // ["b", "c", "d"]
console.log(arr); // ["a", "b", "c", "d", "e"]  - 原数组未变

【10】splice

• 插入、删除或替换数组元素

let arr = ['a', 'b', 'c', 'd', 'e'];
let removedItems = arr.splice(2, 2, 'x', 'y'); // 从下标2开始，删除2个元素，并在此位置插入'x'和'y'
console.log(removedItems); // ["c", "d"]
console.log(arr); // ["a", "b", "x", "y", "e"]  - 原数组已变

【11】toString

• 数组转为字符串

let arr = [1, 2, 3];
let str = arr.toString(); // "1,2,3"
console.log(str);

【12】valueOf

• 获取数组原始值

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

【13】indexOf

• 查找指定元素在数组中的位置

let arr = ['a', 'b', 'c', 'd', 'a'];
let index = arr.indexOf('a'); // 0
console.log(index);

【14】lastIndexOf

• 查找指定元素在数组中最后一次出现的位置

let arr = ['a', 'b', 'c', 'a', 'b'];
let lastIndex = arr.lastIndexOf('a'); // 4
console.log(lastIndex);

【15】map

• 应用函数映射数组元素

let arr = [1, 2, 3, 4, 5];
let squaredArr = arr.map(num => num * num); // [1, 4, 9, 16, 25]
console.log(squaredArr);

【16】filter

• 根据条件筛选数组元素

let arr = [1, 2, 3, 4, 5];
let evenNumbers = arr.filter(num => num % 2 === 0); // [2, 4]
console.log(evenNumbers);

【17】every

• 判断数组所有元素是否都满足条件

let arr = [true, true, false];
let allTrue = arr.every(val => val); // false
console.log(allTrue);

【18】some

• 判断数组是否有元素满足条件

let arr = [false, false, true];
let containsTrue = arr.some(val => val); // true
console.log(containsTrue);

【19】reduce

• 按规则累积数组元素生成单个返回值

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((total, num) => total + num, 0); // 15
console.log(sum);

【20】rightReduce

• 类似于reduce，但从数组末尾开始累积
• 此方法不是ES6标准提供的，但可以通过扩展运算符实现类似效果

let arr = [1, 2, 3, 4, 5];
let reversedSum = arr.reduceRight((total, num) => total + num, 0); // 15 (等于sum，因为是从后向前累加)
console.log(reversedSum);

【21】统计数组长度

var arr= [11,22,33,44,55,66];
// undefined

arr
// (6) [11, 22, 33, 44, 55, 66]

// (1)统计数组的个数
arr.length
// 6

【六】forEach方法

【1】一个参数

• 数组中的每一个元素

// 类似于Python中的map函数
var ll = [11,22,33,44,55,66,77];
undefined

// 参数(一个函数，一个迭代列表)
ll.forEach(function (value) {
    console.log(value)
},ll)

/*
VM2817:2 11
VM2817:2 22
VM2817:2 33
VM2817:2 44
VM2817:2 55
VM2817:2 66
VM2817:2 77
undefined
*/

【2】两个参数

• 数组中的每一个元素 + 数据的索引

// 类似于Python中的map函数
var ll = [11,22,33,44,55,66,77];
// undefined

// 参数(一个函数，一个迭代列表,元素所在的索引值)
ll.forEach(function (value,index) {
    console.log(value,index)
},ll)

/*
VM2856:2 11 0
VM2856:2 22 1
VM2856:2 33 2
VM2856:2 44 3
VM2856:2 55 4
VM2856:2 66 5
VM2856:2 77 6
undefined
*/

【3】三个参数

• 数组中的每一个元素 + 数据的索引 + 数据的来源

// 类似于Python中的map函数
var ll = [11,22,33,44,55,66,77];
undefined

// 参数(一个函数，一个迭代列表,元素所在的索引值,数据的来源)
ll.forEach(function (value,index,arr) {
    console.log(value,index,arr)
},ll)

/*
VM2884:2 11 0 (7) [11, 22, 33, 44, 55, 66, 77]
VM2884:2 22 1 (7) [11, 22, 33, 44, 55, 66, 77]
VM2884:2 33 2 (7) [11, 22, 33, 44, 55, 66, 77]
VM2884:2 44 3 (7) [11, 22, 33, 44, 55, 66, 77]
VM2884:2 55 4 (7) [11, 22, 33, 44, 55, 66, 77]
VM2884:2 66 5 (7) [11, 22, 33, 44, 55, 66, 77]
VM2884:2 77 6 (7) [11, 22, 33, 44, 55, 66, 77]
undefined*/

【七】splice

【1】两个参数

• 起始位置 + 删除的个数

ll
// (7) [11, 22, 33, 44, 55, 66, 77]

// 从索引为0的位置向后删除三个元素
ll.splice(0,3);
// (3) [11, 22, 33]
ll
// (4) [44, 55, 66, 77]

【2】三个参数

• 先删除后添加

// 先将指定索引的元素删除，再在原来的位置添加后面的元素
ll
// (4) [44, 55, 66, 77]
ll.splice(0,1,888);
// [44]
ll
// (4) [888, 55, 66, 77]

【八】map

• 类似于forEach
  • 也可以加三个参数

var l1 = [11,22,33,44,55,66,77,88]
// undefined
l1
// (8) [11, 22, 33, 44, 55, 66, 77, 88]

l1.map(function(value){console.log(value)},l1)

/*
VM3225:1 11
VM3225:1 22
VM3225:1 33
VM3225:1 44
VM3225:1 55
VM3225:1 66
VM3225:1 77
VM3225:1 88
*/

l1.map(function(value,index){return value*2},l1)
// (8) [22, 44, 66, 88, 110, 132, 154, 176]

【补】Python中常用方法

【1】添加元素的方式

• append
  • 尾部追加
• extend
  • 扩展列表
  • 内部是 for循环 + append
• insert
  • 指定位置插入元素

【2】删除元素的方式

• pop
  • 弹出元素(默认是最后一个元素)
• remove
  • 移除元素
• del
  • 删除元素通用方法

【3】常用的方法

• map
  • 映射函数
• zip
  • 拉链方法
  • 将两个列表中的元素两两拼接成元祖返回
• filter
  • 过滤函数
  • 符合条件为真的元素被留下
• reduce
  • 多个进一个出