JavaScript日常开发数组基础篇

陌上花開等雨來
361 阅读5分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

一. 数组

1.1 初始化数组长度并填充数据

let arr = new Array(10).fill("a");
// arr => ['a', 'a', 'a', 'a', 'a', 'a', 'a', 'a', 'a', 'a']

1.2 判断是否为数组

let arr = [1,2,3]

//方法1
Array.isArray(arr);  //true

//方法2
arr instanceof Array; //true

//方法3
Object.prototype.toString.call(arr)==="[object Array]" //true

1.3 数组去重

 let arr = [1,1,2,2,3,4,5,5,8];
 
 //方法1
 let res1 = [...new Set(arr)];
 //res1 =>  [1, 2, 3, 4, 5, 8]
 
 //方法2 
 let res2 = [];
 for(let i = 0; i<arr.length; i++){
   if(!res2.includes(arr[i])){
     res2.push(arr[i])
   }
 }
 //res2 => [1, 2, 3, 4, 5, 8]
 
 //方法3 利用Map数据结构 去重
 function unique(arr){
   let map = new Map(), newArr = [];
   arr.forEach(value =>{
      if(!map.has(value)){
        map.set(value,true);
        newArr.push(value)
      }
   })
   return newArr;
 }
 unique(arr); // [1, 2, 3, 4, 5, 8]

1.4 获取两数组相同的元素

let arr1 = [1,2,3,4,5]; 
let arr2 = [3,5,7,8,9]; 
let result = arr1.filter( item1 =>{      
      return arr2.findIndex(item2=>item2===item1)>=0  //>=0返回相同的部分。<0，返回出不同的部分。
})
// result => [3,5]

1.5 数组按时间排序

let arr = [
    {name:"10号",dateTime: new Date(2022,6,10)},
    {name:"18号",dateTime: new Date(2022,6,18)},
    {name:"12号",dateTime: new Date(2022,6,12)}
 ]
arr.sort((a,b)=> Date.parse(a.dateTime) - Date.parse(b.dateTime));

image.png

数组按首字母排序

let arr = [{name:'pp'},{name:'sp'},{name:'ap'},{name:'zp'}]; 
let result = arr.sort((a,b)=>{ 
   return a.name.charCodeAt(0) - b.name.charCodeAt(0); //charCodeAt返回指定位置的字符的编码 
})

image.png

1.6 数据分组整合

把下方数据按订单编号分组。

let packageList = [
  {
    ordercode:"2004001",
    barcode:"BZ001"
  },
  {
    ordercode:"2004001",
    barcode:"BZ002"
  },
  {
    ordercode:"2004001",
    barcode:"BZ003"
  },
   {
    ordercode:"2004002",
    barcode:"BZ004"
  },
   {
    ordercode:"2004002",
    barcode:"BZ005"
  },
   {
    ordercode:"2004003",
    barcode:"BZ006"
  },
  {
    ordercode:"2004003",
    barcode:"BZ007"
  },
   {
    ordercode:"2004004",
    barcode:"BZ008"
  },
]

let newList = [],map = {}; //辅助对象
packageList.forEach(item=>{
  if(!map[item.ordercode]){ //该订单号未分组
     newList.push({
       ordercode: item.ordercode,
       data:[item]
     })
     map[item.ordercode] = item;
  }else{
    newList.forEach(nitem=>{
       if(nitem.ordercode === item.ordercode){ //已分组的订单直接在子数组添加
         nitem.data.push(item)
       }
    })
  }
})
map = null; //释放

image.png

1.7 数组中寻找最大值和最小值

let arr = [1, 2, 3]; 
Math.max(...arr); // 3 
Math.min(...arr); // 1

1.8 操作数组的方法

1.8.1 改变原数组的方法

let arr = [1,2,3,4]

pop

// pop 删除数组中最后一个元素[返回这个元素]
arr.pop();  // arr = [1,2,3]

shift

// shift 删除数组中第一个元素[返回这个元素]
arr.shift(); // arr = [2,3,4]

push

// push 数组末尾添加元素[返回新的长度]
arr.push(5)；// arr = [1,2,3,4,5]

unshift

// unshift 数组头部添加元素[回新的长度]
arr.unshift(0)；// arr = [0,1,2,3,4]

reverse

// reverse 数组元素颠倒
arr.reverse()；// arr = [4,3,2,1]

