Js Array的相关总结

2023-12-19 21:50:26

Array的相关总结

一、创建数组

  1. 初始化方法
方法举例
newlet 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]

  1. 数组空位
    数组字面量初始时,可以用逗号创建空位
let b = [,,,];
console.log(b.length);//3
console.log(b[0]);//undefined

  1. 数组索引
    修改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
  1. 检测数组
    两个方法
    instanceof
    Array.isArray()
let value = [1,2,3];
if(value instanceof Array){

}
if(Array.isArray(value)){

}
  1. 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

文章来源:https://blog.csdn.net/sda42342342423/article/details/135085055
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。