数组操作,追加、删除、替换

已于 2022-08-31 14:04:15 修改
阅读量597 收藏 2
点赞数
文章标签： javascript 前端
于 2022-06-30 11:44:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60651132/article/details/125533814
版权

目录

数组是否存在某元素

数组元素的追加、删除、替换

数组排序

查找数组最大最小值

自定义排序、最大最小值方法

数组去重

数组是否存在某元素

indexOf 存在值返回索引 ，不存在值为-1

var arr=[1,2,3,4,5];
arr.indexOf(1); //0

includes 存在为true，不存在为false

var arr=[1,2,3,4,5];
arr.includes(1); // true

find 判断条件是否满足，满足返回元素，不满足返回undefined

var arr=[1,2,3,4,5];
arr.find(item=>{return item==2}); // 2

findIndex同find，不同的是返回的是元素下标

var arr=[1,2,3,4,5];
arr.findIndex(item=>{return item ===3}); //2

数组元素的追加、删除、替换

length操作数组元素

//追加元素
var arr = [1,2,3,4,5];
arr[arr.length] = 6;
console.log(arr); // [1,2,3,4,5,6]

//替换元素
var arr = [1,2,3,4,5];
arr[arr.length-3] = 6;
console.log(arr); // [1, 2, 6, 4, 5]

splice对数组元素操作

//删除
var arr = [1,2,3,4,5];
arr.splice(2,5); //删除第二个元素之后到第五个元素
console.log(arr); // [1, 2]

//追加
var arr = [1,2,3,4,5];
arr.splice(4,0,7);  // 在第四个元素后面追加
console.log(arr); // [1, 2, 3, 4, 7, 5]
var arr = [1,2,3,4,5];
arr.splice(4,0,7,6,6,6,6);  
console.log(arr); // [1, 2, 3, 4, 7, 6, 6, 6, 6, 5]

//替换
var arr = [1,2,3,4,5];
arr.splice(4,5,8);   //将第四个元素之后，到第五个元素替换
console.log(arr); // [1, 2, 3, 4, 8]
var arr = [1,2,3,4,5];
arr.splice(4,5,8,9,0,9); // 第三个参数往后不限制数量
console.log(arr); // [1, 2, 3, 4, 8, 9, 0, 9]

 push数组末尾追加一个或多个元素

var arr = [1,2,3,4,5];
arr.push(6,7,8);
console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8]

unshift数组首位前插入元素

var arr = [1,2,3,4,5];
arr.unshift(6); // 可多个，arr.unshift(6,7,8,9);
console.log(arr); // [6, 1, 2, 3, 4, 5]

concat数组合并，原数组不变

var arr = [1,2,3,4,5];
var newArr = arr.concat(6,7,8);
console.log(arr); // [1, 2, 3, 4, 5] 
console.log(newArr); // [1, 2, 3, 4, 5, 6, 7, 8]

var arr = [1,2,3,4,5];
var baa = [7,8,9,0];
var newArr = arr.concat(baa); //也可同时使用扩展运算符 arr.concat(...baa)
console.log(arr); // [1, 2, 3, 4, 5] 
console.log(baa); // [7,8,9,0]
console.log(newArr); // [1, 2, 3, 4, 5, 7, 8, 9, 0]

...扩展运算符将元素展开合并

var arr = [1,2,3,4,5];
arr = [...arr,7,8,9];
console.log(arr); // [1, 2, 3, 4, 5, 7, 8, 9]

数组排序

sort正序排列，数字、字母

var arr = [3,8,2,4,6,1];
arr.sort(); // [1, 2, 3, 4, 6, 8]

var arr = ['d','w','a','y','s','q'];
arr.sort(); // ['a', 'd', 'q', 's', 'w', 'y']

// 注意：排序会按首位数组、字母排序，对于数字排序会不准确
var arr = [38,83,211,042,6,1];
arr.sort(); // [1, 211, 34, 38, 6, 83]

reverse 数组倒叙排列

var arr = [1,2,3,4,5];
arr.reverse();
console.log(arr); // [5, 4, 3, 2, 1]