splice

// splice 添加/删除数组元素[返回被删除的项目]
arr.splice(1,1); //从数组下标为1的位置删除一位元素 arr=[1,3,4]  删除操作 
arr.splice(-1,1); //从数组最后一位开始删除1个元素 arr = [1,2,3]  删除操作 
arr.splice(0,2,5); //删除前两位元素后添加5  arr = [3,4,5]  删除并添加操作 
arr.splice(3,0,10,11); //删除0个，从下标为3开始新增元素10和11  a=[1,2,3,10,11,4]  添加操作

sort

//sort 数组排序
let arr = [4,1,3,2] 
arr.sort();  //a=[1,2,3,4]

copyWiththin

// copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中。
var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"]; 
fruits.copyWithin(2, 0, 2); //复制数组的前面两个元素到第三和第四个位置上：
//Banana,Orange,Banana,Orange,Kiwi,Papaya

1.8.2 不改变原数组的方法

let arr = [1,2,3,4]

join

// join 数组转字符串【默认使用逗号作为分隔符】
let str = arr.join();  //str => "1,2,3,4"

toLocaleString / toString

// toLocaleString 数组转字符串
let a = [{name:'OBKoro1'},123,'abcd',new Date()]; 
let str = a.toLocaleString();  // str=> '[object Object],123,abcd,2022/6/9 17:41:29'
let str2 = a.toString(); // str2 => '[object Object],123,abcd,Thu Jun 09 2022 17:41:29 GMT+0800 (中国标准时间)'

slice

// slice浅拷贝数组的元素
let arr = [1,2,3,4,5];   
let newList = arr.slice(1,3); //newList =[2,3] 【不会修改原数组】

//如果是引用类型的话，改变其中一个，另一个也会改变。
let a = [{name:'koko'}]   
let b = a.slice(); // b =[{name:'koko'}]   
b[0].name = "gg";  // a[0].name = [{name:'gg'}]

concat

// concat数组合并
let a = [1,2,3];    
let b = [4,5,6];
let newList = a.concat(b); // newList=[1, 2, 3, 4, 5, 6]

拓展运算符...

// 扩展运算符...合并数组
let a = [2,3,4,5]    
let b = [1,...a,8,9]; //b=[1,2,3,4,5,8,9]

indexOf

// indexOf查找数组中是否存在某个元素【返回下标】
let a = ['啦啦',2,4,24,NaN]    
console.log(a.indexOf('啦'));  // -1

lastIndexOf

// lastIndexOf查找指定元素在数组中的最后一个位置【返回下标】
let a=['OB',4,'Koro1',1,2,'Koro1',3,4,5,'Koro1']; // 数组长度为10 
let b = a.lastIndexOf('Koro1',4); // 从下标4开始往前找 返回下标2

includes

// includes查找数组是否包含某个元素【返回布尔】
let a = ['OB','Koro1',1,NaN];     
let b = a.includes(NaN); // true 识别NaN

1.9 数组遍历的方法

ES5遍历

  1. forEach 中途无法退出循环
  2. every 检测数组所有元素是否符合判断条件
  3. some 数组中是否有满足判断条件的元素
  4. filter 按条件过滤原始数组，返回新的数组
  5. map 对数组中的每个元素进行处理，返回新的数组
  6. reduce 为数组提供累加器，合并为一个值
// 初始值0;sum=6  
let sum = [0, 1, 2, 3].reduce( (a, b)=> a + b, 0);   // sum => 6
// 将二维数组转化为一维 将数组元素展开     
let flattened = [[0, 1], [2, 3], [4, 5]].reduce((a, b) => a.concat(b), []);// [0, 1, 2, 3, 4, 5]
  1. reduceRight 从右至左累加

ES6遍历

  1. find & findIndex 根据条件找到数组成员
//find()返回成员，findIndex()返回下标    
let arr= [{name:'ss',age:10},{name:'dd',age:11},{name:'ff',age:15}];
let find = arr.find(item=> item.name === 'dd'); //find => {name:'dd',age:11}
let findIndex = arr.findIndex(item=>item.name==='dd'); //findIndex => 1
  1. keys() & values() & entries() 遍历键名、遍历键值、遍历键名+键值
let arr = ['a', 'b', 'c'];
for (let index of arr.keys()) {
      console.log(index); //0 1 2
}
avatar
文章
阅读
粉丝