Js Array的相关总结

Array的相关总结

一、创建数组

1. 初始化方法

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. 迭代器方法

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

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

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. 转换方法（不修改原数组）

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

5. 排序方法

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. 操作方法

7. 搜索和位置方法

• 按照严格相等搜索

• 按照断言函数搜索

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

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

console.log(result);

8.迭代方法

9. 归并方法

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. 其他方法

三、应用

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