前端基础(十六)_数组对象

简介: 本文详细介绍了JavaScript中数组对象的创建和操作方法,包括数组的增删改查、排序、去重、迭代等常用操作。

数组对象

1、创建数组
    // 字面量创建
    const arr = [1, 2, 3, 4, 5, 6]
    // 构造函数创建
    const arr2 = new Array(1, 2, 3, 4, 5, 6)
    const arr3 = Array(1, 2, 3, 4, 5, 6)

在这里插入图片描述

2.push (从数组末尾添加元素)

a.数组.push(要添加进数组的数组项)
b.作用:将要添加的数组项 添加到数组中
c.返回值是追加完后数组的长度

在这里插入图片描述
push完之后返回的是当前数组的长度length

3.pop(删除数组中的最后一项)

a.数组.pop()
b.作用:删除数组中的最后一项
c.返回值是被删除的数组项
在这里插入图片描述

4.unshift(将要添加的数组项添加到数组的开头)

a.用法:数组.unshift(要添加的数组项)
b.作用将要添加的数组项添加到数组的开头
c.返回值是添加完成后 数组的长度

在这里插入图片描述

5.shift(删除掉数组开头的数组项(第0项))

a.用法:数组.shift()
b.作用:删除掉数组开头的数组项(第0项)
c.返回被删除的数组项

在这里插入图片描述

6.splice

6.1删除
a.数组对象.Splice(要删除的起始下标,要删除的个数)
6.2替换
a.数组对象.Splice(要删除的起始下标,要删除的个数,要替换的数组项1,要替换的数组项2…)
6.3添加
a.数组对象.splice(要删除的起始下标,0,要添加的数组项1,要添加的数组项2…)
b.注意:添加的数组项会添加到 要删除的起始下标 的前面

    var arr = [1,2,3,4,5,6,7,8]
    arr.pop()//删除最后一项
    arr.push(1)//在最后添加 1项 为1
    arr.unshift('1')//在数组头添加义项 字符串1
    arr.shift()//删除第一项
    arr.splice(0,2) //删除 下标0开始 长度2
    arr.splice(1,0,888,999,666) //从下标1开始删除零项 添加三个
    arr.splice(1,2,111,222) //下标1开始删除2项 添加2项
    console.log(arr)
7.sort( 默认从小到大排序数组大小)
数组.sort(function(a,b){
    
        从小到大 return a-b;
        从大到小  return b-a;    
    })

在sort的返回值中
-1是从小到大 相当于 a-b
1是从大到小 相当于 b-a
在这里插入图片描述

8.数组去重

思路:拿当前项和后面项进行比较 相同 把后面的相同项去掉
在这里插入图片描述

9.join(组拼成成字符串的方法,方法不会改变原数组)

(1)用法:数组.join(‘拼接表示’) //不加标识 默认加逗号 , 拼接
(2)作用:将数组中的数组项 一一拼接起来,形成一个字符串,每一个数组项之间嵌入一个拼接标识
(3)Join是字符串的split的逆运算 split 切成数组 join 拼成字符串

在这里插入图片描述

10.数组的翻转 数组对象.reverse()

在这里插入图片描述
在这里插入图片描述
会改变原数组

11.数组对象.concat(数组2,数组3,…)

不会改变任何数组 这个方法会所有数组拼接一个新数组,返回出来

在这里插入图片描述

12.indexOf

(1)用法:数组.indexOf(‘指定的数组项’) 没有返回 -1
在这里插入图片描述
在这里插入图片描述

13.数组的迭代(循环)方法

