数组、对象的增、删、改、查、遍历常用方法

已于 2022-12-14 23:01:16 修改
阅读量179 收藏 2
点赞数 1
分类专栏： 数组、对象增、删、改、查、遍历 文章标签： javascript 前端
于 2022-12-14 22:50:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42657934/article/details/128305945
版权

数组

增加

  1. 通过length

        const fruitArr = ['苹果', '橘子', '梨']
    fruitArr[fruitArr.length] = '香蕉'
    console.log('fruitArr', fruitArr) //['苹果', '橘子', '梨', '香蕉']

  2. push(尾部添加)、unshift(头部添加)、splice(指定位置添加)

    // push
const fruitArr = ['苹果', '橘子', '梨']
fruitArr.push( '香蕉')
console.log('fruitArr', fruitArr) //['苹果', '橘子', '梨', '香蕉']

    
// unshift
 const fruitArr = ['苹果', '橘子', '梨']
 fruitArr.unshift( '香蕉')
 console.log('fruitArr', fruitArr) // ['苹果', '橘子', '梨', '香蕉']

    // splice
const fruitArr = ['苹果', '橘子', '梨']
fruitArr.splice( 3, 1, '香蕉' )
console.log('fruitArr', fruitArr) // ['苹果', '橘子', '梨', '香蕉']

  3. 合并数组

    let fruitArr = ['苹果', '橘子', '梨']
fruitArr  = fruitArr.concat('香蕉' )
console.log('newArr', fruitArr ) // ['苹果', '橘子', '梨', '香蕉']

  4. 展开运算符

    // ...
let fruitArr = ['苹果', '橘子', '梨']
fruitArr  =[...fruitArr, '香蕉']
console.log('newArr', fruitArr ) // ['苹果', '橘子', '梨', '香蕉']

删除

  1. length

    const fruitArr = ['苹果', '橘子', '梨']
fruitArr.length = 2
console.log('fruitArr', fruitArr) //['苹果', '橘子']

  2. delete

    const fruitArr = ['苹果', '橘子', '梨']
delete fruitArr[2]
console.log('fruitArr', fruitArr) // ['苹果', '橘子', empty]

  3. pop(尾部删除) shift(头部删除) splice(指定位置)

     // pop
 const fruitArr = ['苹果', '橘子', '梨']
 fruitArr.pop()
 console.log('fruitArr', fruitArr) // ['苹果', '橘子']

    // shift
 const fruitArr = ['苹果', '橘子', '梨']
 fruitArr.shift()
 console.log('fruitArr', fruitArr) //  ['橘子', '梨']

    // splice
const fruitArr = ['苹果', '橘子', '梨']
fruitArr.splice(2, 1)
console.log('fruitArr', fruitArr) //  ['苹果', '橘子']

  4. filter

    let fruitArr = ['苹果', '橘子', '梨']
fruitArr  = fruitArr.filter(item =>  item !== '梨')
console.log('newArr', fruitArr ) // ['苹果', '橘子']

  5. protype原型方法

     Array.prototype.remove = function(delIndex){
 if(isNaN(delIndex) || delIndex > this.length){
    return false
  }
  for(let i =0, n=0; i < this.length; i++){
    if(this[i] != this[delIndex]){
      this[n++] = this[i]
    }
  }
  this.length -= 1
}
const fruitArr = ['苹果', '橘子', '梨']
fruitArr.remove(2)
console.log('newArr', fruitArr ) // ['苹果', '橘子']

修改

	 //方法一找对元素对应下标进行修改
	 const fruitArr = ['苹果', '橘子', '梨']
	 const modifyIndex  = fruitArr.findIndex(item =>  item === '梨')
	 fruitArr[modifyIndex] = '香蕉'
	 console.log('newArr', fruitArr ) // ['苹果', '橘子', '香蕉']

	//方法二删除后在添加 
    let fruitArr = ['苹果', '橘子', '梨']
    fruitArr  = fruitArr.filter(item =>  item !== '梨')
    fruitArr.splice(1, 0, '香蕉')
    // fruitArr.splice(-1, 0, '香蕉') //负数代表下标从后往前数
    console.log('newArr', fruitArr ) // ['苹果', '香蕉', '橘子']

