JS - Array Api

 判断一个对象是否为数组

/*
语法： Array.isArray(object);  参数：object  必需，要测试的对象。返回值
如果 object 是数组，则为 true；否则为 false。 如果 object 参数不是对象，则返回 false。
*/

一、改变原数组

1、push() 和 pop() 数组尾部添加/移除一项，会改变原数组

// push(): 可以接收任意数量的参数，把它们逐个添加到数组末尾，返回值：修改后数组的长度。 
// pop()：数组末尾移除最后一项，减少数组的 length 值，然后返回值：移除的项。 
let arr = ['张三','李四','王五']; 
let count = arr.push('马六'); 
console.log(arr); // -> ['张三','李四','王五','马六'] 
console.log(count); // -> 4 let item = arr.pop(); 
console.log(item) // -> 马六;

2、shift() 和 unshift() 数组头部移除/添加一项，会改变原数组

// shift()：删除原数组第一项，并返回值：删除元素的值；如果数组为空则返回undefined 。
// unshift:将参数添加到原数组开头，并返回值：数组的长度 。 
let arr = ['张三','李四','王五']; 
let item = arr.shift(); 
console.log(arr) // -> ['李四','王五'] 
console.log(item); // -> 张三 let count = arr.unshift('马六'); 
console.log(arr) // -> ['马六','李四','王五'] 
console.log(count) // -> 3

3、reverse() 数组数据反转，会改变原数组

// reverse() 将数组的数据进行反转，并且返回反转后的数组，会改变原数组
let arr = [1,2,3,4,5]; 
let arr1 = arr.reverse(); console.log(arr1) // -> [5,4,3,2,1] 
console.log(arr) // -> [5,4,3,2,1]

4、sort() 对数组内的数据进行排序(默认为升序)，并且返回排过序的新数组，会改变原数组

let arr = [12,2,43,5,2,5]; 
console.log(arr.sort()) // -> [12, 2, 2, 43, 5, 5] 
// 注意：通过上面的案例，你会发现 打印的数组和原数组比较还是有变化的
// [12,2,43,5,2,5] -> [12, 2, 2, 43, 5, 5];
// 但是有没有达到我们想要的结果，这是为什么呢？ 
// 因为排序是针对字符的排序，先使用数组的toString()方法转为字符串
// 再逐位比较，3是大于12的，因为首位3>1，不要与Number型的数据排序混淆。 // 那如果需要数值排序怎么办呢？ 
// 如果需要数值排序，sort(callback) 需要传入一个回调涵数，
// 该函数应该具有两个参数，比较这两个参数，
// 然后返回一个用于说明这两个值的相对顺序的数字（a-b）
// 例如： let arr = [12,2,43,5,2,5]; 
console.log(arr.sort((a,b)=>a-b)) // -> [2, 2, 5, 5, 12, 43]

5、splice() 向数组中添加，或从数组删除，或替换数组中的元素，然后返回被删除/替换的元素。会改变原数组

// 注意：splice(start, num, val1, val2,...);  
// 所有参数全部可选。和 slice 相比 splice 是会改变原数组的。 
// start 是开始位置,可以为负数，-1就代表从最后一位开始
// num代表要删除或者替换的长度，不能为负数。let arr = ['张三','李四','王五','马六']; 
console.log(arr.splice(2,1)) // -> ['王五'] 
console.log(arr) // -> ['张三','李四','马六'] let arr = ['张三','李四','王五','马六']; 
console.log(arr.splice(2,1,'七郎')) // -> ['王五'] 
console.log(arr) // -> ['张三', '李四', '七郎', '马六']

6、forEach() 用来遍历数组，没有返回值，使用第三个参数会改变原数组

