一:去掉数组里面的重复项。

比如 如下一个数组:var arr = [1,2,4,3,4,3]; 我想要得到数组 [1,2,4,3].为这样的 写一个函数去掉重复的项。

var unique = function(arr){
  arr = arr || [];
  var obj = {},
        newArray = [];
  if(arr.length > 0){
    for(var i = 0, len = arr.length; i < len; i+=1){
      var curItem = arr[i],
        itemTemp = typeof(curItem) + curItem;
      if(obj[itemTemp] !== 1){
        newArray.push(curItem);
        obj[itemTemp] = 1;
        }
      }
    }
   return newArray;
};

二:返回数组里面的最大项:

比如需求如下 有个数组 var arr = [1,2,3,4,5]; 想返回数组里面的最大项。 我们只需要写如下函数即可:
     var maxValue = function(arr){
         arr = arr || [];
         var i,
              tempVal = 0;
         for(i = 0, len = arr.length; i < len; i+=1){
       var curVal = arr[i];
       if(curVal > tempVal){
                tempVal = curVal;
               }
          }
         return tempVal;
    };

三: 数组里面的项从小到大的排序问题.

有时候我们的需求要数组里面的数字从小到大排序问题,那么我们常见的方法有sort这个方法 可以使数字从小到大的排序 但是
用这个sort排序有个问题就是它根据ASCLL编码来排序的 比如数组[1,23,5],它排序后我们期望的是[1,5,23],但是它却返回了
[1,23,5],为什么呢?他首先计算2的ASCLL编码是50(因为1的ASCLL编码是49),5的ASCLL编码是53,所以50小于53.这是我们不
想要的结果。那么至于这种情况我们自己可以写个简单的函数来支持下:如下:

var compareNum = function(a,b){
     if(a > b){
          return 1;
      }else if(a < b){
          return -1;
      }else {
         return 0;
      }

}

然后调用 数组.sort(compareNum);就ok了 但是我们有个更简单函数可以代替上面的函数:如下

数组.sort(function(a,b){
     return a - b;
});

四:对象根据数组排序的问题。

有时候我们有这么样的一个需求 向服务器发一个请求 带参数 商品ID 数组传过去 但是后台返回一个数组 里面是以对象的形式存在
时候,由于后台开发人员懒的缘故,没有给我们排序,而我们前端需求是向服务器请求参数的顺序传过去 返回的后顺序和传过去一
样的顺序。

比如这么一个数组:var shopId = ['001','002','003','004']; 服务器返回的如下:

var callId = [{
'itemId': '003'
},
{
'itemId': '004'
},
{
'itemId': '002'
},
{
'itemId': '001'
}];

但是我是想返回的顺序是:

var callId = [{
'itemId': '001'
},
{
'itemId': '002'
},
{
'itemId': '003'
},
{
'itemId': '004'
}];

代码可以如下这样:

var sorting = function(shopId,callId){
  var obj = {};
      for(var i = 0, ilen = shopId.length; i < ilen; i+=1){
          obj[shopId[i]] = i;
      }
     for(var j = 0, jlen = callId.length; j < jlen; j+=1){
         var curItem = callId[j];
         curItem._id = obj[curItem.itemId];
     }
     var compareId = callId.sort(function(a,b){
         return a._id - b._id;
     });

return compareId;
};
console.log(sorting(shopId,callId));

五: 如何获取当前 select 元素的值。

最近看到"怿飞" 的一篇很早的博客关于如何获取当前select元素的值得问题,感觉蛮好的 对以后工作也有帮助,所以打算收藏下:

  1. 如果 select 元素下的所有 option 元素均没有指定 selected 属性,会默认选中第一个。
  2. 可以通过 select.selectedIndex 获取到选中的 option 元素的索引。
  3. 可以通过 select.options[select.selectedIndex] 获取到选中的 option 元素。
  4. option 元素 <option selected="selected" value="value3">text3</option>,可以通过 option.value 获得 option 元素的 value 属性值,即 value3;可以通过 option.text 获得 option 元素内的文本,即 text3。
  5. 如果 option 元素没有定义 value 属性,则 IE 中 option.value 无法获得,但 Safari、Opera、FireFox 依旧可以通过 option.value 获得,值同于 option.text 
  6. 可以通过 option.attributes.value && option.attributes.value.specified 来判断 option 元素是否定义了 value 属性。
  7. 比如HTML代码如下:
  8. <select id="select">
         <option value="11111">11111</option>
         <option value="22222">22222</option>
         <option value="33333">33333</option>
         <option value='44444'>44444</option>
         <option value='55555'>55555</option>
         <option value='66666'>66666</option>
      </select>
  9. var getSelectValue = function(select) {
            var idx = select.selectedIndex, //获取选中的option的索引
                option,
                value;
            if(idx > -1) {
                option = select.options[idx];  //获取选中的option元素
                value = option.attributes.value;
                return (value && value.specified) ? option.value : option.text;
            }
            return null;
        };
        var select = document.getElementById('select');
        alert(getSelectValue(select));运行下就知道了。

