AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

JS(Array)第十四课主要内容数组（二）

2023-07-16 41
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： JS(Array)第十四课主要内容数组（二）

4 Array 对象方法 在右边官网上copy的  JavaScript Array 对象 | 菜鸟教程

image.png

image.png

image.png

案例二:数组常用到的重点方法

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> ARRAY数组方法应用</title>
    <style type="text/css">
      *{
        font-size: 40px;
        background-color: #CCFFFF;
      }
      hr{
        border: 2px solid;
      }
    </style>
  </head>
  <body>
    <p class="we">Array数组方法应用</p>
    <script type="text/javascript">
      var a1=new  Array("1a","2b","3c","4d","5e","6ff");
      var a2=new  Array("a1","b1","c1","d1");
      var s=a1.toString();
      document.write(s+"<br/>");
      var s1=a1.join("+","<br/>");
      document.write(s+"<br/>");
      var s2 =a1.shift()
      document.write(s2+"<br/>");
      var s3=a1.unshift("m","n");
      document.write(s3+"<br/>");
      var s4=a1.pop();
      document.write(s4+"<br/>");
      var s5=a1.push("m","n");
      document.write(s5+"<br/>");
      var s6 =a1.concat(a2)
      document.write(s6+"<br/>");
      var s7=a1.slice(2,3);
      document.write(s7+"<br/>");
      var s8=a1.splice(2,4);
      document.write(s8+"<br/>");
      var s9=a1.sort( );
      document.write(s9+"<br/>");
      var s10=a1.reverse("m","n");
      document.write(s10+"<br/>");
      var s11=a2.reverse("m","n");
      document.write(s11+"<br />");
    </script>
    <script type="text/javascript">
    var a3=new  Array("11a","22b","33c","44d","55e","66ff","77gg");
    var s12=a3.splice(2,3,'gooleg','fasebooks');
    document.write(a122+"<br />");
    </script>
  </body>
</html>

案例三:数组取除重复

var arr = ["1", "2", "3", "4", "4", "6", "5"]
function remove(arr) {
    return arr.filter(function (item, index, self) {
        return self.indexOf(item) == index;
    });
}
remove(arr)
console.log(arr)

案例四:数组中的排序

// 冒泡排序
// 拿函数对方法的封装
function maopao() {
    var n = [1, 2, 3, 4, 9, 6, 7, 8, 9];
    //  定义一个空的值
    var temp;
    for (var i = 0; i < n.length - 1; i++) {
        for (var j = 0; j < n.length - 1; j++) {
            if (n[j] > n[j + 1]) {
                temp = n[j];
                n[j] = n[j + 1];
                n[j + 1] = temp;
            }
        }
    }
    console.log(n)
}
maopao()

案例五:求出五个人成绩的最大值 最小值 排序 平均值

function sum(a, b, c, d, e) {
    // 请用户将成绩转入进去
    var sum = a + b + c + d + e
    console.log("求和" + sum)
    console.log("平均值" + sum / 5)
}
sum(123, 456, 678, 89, 33)

案例六:日期格式化

// 日期格式化
function date(){
    var date = new Date();
    var year = date.getFullYear();    //  返回的是年份
    var month = date.getMonth() + 1;  //  返回的月份上个月的月份，记得+1才是当月
    var dates = date.getDate();  
    if(month<10)month="0"+month;
    if(date<10)date="0"+date;
    var time=year + "-" + month + "-" + dates
    console.log(time)
}
date()

案例七:随机选取10~100之间的10个数字，存入一个数组，并排序

// 随机生成10到100的数字
function maopao1() {
    var a=(Math.floor(Math.random()*10)+90)
    var b=(Math.floor(Math.random()*10)+90)
    var c=(Math.floor(Math.random()*10)+90)
    var d=(Math.floor(Math.random()*10)+90)
    var e=(Math.floor(Math.random()*10)+90)
    var f=(Math.floor(Math.random()*10)+90)
    var h=(Math.floor(Math.random()*10)+90)
    var i=(Math.floor(Math.random()*10)+90)
    var j=(Math.floor(Math.random()*10)+90)
    var k=(Math.floor(Math.random()*10)+90)
    var n = [a, b, c, d, e, f, h, i, j,k];
    //  定义一个空的值
    var temp;
    for (var i = 0; i < n.length - 1; i++) {
        for (var j = 0; j < n.length - 1; j++) {
            if (n[j] > n[j + 1]) {
                temp = n[j];
                n[j] = n[j + 1];
                n[j + 1] = temp;
            }
        }
    }
    console.log(n)
}
maopao1()

案例八:输出密文，使用函数

某个公司采用公用电话传递数据，数据是8位的整数，在传递过程中是加密的，

