Js Array的相关总结

Array的相关总结

一、创建数组

1. 初始化方法

方法	举例
new	let arr = new Array(2); // [undefined,undefined]
[ ]（数组字面量）	let arr = [1,2,3,4];
Array.from()	let arr = Array.from([1,2,3,4]);
Array.fromAsync()	由一个异步可迭代对象、可迭代对象或类数组对象创建一个新的、浅拷贝的 Array 实例。
Array.of()	let arr = Array.of(1,2,3,4);

const asyncIterable = (async function* () {
  for (let i = 0; i < 5; i++) {
    await new Promise((resolve) => setTimeout(resolve, 10 * i));
    yield i;
  }
})();

Array.fromAsync(asyncIterable).then((array) => console.log(array));
// [0, 1, 2, 3, 4]

2. 数组空位
   数组字面量初始时，可以用逗号创建空位

let b = [,,,];
console.log(b.length);//3
console.log(b[0]);//undefined

3. 数组索引
   修改length属性，可以添加或者删除数组

let  a = [1,2,3];

a.length = 2;
console.log(a[2]);// undefined

a[2] = 4;
console.log(a);// [1, 2, 4]

a[99] = 10;
console.log(a.length);// 100

4. 检测数组
   两个方法
   instanceof
   Array.isArray()

let value = [1,2,3];
if(value instanceof Array){

}
if(Array.isArray(value)){

}

5. at函数： 支持负数索引

const array1 = [5, 12, 8, 130, 44];

let index = 2;

console.log(`An index of ${index} returns ${array1.at(index)}`);
// Expected output: "An index of 2 returns 8"

index = -2;

console.log(`An index of ${index} returns ${array1.at(index)}`);

//array1[-1] 不可以

二、方法

1. 迭代器方法

方法	说明
Array.keys()	数组索引的迭代器
Array.values()	数组元素的迭代器
Array.entries()	数组索引/值对的迭代器

let arr=[1,2,3];
for(let [key,value] of arr.entries()){
	console.log(key,value);
}

2. 赋值和填充方法（修改原数组）

方法	参数
Array.fill()	fill(value:number, start?:number, end?:number)
Array.copyWithin()	copyWithin (target:number, start?:number, end?:number)

const zeroes = [0,0,0,0,0];
zeroes.fill(5,2); //[0, 0, 5, 5, 5]

const ints = [1,2,3,4,5,6,7];
ints.copyWithin(5,1); //[1,2,3,4,5,2,3]

3. 转换方法（不修改原数组）

方法	说明
Array.toString()	转化为字符串，用逗号分隔
Array.toLocaleString()	调用它们自己的 toLocaleString 方法转换为字符串
Array.join()	join(separator：string = ',')

4. 栈或队列方法（修改原数组）

方法	说明
Array().push()	从最后插入
Array().pop()	从最后移除
Array().shift()	从开始插入
Array().unshift()	从开始移除

5. 排序方法

方法	是否返回新数组
Array.sort()	否
Array.toSorted()	是
Array.reverse()	否
Array.toReversed()	是

let arr = [ 1,2,5,10,8 ];
// 默认会转为字符串之后，比较
arr.sort(); // [1, 10, 2, 5, 8]
arr.sort((a,b)=>a-b); // [1, 2, 5, 8, 10]
let arr2 = [ 1,2,5,10,8 ];
let arr3 = arr.toSorted((a,b)=>a-b);
console.log(arr2); //[1, 2, 5, 10, 8]
console.log(arr3);// [1, 2, 5, 8, 10]

6. 操作方法

方法	说明
Array.concat()	拼接多个数组
Array.slice()	slice(start?:number, end?:number) 两个索引值
Array.splice()	splice(start:number, deleteCount?:number, item1?:any, item2?:any, itemN?:any) 可以删除、插入和替换，返回值为删除的元素数组。start是指开始的索引值（包含）。
Array.toSpliced()	返回一个新数组

7. 搜索和位置方法

• 按照严格相等搜索

方法	说明
Array.indexOf()	从前往后找，第一个相等元素的索引值
Array.lastIndexOf()	从后往前找，第一个相等元素的索引值
Array.includes()	判断一个数组是否包含一个指定的值, 返回boolean值

• 按照断言函数搜索

方法	说明
Array.find()	返回值
Array.findIndex()	返回索引
Array.findLast()	返回值
Array.findLastIndex()	返回索引

