JavaScript学习笔记（三）

19、JavaScript 数组排序

19.1 数组排序：sort()

  • sort() 方法以字母顺序对数组进行排序：

  <p id="demo"></p>
  <script>
    var cars01 = ["Apple", "City", "Dog", "Bad"];
    document.getElementById('demo').innerHTML = cars01.sort();;
  </script>

运行效果：Apple,Bad,City,Dog

19.2 反转数组：reverse()

（1）数组反转：


  <p id="demo"></p>
  <script>
    var cars01 = ["Apple", "City", "Dog", "Bad"];
    document.getElementById('demo').innerHTML = cars01.reverse();;
  </script>

运行效果：Bad,Dog,City,Apple

（2）您可以使用它以降序对数组进行排序：

<p id="demo"></p>
  <script>
    var cars01 = ["Apple", "City", "Dog", "Bad"];
    document.getElementById('demo').innerHTML = cars01.sort().reverse();
  </script>

运行效果：Dog,City,Bad,Apple

19.3 比值函数

比较函数的目的是定义另一种排序顺序。

比较函数应该返回一个负，零或正值，这取决于参数：

function(a, b){return a-b}

当 sort() 函数比较两个值时，会将值发送到比较函数，并根据所返回的值（负、零或正值）对这些值进行排序。

19.4 数字排序

默认地，sort() 函数按照字符串顺序对值进行排序。

该函数很适合字符串（“Apple” 会排在 “Banana” 之前）。

不过，如果数字按照字符串来排序，则 “25” 大于 “100”，因为 “2” 大于 “1”。

正因如此，sort() 方法在对数值排序时会产生不正确的结果。

我们通过一个比值函数来修正此问题：
（1）sort()实现数字升序：

<body>
  <button onclick="myFunction()">点击</button>

  <p id="demo"></p>
  <script>
    var nums=[40,5,10,20,100,1];
    document.getElementById('demo').innerHTML = nums;
    function myFunction() {
      nums.sort(function(a,b){return a-b});
      document.getElementById('demo').innerHTML =nums;
    }
  </script>
</body>

运行效果：1,5,10,20,40,100

（2）sort()实现数字降序：

<body>
  <button onclick="myFunction()">点击</button>

  <p id="demo"></p>
  <script>
    var nums=[40,5,10,20,100,1];
    document.getElementById('demo').innerHTML = nums;
    function myFunction() {
      nums.sort(function(a,b){return b-a});
      document.getElementById('demo').innerHTML =nums;
    }
  </script>
</body>

运行效果：100,40,20,10,5,1

19.5 以随机顺序排序数组

<body>
  <button onclick="myFunction()">点击</button>

  <p id="demo"></p>
  <script>
    var nums=[40,5,10,20,100,1];
    document.getElementById('demo').innerHTML = nums;
    function myFunction() {
      nums.sort(function(a,b){return 0.5-Math.random()});
      document.getElementById('demo').innerHTML =nums;
    }
  </script>
</body>

19.6 查找最高（或最低）的数组值

JavaScript 不提供查找数组中最大或最小数组值的内建函数。

不过，在对数组进行排序之后，您能够使用索引来获得最高或最低值。

（1）sort()升序排序：

<body>
  <button onclick="myFunction()">点击</button>

  <p id="demo"></p>
  <script>
    var nums=[40,5,10,20,100,1];
    document.getElementById('demo').innerHTML = nums;
    function myFunction() {
      nums.sort(function(a,b){return a-b});
      document.getElementById('demo').innerHTML =nums[nums.length-1];//最大值
        //document.getElementById('demo').innerHTML =nums[0];//最小值
    }
  </script>
</body>

（2）sort()降序排序：

<body>
  <button onclick="myFunction()">点击</button>

  <p id="demo"></p>
  <script>
    var nums=[40,5,10,20,100,1];
    document.getElementById('demo').innerHTML = nums;
    function myFunction() {
      nums.sort(function(a,b){return b-a});
      // document.getElementById('demo').innerHTML =nums[nums.length-1];//最小值
      document.getElementById('demo').innerHTML =nums[0];//最大值
    }
  </script>