var arr = ['d','w','a','y','s','q'];
arr.reverse(); // ['q', 's', 'y', 'a', 'w', 'd']

比值函数，修正sort排序问题

function(a, b){
    return a-b; // a-b为正序，b-a为倒叙
                // 也可使用其他排序方式，随机顺序如：0.5 - Math.random()
};

var arr = [38,83,211,042,6,1];
arr.sort(function(a, b){ return a - b }); // [1, 6, 34, 38, 83, 211]

查找数组最大最小值

 Math.max()、Math.min()

var arr = [38,83,211,042,6,1];
Math.max.apply(null,arr); // 211, null为对象，为了this的正确指向，必填
Math.min.apply(null,arr); // 1
Math.max(...arr); // 211
Math.min(...arr); // 1

自定义排序、最大最小值方法

对于数组排序、取数组最大最小值，都可通过自定义方法进行，自定义的方法有很多，只列举其中的一种，对于其他的，感兴趣的可以看文章最后附上的链接

//利用for循环，对数组进行排序 -- 冒泡
for(var i=0;i<arr.length;i++){
	for(var j=i+1;j<arr.length;j++){
		//如果第一个比第二个大，就交换他们两个位置
		if(arr[i]>arr[j]){
			var temp = arr[i];
			arr[i] = arr[j];
			arr[j] = temp;
		}
	}
}


// 查找最大值，最小值与之相反
function arrMax(arr) {
    var len = arr.length
    var max = -Infinity;
    while (len--) {
        if (arr[len] > max) {
            max = arr[len];
        }
    }
    return max;
}

数组去重

new Set() ES6新增

var arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN]; 
let a = [...new Set(arr)];
let b = Arry.from(new Set(arr));
console.log(a); // [1, 2, 'abc', true, false, undefined, NaN]
console.log(b); // [1, 2, 'abc', true, false, undefined, NaN]

// new Set(arr)  //Set(7) {1, 2, 'abc', true, false, …}
// set的元素是唯一的，不可重复了，可将数组去重，但返回的不是数组，需要重置

for循环

var arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN];
// 设置开关，如果重复开关关闭；区分开关，开的代表不重复，推到新数组中，达到去重的目的
function removeRepeat (arr) {
   let newArr = [];
   for(let i = 0;i<arr.length;i++){
      let  a = true; 
      for(let j = 0;j<newArr.length;j++){
        arr[i] === newArr[j] ? a = false : a;
      };
      a ? newArr.push(arr[i]) : newArr; 
   };
   return newArr;
}
removeRepeat(arr); // [1, 2, 'abc', true, false, undefined, NaN, NaN]

// 由输出结果可以看到，无法对NaN进行判断; NaN != NaN

for+splice 

var arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN];
// 利用splice删除重复元素，达到去重的目的
function removeRepeat (arr) {
   for(let i = 0;i<arr.length;i++){
      for(let j = i+1;j< arr.length;j++){
        if(arr[i] === arr[j]) arr.splice(j,1);
      };
   };
    return arr;
}
removeRepeat(arr);  // [1, 2, 'abc', true, false, undefined, NaN, NaN]


// 由输出结果可以看到，无法对NaN进行判断; NaN != NaN

for + sort


var arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN]; 

// 利用数组排序，然后再去比对前后元素是否一致 
function removeRepeat (arr) {
   let newArr = [];
   for(let i = 0;i<arr.length;i++){
     if(arr[i] !== arr[i+1]) newArr.push(arr[i]);
   };
    return newArr;
}
removeRepeat(arr.sort()); // [1, 2, NaN, NaN, 'abc', false, true]
// 由结果可以看出，不能判断NaN。NaN != NaN

for + includes

var arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN];
// 利用includes判断元素是否存在于数组中
var arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN]; 
function removeRepeat (arr) {
   let newArr = [];
   for(let i = 0;i<arr.length;i++){
     if(!newArr.includes(arr[i])) newArr.push(arr[i]);
   };
    return newArr;
}
removeRepeat(arr); // [1, 2, 'abc', true, false, undefined, NaN]