加密规则如下：每位数字都加上5,然后用除以10的余数代替该数字，

反转，请编写一个函数，传入原文，输出密文，使用函数

<!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>
    <script>
      //  var s = Math.floor(Math.random() * 10000);
      // 定义第一个变量
      // 定义第二个变量
      var r;
      var a = 123;
      var b = 234;
      r = a;
      a = b;
      b = r;
      console.log(a)
      console.log(b)
      var aa = 4;
      var bb = 5;
      console.log(aa / 2); //除数
      console.log(bb % 2); //余数
      // 案例 
      function RetGyuhtrDertp() {
        // 生成随机的一个变量
        var num = Math.floor(Math.random() * 10000);
        // 
        console.log("随机数为" + num);
        // 个
        var fist = (num % 10 + 5) % 10;
        console.log("第一位数" + fist);
        var two = parseInt(num % 10 % 10 + 5) % 10;
        console.log("第二位数" + two);
        var three = parseInt((num / 100) % 10 + 5 + 5) % 10;
        console.log("第三位数" + three);
        var four = parseInt((num + 5) / 1000) % 1000;
        console.log("第四位数" + four);
        var arr = [fist, two, three, four];
        console.log("原数组1" + arr)
        console.log((arr.reverse()))
      }
      // 函数的调用
      RetGyuhtrDertp()
    </script>
  </body>
</html>

案例九  输入五个数字，取出最大值，最小值，随机一个生成最小值~最大值范围的值

  var a = prompt("请输入第1个数");
  var a1 = prompt("请输入第2个数");
  var a2 = prompt("请输入第3个数");
  var a3 = prompt("请输入第4个数");
  var a4 = prompt("请输入第5个数");
  console.log("最大值" + Math.max(a, a1, a2, a3, a4))
  console.log("最小值" + Math.min(a, a1, a2, a3, a4))
  // 随生成最的值和最小值的范围
  var max = (Math.random() * 1000).toFixed(0)
  var min = (Math.random() * 1000).toFixed(0)
  console.log("最大的范围" + max)
  console.log("最小的范围" + min)

案例十:输入一串字符串(字母)，并替换所有的a为-，替换之后转换为大写

   var str1 = prompt("请用户输入字符串的信息")
   var str2 = str1;
   console.log(str2)
   // 
   console.log(str2.replace(/a/gi, "_").toUpperCase()); //bs bn angle

案例十一:输入一串字符串，截取2~8位，判断是否以say开头是转为大写否则不变，
end结尾是转为小写，否则不变

  var str3 = prompt("请用户输入字符串的内容信息");
  var str4 = str3;
  console.log(str4.split(1, 7))
  if (str4.startsWith('say')) {
      console.log(str4.toUpperCase)
  } if (str4.endsWith('end')) {
      console.log(str4.toLocaleUpperCase)
  } else {
      console.log(str4)
  }

案例十二:输入一串字符串，计算每个字符出现的次数.

function getMost(str) {
    // 步骤1
    var result = {};
    for (let i in str) {
        if (str[i] in result) {
            // 步骤2
            result[str[i]]++;
        } else {
            // 步骤3
            var object = {};
            object[str[i]] = 1;
            result = Object.assign(result, object);
        }
    }
    return result;
}
var str1=prompt("请输入你的字符串的信息")
var result = getMost(str1);
console.log(result);

案例十三:以元旦为例,获取了所有农历节日

    var date1=new Date()
    var three=date1.getFullYear()+1;
    date1.setFullYear(three);
    date1.setMonth(0);
    date1.setDate(1);
    var date2=new Date();
    var date3=date1.getTime()-date2.getTime();
    var days=Math.ceil(date3/(24*60*60*10000));
    console.log(days)

案例十四:倒计时

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>2021年倒计时</title>
    <style type="text/css">
      .rty{
        color: rgb(0, 0, 0);
      }
      .tyu{
        color: #ffd5ef;
      }
    </style>
  </head>
  <body>
    <h1 id="res"></h1>
    <script type="text/javascript" class="rty">
      function test(year,month,day){
        var end =new Date(year,month-1,day);
        var leftTime=end.getTime()-Date.now();
        var day  =Math.floor(leftTime/1000/60/60/24);
        var h =Math.floor(leftTime/1000/60/60%24);
        var  m =Math.floor(leftTime/1000/60%60);
        var s =Math.floor(leftTime/1000/60);
        var str="距2022年结束还有"+day+"天"+h+"小时"+m+"分钟"+s+"秒";
      res.innerHTML=str 
      }
      setInterval("test(2022,12,31)",1000);
    </script>
  </body>
</html>

案例十五:格式化字符串