</body>

(3)对数组使用 Math.max():

<body>
  <button onclick="myFunction()">点击</button>

  <p id="demo"></p>
  <script>
    var nums=[40,5,10,20,100,1];
    document.getElementById('demo').innerHTML = nums;
    function myFunction() {
      // document.getElementById('demo').innerHTML =Math.max.apply(null,nums);//最大值
      document.getElementById('demo').innerHTML =Math.min.apply(null,nums);//最小值
    }
  </script>
</body>

（4）遍历（最大值）：


  <body>
    <!-- <button οnclick="myFunction()">点击</button> -->

    <p>最大值为：<span id="demo"></span></p>
    <script>
      var nums = [40, 5, 10, 20, 100, 2];
      // document.getElementById("demo").innerHTML = nums;
      document.getElementById("demo").innerHTML = myFunction(nums);
      function myFunction(array) {
        var len = array.length;
        var max = -Infinity;
        while (len--) {
          if (array[len] > max) {
            max = array[len];
          }
        }
        return max;
      }
    </script>
  </body>

19.7 排序对象数组

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <button onclick="myFunction()">点击</button>

    <p><span id="demo"></span></p>
    <script>
      var nums = [
        { type: "BMW", year: 2017 },
        { type: "Audi", year: 2019 },
        { type: "porsche", year: 2018 },
      ];
      showData();
      function myFunction() {
        nums.sort(function (a, b) {
          return a.year - b.year;
        });
        showData();
      }

      function showData() {
        document.getElementById("demo").innerHTML =
          nums[0].type +
          " " +
          nums[0].year +
          "<br>" +
          nums[1].type +
          " " +
          nums[1].year +
          "<br>" +
          nums[2].type +
          " " +
          nums[2].year +
          "<br>";
      }
    </script>
  </body>
</html>

运行效果：
BMW 2017
porsche 2018
Audi 2019

20、JavaScript 数组迭代

  • 数组迭代方法对每个数组项进行操作。

20.1 Array.forEach()

  • forEach() 方法为每个数组元素调用一次函数（回调函数）。

注释：该函数接受 3 个参数：

  • 项目值：value
  • 项目索引：index（可省略）
  • 数组本身：array（可省略）
  <body>
    <!-- <button οnclick="myFunction()">点击</button> -->

    <p><span id="demo"></span></p>
    <script>
      var text = "";
      var nums = [1, 20, 15, 6, 100];
      nums.forEach(MyFunction);
      document.getElementById("demo").innerHTML = text;
      // function MyFunction(value, index, array) {
      //   text = text + value + "<br>";
      // }
      //或者
      function MyFunction(value) {
        text = text + value + "<br>";
      }
    </script>
  </body>

运行效果：
1
20
15
6
100

20.2 Array.map()

  • 返回新数组

  • map() 方法通过对每个数组元素执行函数来创建新数组。

  • map() 方法不会对没有值的数组元素执行函数。

  • map() 方法不会更改原始数组。

请注意，该函数有 3 个参数：

  • 项目值：value
  • 项目索引： index,（可省略）
  • 数组本身：array（可省略）

示例：这个例子将每个数组值乘以2：

 <body>
    <p><span id="demo"></span></p>
    <script>
      var text = "";
      var nums = [1, 20, 15, 6, 100];
      var nums2 = nums.map(MyFunction);
      document.getElementById("demo").innerHTML = nums2;
      function MyFunction(value, index, array) {
        return value * 2;
      }
      //或者
      // function MyFunction(value) {
      //   return value * 2;
      // }
    </script>
  </body>

运行效果：2,40,30,12,200

20.3 Array.filter()

  • 返回新数组
  • filter() 方法创建一个包含通过测试的数组元素的新数组。（筛选出满足条件的元素组成一个新的数组）

