【JavaScript-数组全家福】

news2025/1/24 2:28:24

目录

前言

数组

1.创建 new Array数组

2.检测是否为数组

1.使用instanceof检测是否为数组

 2.使用Array.isArray()来检测

3.添加删除数组方法

4.筛选数组

5.数组排序

6.数组索引方法

 7.数组去重

8.数组转字符串

 写在最后


 

前言

博主是👦一个帅气的boy,你可以叫我山鱼君
Aic山鱼的个人主页:Aic山鱼的个人主页

如果这篇文章对你有帮助的话希望三连下👍⭐✍支持一下博主

Aic山鱼

a6aeee771b8b4a92b42be65c6ee920d3.png

 

数组

1.创建 new Array数组

数组可以直接使用字面量创建,也可以使用new Array进行创建,今天主要使用的是new Array

 <script>
        // 利用数组字面量创建数组
    var arr = [1,2,3,4];
    console.log(arr);
    // 创建空数组
    var arr0 = new Array();
    // 利用new Array来创建数组
    var arr1 = new Array(5);//表示这个数组的长度为5,而并不是这个里面的值是5
    console.log(arr1);
    var arr2 = new Array(1,2,3,4);//若要在里面盛放数组,则需要添两个及以上的数组哦
    console.log(arr2);
    console.log(arr1 instanceof Array);
    </script>

 24be52c1b42e4dd6969800305ec6a57f.png

2.检测是否为数组

如何来检测呢?

1.使用instanceof检测是否为数组

<script>
        // 利用数组字面量创建数组
    var arr = [1,2,3,4];
    console.log(arr);
    // 创建空数组
    var arr0 = new Array();
    // 利用new Array来创建数组
    var arr1 = new Array(5);//表示这个数组的长度为5,而并不是这个里面的值是5
    console.log(arr1);
    var arr2 = new Array(1,2,3,4);//若要在里面盛放数组,则需要添两个及以上的数组哦
    console.log(arr2);
    console.log(arr1 instanceof Array);
    </script>

 d72edb2d74f249559283b44daa06d8ce.png

 2.使用Array.isArray()来检测

    <script>
    // 2.利用Array.isArray来检测是否为数组
    var arr = [];
    var arr1 = {};
    console.log(Array.isArray(arr1));//返回值为false
    console.log(Array.isArray(arr));//返回值为true
    </script>

013b6085e3e54a79a2744481d7572ff7.png

3.添加删除数组方法

2aecc75e993245899bc7ab5f12e54cba.png

 push对应pop,unshift对应shift

    <script>
    // push()在数组的末尾添加新元素
    var arr = [1,2,3,4];
    arr.push(5,6);//在数组后面添加新的数组元素
    console.log(arr);//返回值为[1, 2, 3, 4, 5, 6]
    console.log(arr.push());// push的返回值是新数组的长度
    // unshift(),在数组的前面添加新元素
    arr.unshift('山鱼');// 在数组前面添加一个新数组元素
    console.log(arr);// 返回值为['山鱼', 1, 2, 3, 4, 5, 6]
    console.log(arr.unshift());// 返回新的数组长度 7
    // pop删除数组元素(删除最后一个,一次只能删除一个)
    arr.pop();// 删除最后一个数组
    console.log(arr);// 返回值为[1, 2, 3, 4, 5]
    console.log(arr.pop());// pop的返回值为
    // shift 删除数组的第一个元素 一次只能删除一个
    arr.shift();// 删除第一个元素
    console.log(arr); // 返回值为[1, 2, 3, 4]
    console.log(arr.shift()); // 返回值为所删除的数组元素
    </script>

4.筛选数组

利用push来进行实现

    <script>
    // 筛选出小于1000的数组元素
    // 方法1
    var arr = [100,3000,2322,90,999];
    var newArr = [];
    for(var i = 0;i < arr.length;i++){
        if(arr[i]<1000){
            newArr[newArr.length] = arr[i];
        }
    }
    console.log(newArr);
    // 方法2 ,直接用push添加到新数组中
    var arr1 = [100,3000,2322,777,888];
    var newArr1 = [];
    for(var i = 0;i < arr1.length;i++){
        if(arr1[i]<1000){
            newArr1.push(arr1[i])
        }
    }
    console.log(newArr1);
    </script>

5.数组排序

利用sort进行数组的排序,多位数可以进行sort的深度使用

<script>
    // 1.数组反转
    var arr = [1,2,3,4,5];
    arr.reverse();
    console.log(arr);
    //2.数组冒泡排序 注:sort的冒泡排序仅限于个位数
    var arr1 = [2,5,3,9,1,0];
    arr1.sort();
    console.log(arr1);
    // 3.怎么才能用sort进行多位数组的排序呢?其实在sort中有一个固定的用法就是下面这么用
    var arr2 = [11,21,23,434,554,0];// 如果只用sort肯定会乱序,所以要用到下面这个
    arr2.sort(function(a,b){
        return a - b; // 按照升序进行排序,如果是b - a那么就是按照降序进行排序
    })
    console.log(arr2);
