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一样流畅。

    集思广益,仅供学习,侵权即删!!
  • 相关阅读:
    LeetCode 842. Split Array into Fibonacci Sequence
    LeetCode 1087. Brace Expansion
    LeetCode 1219. Path with Maximum Gold
    LeetCode 1079. Letter Tile Possibilities
    LeetCode 1049. Last Stone Weight II
    LeetCode 1046. Last Stone Weight
    LeetCode 1139. Largest 1-Bordered Square
    LeetCode 764. Largest Plus Sign
    LeetCode 1105. Filling Bookcase Shelves
    LeetCode 1027. Longest Arithmetic Sequence
  • 原文地址:https://www.cnblogs.com/hudunyu/p/13569067.html
Copyright © 2011-2022 走看看