<!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>
    <script>
        // 格式化字符串
        var str="人最坏的习惯之一就是抱住已经拥有的东西不放，其实一个人只要舍得放下自己的那点小天地，就很容易走进宇宙的大世界。这个世界为你准备的精彩很多。"
        document.write("<h2>"+str.anchor()+"</h2><br>")
        document.write("<h2>"+str.big()+"</h2><br>")
        document.write("<h2>"+str.small()+"</h2><br>")
        document.write("<h2>"+str.fontsize()+"</h2><br>")
        document.write("<h2>"+str.bold()+"</h2><br>")
        document.write("<h2>"+str.italics()+"</h2><br>")
        document.write("<h2>"+str.link()+"</h2><br>")
        document.write("<h2>"+str.strike()+"</h2><br>")
        document.write("<h2>"+str.blink()+"</h2><br>")
        document.write("<h2>"+str.fixed()+"</h2><br>")
        document.write("<h2>"+str.fontcolor("red")+"</h2><br>")
        document.write("<h2>`其实一个人只要舍得放下自己的那点小天地'"+str.sub()+"</h2><br>")
        document.write("<h2>`其实一个人只要舍得放下自己的那点小天地'"+str.sup()+"</h2><br>")
    </script>
</body>
</html>

案例十六:简单的选择卡

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>简易选项卡</title>
    <style>
      body,
      ul,
      li {
        margin: 0;
        padding: 0;
      }
      body {
        font: 12px/1.5 Tahoma;
      }
      #outer {
        width: 450px;
        margin: 10px auto;
      }
      #tab {
        overflow: hidden;
        zoom: 1;
        background: #000;
        border: 1px solid #000;
      }
      #tab li {
        float: left;
        color: #fff;
        height: 30px;
        cursor: pointer;
        line-height: 30px;
        list-style-type: none;
        padding: 0 20px;
      }
      #tab li.current {
        color: #000;
        background: #ccc;
      }
      #content {
        border: 1px solid #000;
        border-top-width: 0;
      }
      #content ul {
        line-height: 25px;
        display: none;
        margin: 0 30px;
        padding: 10px 0;
      }
    </style>
    <script>
      window.onload = function() {
        var oLi = document.getElementById("tab").getElementsByTagName("li");
        var oUl = document.getElementById("content").getElementsByTagName("ul");
        for (var i = 0; i < oLi.length; i++) {
          oLi[i].index = i;
          oLi[i].onmouseover = function() {
            for (var n = 0; n < oLi.length; n++) oLi[n].className = "";
            this.className = "current";
            for (var n = 0; n < oUl.length; n++) oUl[n].style.display = "none";
            oUl[this.index].style.display = "block"
          }
        }
      }
    </script>
  </head>
  <body>
    <div id="outer">
      <ul id="tab">
        <li class="current">第一课</li>
        <li>第二课</li>
        <li>第三课</li>
      </ul>
      <div id="content">
        <ul style="display:block;">
          <li><a href="A-1.html">网页特效原理分析</a></li>
          <li>响应用户操作</li>
          <li>提示框效果</li>
          <li>事件驱动</li>
          <li>元素属性操作</li>
          <li>动手编写第一个JS特效</li>
          <li>引入函数</li>
          <li>网页换肤效果</li>
          <li>展开/收缩播放列表效果</li>
        </ul>
        <ul>
          <li>改变网页背景颜色</li>
          <li>函数传参</li>
          <li>高重用性函数的编写</li>
          <li>126邮箱全选效果</li>
          <li>循环及遍历操作</li>
          <li>调试器的简单使用</li>
          <li>典型循环的构成</li>
          <li>for循环配合if判断</li>
          <li>className的使用</li>
          <li>innerHTML的使用</li>
          <li>戛纳印象效果</li>
          <li>数组</li>
          <li>字符串连接</li>
        </ul>
        <ul>
          <li>JavaScript组成：ECMAScript、DOM、BOM，JavaScript兼容性来源</li>
          <li>JavaScript出现的位置、优缺点</li>
          <li>变量、类型、typeof、数据类型转换、变量作用域</li>
          <li>闭包：什么是闭包、简单应用、闭包缺点</li>
          <li>运算符：算术、赋值、关系、逻辑、其他运算符</li>
          <li>程序流程控制：判断、循环、跳出</li>
          <li>命名规范：命名规范及必要性、匈牙利命名法</li>
          <li>函数详解：函数构成、调用、事件、传参数、可变参、返回值</li>
          <li>定时器的使用：setInterval、setTimeout</li>
          <li>定时器应用：站长站导航效果</li>
          <li>定时器应用：自动播放的选项卡</li>
          <li>定时器应用：数码时钟</li>
          <li>程序调试方法</li>
        </ul>
      </div>
    </div>
  </body>
</html>