</script>

6.数组索引方法

b06b462105b648628d2042e8382844fa.png

 具体使用方法

  <script>
    // 获取第一个索引下标
    // indexOf() 的作用就是返回数组元素的索引号
    var arr = ['山鱼','潘安','唐伯虎'];
    console.log(arr.indexOf('山鱼'));// 返回的索引下标为0
    // 如果有俩相同的值呢?
    var arr1 = ['山鱼','潘安','唐伯虎','山鱼'];
    console.log(arr1.indexOf('山鱼'));//  会返回靠前的那个数组元素的索引号哦!
    // 如果没有所查找的数组元素呢?
    console.log(arr1.indexOf('李逵'));// 如果没有所查找的数组元素,则返回-1
    // 获取最后一个索引下标
    console.log(arr1.lastIndexOf('山鱼'));// 返回值为3
    console.log(arr.lastIndexOf('李逵'));// 如果没有所查找的数组元素,则仍然返回-1
    </script>

 7.数组去重

1.目标:把旧数组里面不重复的元素选取出来放到新数组中,重复的元素只保留一个,放到新数组中去重。 2.核心算法:先遍历旧数组,然后拿着旧数组元素去查询新数组,如果该元素在新数组里面没有出现过就添加,否则就不添加。3.利用indexOf()来实现,如果返回值为-1,那么就说明里面没有该数组元素,就把没有的值放到新数组中。

<script>
    function unique (arr) {
        var newArr = [];
        for(var i = 0; i < arr.length;i++){
            if(newArr.indexOf(arr[i]) === -1){
                newArr.push(arr[i]);
            }
        }return newArr;
    }
    var firstArr = unique([1,2,3,4,5,3,2,12,1,4,0]);
    console.log(firstArr);
    </script>

 这里的  newArr.push(arr[i])  也可以换成  newArr[newArr.length] = arr[i]  

8.数组转字符串

5cf7a997d17643a49f73ce0655988ecc.png

 一般使用join()的比较多

    <script>

​    // 用toString进行转换

​    var arr = [1,2,3];

​    console.log(arr.toString());

​    // join(分隔符)join()如果括号里什么都不写,默认的是逗号

​    console.log(arr.join('、'));

​    </script>

fee14ef63991433699a8b878fa20374a.png

 写在最后

原创✨:还希望各位大佬支持一下
点赞👍:您的赞赏是我前进的动力!
收藏⭐:您的支持我是创作的源泉!
评论✍:您的建议是我改进的良药!

山鱼🦈的社区:欢迎大家-山鱼社区 !

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408012.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

前端案例:飞机大战( js+dom 操作,代码完整,附图片素材)

目录 一、案例效果 二、实现思路 三、完整代码详细注释 四、涉及要点 五、案例素材 一、案例效果 二、实现思路 创建游戏背景板&#xff1b;创建我方战机&#xff0c;鼠标进入游戏面板后其随鼠标轨迹运动&#xff1b; onmousemove创建子弹&#xff0c;让子弹周期性的在战…

Grafana alert预警+钉钉通知

1 Grafana alert预警 如下图所示&#xff0c;主要是前3步&#xff0c;设置alert rules、contact points 、notification policies。alert rules主要设置触发警告的规则&#xff1b;contact points设置通过什么发送预警&#xff0c;如钉钉&#xff1b;notification policies 将…

鼠标事件、键盘事件,你听过嘛?

&#x1f4dc;个人简介 ⭐️个人主页&#xff1a;微风洋洋&#x1f64b;‍♂️ &#x1f351;博客领域&#xff1a;编程基础,后端 &#x1f345;写作风格&#xff1a;干货,干货,还是tmd的干货 &#x1f338;精选专栏&#xff1a;【JavaScript】 &#x1f680;支持洋锅&#xff…

Chrome-谷歌浏览器多开教程

Chrome谷歌浏览器多开教程在我们的日常生活中&#xff0c;我们常常在某一时刻需要在进行多个账号的查看&#xff0c;例如在跨境电商时&#xff0c;我们常常需要开多各店铺页面&#xff0c;又或者&#xff0c;我们在玩游戏时&#xff0c;需要开多个账号同时进行运作&#xff0c;…

一文通透从输入URL到页面渲染的全过程----高频面试

一文通透从输入URL到页面渲染的全过程----高频面试 喜欢大海 喜欢夕阳 写下便是永恒 文章目录一文通透从输入URL到页面渲染的全过程----高频面试重温进程与线程什么是进程什么是线程进程和线程的区别多进程和多线程JS为什么是单线程浏览器相关浏览器是多进程的浏览器包含哪些进…

jeecg-boot首页加载速度优化全过程

优化结果 前端和后端部署在轻量服务器: 以下结果都是三次强刷得到的 优化前: 优化后: 优化方案 开启Nginx压缩 方案来自于:jeecg官方文档 作用:通过nginx内置的压缩策略来压缩静态资源&#xff0c;提升资源请求速度 在nginx.conf 的 http 中加入以下片断: # gzip …