JS常见的小代码的更多相关文章

  1. js——常见的小方法

    1.随机得到是六位数,可以当做“密码”来使用: Math.random().toString().substr(2, 6):

  2. js一段小代码(浏览器用alert,否则用console)

    (function(){ var root=this, isBrowserSide=false; if(typeof window !=="undefined" && ...

  3. 用Vue.js开发微信小程序:开源框架mpvue解析

    前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...

  4. 折腾一两天,终于学会使用grunt压缩合并混淆JS脚本,小激动,特意记录一下+spm一点意外收获

    很长时间没有更新博客了,实在是太忙啦...0.0 ,以下的东西纯粹是记录,不是我原创,放到收藏夹还担心不够,这个以后常用,想来想去,还是放到这里吧,,丢不了..最后一句废话,网上搜集也好原创也罢,能解 ...

  5. 【转】利用 three.js 开发微信小游戏的尝试

    前言 这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧. 微信 WeChat 6.6.1 开始引入了微信小游戏,初期上线了一批质量相当不错的小游戏.我在查阅各 ...

  6. js 数组去重小技巧

    js 数组去重小技巧 Intro 今天遇到一个问题,需要对数据进行去重,想看一下有没有什么比较方便的方法,果然有些收获. Question 问题描述: 我有一个这样的数据: [ { "Pro ...

  7. three.js 3d三维网页代码加密的实现方法

    http://www.jiamisoft.com/blog/17827-three-js-3dsanweiwangyejiami.html https://www.html5tricks.com/ta ...

  8. JS实现页面分享代码share,不需要第三方接口

    在开发一个页面的时候常常会有这么一个小功能,就是分享该页面中的信息. 常见的分享代码有百度分享,JiaThis分享插件(现在貌似不能用了),bshare分享插件等,我主要分享一下自定义分享代码,如下: ...

  9. MPVUE - 使用vue.js开发微信小程序

    MPVUE - 使用vue.js开发微信小程序 什么是mpvue? mpvue 是美团点评前端团队开源的一款使用 Vue.js 开发微信小程序的前端框架.框架提供了完整的 Vue.js 开发体验,开发 ...

随机推荐

  1. elasticsearch6.7 05. Document APIs(7)Update By Query API

    6.Update By Query API _update_by_query 接口可以在不改变 source 的情况下对 index 中的每个文档进行更新.这对于获取新属性或其他联机映射更改很有用.以 ...

  2. PHP7.27: object

    http://www.devshed.com/c/a/PHP/PHP-Services-Layers-Data-Mappers/ https://stackoverflow.com/questions ...

  3. jQuer插件满屏气泡飘落动画效果

    飘落动画效果插件引用: <script src="https://cdn.bootcss.com/JQuery-Snowfall/1.7.4/snowfall.jquery.min.j ...

  4. [ng:areq] Argument 'XXXXCtrl' is not a function, got undefined

    angular.module('MyApp', []) 这里的[]重复了,以后引入新的controller.js文件会覆盖前面那个,所以此处的[]去掉 .controller('MyCtrl', fu ...

  5. JavaWeb:jsp

    本文内容: JSP的介绍 jsp的使用 EL表达式 JSTL的使用 首发日期:2018-06-18 JSP的介绍: JSP全称Java Server Pages. 与静态网页格式的html不同的是,j ...

  6. JavaScript大杂烩13 - 总结ECMAScript 5新功能

    虽说这个标准已经出来很久了,所有的主流浏览器的最新版本也都支持了这些特性,但是很多的教程中并没有包含这个部分,这一节我们专门来总结一下这个标准中的新功能. Object的新方法 在最新的JavaScr ...

  7. mac挂载分区包括EFI 或者任何隐藏分区

    1.mac终端下的diskutil命令是用来操作磁盘的 diskutil list #显示当前pc所有的磁盘 2.例如我们要挂载u盘中的efi分区 ,确定你的efi分区的 identified 我的是 ...

  8. Appium学习——安装Android SDK

    .下载Android SDK 下载地址:http://tools.android-studio.org/index.php/sdk 百度搜索Android SDK也可以. 下载之后,Android S ...

  9. Ubuntu下matplotlib的中文显示

    真真地被matplotlib的中文显示折磨的不行了.简要记下解决方案,防止以后重新配又是蛋疼菊紧. 我的环境:系统是Ubuntu 13.04,Python是系统自带的,matplotlib是apt安装 ...

  10. V4L2 driver -整体架构

    我的uvc开源地址:gitee-uvc 字符设备驱动程序核心:V4L2本身就是一个字符设备,具有字符设备所有的特性,暴露接口给用户空间. V4L2 驱动核心:主要是构建一个内核中标准视频设备驱动的框架 ...