const words = ['spray', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter((word) => word.length > 6);

console.log(result);

8.迭代方法

方法	说明
Array.filter()	返回满足条件的数组
Array.every()	所有元素是否都能通过指定函数的测试，返回boolean值
Array.some()	某些元素是否都能通过指定函数的测试，返回boolean值
Array.forEach()	没有返回值
Array.map()	返回一个新数组，每一项进行传入函数的操作
Array.reduce()

9. 归并方法

方法	说明
Array.reduce()	reduce(callbackFn(accumulator,currentValue，currentIndex，array), initialValue)
Array.reduceRight()	按从右到左的顺序

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue,
);

console.log(sumWithInitial);
// Expected output: 10

9. 其他方法

方法	说明
Array. with()	array.with(index, value) 返回一个新数组，其指定索引处的值会被新值替换。
Array. flat()	const arr1 = [0, 1, 2, [3, 4]];console.log(arr2.flat(Infinity));
Array. flatMap()	等价于在调用 map() 方法后再调用深度为 1 的 flat() 方法

三、应用

1. 深拷贝与浅拷贝

一维数组的深拷贝

其实也尝试了二维数组，也是深拷贝。

let a = [1,2,3];
let b = a.slice();

slice方法无法用于对象的深拷贝

let a = [{x:0}];
let b = a.slice();
b[0].x = 2;
console.log(a,b); [{x: 2}]

ps： 关于slice在mdn的函数说明，说这是一种浅拷贝，看了git上面的issue，也不是太明白二维数组就是深拷贝了呢？？

JSON对象的深拷贝

let json = {name:'xx', age:18};
let json2 = JSON.parse(JSON.stringify(json));
json2.age = 20;
console.log(json);// {name: 'xx', age: 18}
console.log(json2);//{name: 'xx', age: 20}

所有的深拷贝

function deepCopy(anything) {
  if (anything && typeof anything !== "object" && typeof anything !== "function")
    return anything;
  const anotherThing = {};
  Object.entries(anything).forEach(([k, v]) => anotherThing[k] = deepCopy(v));
  return anotherThing;
}

2. 去重(参考)

• 数组去重

let a = [1,2,3,4,4,4]; 
let b = Array.from(new Set(a));

• 对象数组去重

  const arr = [
            {
                name:"Ably",
                age:20
            },
            { // 与第一个元素 age 字段值相同
                name:"Wang",
                age:20
            },
            { // 与第一个元素 name 字段值相同
                name:"Ably",
                age:21
            },
            { // 与第一个元素完全相同
                name:"Ably",
                age:20
            },
        ];
        let tempObj = {};  // 这是一个对象
        const res = arr.reduce((returnVal,currentVal)=>{
            // 观察同一属性的值，并放入对象中，若对象中存在该值，则表明重复不进行处理，若对象中不存在该值，表示新值，需要存进去
            console.log(tempObj)  // 所有存在的值放入这个对象当中

            if(!tempObj[currentVal.name]){
                tempObj[currentVal.name] = true; // 若文中Ably的值为true，表示这个值存在，不会走里面的push方法
                returnVal.push(currentVal);
            }
            // a总和，也就是每一次处理后的返回结果 b当前值 c 索引值
            return returnVal
        },[]);
        console.log(res,"返回结果") 

版权声明：本文为CSDN博主「fighting Ably!」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44593720/article/details/118553661

3. 扁平化（参考）

• flat

const arr1 = [0, 1, 2, [3, 4]];
console.log(arr2.flat(Infinity));

• reduce

let arr = [1, [2, [3, 4]]];
function flatten(arr) {
    return arr.reduce(function(pre, cur){
        return pre.concat(Array.isArray(cur) ? flatten(cur) : cur)
    }, [])
}
console.log(flatten(arr));//  [1, 2, 3, 4，5]

• 正则+JSON

let arr = [1, [2, [3, [4, 5]]], 6];
function flatten(arr) {
  let str = JSON.stringify(arr);
  str = str.replace(/(\[|\])/g, '');
  // 拼接最外层，变成JSON能解析的格式
  str = '[' + str + ']';
  return JSON.parse(str); 
}
console.log(flatten(arr)); //  [1, 2, 3, 4，5]

4. reduce 与 await (有点像Array.fromAsync)

    await ctrls.reduce(async (memo, item) => {
          await memo;
          let query = await this.browserHttpService.getMatchPositivePoint(item.lon, item.lat);
           查询反向数据
          let neQuery = await this.browserHttpService.getMatchnegativePoint(item.lon, item.lat);
          let pathItem: pathItem = <any>{};
          pathItem.latitude = item.lat;
          pathItem.longitude = item.lon;
          pathItem.positiveName = query[0].filename;
          pathItem.positiveTime = query[0].time;
          pathItem.negativeName = neQuery[0].filename;
          pathItem.negativeTime = neQuery[0].time;
          this.pathItems.push(pathItem);
          this.pathNearItems.push([item.lon, item.lat]);
        }, undefined);
    

参考

slice mdn