查找

//方法一 indexOf() 方法返回指定元素在数组中的第一个索引，如果不存在，则返回-1
//第一个参数是‘要查找的元素’，第二个参数是‘开始查找的索引位置
const fruitArr = ['苹果', '橘子', '梨']
const index  =  fruitArr.indexOf( '梨')
console.log('index', index ) // 2

// 方法二  lastIndexOf() 方法返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1
// 第一个参数是‘被查找的元素’,第二个参数是‘从此位置开始逆向查找’
const fruitArr = ['苹果', '橘子', '梨']
const index  =  fruitArr.lastIndexOf( '梨')
console.log('index', index ) // 2

// 方法三  findIndex()
const fruitArr = ['苹果', '橘子', '梨']
const index  =  fruitArr.findIndex(item =>  item === '梨')
console.log('index', index ) // 2

// 方法四  find()
const fruitArr = ['苹果', '橘子', '梨']
const result  =  fruitArr.find( item => item === '梨')
console.log('result', result ) // 梨

// 方法五  includes()
// 第一个参数是‘需要查找的元素值’,第二个参数是‘从哪个索引处开始查找’
const fruitArr = ['苹果', '橘子', '梨']
const includes  =  fruitArr.includes( '梨')
console.log('includes', includes ) // true

//方法六  some() 方法用于检测数组中的元素是否满足指定条件 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测
// arr.some(callback(currentValue,index,arr),thisValue)  
// 参数一 callback(currentValue,index,arr)  currentValue必须,当前元素的值  index可选。当前元素的索引值   arr可选,当前元素属于的数组对象
// 参数二 thisValue可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值
const fruitArr = ['苹果', '橘子', '梨']
const result  =  fruitArr.some( item => item ==='梨')
console.log('result', result ) // true

// 方法七  every() 方法用于检测数组中的元素是否满足指定条件 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测
// arr.every(callback(currentValue,index,arr),thisValue)  
// 参数一 callback(currentValue,index,arr)  currentValue必须,当前元素的值  index可选。当前元素的索引值   arr可选,当前元素属于的数组对象
// 参数二 thisValue可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值
const fruitArr = ['苹果', '橘子', '梨']
const result  =  fruitArr.every( item => item ==='梨')
console.log('result', result ) // false

// 方法八 filter()
const fruitArr = ['苹果', '橘子', '梨']
const result  =  fruitArr.filter( item => item ==='梨')
console.log('result', result ) // ['梨']

去重

// 方法一
const fruitArr = ['苹果', '橘子', '梨', '橘子']
const result  = Array.from(new Set(fruitArr))
console.log('result', result ) //['苹果', '橘子', '梨']

//方法二  使用 filter 返回符合条件的集合
const fruitArr = ['苹果', '橘子', '梨', '橘子']
const result  = fruitArr.filter(((item, index) => {return fruitArr.indexOf(item) === index}))
console.log('result', result ) //['苹果', '橘子', '梨'

const fruitArr = ['苹果', '橘子', '梨', '橘子']
const result  = []
fruitArr.forEach((item) => {
  if(!result.includes(item)) result.push(item)
})
console.log('result', result ) //['苹果', '橘子', '梨']

const fruitArr = ['苹果', '橘子', '梨', '橘子']
const obj  = new Map()
const result  = []
fruitArr.forEach((item) => {
  if(!obj.has(item)) {
    obj.set(item, true)
    result.push(item)
  }
})
console.log('result', result ) //['苹果', '橘子', '梨']

排序