for + indexOf

var arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN];
// 利用indexOf判断元素是否存在
function removeRepeat (arr) {
   let newArr = [];
   for(let i = 0;i<arr.length;i++){
     if(newArr.indexOf(arr[i]) === -1) newArr.push(arr[i]);
   };
   // arr.forEach(item => {
   //   if (newArr.indexOf(item) === -1) newArr.push(item);
   // })
   return newArr;
}
removeRepeat(arr); // [1, 2, 'abc', true, false, undefined, NaN, NaN]

// 由输出结果可以看到，无法对NaN进行判断; NaN != NaN

filter()+indexOf()

var arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN];
function removeRepeat(arr) {
    return arr.filter((item, index) => {
       return arr.indexOf(item) === index;
  })
}
removeRepeat(arr); // [ 1, 2, 'abc', true, false, undefined ]
// indexOf(NaN)结果为-1，所以输出结果中不包含NaN

map+has+set相结合

function removeRepeat(arr) {
    const map = new Map();
    const newArr = [];
    arr.forEach(item => {
      if (!map.has(item)) { // has()用于判断map是否包为item的属性值
        map.set(item, true); // 使用set()将item设置到map中，并设置其属性值为true
        newArr.push(item);
      }
    })
    return newArr;
};
removeRepeat(arr); // [ 1, 2, 'abc', true, false, undefined, NaN ]

文献参考：

超全的12种数组去重的方法_追逐原野.的博客-CSDN博客_数组去重

js中数组排序的五种方式_不甜呐的博客-CSDN博客_js 数组排序  这位大佬的文章中有动图

https://www.jb51.net/article/193524.htm

