12个非常有用的javascript技巧,必看!

提示:该文章是整理别人别人的文章,作者比较多,很难分辨原创作者是谁。

1)使用!!将变量转换成布尔类型

  有时,我们需要检查一些变量是否存在,或者它是否具有有效值,从而将他们的值视为true。对于这样的检查,你可以使用!!(双重否定运算符),他能自动将任何类型的数据转化为布尔值,只有0、null、“”、undefined或NaN才会返回false,其他的都会返回true。看一个简单的例子:

function Account(cash){
    this.cash = cash;
    this.hasMoney = !!cash;
}
   var account = new Account(100.50);
   console.log(account.cash);        //100.50
   console.log(account.hasMoney);    //true

   var emptyAccount = new Account(0);
   console.log(emptyAccount.cash);        //0
   console.log(emptyAccount.hasMoney);  //false

2)使用+将变量转化成数字

  这个转化比较简单,但它只适合数字字符串,不然就会返回NaN(Not a Number)。看例子:

function toNumber(strNumber){
    return +strNumber;
}
console.log(toNumber(‘342‘)); //342console.log(toNumber(‘324s‘)); //NaN//也可以用于转化Date,返回结果为时间戳console.log(+new Date());

3)短路条件

  在编写代码中经常会遇到这样的代码:

  

if(conected){
    login();
}

  可以使用&&(and连接符)来缩短代码,上面的代码可以缩减为

  conected&&login();

  也可以使用这种方法来检查对象中是否存在某些属性或者方法

  user&&user.login();

4)使用||设置默认值

  在ES6中有默认参数这个功能。为了在旧版浏览器中模拟此功能,可使用||(or运算符),并把默认值作为他的第二个参数。如果第一个参数返回false,那么第二个参数就会被作为默认值返回

 

function user(name,age){
    this.name = name||‘Olive Queen‘;
    this.age = age||27;
}

var user1 = new user();
console.log(user1.name);//Olive Queen
console.log(user1.age);//27

var user2 = new user(‘liming‘,25);
console.log(user2.name);//liming
console.log(user2.age);//25

5)在循环中缓存arr.length

  这个技巧非常简单,并且在循环处理大数组时能够避免对性能造成巨大的影响。例如for循环

var arr = [1,2,3,‘a‘,‘ds‘,4];
for(var i = 0;i<arr.length;i++){
    console.log(arr[i]);
}

对于小数组还好,较大数组的话每一次循环都会获取arr.length,这会产生一定的延迟,为了避免这种情况,在for循环开始之前缓存arr.length

var arr = [1,2,3,‘a‘,‘ds‘,4];
var len = arr.length;
for(var i = 0;i<len;i++){
    console.log(arr[i]);
}

或者

var arr = [1,2,3,‘a‘,‘ds‘,4];
for(var i = 0,len = arr.length;i<len;i++){
    console.log(arr[i]);
}

6)检查对象中的属性

  当你需要检查某些属性是否存在的时候,避免运行未定义的函数或者属性时,这个技巧就会非常的有用。解决浏览器兼容问题中也可以使用这个技巧。例如通过ID获取元素的完美方法

if(‘querySelector‘ in document){
    document.querySelector(‘#id‘);
}else{
    document.getElementById(‘id‘);
}

7)获取数组的最后一个元素

  Array。prototype.slice(begin,end)可以用来裁剪数组。但是如果没有设置结束参数end的值的话,该函数会自动将end设置为数组长度值。如果将begin的数值设置为复制的话,就会从数组中获取倒数的元素:

var arr = [1,2,3,4,5];
console.log(arr.slice(-1));//[6]console.log(arr.slice(-2));//[5,6]console.log(arr.slice(-3));//[4,5,6]

8)数组截断

  这个技术可以锁定数组的大小,这对于要删除数组中固定数量的元素是非常有用的。

var arr = [1,2,3,4,5,6,7,8,9,10];

arr.length = 5;
console.log(arr);//[1,2,3,4,5]

arr.length = 7;
console.log(arr);//[1,2,3,4,5,undefined,undefined]

如果arr.length设置的数值大于当前数组长度,超过的元素会分配为undefined

9)替换数组元素

var str = ‘john john‘;
console.log(str.replace(/hn/,‘nan‘));//jonan john
console.log(str.replace(/hn/g,‘nan‘));//jonan jonan

这看似是在数组替换元素中增加了正则表达式中的内容,全局匹配g

10)合并数组

  一般需要合并数组,使用Array.concat()方法,字符串也可以看做是数组

var str1 = ‘hello‘;
var str2 = ‘world‘;
console.log(str1.concat(str2));//helloworldvar str3 = [1,2,3];var str4 = [4,5,6];console.log(str3.concat(str4));//[1,2,3,4,5,6]

但是该方法对于大数组来说并不合适,因为他会在内部新建一个数组并消耗大量的内存。原作者推荐使用Array.push.apply(arr1,arr2),但是在实践后发现其返回的结果始终是最后数组的长度,而不是数组的各个元素;而且有博主曾经做过Array.concat与Array.push.apply之间性能的测试实验。结果显示Array.concat操作的数组长度没有显示,而Array.oush.apply操作的数组因浏览器不同而不同,一般不能超过十万。

脚本之家有位朋友写过一篇《关于JS数组追加数组采用push.apply的问题》,讨论Array.push.apply的问题,最后采用forEach,不仅可以避免数组过大的问题,而且从性能考虑forEach也是最快的。