文章标签：
JavaScript
前端开发
数据安全/隐私保护
关键词：
JavaScript数组
array数组
js array
js array数组
JavaScript Array
t75yjb52rsccc
目录
相关文章
热爱技术的小郑
|
1天前
|
JavaScript 前端开发 索引
JS遍历数组里数组下的对象，根据数组中对象的某些值，组合成新的数组对象
这篇文章介绍了如何在JavaScript中遍历数组里数组下的对象，并根据对象的某些属性值组合成一个新的数组对象。主要内容包括使用ES6的`for...of`循环来遍历数组对象，然后根据需要提取对象中的属性值，并将它们放入新的对象中，最终形成一个新的对象数组以供使用。
热爱技术的小郑
15 3
VipSoft
|
5天前
|
Python
PyCharm View as Array 查看数组
PyCharm View as Array 查看数组
VipSoft
15 1
热爱技术的小郑
|
5天前
|
JavaScript 前端开发
JavaScript基础&实战（5）js中的数组、forEach遍历、Date对象、Math、String对象
这篇文章介绍了JavaScript中的数组、Date对象、Math对象以及包装类（String、Number、Boolean），并详细讲解了数组的创建、方法（如forEach、push、pop、unshift、slice、splice）和遍历操作，以及工厂方法创建对象和原型对象的概念。
热爱技术的小郑
10 0
JavaScript基础&实战（5）js中的数组、forEach遍历、Date对象、Math、String对象
阿福的工作室
|
5天前
|
JavaScript 前端开发 索引
JavaScript数组相关的方法有哪些?
JavaScript数组相关的方法有哪些?
阿福的工作室
6 0
阿福的工作室
|
5天前
|
JavaScript 前端开发
记录Javascript数组类练习
记录Javascript数组类练习
阿福的工作室
12 0
阿福的工作室
|
5天前
|
JavaScript 容器
JS-数组的定义
JS-数组的定义
阿福的工作室
9 0
。思索
|
7天前
|
JavaScript 前端开发
JavaScript——快速判断数组对象的值是否全部满足条件
JavaScript——快速判断数组对象的值是否全部满足条件
。思索
20 0
孙飞i
|
8天前
|
JavaScript 前端开发 索引
JavaScript数组的常用方法
JavaScript数组的常用方法
孙飞i
16 0
刘志辉~
|
8天前
|
JavaScript
js如何添加新元素到数组中
js如何添加新元素到数组中
刘志辉~
18 0
刘志辉~
|
8天前
|
存储 JavaScript 索引
js之数组
js之数组
刘志辉~
18 0

热门文章

最新文章

  • 1
    SQL老司机，在SQL中计算 array & map & json数据
  • 2
    C99 flexible array number 伸缩型数组成员
  • 3
    leetcode 189 Rotate Array
  • 4
    Srting&Array方法总结
  • 5
    [LeetCode] Two Sum II - Input array is sorted
  • 6
    leetcode 88 Merge Sorted Array
  • 7
    leetcode 26 Remove Duplicates from Sorted Array
  • 8
    react.js:3640 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `UserList`. See https://fb.me/re
  • 9
    【LeetCode从零单排】No88.Merge Sorted Array
  • 10
    javascript类型系统之Array
  • 1
    【JavaScript 与 TypeScript 技术专栏】JavaScript 与 TypeScript 的未来发展趋势
    100
  • 2
    【JavaScript与TypeScript技术专栏】TypeScript如何帮助JavaScript开发者避免常见错误
    29
  • 3
    【JavaScript与TypeScript技术专栏】使用TypeScript优化JavaScript应用性能
    56
  • 4
    【JavaScript 与 TypeScript 技术专栏】TypeScript 在 Web 开发中的前沿应用
    38
  • 5
    【JavaScript与TypeScript技术专栏】JavaScript与TypeScript混合编程模式探讨
    74
  • 6
    【JavaScript与TypeScript技术专栏】TypeScript在JavaScript库与框架开发中的作用
    38
  • 7
    【JavaScript 与 TypeScript 技术专栏】TypeScript 如何提升 JavaScript 代码的可读性与可维护性
    53
  • 8
    【JavaScript与TypeScript技术专栏】TypeScript在JavaScript项目中的渐进式采用
    44
  • 9
    【JavaScript与TypeScript技术专栏】从JavaScript迁移到TypeScript的最佳实践
    39
  • 10
    【JavaScript 与 TypeScript 技术专栏】JavaScript 与 TypeScript 的对比与选择
    86

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Node.js 入门教程文档
  • Vue.js完全自学手册图文教程
  • Node.js 入门与实战

    • 相关电子书

    更多
  • JavaScript异步编程
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 前端开发基础6：Node.js和LESS预编译工具
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    通义千问API入门教程