// 注意：forEach(callback);callback默认有三个参数，
// 分别为value(遍历到的数组的数据)，index(对应的索引)，self(数组自身)。 let arr = ['张三','李四','王五','马六'] 
let a = arr.forEach((item,index,self)=>{ self[index] = `${item}+1`;console.log(item + "--" + index + "--" + (arr === self)); 
}) 
// 打印结果为： 
// 张三--0--true 
// 李四--1--true 
// 王五--2--true 
// 马六--3--true 
console.log(a); // -> undefined---forEach没有返回值 //该方法为遍历方法，不会修改原数组(默认)
console.log(arr); // ['张三+1', '李四+1', '王五+1', '马六+1']

7、fill() 数组填充

能使用特定值填充数组中的一个或多个元素。当只是用一个参数时，该方法会用该参数的值填充整个数组

/*
fill()方法可用于空数组的初始化，接受一个参数时，表示数组填充的值
当其接受三个参数时，表示对数据的某些数据项进行替换。
第一个参数表示替换的元素，
第二个参数是起始位置（其参数表示数组中的下标），
第三个参数是结束位置（注意：其参数表示结束位置，但不包括此位置）
*/let arr = [1, 2, 3,  cc , 5];
arr.fill(1);
console.log(arr); 
// [1,1,1,1,1]

二、不改变原数组

1、join() 数组转字符串(指定间格)

/** join('参数') * 把数组的元素，以传入的参数进行分割，转换成字符串*/ 
let arr = ['我', '爱', '你']; 
let str = arr.join(','); 
console.log(str) // '我，爱，你'
console.log(arr) // ['我', '爱', '你']

2、toString() 将数组转换成字符串，类似于没有参数的join()。该方法会在数据发生隐式类型转换时被自动调用，如果手动调用，就是直接转为字符串。不会改变原数组 

let arr = [1,2,3,4,5,6]; 
console.log(arr.toString()) // -> '1,2,3,4,5,6' // 注意：没有参数。

3、slice() 截取制定位置的数组，并返回截取的数组，不会改变原数组

// 注意：slice（startIndex, endIndex）可以有两个参数，
// startIndex为必选，表示从第几位开始；
// endIndex为可选，表示到第几位结束(不包含endIndex位)，省略表示到最后一位；
// startIndex和endIndex都可以为负数，负数时表示从最后一位开始算起，如-1表示最后一位。 let arr = ['张三','李四','王五','马六']; 
console.log(arr.slice(1,3)); // -> ['李四', '王五'] 
console.log(arr) // -> ['张三','李四','王五','马六']; 原数组是没有改变的。

4、indexOf() 根据指定的数据，从左向右，查询在数组中出现的位置，如果不存在指定的数据，返回-1，找到了指定的数据返回该数据的索引

// 注意：indexOf(value, start); 
// value为要查询的数据；
// start为可选，表示开始查询的位置，当start为负数时，从数组的尾部向前数；
// 如果查询不到value的存在，则方法返回-1 let arr = ['张三','李四','王五','马六']; 
console.log(arr.indexOf('李四')) // -> 1 
console.log(arr.indexOf('李四',2)) // -> -1

5、findIndex() 数组的循环，查找到符合条件的索引并且打断循环返回找到的索引值

let arr = ['张三','李四','王五','马六']; 
let index = arr.findIndex(item => item == '李四'); 
console.log(index); // -> 1;

6、find() 数组的循环，查找符合条件的值，并打断循环返回找到的值

let arr = ['张三','李四','王五','马六']; 
let str = arr.find(item => item == '李四'); 
console.log(str); // -> '李四'

7、includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false

