js 数组的方法(2)

101 阅读5分钟
23. Array.toString(),将数组转换成一个字符串,并且返回这个字符串

toString() 方法返回包含所有数组值的字符串,以逗号分隔。

toString() 方法不会改变原始数组。

const data = ["one", "tow", "Apple", "Mango"];
const dataString = data.toString();
console.log(dataString); // one,tow,Apple,Mango
24. Array.toLocaleString(),返回对象的字符串表示,该字符串与执行环境的地区对应;【时间格式推荐处理】

Array使用toLocaleString()数组转化为字符串。

const name = "aaaaaaaa"; 
const number = 567; 
const date = new Date(); 
const dataList = [ name, number, date ]; 
const dataListString = dataList.toLocaleString(); 
console.log(dataListString); // aaaaaaaa,567,2023/8/22 下午5:17:26
25. Array.find(),方法返回匹配的值

find() 方法返回数组中第一个通过测试的元素的值(作为函数提供)。

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

  1. 如果找到函数返回 true 值的数组元素,则 find() 返回该数组元素的值(并且不检查剩余值)
  2. 否则返回 undefined

find() 不对空数组执行该函数,不会改变原始数组。

const data = [3, 10, 18, 20];
const dataList = data.find((item)=>{
    return item >= 16;
})
console.log(dataList); // 18

array.find(function(currentValue, index, arr), thisValue)

参数描述
function(currentValue, index, arr)必需。为数组中的每个元素运行的函数
currentValue: 必需。当前元素的值。
index: 可选。当前元素的数组索引。
arr: 可选。当前元素所属的数组对象
thisValue可选。要传递给函数以用作其 "this" 值的值。如果此参数为空,则值 "undefined" 将作为其 "this" 值传递。
26. Array.findIndex(),返回匹配位置的索引。

array.findIndex(callback(value,index,arr),thisArg)

参数描述
callback表示执行每个元素的函数。
value数组的当前元素。
index可选。当前元素的索引。
arr可选。 findIndex()方法在其上运行的数组。
thisArg是可选的。在执行回调时用作此值。
const data = [5,22,19,25,34];  
const dataList = data.findIndex(item=>item>20);  
console.log(dataList); // 1 满足函数条件的数组的第一个元素的索引。
27. Array.copyWithin(),方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中,该方法会改变现有数组。

copyWithin() 方法将数组的一部分简单地复制到同一数组中的另一个位置,并将其返回,而不修改其大小。

  • copyWithin 就像 C 和 C++ 的 memcpy 函数一样,且它是用来移动Array或者 TypedArray数据的一个高性能的方法。复制以及粘贴序列这两者是为一体的操作;即使复制和粘贴区域重叠,粘贴的序列也会有拷贝来的值。
  • copyWithin函数是设计为通用的,其不要求其this值必须是一个数组对象。
  • The copyWithin 是一个可变方法,它不会改变 this的长度,但是会改变 this本身的内容,且需要时会创建新的属性。
['111', '222', '3333', '4444'].copyWithin(2, 0); // ["111", "222", "111", "222"]
[1, 2, 3, 4, 5].copyWithin(-2); // [1, 2, 3, 1, 2]
[1, 2, 3, 4, 5].copyWithin(0, 3); // [4, 5, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(0, 3, 4); // [4, 2, 3, 4, 5]
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 2, 1, 4); // Int32Array(5) [1, 2, 2, 3, 4]
28. Array.flat(),方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。该方法返回一个新数组,对原数据没有影响。
const data = [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]];  
let dataList = data.flat(); // 默认值为1
// [1, 2, 3, 4, [5, 6], [[7, 8]], [[[9, 10]]]]

dataList = data.flat(2); // [1, 2, 3, 4, 5, 6, [7, 8], [[9, 10]]]
dataList = data.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
dataList = data.flat(-Infinity); // [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]]
dataList = data.flat(0); // [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]]