【微信小程序 | 实战开发】常用的视图容器类组件介绍和使用(1)

个人名片: 🐼作者简介:一名大二在校生,喜欢编程🎋 🐻‍❄️个人主页🥇:小新爱学习. 🐼个人WeChat:hmmwx53 🕊️系列专栏:🖼️ 零基础学Java——小白入门必备重识C语言——复习回顾

component lists rendered with v-for should have explicit keys

component lists rendered with v-for should have explicit keys 发现问题 关键报错 (Emitted value instead of an instance of Error) : component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info. 具体…

VUE之Element-ui文件上传详解

引言 对于文件上传&#xff0c;在开发主要涉及到以下两个方面&#xff1a; 单个文件上传和表单一起实现上传&#xff08;这种情况一般都是文件上传之后&#xff0c;后端返回保存在服务器的文件名&#xff0c;最后和我们的表单一起上传&#xff09; 单文件上传 element-ui中…

Cesium加载离线地图和离线地形

文章目录 前言一、Cesium加载离线地图 1.1 下载数据2.2 数据处理2.3 地图发布2.4下载速度改进 二、Cesium加载离线地形 2.1 下载数据2.2 数据处理2.3 地形发布2.4 遇到的问题 前言 直接把地图数据切片&#xff0c;然后通过nginx以静态服务方式发布。 使用工具&#xff1a;…

this.$emit使用方法【前端技术】

this.$emit()主要用于子组件向父组件传值。 下面就给大家举一个实际开发中使用到的案例。 需求&#xff1a; 点击关联项目&#xff0c;弹出关联项目数据进行选择一条数据&#xff0c;点击确定&#xff0c;项目编号会回显到关联项目中。 1新增页面 2 新增页面中点击关联项目弹出…

vue3全局自定义指令实现按钮权限控制

1. 文档介绍的全局自定义指令 在Vue的模板语法中我们除了使用&#xff1a;v-show、v-for、v-model等&#xff0c;Vue其实 也允许我们来自定义自己的指令。 1&#xff09;注意&#xff0c;在 Vue 中&#xff0c;代码复用和抽象的主要形式是组件。 2&#xff09;然而&#xff0c…

HTML+CSS实现搜索框

HTMLCSS实现搜索框&#xff1a; 需求分析&#xff1a; 1、输入框焦点事件 onfocus:成为焦点, 点击输入框的时候&#xff0c;出现闪烁光标&#xff0c;此时可以输入内容。 onblur :失去焦点, 点击页面空白区域&#xff0c;光标消失。此时不可以输入内容。 2、获取元素 3、…

vite配置@别名,以及如何让vscode智能提示路经

vite配置别名 vite.config.ts import { defineConfig } from vite import vue from vitejs/plugin-vue// 配置别名import { resolve } from "path"; // https://vitejs.dev/config/ export default defineConfig({plugins: [vue()],// ↓解析配置resolve: {// ↓路…

HTML基础之form表单

目录 一&#xff1a;表单属性 1 name 属性 2 action属性 3 method属性 4 target属性 5 enctype属性 二&#xff1a;表单对象 1 input标签 2 多行文本textarea 3 下拉列表select 4 表单控件&#xff08;元素&#xff09;button 5 表单控件&#xff08;元素&#xff…

Vuex持久化插件(vuex-persistedstate)

为什么使用持久化 目的: 让在vuex中管理的状态数据同时储存在本地。可免去自己储存的环节。 在开发的过程中&#xff0c;像用户信息&#xff08;名字&#xff0c;头像&#xff0c;token&#xff09;需要vuex中储存且需要本地储存再例如&#xff0c;购物车如果需要未登录状态下…

Router-view

我们都知道&#xff0c;路由指的是组件和路径的一种映射关系。Router-view也被称为路由的出口,今天我们就探讨下如何去使用路由出口。 也就是: 路径--------------------------------------------------------------->页面 可以把router-view理解成一类代码存放的位置。 …

vue3项目中使用three.js

vue3项目中使用three.js前言一、three.js是什么&#xff1f;二、vue3中下载与安装three.js三、操作步骤1.创建场景2.创建物体3.添加光源4.添加相机5.开始渲染四、myThree.vue源代码五、效果图1.单个模型2.多个模型总结前言 在vue3项目中&#xff0c;通过three.js使用了一段短小…

java 课程设计——银行管理系统

银行管理系统&#xff08;java&#xff09; 环境&#xff1a; idea2020 jdk1.8 能实现的功能&#xff1a; 1.注册账户 2.登录 3.查询账户信息 4.存款 5.取款 6.向另一个账户转账 7.修改账户密码 8.注销账户 项目结构 项目演示 1.主页面&#xff1a; 2.注册账号&#xff1a;…

多行文本溢出显示省略号

文本溢出显示省略号分两种情况&#xff0c;单行文本溢出显示省略号&#xff08;参考上篇文章https://blog.csdn.net/qq_43687594/article/details/123511873&#xff09;&#xff0c;另外一种就是多行文本溢出显示省略号。 多行文本显示省略号有两种办法 第一种&#xff1a; …