/*arr.includes(searchElement, fromIndex)searchElement: 必须。需要查找的元素值。fromIndex: 可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。
*/
[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

8、map() 映射数组，map的回调函数会将执行结果返回，最后map将所有回调函数的返回值组成新数组返回，同forEach功能

//注意：map(callback);callback默认有三个参数，
// 分别为value，index，self。
// 跟上面的forEach()的参数一样 
let arr = ['张三','李四','王五','马六']; 
let arr1 = arr.map(item => { return '你好：'+item 
}) 
console.log(arr1) // -> ['你好：张三', '你好：李四', '你好：王五', '你好：马六']

9、filter() 过滤

(1) 同forEach功能；

(2) filter的回调函数需要返回布尔值，当为true时，将本次数组的数据返回给filter，最后filter将所有回调函数的返回值组成新数组返回（此功能可理解为“过滤”）。

// 注意：filter(callback);callback默认有三个参数，分别为value，index，self。 
let arr = [1,2,3,4,5,6]; 
let arr1 = arr.filter((item,index,self)=>{ console.log(item) // -> 1,2,3,4,5,6 console.log(index) // -> 0,1,2,3,4,5 console.log(self) // -> [1,2,3,4,5,6] return item > 3 
}) console.log(arr1) // -> [4,5,6]

10、every() 判断数组中每一项是否都满足条件，只有所有项都满足条件，才会返回true

// 注意： every()接收一个回调函数作为参数，这个回调函数需要有返回值，
// every(callback);callback默认有三个参数，分别为value，index，self。 
let arr = [1,2,3,4,5,6]; 
let bool = arr.every(item => item > 0); 
console.log(bool); // -> true; let bool = arr.every(item => item > 3); 
console.log(bool); // -> false;

11、some() 判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。否侧就会返回false

// 注意： some()接收一个回调函数作为参数，这个回调函数需要有返回值，
// some(callback);callback默认有三个参数，分别为value，index，self。 let arr = [1,2,3,4,5,6]; 
let bool = arr.some(item => item > 3); 
console.log(bool) // -> true; let bool = arr.some(item => item > 6); 
console.log(bool) // -> false;

12、reduce() 数组的第一项开始，逐个遍历到最后，迭代数组的所有项，然后构建一个最终返回的值。

// 注意：　参数：reduce()接收一个或两个参数：
// 第一个是回调函数，表示在数组的每一项上调用的函数；
// 第二个参数（可选的）作为归并的初始值，被回调函数第一次执行时的第一个参数接收。
// reduce(callback,initial);
// callback默认有四个参数，分别为prev，now，index，self。
// callback返回的任何值都会作为下一次执行的第一个参数。 
// 如果initial参数被省略，那么第一次迭代发生在数组的第二项上，
// 因此callback的第一个参数是数组的第一项，第二个参数就是数组的第二项。 let arr = [10,20,30,40,50]; 
let sum = arr.reduce((prev,now) => prev+now) 
console.log(sum); // -> 150; let sum = arr.reduce((prev,now) => prev+now,110) 
console.log(sum) // 260

13、concat() 用于连接两个或多个数组， 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本

var arr = [1,3,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy);   //[1, 3, 5, 7, 9, 11, 13]
console.log(arr);   // [1, 3, 5, 7](原数组未被修改)

14、flat() 数组扁平化

按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回

/*
不传参数时，默认“拉平”一层，可以传入一个整数，表示想要“拉平”的层数。
传入 <=0 的整数将返回原数组，不“拉平”
Infinity 关键字作为参数时，无论多少层嵌套，都会转为一维数组
如果原数组有空位，Array.prototype.flat() 会跳过空位
*/let arr = [1,2,[3,[4,[5]]]]
const reasut = arr.flat()
console.log(reasut)
// [1, 2, 3, [4,[5]]]

15、flatMap() 数组映射扁平化

‌array.flatMap‌是一个在ES2019中引入的JavaScript方法，它结合了array.map和array.flat的功能。具体来说，array.flatMap首先对数组中的每个元素执行指定的映射函数，然后将结果数组中的所有子数组“展平”（flatten）成一个新数组。

array.flatMap(callbackFn, thisArg)

• callbackFn：一个函数，用于生成新数组的元素。它接受三个参数：当前元素的值（currentValue）、当前元素的索引（index）、原数组（array）。
• thisArg（可选）：执行callbackFn时的this值。

返回值

array.flatMap返回一个新数组，包含映射和展平操作的结果。这意味着每个元素在映射后，如果映射结果是一个数组，这些子数组会被展平成一个新的数组。

const numbers = [0, 3, 6];
const doubled = numbers.flatMap(n => n !== 0 ? [n * 2] : []);
console.log(doubled); // 输出: [6, 12]