请注意此函数接受 3 个参数：

  • 项目值：value
  • 项目索引： index,（可省略）
  • 数组本身：array（可省略）

示例：这个例子用值大于 18 的元素创建一个新数组：

<body>
    <p><span id="demo"></span></p>
    <script>
      var text = "";
      var nums = [1, 20, 15, 6, 100];
      var nums2 = nums.filter(MyFunction);
      document.getElementById("demo").innerHTML = nums2;
      function MyFunction(value, index, array) {
        return value > 18;
      }
    </script>
  </body>

运行效果：20,100

20.4 Array.reduce()

  • 返回单个值

  • reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值。

  • reduce() 方法在数组中从左到右工作。

  • reduce() 方法不会减少原始数组。

请注意此函数接受 4 个参数：

  • 总数（初始值/先前返回的值）：total
  • 项目值： value
  • 项目索引： index
  • 数组本身：tarray

示例：求数组元素总和：

<body>
    <p><span id="demo"></span></p>
    <script>
      var nums = [1, 20, 15, 6, 100];
      //返回一个值
      var total = nums.reduce(MyFunction);
      document.getElementById("demo").innerHTML = "总和=" + total;
      function MyFunction(total, value, index, array) {
        return total + value;
      }
       //或者
      // function MyFunction(total, value) {
      //   return total + value;
      // }
    </script>
  </body>

20.5 Array.reduceRight()

  • 返回单个值
  • 和 Array.reduce()工作原理一样，不过reduceRight()在数组中从右到左工作。

20.6 Array.every()

  • 返回布尔值
  • every() 方法检查所有数组值是否通过测试。

请注意此函数接受 3 个参数：

  • 项目值
  • 项目索引
  • 数组本身

示例：这个例子检查所有数组值是否大于 18：

 <body>
    <p><span id="demo"></span></p>
    <script>
      var nums = [1, 20, 15, 6, 100];
      //返回一个布尔值
      var isSatisfy = nums.reduce(MyFunction);
      document.getElementById("demo").innerHTML = "是否满足：" + isSatisfy;
      function MyFunction(value, index, array) {
        return value > 18;
      }
      //或者
      // function MyFunction( value) {
      //   return  value>18;
      // }
    </script>
  </body>

运行结果：是否满足：false

20.7 Array.some()

  • 返回布尔值
  • some() 方法检查某些数组值是否通过了测试。

请注意此函数接受 3 个参数：

  • 项目值
  • 项目索引
  • 数组本身
 <body>
    <p><span id="demo"></span></p>
    <script>
      var nums = [1, 20, 15, 6, 100];
      //返回一个布尔值
      var isSatisfy = nums.some(MyFunction);
      document.getElementById("demo").innerHTML = "是否满足：" + isSatisfy;
      function MyFunction(value, index, array) {
        return value > 18;
      }
      //或者
      // function MyFunction( value) {
      //   return  value>18;
      // }
    </script>
  </body>

运行效果：是否满足：true

20.8 Array.indexOf()

  • 返回int值（位置）
  • indexOf() 方法在数组中搜索元素值并返回其位置。
  • 如果未找到项目，Array.indexOf() 返回 -1。
  • 如果项目多次出现，则返回第一次出现的位置。

请注意此函数接受 2个参数：

array.indexOf(item, start)
  • item：必需。要检索的项目。
  • start：可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到结尾。

示例：检索数组中的项目 “15”：

 <body>
    <p><span id="demo"></span></p>
    <script>
      var nums = [1, 20, 15, 6, 100];

      var index = nums.indexOf(15);
      document.getElementById("demo").innerHTML = "位置：" + index;
    </script>
  </body>

运行效果：位置：2

20.9 Array.lastIndexOf()

  • 返回int值（位置）
  • Array.lastIndexOf() 与 Array.indexOf() 类似，但是从数组结尾开始搜索。

请注意此函数接受 2个参数：

array.lastIndexOf(item, start)
  • item：必需。要检索的项目。
  • start：可选。从哪里开始搜索。