var arr = [1,2,3,4,5,6,7,8,9];
arr.forEach(function(a){
    console.log(a);
});

但是在IE中该方法不能正常执行,提示Array不支持此属性或此方法,即IE的Array中没有forEach方法。但是可以添加原型方法

    //Array.forEach implementation for IE support..
    //https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach
    if (!Array.prototype.forEach) {
        Array.prototype.forEach = function(callback, thisArg) {
            var T, k;
            if (this == null) {
                throw new TypeError(" this is null or not defined");
            }
            var O = Object(this);
            var len = O.length >>> 0; // Hack to convert O.length to a UInt32
            if ({}.toString.call(callback) != "[object Function]") {
                throw new TypeError(callback + " is not a function");
            }
            if (thisArg) {
                T = thisArg;
            }
            k = 0;
            while (k < len) {
                var kValue;
                if (k in O) {
                    kValue = O[k];
                    callback.call(T, kValue, k, O);
                }
                k++;
            }
        };
    }  

11)

时间: 2024-10-25 10:14:10

12个非常有用的javascript技巧,必看!的相关文章

超有用的JavaScript技巧,窍门和最佳实践

超有用的JavaScript技巧,窍门和最佳实践 1. 首次为变量赋值时务必使用var关键字 变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量. 2. 使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型.但===和!==不会,它们会同时比较值和数据类型,这也使得它们要比==和!=快. [10] === 10 // is false [10] == 10 // is true '10' == 10 // is true '10' === 10 //

45 Useful JavaScript Tips, Tricks and Best Practices(有用的JavaScript技巧,技巧和最佳实践)

As you know, JavaScript is the number one programming language in the world, the language of the web, of mobile hybrid apps (like PhoneGap or Appcelerator), of the server side (like NodeJS or Wakanda) and has many other implementations. It’s also the

3个有用的JavaScript技巧

1.数组去重 使用ES6全新的数据结构即可简单实现. let j = [...new Set([1, 2, 3, 3])] 输出: [1, 2, 3] 2.数组和布尔值 当数组需要快速过滤掉一些为false的值(0,undefined,false等)时,一般是这样写: myArray.map(item => { // ... }) // Get rid of bad values .filter(item => item); 可以使用Boolean更简洁地实现: myArray.map(ite

Asp.Net实现FORM认证的一些使用技巧(必看篇)

最近因为项目代码重构需要重新整理用户登录和权限控制的部分,现有的代码大体是参照了.NET的FORM认证,并结合了PORTAL KITS的登录控制,代码比较啰嗦,可维护性比较差.于是有了以下的几个需求(大多数系统应该都会碰到): 1.用.NET自带的FORM认证来实现安全登录 2.登录后需要记录登录用户的基本信息,方便所有页面调用 3.记录本机登录状态,短时间关闭窗口后不用重新登录 4.权限控制和代码的文件夹结构相呼应,即按角色允许访问不同的目录 5.权限控制有可能需要细化到每一个页面,即按角色允

JavaScript 学者必看“new”

当你使用new的时候,会: 1.创建一个新的空对象: 2.将this绑定到该对象: 3.添加一个名为__proto__的新属性,并且指向构造函数的原型(prototype): 4.返回该this对象. 如果你没有特别理解,那么我们接下来用例子来详细解释.首先定义一个构造函数Student,该函数接收两个参数name和age. function Student(name, age){ this.name = name; this.age = age; } 现在我们使用new来创建一个新的对象: v

JavaScript初学者必看“this”

译者按: JavaScript的this和Java等面向对象语言中的this大不一样,bind().call()和apply()函数更是将this的灵活度进一步延伸. 原文: JavaScript: The Keyword 'This' for Beginners 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 如果对JavaScript的关键字this理解不够深刻,有时候会掉入意想不到的坑.在这里我们总结了5条通用规则来帮助你判断t

JavaScript初学者必看“new”

译者按: 本文简单的介绍了new, 更多的是介绍原型(prototype),值得一读. 原文: JavaScript For Beginners: the 'new' operator 译者: Fundebug 为了保证可读性,本文采用意译而非直译. 当你使用new的时候,会: 创建一个新的空对象: 将this绑定到该对象: 添加一个名为__proto__的新属性,并且指向构造函数的原型(prototype): 返回该this对象. 如果你没有特别理解,那么我们接下来用例子来详细解释.首先定义一

JavaScript初学者必看“箭头函数”

译者按: 箭头函数看上去只是语法的变动,其实也影响了this的作用域. 原文: JavaScript: Arrow Functions for Beginners 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 本文我们介绍箭头(arrow)函数的优点. 更简洁的语法 我们先来按常规语法定义函数: function funcName(params) { return params + 2; } funcName(2); // 4 该函

45种Javascript技巧大全

原文:45 Useful JavaScript Tips, Tricks and Best Practices 译文:45个有用的JavaScript技巧,窍门和最佳实践 译者:dwqs 在这篇文章中,我将分享一些JavaScript常用的技巧,窍门和最佳实践.不管JavaScript开发者是使用在浏览器/引擎上或者服务器端(SSJS--Service Side JavaScript)JavaScript解释器上,这些他们都是应该知晓的. 需要注意的是,文章中的代码片段均是在最新的Google