(ㅍ_ㅍ)608
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
python中数组追加数据_python数组追加
weixin_35683697的博客
12-29 4028
记linux shell的两个小技巧：shell数组和字符串判断最近在使用shell写脚本的时候，想实现python中两个很简单的功能：1：判断一个字符串是否包含另一个字符串。2：怎么用实现python的列表功能。这里跟大家分享一下。1：判断一个字符串是否包含另一个字符串：123456string="abcdefg"...文章余二五2017-11-151010浏览量Python数据类型Python...
vue 数组元素替换_Vue全家桶之Vue数组变更方法和替换数组
weixin_31767787的博客
12-23 3918
在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变直接修改页面内容并没有改变页面内容并没有改变那么Vue如何处理动态处理响应式数据Vue.set(a,b,c) 让触发视图重新更新一遍，数据动态起来Vue.set页面内容动态改变除了Vue.set我们也可以 直接使用vm实例的$set动态处理响应式数据例如 ：vm.$s...
vue数组中的变更方法和替换方法
qq_64680177的博客
10-25 1814
变更方法，顾名思义，就是会对调用它们的原数组进行变更。相对地，也有一些不可方法，例如flter()，concat()和slice()，这些都不会更改原数组，而总是返回一个新数组。当遇到的是非变更方法时，我们需要将旧的数组替换为新的.Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。// 将新数组赋值给旧数组。这样就完成了Vue替换一个新的数组的操作。
Web前端最新9种JavaScript数组去重的高阶方法(1)，2024年最新字节跳动的四轮面试
2401_84434880的博客
05-17 676
基于以上考虑，交换元素的位置，效率会更高一点，若当前元素重复，则与数组最后一位元素交换位置，i–再次进行判断即可，同时length–,操作数组的长度实现删除数组的最后一个元素，这样便不会影响到数组中其他元素。给定一个数组 [1,2,2,4,null,null,‘3’,‘abc’,3,5,4,1,2,2,4,null,null,‘3’,‘abc’,3,5,4] 去除重复项。非也，因为很多人找的资料就是很基础的。很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。
shell 数组里追加数值_shell编程之数组及变量的多功能用法
weixin_39763640的博客
01-17 2179
数组及变量的多功能用法一、数组：1、数组：存储多个元素的连续的内存空间，相当于多个变量的集合(变量：存储单个元素的内存空间)。2、数组名和索引索引：编号从0开始，属于数值索引bash的数组支持稀疏格式(索引不连续)注意：索引可支持使用自定义的格式，而不仅是数值格式，即为关联索引，bash4.0版本之后开始支持。声明数组：declare -a ARRAY_NAMEdeclare -A ARRAY_N...
java数组删除，替换，增加数组元素工具类
qq_28884137的博客
03-04 590
Java 数组删除，替换，增加，其中Java 的数组是固定长度的，无法直接删除，我们可以通过创建一个新数组，把原始数组中要保留的元素放到新数组中即可。数组对于每一门编程语言来说都是重要的数据结构之一，当然不同语言对数组的实现及处理也不尽相同。下面提供以一个字符串操作数组的类方便以后使用。
JS数组添加、删除、替换的几种方法
热门推荐
Wnig's Blog
02-26 2万+
// JS数组添加元素的三种方式 var arr = [1, 2.3, 22] arr.push(2, 0) console.log('push在数组后面插入 =&amp;amp;gt; arr:::', arr) arr.unshift(18) console.log('unshift在数组前面插入 =&amp;amp;gt; arr:::', arr) arr.splice(3, 0, '略略略') console.log...
ios 替换数组中元素_ios可变数组的所有操作
weixin_39629876的博客
12-19 1179
#pragma mark 创建数组cNSMutableArray * array =[[NSMutableArray alloc] initWithObjects:@"a",@"b",@"c" ,nil];NSMutableArray * array1 =[NSMutableArray arrayWithObjects:@"a",@"b",@"c" , nil];NSArray * array2 ...
数组追加与删除
weixin_56976215的博客
09-03 183
【代码】数组追加与删除。
JavaScript数组操作常用方法
雨落宿命敲的博客
05-08 1080
文章目录数组基础遍历方法。forfor offor in数组的基础操作方法。push：尾部追加元素pop：尾部移出元素unshift：头部追加元素shift：头部移出元素splice：删除添加替换concat：连接join：分割slice：切割includes：查询indexOf：查询es6中带来的数组高阶方法。forEach：迭代（枚举）filter：过滤map：映射find：查找findIndex：查找下标 函数和方法的区别： 函数function：独立的function，那么称之为是一个函数。 f
JavaScrip数组删除特定元素的几种方法总结
10-19
总结，JavaScript中删除数组特定元素的方法主要有`splice()`方法，通过设置不同的参数实现删除、替换或追加元素。此外，还有其他方法，如`filter()`、`slice()`、`concat()`等，但`splice()`方法更直接地改变了原始...
Python之数组Python之数组
03-14
- `+`操作符或`+=`操作符也可以用来合并或追加列表： ```python list1 += ['承清之父'] ``` 3. **插入元素** 使用`insert()`方法可以在列表的指定位置插入一个元素： ```python list1.insert(1, '123') ```...
MongoDB数据库插入、更新和删除操作详解
12-16
2. **局部更新**：使用修改器如`$inc`（增加数值）、`$set`（设置值）、`$push`（向数组追加元素）等进行原子性修改。`upsert`操作是更新的特殊形式，若无匹配文档则插入新文档。 **四、原子性和瞬时性** MongoDB的...
JavaScript操作选择对象的简单实例
10-22
为了替换选中文本，我们创建一个新的`H1`元素，并设置其`innerHTML`为`text`，然后使用`r.insertNode(h1)`将其插入到选区，注意，这将在选区后追加新元素，若要替换原有内容，需先调用`sel.deleteFromDocument()`。...
PHP zip压缩包操作类完整实例
12-18
若要替换现有文件，需先删除旧的ZIP文件。 - 忽略列表是一个数组，用于排除特定文件或目录名。 通过`ZipFolder` 类，开发者可以轻松地处理ZIP文件，这在文件备份、数据传输和文件分发等场景中非常有用。然而，对于...
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 648
JavaScript青少年简明教程：函数及其相关知识（下）
VUE3自定义指令防止重复点击多次提交
最新发布
MadSnail00的博客
07-30 73
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 407
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值