js数组Array的元素增删操作

简介: js数组Array的元素增删操作

数组Array 的函数定义


Array<T>
属性:
数组长度 length: number;
常用方法:
尾部插入 push(...items: T[]): number;
尾部弹出 pop(): T | undefined;
头部弹出 shift(): T | undefined;
头部插入 unshift(...items: T[]): number;
删除元素 splice(start: number, deleteCount?: number): T[];
插入元素 splice(start: number, deleteCount: number, ...items: T[]): T[];
合并数组 concat(...items: ConcatArray<T>[]): T[];
数组切片 slice(start?: number, end?: number): T[];
转字符串 toString(): string;
分隔符拼接 join(separator?: string): string;
反转数组 reverse(): T[];
元素排序 sort(compareFn?: (a: T, b: T) => number): this;

代码示例


// 便于演示,简写
function log(obj){
    console.log(obj);
}
// 初始数组,所有操作均以上一步操作为基础
var list = [];
// 尾部插入
let ret1 = list.push(0, 1, 2, 3);
log(ret1); // 4
log(list); // [ 0, 1, 2, 3 ]
// 尾部弹出
let ret2 = list.pop();
log(ret2); // 3
log(list); // [ 0, 1, 2 ]
// 头部弹出
let ret3 = list.shift();
log(ret3); // 0
log(list); // [ 1, 2 ]
// 头部插入
let ret4 = list.unshift(5, 6, 7);
log(ret4); // 5
log(list); // [ 5, 6, 7, 1, 2 ]
// 删除元素
let newList1 = list.splice(1, 2);
log(newList1);  // [ 6, 7 ]
log(list);     //  [ 5, 1, 2 ]
// 插入元素
let newList2 = list.splice(1, 0, 8, 9);
log(newList2);  // []
log(list);     //  [ 5, 8, 9, 1, 2 ]
// 合并两个数组
let newList3 = list.concat([8, 9, 10]);
log(newList3);  // [ 5, 8, 9, 1, 2, 8, 9, 10 ]
log(list);     //  [ 5, 8, 9, 1, 2 ]
// 数组切片[start, end)
let newList4 = list.slice(1, 3);
log(newList4);  // [ 8, 9 ]
log(list);      // [ 5, 8, 9, 1, 2 ]
// 转字符串
[1, 2, 3].toString()  // 1,2,3
// 分隔符拼接
[1, 2, 3].join('|')  // 1|2|3
// 反转数组
let list = [2, 1, 3]
list.reverse()
log(list)
// [ 3, 2, 1 ]
// 元素排序
list.sort()
log(list)
// [ 1, 2, 3 ]

数组排序,指定排序规则


let list = [
    {
        name: "Tom",
        age: 20
    },
    {
        name: "Jack",
        age: 18
    },
    {
        name: "Steve",
        age: 25
    }
]
// 元素排序, 按照年龄age 从小到大排序
list.sort((a, b) => {
    return a.age - b.age;
})
console.log(list);
/**
[ { name: 'Jack', age: 18 },
  { name: 'Tom', age: 20 },
  { name: 'Steve', age: 25 } ]
 */


相关文章
|
29天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
16天前
|
存储 Go 索引
go语言中的数组(Array)
go语言中的数组(Array)
100 67
|
1月前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
2月前
|
人工智能 前端开发 JavaScript
拿下奇怪的前端报错(一):报错信息是一个看不懂的数字数组Buffer(475) [Uint8Array],让AI大模型帮忙解析
本文介绍了前端开发中遇到的奇怪报错问题,特别是当错误信息不明确时的处理方法。作者分享了自己通过还原代码、试错等方式解决问题的经验,并以一个Vue3+TypeScript项目的构建失败为例,详细解析了如何从错误信息中定位问题,最终通过解读错误信息中的ASCII码找到了具体的错误文件。文章强调了基础知识的重要性,并鼓励读者遇到类似问题时不要慌张,耐心分析。
|
2月前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
39 2
|
2月前
|
存储 Java
Java“(array) <X> Not Initialized” (数组未初始化)错误解决
在Java中,遇到“(array) &lt;X&gt; Not Initialized”(数组未初始化)错误时,表示数组变量已被声明但尚未初始化。解决方法是在使用数组之前,通过指定数组的大小和类型来初始化数组,例如:`int[] arr = new int[5];` 或 `String[] strArr = new String[10];`。
95 2
|
2月前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
29 3
|
2月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
80 4
|
2月前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
46 4
|
2月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
49 1
下一篇
DataWorks