示例：查找元素中最后一个15的位置：

<body>
    <p><span id="demo"></span></p>
    <script>
      var nums = [1, 20, 15, 6, 100, 15];

      var index = nums.lastIndexOf(15);
      document.getElementById("demo").innerHTML = "位置：" + index;
    </script>
  </body>

运行效果：位置：5

20.10 Array.find()

  • 返回一个满足要求元素值
  • find() 方法返回通过测试函数的第一个数组元素的值。

请注意此函数接受 3 个参数：

  • 项目值
  • 项目索引
  • 数组本身

示例：查找第一个大于18的元素：

 <body>
    <p><span id="demo"></span></p>
    <script>
      var nums = [1, 20, 15, 6, 100, 15];

      var index = nums.find(myFunction);
      document.getElementById("demo").innerHTML =
        "第一个大于18的元素为：" + index;
      function myFunction(value, index, array) {
        return value > 18;
      }
    </script>
  </body>

运行结果：第一个大于18的元素为：20

20.11 Array.findIndex()

  • 返回一个int值（位置）
  • findIndex() 方法返回通过测试函数的第一个数组元素的索引。

请注意此函数接受 3 个参数：

  • 项目值
  • 项目索引
  • 数组本身

示例：这个例子查找大于 18 的第一个元素的索引：

<body>
    <p><span id="demo"></span></p>
    <script>
      var nums = [1, 20, 15, 6, 100, 15];
      var index = nums.findIndex(myFunction);
      document.getElementById("demo").innerHTML =
        "第一个大于18的元素的位置为：" + index;
      function myFunction(value, index, array) {
        return value > 18;
      }
    </script>
  </body>

运行效果：第一个大于18的元素的位置为：1

21 JavaScript 数组 Const

JavaScript 数组 Const

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

将深度相机的实时三维坐标数据保存为excel文档（Python+Pyrealsense2+YOLOv8）

将深度相机的实时三维坐标数据保存为excel文档（Python+Pyrealsense2+YOLOv8）

一、如何将数据保存为excel文档 1.excel文件库与相关使用 &#xff08;1&#xff09;导入相应的excel文件库&#xff0c;导入前先要进行pip安装&#xff0c;pip install xlwt import xlwt # 导入用于创建和写入Excel文件的库 (2) 建立一个excel文档&#xff0c;并在第0行写…
阅读更多...
Python | Leetcode Python题解之第198题打家劫舍

Python | Leetcode Python题解之第198题打家劫舍

题目&#xff1a; 题解&#xff1a; class Solution:def rob(self, nums: List[int]) -> int:if not nums:return 0size len(nums)if size 1:return nums[0]first, second nums[0], max(nums[0], nums[1])for i in range(2, size):first, second second, max(first nu…
阅读更多...
读AI新生：破解人机共存密码笔记12人工智能辩论

读AI新生：破解人机共存密码笔记12人工智能辩论

1. 言论 1.1. 对一个人终身职业的威胁&#xff0c;可能会使一个非常聪明的、通常很有思想的人说出一些话&#xff0c;但在进一步分析后&#xff0c;他们很可能希望收回这些话 1.2. 电子计算器在算术方面是“超人”&#xff0c;但是计算器并没有接管世界&#xff0c;因此&…
阅读更多...
IMX6ULL SD卡启动uboot+kernel+rootfs

IMX6ULL SD卡启动uboot+kernel+rootfs

目录 1. 背景说明 2.SD卡启动 2.1准备条件 2.2 对SD卡分区格式化 2.3 制作sd卡镜像 3.效果测试 1. 背景说明 网络上绝大数教程&#xff0c;教大家把uboot烧录到SD卡&#xff0c;然后uboot启动后&#xff0c;通过TFTP下载kernel和设备树&#xff0c;然后通过nfs挂载文件系…
阅读更多...
laravel的日志使用说明

laravel的日志使用说明

