Web Front-end
JS Tutorial
JavaScript method splice() to delete elements and add new elements to an arrayJavaScript method splice() to delete elements and add new elements to an array
Definition and Usage
The splice() method adds/removes items to/from the array, and then returns the deleted item.
Note: This method will change the original array.
Syntax
arrayObject.splice(index,howmany,item1,.....,itemX)
| Parameters | Description |
| index | Required. Integer, specifies the position of adding/deleting items. Use negative numbers to specify the position from the end of the array. |
| howmany | Required. The number of items to delete. If set to 0, items will not be deleted. |
| item1, ..., itemX | Optional. New items added to the array. |
Return value
| Type | Description |
| Array | A new array containing the deleted items, if any |
Description
The splice() method removes items from Zero or more elements starting at index and replaces those removed elements with one or more values declared in the argument list.
If an element is deleted from arrayObject, an array containing the deleted element is returned.
Technical Details
| JavaScript Version: | 1.2 |
浏览器支持
所有主流浏览器都支持 splice() 方法。
提示和注释
注释:请注意,splice() 方法与 slice() 方法的作用是不同的,splice() 方法会直接对数组进行修改。
实例
例子 1
在本例中,我们将创建一个新数组,并向其添加一个元素:
<script type="text/javascript"> var arr = new Array(6) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" arr[3] = "James" arr[4] = "Adrew" arr[5] = "Martin" document.write(arr + "<br />")arr.splice(2,0,"William")document.write(arr + "<br />") </script>
输出
George,John,Thomas,James,Adrew,Martin George,John,William,Thomas,James,Adrew,Martin
例子 2
在本例中我们将删除位于 index 2 的元素,并添加一个新元素来替代被删除的元素:
<script type="text/javascript"> var arr = new Array(6) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" arr[3] = "James" arr[4] = "Adrew" arr[5] = "Martin" document.write(arr + "<br />")arr.splice(2,1,"William")document.write(arr) </script>
输出:
George,John,Thomas,James,Adrew,Martin George,John,William,James,Adrew,Martin
例子 3
在本例中我们将删除从 index 2 ("Thomas") 开始的三个元素,并添加一个新元素 ("William") 来替代被删除的元素:
<script type="text/javascript"> var arr = new Array(6) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" arr[3] = "James" arr[4] = "Adrew" arr[5] = "Martin" document.write(arr + "<br />")arr.splice(2,3,"William")document.write(arr) </script>
输出:
George,John,Thomas,James,Adrew,Martin George,John,William,Martin
JavaScript中的splice主要用来对js中的数组进行操作,包括删除,添加,替换等。
注意:这种方法会改变原始数组!。
1.删除-用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数)
2.插入-向数组指定位置插入任意项元素。三个参数,第一个参数(插入位置),第二个参数(0),第三个参数(插入的项)
3.替换-向数组指定位置插入任意项元素,同时删除任意数量的项,三个参数。第一个参数(起始位置),第二个参数(删除的项数),第三个参数(插入任意数量的项)
示例:
1、删除功能,第一个参数为第一项位置,第二个参数为要删除几个。
array.splice(index,num),返回值为删除内容,array为结果值。
<!DOCTYPE html> <html> <body> <script> var array = ['a','b','c','d']; var removeArray = array.splice(0,2); alert(array);//弹出c,d alert(removeArray);//返回值为删除项,即弹出a,b </script> </body> </html>
2、插入功能,第一个参数(插入位置),第二个参数(0),第三个参数(插入的项)
array.splice(index,0,insertValue),返回值为空数组,array值为最终结果值
!DOCTYPE html> <html> <body> <script> var array = ['a','b','c','d']; var removeArray = array.splice(1,0,'insert'); alert(array);//弹出a,insert,b,c,d alert(removeArray);//弹出空 </script> </body> </html>
3、替换功能,第一个参数(起始位置),第二个参数(删除的项数),第三个参数(插入任意数量的项)
array.splice(index,num,insertValue),返回值为删除内容,array为结果值。
<!DOCTYPE html> <html> <body> <script> var array = ['a','b','c','d']; var removeArray = array.splice(1,1,'insert'); alert(array);//弹出a,insert,c,d alert(removeArray);//弹出b </script> </body> </html>
The above is the detailed content of JavaScript method splice() to delete elements and add new elements to an array. For more information, please follow other related articles on the PHP Chinese website!
Mastering the Command Line for JavaScript DevelopersJul 24, 2025 am 03:59 AMMaster basic but in-depth command line skills: proficient in using Tab completion, history, Ctrl R search, pwd positioning and ls-la to view hidden files; 2. Efficiently use Node.js and package manager: make good use of npminit-y, --save-dev, npx without installation and operation, npmrun scripts and outdated inspection, and optimize pnpm speed up; 3. Accurate search code and log: combine grep-r/-i, find files, jq formatted JSON and xargs to find JS files with specific content; 4. Write simple script automation tasks: such as deploy.sh one-click deployment, chmod x grant execution rights; 5. Custom Sh
How to check if a variable is an array in JS?Jul 24, 2025 am 03:58 AMTo determine whether the variable is an array type, the Array.isArray() method is preferred, and secondly, Object.prototype.toString.call() can be used. 1.Array.isArray(variable) returns true or false, suitable for modern browsers and Node.js; 2.Object.prototype.toString.call(variable)==='[objectArray]', compatible with old environments. Avoid using typeof and instanceof because they have flaws in judging arrays. Choose the right method according to your needs: Priority is given if there is no need to be compatible with old versions
JavaScript Dependency Management StrategiesJul 24, 2025 am 03:58 AMKeep dependency version consistent, update dependencies regularly, distinguish dependencies types, and use Monorepo to manage multi-project dependencies. 1. Use package-lock.json or yarn.lock to submit to Git to ensure environmental consistency; 2. Check the dependency tree regularly to avoid duplicate installation and conflicts; 3. Use npmoutdated or yarnoutdated to check for updates, prioritize security issues and evaluate the impact of major version upgrades; 4. Clearly distinguish dependencies and devDependencies to avoid misinstalling development tools in the production environment; 5. Use tools such as Lerna or Nx to uniformly manage shared dependencies and code of multiple projects to improve collaboration efficiency.
Advanced JavaScript Testing Strategies with Jest and PlaywrightJul 24, 2025 am 03:56 AMUse Jest's MockFunctions and Timers to control asynchronous behavior, and improve testing efficiency through jest.fn() and jest.useFakeTimers(); 2. Use Fixtures and PageObjectModel (POM) in Playwright to improve maintainability and encapsulate common operations and page logic; 3. Jest and Playwright can jointly achieve comprehensive coverage of unit tests and end-to-end tests; 4. Playwright's TraceViewer can be used to intuitively debug failed tests. These strategies respectively optimize testing efficiency, code structure, test level coverage and debugging capabilities, and are suitable for complex projects
How to Use Bun: The All-in-One JavaScript ToolkitJul 24, 2025 am 03:54 AMBun is a modern JavaScript runtime that can replace tools such as Node.js, npm and Webpack. Its core advantage lies in speed. 1. Bun is built on Zig, using the JavaScriptCore engine, which can directly run JavaScript and TypeScript files without additional configuration; 2. It has a built-in package manager, supports installation dependencies from npm, and speeds are 10-100 times faster than npm, and generates bun.lockb lock files; 3. Built-in native packager, supports minimization, environment variables, code segmentation and other functions, which can replace Webpack or esbuild; 4. Provides a quick test runner with Jest syntax, automatically searching
Real-time Communication with JavaScript WebSocketsJul 24, 2025 am 03:50 AMTo achieve real-time communication, the key to using JavaScript's WebSocket is to understand its basic usage and common scenarios. 1. Only one line of code is required to establish a connection: constsocket=newWebSocket('ws://example.com/socket');, using open, message, error, and close events to handle the connection status; 2. Send and receive data in JSON format, send through socket.send(), listen to message events to receive and parse data; 3. Handle disconnection and reconnection, you can automatically reconnect by listening to close and error events, combined with setTimeout,
ES Modules vs. CommonJS: A Detailed ComparisonJul 24, 2025 am 03:50 AMESModules (ESM) and CommonJS are two module systems of JavaScript. The main differences are syntax, loading mechanism, execution timing, environment support and interoperability. 1. Syntax, ESM uses import/export static declaration, and CommonJS uses require()/module.exports to dynamically assign values. 2. In terms of loading mechanism, ESM supports static analysis and tree-shaking. CommonJS is dynamically loaded at runtime, with high flexibility but not conducive to optimization. 3. In execution time, ESM can obtain the latest value through real-time binding; CommonJS cache module output may return part
Advanced Error Handling Strategies in JavaScript and Node.jsJul 24, 2025 am 03:47 AMDefinecustomerrorclasseslikeValidationErrorandDatabaseErrortoenablepreciseerrorhandlingusinginstanceofandimproveloggingconsistency.2.Usecentralizederror-handlingmiddlewareinExpress.jsbypassingerrorstonext()anddefiningaglobalerrorhandlertostandardizer


Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

SublimeText3 Chinese version
Chinese version, very easy to use

WebStorm Mac version
Useful JavaScript development tools

SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

SublimeText3 Mac version
God-level code editing software (SublimeText3)

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment






