zoukankan      html  css  js  c++  java
  • 8.26study(补)

    用js实现一个方法,返回数组里出现次数最多的一个元素。

      代码:

    function maxCountElement(arr) {  
       var obj={};
       for(var i=0;i<arr.length;i++){  
    //建立空对象,利用对象键值对,以数组元素为键,次数为值。 var key=arr[i]; if(obj[key]){ obj[key]++; }else{ obj[key]=1; } } var maxCount=0; var maxElement=arr[0]; var eq = []; for(var key in obj){ if(maxCount < obj[key]){ maxCount=obj[key]; maxElement=key; eq.length=0; }else if(maxCount === obj[key]){ eq.push(key); } } if(eq.length > 0){ for(var j=0;j<eq.length;j++){ maxElement+=','+eq[j]; } } return "该数组中出现次数最多的元素:"+maxElement+" } var arr = [1,2,2,3,3,4,5,6]; var res = maxCountElement(arr); console.log(res);

      

    请用js程序实现二分查找算法,在数组[2,12,30,34,55,59,102,200]中找出59的所在数组下标。

    二分法查找:是一种搜索某个值的索引的算法。

    基本条件:有序的数组。

    思路:将数组折半,分成左右两个数组,判断要查找的数和中间位置数值的大小,来判断要查找的数值在哪一边,之后继续折半查找,直到找到这个数。

    方法:二分法查找的两种方法,一种是非递归方式,采用while方式。另一种是递归方式,用if方式递归查找。

     代码:

    function binary_search(arr, key) {
      var low = 0,
          high = arr.length - 1;
    
      while (low <= high) {
          var mid = parseInt((high + low) / 2);
          if (key == arr[mid]) {
              return mid;
          } else if (key > arr[mid]) {
              low = mid + 1;
          } else if (key < arr[mid]) {
              high = mid - 1;
          } else {
              return -1;
          }
      }
    }
    var arr=[2,12,30,34,55,59,102,200];
    var key=59;
    binary_search(arr,key)
    

      

    用js实现一个方法,去重数组里的重复元素。

      代码:

    Set方法
    var arr=[1,1,2,3] var newArr=new Set(arr); console.log(newArr); // JS var arr=[1,2,3,3,4,2,1]; var newArr=[]; for(var i=0;i<arr.length;i++){ if(newArr.indexOf(arr[i])==-1){ newArr.push(arr[i]); } } console.log(newArr); 

    每隔一秒输出一次i值,i的值初始值为0,每次加1.

      js代码:

    var i=0;
    setInterval(function(){
      console.log(i);
      i++;
    },1000)

    实现一个数组柱状图,根据数组的每项作为高度,点击按钮顺序倒叙切换。

      代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        #box {
          display: flex;
        }
    
        /* #sbox{
          display: flex;
        } */
      </style>
    </head>
    
    <body>
      <div id="box"></div>
      <!-- <div id="sbox"></div> -->
      <p id="btn">anniu1</p>
    </body>
    <script>
      var arr = [1, 2, 3];
      var sBox = document.getElementById('box');
      // var ssBox=document.getElementById('sbox');
      var btn = document.getElementById('btn');
      // 初始
      function bed(){
        for (var i = 0; i < arr.length; i++) {
          var div = document.createElement('p');
          console.log(arr[i] * 1000)
          div.style.height = arr[i] * 100 + 'px';
          div.style.width = 200 + 'px';
          div.style.backgroundColor = "red";
          div.style.margin = 20 + 'px';
          sBox.appendChild(div);
          console.log(22)
        }
    
      }
      bed()
      // 按钮
      btn.onclick = () =>{
        var divOld = document.getElementsByTagName('p');
        console.log(divOld)
        // if(divOld.length==1){return}
        for (var i = 0; i < divOld.length; i++) {
          sBox.removeChild(divOld[i]);
    
        }
        sBox.removeChild(divOld[0]);
        console.log(divOld)
        arr = arr.reverse();
        console.log(arr);
        // for (var i = 0; i < arr.length; i++) {
        //   var div = document.createElement('p');
        //   console.log(arr[i] * 1000)
        //   div.style.height = arr[i] * 100 + 'px';
        //   div.style.width = 200 + 'px';
        //   div.style.backgroundColor = "red";
        //   div.style.margin = 20 + 'px';
        //   sBox.appendChild(div);
        // }
          bed()
      }
    </script>
    
    </html>
    

      vue+echart实现:

     loding.....

    简单阐述new一个对象的过程

    参考文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new

    理解:

    H5和小程序的区别:

      1.运行环境

      传统的h5运行环境是浏览器,包括webview等。

      微型小程序运行环境是非完整的浏览器,是基于浏览器内核完全重构的一个内置解析器,针对小程序专门做了优化,配合自己定义的开发语言标准,大幅提升了小程序的流畅度和性能。

      2.开发成本

      当开发一个h5的页面需求时,我们考虑的从开发工具,前端框架,模块管理工具,任务管理工具,ui库的选择,接口调用工具,浏览器兼容性等等都需要考虑周到。

      而微信提供了统一的开发工具,并且规范了开发标准,所以,作为开发者,你需要专注写代码就ok了,而且,你可以随意调用微信开发中的api,不用担心浏览器的兼容性,

      因此,小程序的开发成本逼以往的HTML5开发的web成本低很多。

      3.系统权限。

      微信能获取更多的系统权限,如网络通讯状态,缓存能力等,这些系统级权限都能和微信小程序无缝衔接,也就是官方宣称的拥有Native App的流畅性能。

      而HTML5 web应用则相对少了很多。

      4.用户体验。

      在打开一个HTML5页面的时候,实际上就是打开一个web网页而网页在浏览的时候,需要在浏览器中进行渲染,这个过程叫加载,无论时间长短,都会给用户一种不灵敏的感觉。

      小程序是微信内的云端应用,通过websocket双向通信,本地缓存以及微信底层技术优化实现了小程序接近原生APP的体验。所以在使用小程序的时候,同等网络条件下几乎不用等待,可以像操作普通app一样流畅。

    集思广益,仅供学习,侵权即删!!
  • 相关阅读:
    算法笔记_187:历届试题 网络寻路(Java)
    算法笔记_186:历届试题 高僧斗法(Java)
    算法笔记_185:历届试题 格子刷油漆(Java)
    Tomcat,JBoss与JBoss Web
    JBoss Web和Tomcat的区别
    tomcat与jboss等容器的区别
    dubbo
    ZooKeeper学习第一期---Zookeeper简单介绍
    Java GC系列
    Tomcat中JVM内存溢出及合理配置
  • 原文地址:https://www.cnblogs.com/hudunyu/p/13569067.html
Copyright © 2011-2022 走看看