//方法一 sort() 排序
let fruitArr = [1, 5, 6, 2, 7]
fruitArr.sort((a, b) => { return a-b})
console.log(fruitArr ) //[1, 2, 5, 6, 7]

//选择比较
const fruitArr = [1, 5, 6, 2, 7]
for(let i = 0; i < fruitArr.length; i++){
  for(let j=i+1; j < fruitArr.length; j++ ){
    if(fruitArr[i] > fruitArr[j]){
      const maxEl = fruitArr[i]
      fruitArr[i] = fruitArr[j]
      fruitArr[j] = maxEl
    }
  }
}
console.log(fruitArr ) //[1, 2, 5, 6, 7]

对象

增加

//方法一直接添加
const weatherInfo = {
  tem: '32℃',
  weather: '晴'
}
const key = 'date'
const value = new Date().toUTCString()
weatherInfo[key] = value
// weatherInfo.date = new Date().toUTCString()
console.log(weatherInfo) //{tem: '32℃', weather: '晴', date: 'Wed, 14 Dec 2022 13:43:06 GMT'}

//方法二 扩展运算符
let weatherInfo = {
  tem: '32℃',
  weather: '晴'
}
weatherInfo = {...weatherInfo, date:  new Date().toUTCString()}
console.log(weatherInfo) //{tem: '32℃', weather: '晴', date: 'Wed, 14 Dec 2022 13:43:06 GMT'}

// 方法三  Object.assign()
let weatherInfo = {
  tem: '32℃',
  weather: '晴'
}
weatherInfo =Object.assign(weatherInfo,{ date:  new Date().toUTCString()})
console.log(weatherInfo) //{tem: '32℃', weather: '晴', date: 'Wed, 14 Dec 2022 13:43:06 GMT'}

删除

// 方法一delete
let weatherInfo = {
  tem: '32℃',
  weather: '晴'
}
delete weatherInfo.weather
console.log(weatherInfo) //{tem: '32℃'}

//方法二 es6解构
let weatherInfo = {
  tem: '32℃',
  weather: '晴'
}
const  {weather, ...newWeatherInfo} = weatherInfo
console.log(newWeatherInfo) //{tem: '32℃'}

// 方法三  es6  Reflect.deleteProperty反射
let weatherInfo = {
  tem: '32℃',
  weather: '晴'
}
Reflect.deleteProperty(weatherInfo, 'weather')
console.log(weatherInfo) //{tem: '32℃'}

修改

const weatherInfo = {
  tem: '32℃',
  weather: '晴'
}
weatherInfo.tem = '33℃'
console.log(weatherInfo) //{tem: '33℃', weather: '晴'}

查找

// 方法一 hasOwnProperty()
const weatherInfo = {
  tem: '32℃',
  weather: '晴'
}
const reault = weatherInfo.hasOwnProperty('tem')
console.log(reault) //true

// 方法二 ES6 属性名 in 对象,返回一个布尔值
const weatherInfo = {
  tem: '32℃',
  weather: '晴'
}
const reault = 'tem' in weatherInfo
console.log(reault) //true

// 方法三 Object.keys获取所有属性组成的数组 indexOf()查找是否包含
const weatherInfo = {
  tem: '32℃',
  weather: '晴'
}
const reault =Object.keys(weatherInfo).indexOf('tem')
console.log(reault) //0

// 方法四 Object.entries()会返回一个嵌套数组，数组内包括了属性名与属性值
const weatherInfo = {
  tem: '32℃',
  weather: '晴'
}
const reault = Object.entries(weatherInfo)
console.log(reault) //[['tem', '32℃'],  ['weather', '晴']]

// 方法五 Object.getOwnPropertyNames()会返回一个数组包含了对象的所有属性
const weatherInfo = {
  tem: '32℃',
  weather: '晴'
}
const reault = Object.getOwnPropertyNames(weatherInfo)
console.log(reault) // ['tem', 'weather']

遍历