文章目录 了解系统的默认支持多个通道时它们的关系如何使用驱动 了解系统的默认支持 Laravel 日志基于「 通道 」和 「 驱动 」的。那么这个通道是干嘛的&#xff1f;驱动又是干嘛的&#xff1f; 通道 &#xff1a; 1.它表示了某种日志格式化的方式&#xff08;或可理解为某个…
阅读更多...
理解CNN模型如何学习

理解CNN模型如何学习

深度学习模型常常被认为是不可解释的。但是人们正在探索不同的技术来解释这些模型内发生了什么。对于图像&#xff0c;由卷积神经网络学习的特征是可解释的。我们将探索两种流行的技术来理解卷积神经网络。 可视化中间层的输出 可视化中间层的输出将有助于我们理解输入图像如何…
阅读更多...
办公软件的答案？ONLYOFFICE 桌面应用编辑器会是最好用的 Office 软件？ONLYOFFICE 桌面编辑器使用初体验

办公软件的答案？ONLYOFFICE 桌面应用编辑器会是最好用的 Office 软件？ONLYOFFICE 桌面编辑器使用初体验

文章目录 &#x1f4cb;前言&#x1f3af;什么是 ONLYOFFICE&#x1f3af; 主要功能介绍及 8.1 新功能体验&#x1f3af; 在线体验&#x1f4dd;最后 &#x1f4cb;前言 提到办公软件&#xff0c;大家最常用的可能就是微软的 Microsoft Office 和国产的 WPS Office。这两款软件…
阅读更多...
使用API有效率地管理Dynadot域名，为文件夹中的域名进行域名停放

使用API有效率地管理Dynadot域名，为文件夹中的域名进行域名停放

关于Dynadot Dynadot是通过ICANN认证的域名注册商&#xff0c;自2002年成立以来&#xff0c;服务于全球108个国家和地区的客户&#xff0c;为数以万计的客户提供简洁&#xff0c;优惠&#xff0c;安全的域名注册以及管理服务。 Dynadot平台操作教程索引&#xff08;包括域名邮…
阅读更多...
解锁高效办公:ONLYOFFICE新版本8.1功能揭秘与个人实战体验

解锁高效办公:ONLYOFFICE新版本8.1功能揭秘与个人实战体验

文章目录 &#x1f4af;ONLYOFFICE 桌面编辑器 8.1 ✍1 新增功能介绍✍2 轻松编辑器PDF文件&#x1f353;2.1 PDF新增编辑器操作&#x1f353;2.2 PDF新增表单操作 ✍3 用幻灯片版式快速修改幻灯片✍4 无缝切换文档编辑、审阅和查看模式✍5 改进从右至左语言的支持 & 新的本…
阅读更多...
C++——布隆过滤器

C++——布隆过滤器

目录 布隆过滤器的提出 布隆过滤器的概念 布隆过滤器的基本原理和特点 布隆过滤器的实现 布隆过滤器的插入 布隆过滤器的查找 布隆过滤器的删除 布隆过滤器的优点 布隆过滤器的缺陷 布隆过滤器使用场景 布隆过滤器的提出 在注册账号设置昵称的时候&#xff0c;为了保证…
阅读更多...
【已解决】SpringBoot图片更新需重启服务器才能显示

【已解决】SpringBoot图片更新需重启服务器才能显示

问题描述 1、更新头像&#xff0c;并跳转回列表页&#xff0c;发现显示不出来 2、但是前端获取用户头像的信息是在加载页面就会被调用的&#xff0c;同时前端也不存在所谓的缓存问题&#xff0c;因为没有动这部分代码。 但查看响应是能获得正确的信息&#xff08;前端打印图片…
阅读更多...
Docker 下载与安装以及配置

Docker 下载与安装以及配置

安装yum工具 yum install -y yum-ulits配置yum源 阿里云源 yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo安装Docker 17.03后为两个版本&#xff1a; 社区版&#xff08;Community Edition&#xff0c;缩写为 CE&#x…
阅读更多...
内网一键部署k8s-kubeshpere，1.22.12版本

