首页 > 编程语言 >[Javascript] Array.prototype.with

[Javascript] Array.prototype.with

时间:2023-05-02 14:00:09浏览次数:54  
标签:const name idx items Javascript newItem Array prototype id

Prevously, when we want to upate an item inside a array:

const items = [
    {id: 1, name: 'a'},
    {id: 2, name: 'b'},
    {id: 3, name: 'c'},
    {id: 4, name: 'd'},
    {id: 5, name: 'e'}
]
const newItem = {id: 3, name: 'cc'};
const idx = items.findIndex(i => i.id === newItem.id)
const newItems = [
  ...items.slice(0, idx),
  newItem,
  ...items.slice(idx + 1)  
]

 

To simpify the process, we can use .with()

const items = [
    {id: 1, name: 'a'},
    {id: 2, name: 'b'},
    {id: 3, name: 'c'},
    {id: 4, name: 'd'},
    {id: 5, name: 'e'}
]
const newItem = {id: 3, name: 'cc'}
const newItems = items.with(items.findIndex(i => i.id === newItem.id), newItem)
console.log(newItems)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/with

标签:const,name,idx,items,Javascript,newItem,Array,prototype,id
From: https://www.cnblogs.com/Answer1215/p/17367615.html

相关文章

  • 前端进化笔记-JavaScript(二)
    因为作者学过其他类c语言,就不对大家都熟悉的内容进行赘述了。语法JavaScript区分大小写标识符:变量,函数,属性,函数参数的名称第一个字符必须是字母,下划线(_),美元符号($);关键字、保留字、true、false和null不能用作标识符作者在后续阅读的过程中,发现对各种名称不熟悉导致阅读不......
  • 将js中的 array 传输到后端
    前端JS代码:varconditons=[];vartest1=newObject();test1.name="1";test1.id="2";vartest2=newObject();test2.name="1";test2.id="2";conditons.push(test1);conditons.push(test2);$(function(){$.ajax({a......
  • 【web 开发基础】PHP自定义回调函数之call_user_func_array()
    前言从上一篇文章中我们了解到,回调函数是将一个函数作为参数传递到调用的函数中。如果在函数的格式说明中出现callback类型的参数,则该函数就是回调函数。虽然可以使用变量函数去声明自己的回调函数,不过我们通常大多还是会通过借助 call_user_func_array() 函数去实现。通过借助......
  • JavaScript相关
    Javascript基础​ JavaScript,是一门能够运行在浏览器上的脚本语言.简称JS.首先,Javascript这个名字的由来就很有意思,不少人认为Javascript和Java貌似很像.容易想象成Java的脚本.但其实不然,两者之间没有任何关系.纯粹是商业碰瓷.​ 那么既然JS是可以运行在浏览器上......
  • javaScript基础之 --- 作用域和闭包
    本文是我学习《你所不知道的javaScript上卷》的读书笔记的整理。更多详细内容,请微信搜索“前端爱好者“,戳我查看。作用域和闭包作用域是什么javaScript工作原理中的角色引擎-从头到尾负责整个javascript程序的编译及执行过程编译器-负责语法分析及代码生成......
  • 深入探讨源码--ArrayList
    持续推送技术干货目录深入探讨源码之ArrayListArrayList类图ArrayList的数据结构ArrayList的关键属性ArrayList构造方法ArrayList常用方法add方法ArrayList中的fast-fail机制add(i,o)方法set(i,o)方法get(i)方法remove(index)方法remove(Object)方法clear方法indexOf(o)方法深......
  • 将字节数组输入流拷贝成字节数组输出流,将ByteArrayInputStream转成ByteArrayOutputStr
    /**将ByteArrayInputStream拷贝成ByteArrayOutputStream*将字节数组输入流拷贝成字节数组输出流*/publicstaticByteArrayOutputStreamgetByteArrayOutputStream(ByteArrayInputStreaminputStream)throwsIOException{ByteArrayOutpu......
  • Web开发神器,最智能的Javascript IDE——WebStorm
    我的开发很大一部分是和Javascript打交道,很久以来,我一直在Spket、Aptana、VisualStudio、IntelliJIDEA、notepad++、vim等选择中徘徊,因为发现他们都很好,但都缺少我想要的……直到我开始使用WebStorm。 什么是我对JavascriptIDE选择的标准?1、快速智能的代码提示(全项目的)和补全2......
  • js javascript js隐藏页面上有id的控件,隐藏页面上无控件包含的文字,控制页面控件属性
    1.隐藏页面上有id的控件varinput=document.getElementsByTagName("input");//获取页面所有inputfor(vari=0;i<input.length;i++){if(input.item(i).id.indexOf("txt")>=0)//判断input的id中是否包含txt字符串{......
  • js javascript 鼠标触碰select下拉列表渐变出div层,鼠标离开渐变缩回
    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-......