// 方法一 for in
const weatherInfo = {
  tem: '32℃',
  weather: '晴',
}
for (const key in weatherInfo) {
  console.log(key)
}
//tem  weather

// 方法二 Object.keys()  可以遍历到所有对象本身的可枚举属性，返回值为数组
const weatherInfo = {
  tem: '32℃',
  weather: '晴',
}
Object.keys(weatherInfo).forEach(key => {
    console.log(key)
  }
)
//tem  weather

// 方法三 Object.getOwnPropertyNames()  可以遍历到对象自身属性名组成的数组，包括不可枚举的属性
const weatherInfo = {
  tem: '32℃',
  weather: '晴',
}
Object.getOwnPropertyNames(weatherInfo).forEach(key => {
    console.log(key)
  }
)
//tem  weather
不要停止努力呦！
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
面向对象数组之常用“增删改查”操作（Java）
weixin_51401481的博客
06-03 1246
数组是指有序的元素序列，使用中括号“[ ]”来表示和存放相同类型的元素，每个元素都有自己对应的下标位置，起始下标都以0开头。下面通过代码来演示如何对一个或多个数组进行“增删改查”的操作。 先给张归纳的截图，让脑海里对数组的“增删改查”操作有个大体印象。 代码演示： 1、封装一个util工具类，里面存放对数组的“增删改查”方法。 package demo1.util; import java.util.Arrays; public class MyArray { // 定义一个用于存储数据的
数组对象 增删改查
weixin_44931354的博客
07-15 271
第一次博客 package com.bin.main; import com.sun.org.apache.xpath.internal.objects.XString; public class userinfo { user[] user = new user[30];//固定班级有30个学生 static int a = 0;//当前学生数量 /** * 添加 add */ public void add(user u) { .
数组对象的增删改查
acaiEncode的博客
12-12 133
数组对象的增删改查。
对象数组的增删改查
RAVANLALA
03-10 863
数据结构 现在就开始记录我学习的数据结构与算法 public class TestArraysOP01 { // public static void main(String[] args) { // // } //这里的main方法不用写，这是另一个包（package cn.DataStructureAndAlgorithm01）里的一个class（TestArraysOP01) //这...
浅谈JavaScript中数组的增删改查
10-22
- `slice(n)` 或 `slice(0)` 用于复制数组，这是一种浅拷贝，仅复制对象引用，而不是对象本身。 - `concat()` 方法可以合并多个数组，同时也可以用于创建数组的副本。 5. **数组转化为字符串** - `toString()` ...
JavaScript数组Array对象增加和删除元素方法总结
12-10
JavaScript中的数组Array对象是编程中常用的数据结构，用于存储一系列有序的值。本文将深入探讨JavaScript数组中用于增加和删除元素的方法，以便更好地理解和运用这些功能。 1. pop() 方法： pop() 方法从数组的...
js中Array对象的常用遍历方法详解
12-08
在JavaScript中，Array对象提供了多种遍历方法，用于处理数组中的数据。这些方法包括`forEach()`、`map()`、`filter()`、`some()`、`every()`、`find()`以及`reduce()`。以下是对这些方法的详细解释： 1. `forEach...
JavaScript数组对象实现增加一个返回随机元素的方法
10-23
为了使数组对象更加灵活，我们可以为其添加自定义方法，比如实现一个返回数组中随机元素的功能。在给定的标题和描述中，我们看到的核心知识点是扩展JavaScript数组对象以包含一个返回随机元素的方法。这个方法涉及到...
js克隆对象、数组的常用方法介绍
12-02
})`：这个方法会遍历数组中的每个元素，并返回一个新的数组，包含原始数组的元素副本。这不适用于对象的克隆，只适用于简单数组的克隆。 3. **原生JavaScript的数组克隆方法**： - `json.concat()`：这种方法创建...
利用对象数组对员工，学生增删改查
09-11
利用对象数组对人员增删改查，简单实现！
java对象数组增删改查_对象数组 数组对象 增删改查 数组
weixin_35810162的博客
02-26 154
数组对象arrt = [{a:1,b:2,c:[{c1:cc},{c2:bb},{c3:aa}]}，{}，{}]，对上述数组对象进行数据操作：增：arrt.push({d:0},{s:[1,2,3,4,5]}) //在arrt数组最后一个数据后面添加arrt.unshift({d:0},{s:[1,2,3,4,5]})//在arrt数组第一个数据前面添加arrt.splice(a,b,C1,.....
数组--增删改查
m0_60376759的博客
04-25 700
1. 数组 数组：具有相同类型（或者不同类型）的数据有序集合，每个值叫做一个元素，而每个元素在数组中有一个位置，以数字表示，称为索引/下标。js的数组是无类型的，数组元素可以是任意类型，同一个数组中的不同元素可能是对象或数组。 2. 创建数组 1.构造函数方式： var myCars=new Array(); myCars[0]="奥迪"; myCars[1]="宝马"; myCars[2]="奔驰"; 2.简洁方式： var myCars=new Array("沃尔沃","保...
数组、字符串和集合中的增、删、查、改
Biaoooos的博客
04-27 224
一.数组 （1.）数组的遍历 (1.)for int[] arr = new int[n]; for (int i = 0; i < arr.length; i++) { } (2.)foreach int[] arr = new int[n]; for (int i : arr) { } 总结： foreach遍历方式的特点: 1.简化了遍历 2.foreach没有索引 3...
几种遍历数组和对象的方法及其区别
weixin_53687450的博客
03-24 822
遍历数组 1、forEach方法 用来调用数组的每个元素，将元素传给回调函数。 不会返回新数组； 无法中途跳出循环，return或break无效； 会跳过数组的空位； 不会改变原始数组。 var arr = [0, ,4,6,8]; var sum = 0; var str = arr.forEach(function(item,index,arr){ sum += item; console.log("sum的值为：",sum); //0 4 10 18 }) console.log(
数组常见操作：增、删、改、查（筛选），遍历，排序
955姜太根的博客
01-10 692
数组常见操作
js中的增删改查——数组对象，接口
杜永康的博客
03-29 1086
假设我们有一个用户管理的接口，可以通过该接口获取、添加、修改和删除用户信息。在JavaScript中，可以使用Ajax技术来对接口中的数据进行增删改查。可以使用数组的splice()方法或对象的delete操作符来删除数据。在JavaScript中，可以通过数组和对象来进行数据的增删改查。可以使用数组的indexOf()方法或对象的属性访问符来查询数据。可以使用数组的push()方法或对象的属性赋值来增加数据。可以直接通过数组或对象的索引或属性名来修改数据。
对象数组 数组对象 增删改查 数组
weixin_33939380的博客
12-24 409
数组对象arrt = [{a:1,b:2,c:[{c1:cc},{c2:bb},{c3:aa}]}，{}，{}]， 对上述数组对象进行数据操作： 增： arrt.push({d:0},{s:[1,2,3,4,5]}) //在arrt数组最后一个数据后面添加 arrt.unshift({d:0},{s:[1,2,3,4,5]})//在arrt数组第一个数据前面添加 arrt.splice...
java 对象数组（增删改查）
奔跑的青年
06-20 8280
package com.vince.lei; import java.util.Arrays; import org.omg.CORBA.PUBLIC_MEMBER; public class DuiXiangShuZuDemo { // 对象数组:数组中的每个元素都是类的对象，赋值时先定义对象，然后将对象直接赋给数组 /** * @param args */
js对象遍历常用方法
最新发布
10-22
JavaScript对象遍历的常用方法有以下几种： 1. for循环遍历：使用for循环遍历数组或对象，可以通过索引或属性名访问元素或属性。 2. for-in遍历：使用for-in循环遍历对象的可枚举属性，可以获取对象的属性名，但是不...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值