内网一键部署k8s-kubeshpere，1.22.12版本

1.引言 本文档旨在指导读者在内网环境中部署 Kubernetes 集群。Kubernetes 是一种用于自动化容器化应用程序部署、扩展和管理的开源平台&#xff0c;其在云原生应用开发和部署中具有广泛的应用。然而&#xff0c;由于一些安全或网络限制&#xff0c;一些组织可能选择在内部网络…
阅读更多...
【踩坑】修复循环设置os.environ[‘CUDA_VISIBLE_DEVICES‘]无效

【踩坑】修复循环设置os.environ[‘CUDA_VISIBLE_DEVICES‘]无效

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;欢迎[点赞、收藏、关注]哦~ 问题示例 for gpus in [0, 1, 2, 3, 4, 5, 6, 7]:os.environ[CUDA_VISIBLE_DEVICES] gpusprint(torch.cuda.get_device_name(0)) 始终将使用第…
阅读更多...
专业技能篇---计算机网络

专业技能篇---计算机网络

文章目录 前言计算机网络基础一、网络分层模型 HTTP一、从输入URL到页面显示发生了什么&#xff1f;二、Http的状态码有哪些&#xff1f;三、 HTTP与HTTPS有什么区别&#xff1f;四、URI 和 URL 的区别是什么?五、Cookie和Session有什么区别&#xff1f;六、GET与POST WebSock…
阅读更多...
期货投机的操作

期货投机的操作

期货投机是一种高风险、高回报的投资方式&#xff0c;吸引着众多投资者参与。将深入探讨期货专业投机的操作秘诀&#xff0c;帮助投资者掌握必要的知识和技巧&#xff0c;在期货市场中驰骋。 一、期货专业投机的本质 期货投机是利用期货合约进行买卖&#xff0c;以赚取差价的一…
阅读更多...
Diffusion Mamba：用于CT到MRI转换的Mamba扩散模型

Diffusion Mamba：用于CT到MRI转换的Mamba扩散模型

Diffusion Mamba&#xff1a;用于CT到MRI转换的Mamba扩散模型 提出背景拆解左侧&#xff1a;整体框架中间&#xff1a;Mamba块的细节右侧&#xff1a;螺旋扫描的细节 提出背景 论文&#xff1a;https://arxiv.org/pdf/2406.15910 代码&#xff1a;https://github.com/wongzbb…
阅读更多...
JAVA【案例5-2】模拟默认密码自动生成

JAVA【案例5-2】模拟默认密码自动生成

【模拟默认密码自动生成】 1、案例描述 本案例要求编写一个程序&#xff0c;模拟默认密码的自动生成策略&#xff0c;手动输入用户名&#xff0c;根据用户名自动生成默认密码。在生成密码时&#xff0c;将用户名反转即为默认的密码。 2、案例目的 &#xff08;1&#xff09…
阅读更多...
超简单的nodejs使用log4js保存日志到本地（可直接复制使用）

超简单的nodejs使用log4js保存日志到本地（可直接复制使用）

引入依赖 npm install log4js 新建配置文件logUtil.js const log4js require(log4js);// 日志配置 log4js.configure({appenders: {// 控制台输出consoleAppender: { type: console },// 文件输出fileAppender: {type: dateFile,filename: ./logs/default, //日志文件的存…
阅读更多...
【详述】BP神经网络建模流程一步一步详述

【详述】BP神经网络建模流程一步一步详述

本文来自《老饼讲解-BP神经网络》https://www.bbbdata.com/ 目录 一、BP神经网络的建模流程二、BP神经网络的建模分步讲解2.1.数据归一化2.2.数据划分2.3.网络结构设置2.4.网络训练2.5.训练效果评估 本文梳理BP神经网络的建模流程&#xff0c;供大家建模时进行借鉴。 一、BP神经…
阅读更多...
最新文章

Copyright @ 2022~2023