(1)Every 返回true false
(2)some返回true false
(3)Filter 数组
(4)Map 数组
(5)forEach

        //1.every //每一个
        //数组.every(function(item,index,array){return 条件})
        //item 表示原数字项 index表示数组项对应下标 array表示原数组
        //作用:循环所有数组项,如果每一个数组项都满足return的条件,返回true 否则false
        var  arr= [1,2,3,4,5]
        var res = arr.every(function(item,index,array){
   
            return item>3;
        })
        console.log(res) //false
        //2.some  一些
        //用法和every一样
        //作用:循环所有数组项,只要有一个数组项满足return的条件,返回true 否则false
        var  arr1= [1,2,3,4,5]
        var res1 = arr.some(function(item,index,array){
   
            return item>4;
        })
        console.log(res1)//true
        //3.filter  过滤器
        //数组.filter(function(item,index,array){return 条件})
        //作用:循环数组中的数组项,将满足return 条件的数组项拿出来,存入一个新的数组中,最后将新数组返回出来    返回数组
        var  arr2= [1,2,3,4,5]
        var res2 = arr.filter(function(item,index,array){
   
            return item>4;
        })
        console.log(res2)
        //4.map  地图
        //数组.map(function(item,index){return 数据})
        //作用:将函数中返回的数据 作为新的数组的数组项  从而生成一个新数组 并返回这个新数组
        var  arr2= [1,2,3,4,5]
        var res2 = arr.map(function(item,index,array){
   
            return item*item;
        })
        console.log(res2)//[1,4,9,16,25]
        //5.forEach()
        //数组.forEach(function(item,index){return 直接对数组进行操作})
        var  arr4= [1,2,3,4,5];
        var res4 = arr4.forEach(function(item,index){
   
        console.log(item+'----->'+index)//在forEach这个循环迭代的方法中 没有return 直接跟要实行循
目录
相关文章
|
4月前
|
前端开发 开发者
new操作符背后的秘密:揭开Web前端对象创建的神秘面纱!
【8月更文挑战第23天】在Web前端开发中,`new`操作符是创建对象实例的核心。本文以`Person`构造函数为例,通过四个步骤解析`new`操作符的工作原理:创建空对象、设置新对象原型、执行构造函数并调整`this`指向、判断并返回最终对象。了解这些有助于开发者更好地理解对象实例化过程,从而编写出更规范、易维护的代码。
46 0
|
4月前
|
前端开发 JavaScript 开发者
【前端开发者的福音】彻底改变你编码习惯的神奇数组迭代技巧——从基础到进阶,解锁 JavaScript 数组迭代的N种姿势!
【8月更文挑战第23天】在Web前端开发中,数组是JavaScript中最常用的数据结构之一,掌握高效的数组迭代方法至关重要。本文详细介绍了多种数组迭代技巧:从基础的`for`循环到ES6的`for...of`循环,再到高阶方法如`forEach`、`map`、`filter`、`reduce`及`some`/`every`等。这些方法不仅能提高代码的可读性和维护性,还能有效优化程序性能。通过具体的示例代码,帮助开发者更好地理解和运用这些迭代技术。
43 0
|
21天前
|
存储 前端开发 JavaScript
前端中对象的深度应用与最佳实践
前端对象应用涉及在网页开发中使用JavaScript等技术创建和操作对象,以实现动态交互效果。通过定义属性和方法,对象可以封装数据和功能,提升代码的组织性和复用性,是现代Web开发的核心技术之一。
|
2月前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
2月前
|
JSON 前端开发 数据格式
前端的全栈之路Meteor篇(五):自定义对象序列化的EJSON介绍 - 跨设备的对象传输
EJSON是Meteor框架中扩展了标准JSON的库,支持更多数据类型如`Date`、`Binary`等。它提供了序列化和反序列化功能,使客户端和服务器之间的复杂数据传输更加便捷高效。EJSON还支持自定义对象的定义和传输,通过`EJSON.addType`注册自定义类型,确保数据在两端无缝传递。
|
2月前
|
人工智能 前端开发 JavaScript
拿下奇怪的前端报错(一):报错信息是一个看不懂的数字数组Buffer(475) [Uint8Array],让AI大模型帮忙解析
本文介绍了前端开发中遇到的奇怪报错问题,特别是当错误信息不明确时的处理方法。作者分享了自己通过还原代码、试错等方式解决问题的经验,并以一个Vue3+TypeScript项目的构建失败为例,详细解析了如何从错误信息中定位问题,最终通过解读错误信息中的ASCII码找到了具体的错误文件。文章强调了基础知识的重要性,并鼓励读者遇到类似问题时不要慌张,耐心分析。
|
3月前
|
前端开发 JavaScript
前端基础(十四)_Math对象
本文介绍了JavaScript中`Math`对象的常用方法,包括: 1. `Math.floor()`:向下取整,去掉小数部分。 2. `Math.ceil()`:向上取整,向上进一。 3. `Math.round()`:四舍五入,针对小数点后面第一位数字。 4. `Math.max()`:获取数字序列中的最大值。 5. `Math.min()`:获取数字序列中的最小值。 6. `Math.pow()`:计算某个数字的次方数。 7. `Math.sqrt()`:开根号。 8. `Math.random()`:生成一个0到1之间的随机数。
24 1
前端基础(十四)_Math对象
|
2月前
|
JSON 前端开发 数据格式
@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)
文章详细讲解了在SpringMVC中如何使用`@RequestMapping`进行路由映射,并介绍了前后端参数传递的多种方式,包括传递单个参数、多个参数、对象、数组、集合以及JSON数据,并且涵盖了参数重命名和从URL中获取参数的方法。
177 0
@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)
|
3月前
|
前端开发 JavaScript
前端基础(十五)_时间对象、字符串对象
本文介绍了JavaScript中时间对象的操作方法,包括获取和设置年、月、日、小时、分钟、秒等,以及如何格式化时间显示,同时提及了字符串对象的常用方法。
33 0
前端基础(十五)_时间对象、字符串对象
|
4月前
|
存储 前端开发 JavaScript
数组操作大揭秘:Web前端开发者必备技能!
【8月更文挑战第23天】本文介绍了JavaScript中数组的基本操作方法,包括创建、添加、删除元素、获取数组长度与特定索引的元素、修改元素以及判断元素是否存在等。此外还展示了如何利用 `concat()` 方法或扩展运算符合并数组。这些实用示例有助于前端开发者更好地理解和应用数组。
33 0