【JS实践】JS小工具代码片段

阅读量：6963 次

发布时间：2019-06-27

本文共 5722 字，大约阅读时间需要 19 分钟。

JS小工具代码片段：

1、JS 实现对象属性的get 和set方法

说明：

下面方法1，经测试，在safari和chrome、ff、ie9中，弹出值均为 [object object]被赋值|被获取，即没有实现。

方法2，只有ie9报错，提示：对象不支持“__defineGetter__”属性或方法。

如果不添加get和set方法，也能通过赋值语句改变new的object的属性值。结论：没事别瞎用。

/*1.自定义用户类  name:用户名称，age:年龄*/    function User(name,age){        this.Name=name;        this.Age =age;    }//    /*2.为Age 属性添加get和set方法，【方法1】*///    User.prototype = {//        get Age(){//            return this._Age;//        },//        set Age(age){//            this._Age = age;//            ShowSetInfo(this);//        }//    };    /*2.为Age属性添加get和set方法，【方法2】*/    User.prototype.__defineGetter__("Age", function () {        ShowGetInfo("Age");        return this._Age;    });    User.prototype.__defineSetter__("Age", function (val) {        this._Age = val;        ShowSetInfo("Age");    });     /*3.进行属性的赋值与获取测试*/    var newuser = new User("markeluo",23);    newuser.Age=15;    var agevalue= newuser.Age;     function ShowSetInfo(_obj){        alert(_obj.toString()+"被赋值！")    }    function ShowGetInfo(_obj){        alert(_obj.toString()+"被获取！")    }

2、随机打乱指定数组

参考文章：http://home.dingxing.cn/blog-8-697.html

（国外大牛的神写法）

function randomsort(a, b) {        return Math.random()>.5 ? -1 : 1;//用Math.random()函数生成0~1之间的随机数与0.5比较，返回-1或1}var arr = [1, 2, 3, 4, 5];arr.sort(randomsort);

延伸阅读：

这里介绍下sort()函数，在JS中Array对象里内置了一个函数：arrayobj.sort([sortfunction])

此方法将 Array 对象进行适当的排序；在执行过程中并不会创建新的 Array 对象。

sortFunction为可选项。是用来确定元素顺序的函数的名称。如果这个参数被省略，那么元素将按照 ASCII 字符顺序进行升序排列。

sortFunction方法有两个参数。分别代表每次排序比较时的两个数组项。sort()排序时每次比较两个数组项都回执行这个参数，并把两个比较的数组项作为参数传递给这个函数。当函数返回值为1的时候就交换两个数组项的顺序，否则就不交换。

我们可以对上面的randomsort()稍作修改，来实现升序排列和降序排列：

function asc(a,b) { return a < b ? -1 : 1;//如果a
    
      b ? -1 : 1;;//如果a>b不交换，否则交换，即将序排列}

另外，可以直接把一个无名函数直接放到sort()方法的调用中。如下的例子是将奇数排在前面，偶数排在后面，例子如下：

以下是引用片段：

var arrA = [6,2,4,3,5,1]; arrA.sort( function(x, y) { if (x % 2 ==0) return 1; if (x % 2 !=0) return -1; }); document.writeln(arrA); //输出：3,5,1,4,2,6

3、JS判断浏览器类型与版本

判断浏览器版本的简单范例：

function getOs()  {     var OsObject = "";     if(navigator.userAgent.indexOf("MSIE")>0)        return "MSIE";     if(isFirefox=navigator.userAgent.indexOf("Firefox")>0)        return "Firefox";     if(isSafari=navigator.userAgent.indexOf("Safari")>0)        return "Safari";     if(isCamino=navigator.userAgent.indexOf("Camino")>0)        return "Camino";     if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0)        return "Gecko";  }  alert("您的浏览器类型为:"+getOs());

下面列举一下常用的判断方法：

1、判断浏览器是否为IE

document.all ? 'IE' : 'others'：在IE下document.all值为1，而其他浏览器下的值为0；navigator.userAgent.indexOf("MSIE")>0 ? 'IE' : 'others'：navigator.userAgent是描述用户代理信息。navigator.appName.indexOf("Microsoft") != -1 ? 'IE' : 'others'：navigator.appName描述浏览器名称信息。

2、判断IE版本

navigator.appVersion.match(/6./i)=="6." ? 'IE6' : 'other version'; //在已知是IE浏览器的情况下，可以通过此方法判断是否是IE6；navigator.userAgent.indexOf("MSIE 6.0")>0 ? 'IE7' : 'other version'; //同上；navigator.appVersion.match(/7./i)=="7." ? 'IE7' : 'other version'; //在已知是IE浏览器的情况下，可以通过此方法判断是否是IE7；navigator.userAgent.indexOf("MSIE 7.0")>0 ? 'IE7' : 'other version'; //同上；navigator.appVersion.match(/8./i)=="8." ? 'IE8' : 'other version'; //在已知是IE浏览器的情况下，可以通过此方法判断是否是IE8；navigator.userAgent.indexOf("MSIE 8.0")>0 ? 'IE8' : 'other version'; //同上。

3、JS获取浏览器信息

浏览器代码名称：navigator.appCodeName

浏览器名称：navigator.appName

浏览器版本号：navigator.appVersion

对Java的支持：navigator.javaEnabled()

MIME类型（数组）：navigator.mimeTypes

系统平台：navigator.platform

插件（数组）：navigator.plugins

用户代理：navigator.userAgent

4、Navigator.userAgent 知多少？（看清楚，Chrome这货里面有“Safari”字符串）

// 以下值分别为在对应浏览器开发者控制台打印的 Navigator.userAgent 的值

IE6：Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)

IE7：Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)

IE8：Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)

IE9：Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)

IE10：Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)

IE11：Mozilla/5.0 (Windows NT 6.1; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; Tablet PC 2.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko

chrome：Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.76 Safari/537.36

Safari：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_1) AppleWebKit/537.73.11 (KHTML, like Gecko) Version/7.0.1 Safari/537.73.11

360安全浏览器6.2： Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.89 Safari/537.1

5、$.browser

jQuery 1.9 以前版本，可以直接用 $.browser 获取浏览器信息，但是，1.9以后将由插件 jQuery.migrate 提供功能支持。（）。

但是2.0及以后，将不再支持 IE 6/7/8，如果要使用上述方法，必须使用 IE 的条件注释。如 6 所示。

结果：Object {

webkit: true, version: "537.36", safari: true}

6、关于IE的条件注释说明

IE10+以后，将不再支持条件注释写法。官方文档：（）

Item	Example	Comment
!	[if !IE]	The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression.
lt	[if lt IE 5.5]	The less-than operator. Returns true if the first argument is less than the second argument.
lte	[if lte IE 6]	The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument.
gt	[if gt IE 5]	The greater-than operator. Returns true if the first argument is greater than the second argument.
gte	[if gte IE 7]	The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument.
( )	[if !(IE 7)]	Subexpression operators. Used in conjunction with Boolean operators to create more complex expressions.
&	[if (gt IE 5)&(lt IE 7)]	The AND operator. Returns true if all subexpressions evaluate to true
\|	[if (IE 6)\|(IE 7)]	The OR operator. Returns true if any of the subexpressions evaluates to true.