const data1 = [1, , 3, , 5];  
const data2 = data1.flat(); // [1, 3, 5] 去除空值
29. Array.flatMap()方法对原数组的每个成员执行一个函数,相当于执行Array.prototype.map(),然后对返回值组成的数组执行flat()方法。该方法返回一个新数组,不改变原数组。
const dat = [[2, 4], [6]];
const datList = dat.flatMap(item => item);
console.log(datList); // [2, 4, 6]

const data = [1, 4];
const dataList = data.flatMap(item => { return [item, 2 * item, 3 * item]});
console.log(trippled);// [1, 2, 3, 4, 8, 12]

const datas = [0, 3, 6];
const dataLists = datas.flatMap(item => { return item === 0 ? [] : [2 * item];});
console.log(doubled); // [6, 12]
30. Array.keys(),是对键名的遍历,它们都返回一个遍历器对象,可以用for...of循环进行遍历。
const data = ['a', , 'c'];
const dataKeys = Object.keys(data);
const dataList = [...data.keys()];
console.log(dataKeys); // ['0', '2']
console.log(dataList); // [0, 1, 2] key迭代器不会忽略空洞
31. Array.values(),是对键值的遍历,它们都返回一个遍历器对象,可以用for...of循环进行遍历。
const data = [1, 2, 3, 4, '111', '222']
const dataList = data.values(); // Array Iterator {}
dataList.next().value // 1
dataList.next().value // 2
dataList.next().value // 3
dataList.next().value // 4
dataList.next().value // "111"
dataList.next().value // "222"
dataList.next().value // undefined

for (const key of dataList) {
    console.log(key)
    // 1
    // 2
    // 3
    // 4
    // 111
    // 222
}
32. Array.entries(),是对键值对的遍历,它们都返回一个遍历器对象,可以用for...of循环进行遍历。
const data = [1, 2, 3, 4, '111', '222']
const dataList = data.entries(); 
dataList.next().value // [0, 1]
dataList.next().value // [1, 2]
dataList.next().value // [2, 3]
dataList.next().value // [3, 4]
dataList.next().value // [4, "111"]
dataList.next().value // [5, "222"]

for (const key of dataList) {
    console.log(key)
    // [0, 1]
    // [1, 2]
    // [2, 3]
    // [3, 4]
    // [4, "111"]
    // [5, "222"]
}
33. Array.of(),方法总会创建一个包含所有传入参数的数组,而不管参数的数量与类型。
console.log(Array.of(0, 0, 0)); // [0, 0, 0]
console.log(Array.of(11, 21, 33)); // [11, 21, 33]
console.log(Array.of("Ram", "Geeta")); // ["Ram", "Geeta"]
console.log(Array.of('geeksforgeeks')); // ["geeksforgeeks"]
console.log(Array.of(2, 3, 4, 'Sheeta')); // [2, 3, 4, "Sheeta"]
34. Array.from(),在 js 中将非数组对象转换为真正的数组是非常麻烦的。在 ES6 中,将可迭代对象或者类数组对象作为第一个参数传入,Array.from()就能返回一个数组。
console.log(Array.from('foo')); // ["f", "o", "o"]
console.log(Array.from([1, 2, 3], (x) => x + x)); // [2, 4, 6]
// 生成一个数字序列。因为数组在每个位置都使用 `undefined` 初始化,下面的 `v` 值将是 `undefined`
Array.from({ length: 5 }, (v, i) => i); // [0, 1, 2, 3, 4]
const data = new Map([
  [1, 2],
  [2, 4],
  [4, 8],
]);
Array.from(map); // [[1, 2], [2, 4], [4, 8]]

const dataList = new Map([
  ["1", "a"],
  ["2", "b"],
]);
Array.from(dataList.values()); // ['a', 'b'];

Array.from(dataList.keys()); // ['1', '2'];

js 数组的方法(1)