javascript十大技巧
刘耀文的大沙雕
钟意阿满
Web前端工程师应该知道的JavaScript使用小技巧
今天小编要跟大家分享的文章是关于Web前端工程师应该知道的提高JavaScript。
技能的技巧!熟悉web前端工作的小伙伴都知道，JavaScript是前端工程师的必备技能。JavaScript。
是一种复杂的语言。如果是你是高级或者初级web开发人员，了解它的基本概念非常重要。本篇文章小编就为大家介绍几种提高JavaScript。
技能的技巧，下面让我们一起来看一看吧!。
01、变量赋值(值vs引用)
理解JavaScript如何给变量赋值可以帮助我们减少一些不必要的bug。如果你不理解这一点，可能很容易地编写被无意中更改值的代码。
JavaScript总是按照值来给变量赋值。这一部分非常重要：当指定的值是JavaScript的五种基本类型之一(即。
Boolean，null，undefined，String和Number)时，将分配实际值。但是，当指定的值是。
Array，Function或Object时，将分配对内存中对象的引用给变量。
在以下代码段中，使用var1对var2进行赋值。由于var1是基本类型(String)，因此var2的值等于var1的String。
值，并且可以认为此时与var1完全不同。因此，重新赋值var2对var1没有影响。
letvar1='Mystring';。
letvar2=var1;
var2='Mynewstring';。
console.log(var1);。
//'Mystring'
console.log(var2);。
//'Mynewstring'。
接着，与对象赋值进行比较。
letvar1={name:'Jim'}。
letvar2=var1;
var2.name='John';。
console.log(var1);。
//{name:'John'}。
console.log(var2);。
//{name:'John'}。
如果你期望它会像原始类型赋值那样，很可能会出问题!如果你创建了一个无意中会改变对象的函数，就会出现一些非预期的行为。
02、闭包
闭包是一个重要的JavaScript模式，可以私有访问变量。在本例中，createGreeter返回一个匿名函数，这个函数可以访问参数。
greeting(在这里是“Hello”)。在后续的调用中，sayHello将有权访问这个greeting!。
functioncreateGreeter(greeting){。
returnfunction(name){。
console.log(greeting+','+name);。
constsayHello=createGreeter('Hello');。
sayHello('Joe');。
//Hello,Joe
在更真实的场景中，你可以设想一个初始函数apiConnect(apiKey)，它返回一些使用APIkey的方法。在这种情况下，apiKey。
只需要提供一次即可。
functionapiConnect(apiKey){。
functionget(route){。
returnfetch(`${route}?key=${apiKey}`);。
functionpost(route,params){。
returnfetch(route,{。
method:'POST',
body:JSON.stringify(params),。
headers:{
'Authorization':`Bearer${apiKey}`。
})
return{get,post}。
constapi=apiConnect('my-secret-key');。
//NoneedtoincludetheapiKeyanymore。
api.get('#/get-endpoint');。
api.post('#/post-endpoint',{name:'Joe'});。
03、解构
JavaScript参数解构可以从对象中干中提取所需属性的常用方法。
constobj={
ame:'Joe',
food:'cake'
const{name,food}=obj;。
console.log(name,food);。
//'Joe''cake'
如果要以其他名称提取属性，可以使用如下方式：
constobj={
ame:'Joe',
food:'cake'
const{name:myName,food:myFood}=obj;。
console.log(myName,myFood);。
//'Joe''cake'
解构经常也用于直接用于提取传给函数的参数。如果你熟悉React，可能已经见过这个：
constperson={
ame:'Eddie',
age:24
functionintroduce({name,age}){。
console.log(`I'm${name}andI'm${age}yearsold!`);。
console.log(introduce(person));。
//"I'mEddieandI'm24yearsold!"。
04、展开运算
ES6的一个常用之一的特性就是展开(...)运算符了,在下面的例子中，Math.max不能应用于arr。
数组，因为它不将数组作为参数，但它可以将各个元素作为参数传入。展开运算符...可用于提取数组的各个元素。
constarr=[4,6,-1,3,10,4];。
constmax=Math.max(...arr);。
console.log(max);。
//10
05、剩余参数
剩余参数语法和展开语法看起来的一样的，不同的是展开语法是为了结构数组和对象;而剩余参数和展开运算符是相反的，剩余参数收集多个元素合成一个数组。
functionmyFunc(...args){。
console.log(args[0]+args[1]);。
myFunc(1,2,3,4);。
//3
restparameters和arguments的区别。
1.arguments是伪数组，包含所有的实参。
2.剩余参数是标准的数组，可以使用数组的方法。
06、数组方法
JavaScript数组方法通常可以提供令人难以置信的、优雅的方法来执行所需的数据转换。作为StackOverflow。
的贡献者，我经常看到关于如何以某种方式操纵对象数组的问题，这往往也是数组方法的完美用例。
map、filter、reduce。
JavaScript数组方法map、filter和reduce容易混淆，这些都是转换数组或返回聚合值的有用方法。
map：返回一个数组，其中每个元素都使用指定函数进行过转换。
constarr=[1,2,3,4,5,6];。
constmapped=arr.map(el=>el+20);。
console.log(mapped);。
//[21,22,23,24,25,26]。
filter：返回一个数组，只有当指定函数返回true时，相应的元素才会被包含在这个数组中。
constarr=[1,2,3,4,5,6];。
constfiltered=arr.filter(el=>el===2||el===4);。
console.log(filtered);。
//[2,4]
reduce:按函数中指定的值累加。
constarr=[1,2,3,4,5,6];。
constreduced=arr.reduce((total,current)=>total+current);。
console.log(reduced);。
//21
find,findIndex,indexOf。
find：返回与指定条件匹配的第一个实例，如果查到不会继续查找其他匹配的实例。
constarr=[1,2,3,4,5,6,7,8,9,10];。
constfound=arr.find(el=>el>5);。
console.log(found);。
//6
再次注意，虽然5之后的所有元素都满足条件，但是只返回第一个匹配的元素。当你发现匹配项时，通常会中断for循环，在这种情况下，这实际上非常有用。
findIndex：这与find几乎完全相同，但不是返回第一个匹配元素，而是返回第一个匹配元素的索引。
constarr=['Nick','Frank','Joe','Frank'];。
constfoundIndex=arr.findIndex(el=>el==='Frank');。
console.log(foundIndex);。
//1
indexOf：与findIndex几乎完全相同，但它不是将函数作为参数，而是采用一个简单的值。
当w你需要更简单的逻辑并且不需要使用函数来检查是否存在匹配时，可以使用此方法。
constarr=['Nick','Frank','Joe','Frank'];。
constfoundIndex=arr.indexOf('Frank');。
console.log(foundIndex);。
//1
push,pop,shift,unshift。
push：这是一个相对简单的方法，它将一个项添加到数组的末尾。它就地修改数组，函数本身会返回添加到数组中的项。
letarr=[1,2,3,4];。
constpushed=arr.push(5);。
console.log(arr);。
//[1,2,3,4,5]
console.log(pushed);。
//5
pop:这将从数组中删除最后一项。同样，它在适当的位置修改数组，函数本身返回从数组中删除的项。
letarr=[1,2,3,4];。
constpopped=arr.pop();。
console.log(arr);。
//[1,2,3]
console.log(popped);。
//4
shift:从数组中删除第一项。同样，它在适当的位置修改数组。函数本身返回从数组中删除的项。
letarr=[1,2,3,4];。
constshifted=arr.shift();。
console.log(arr);。
//[2,3,4]
console.log(shifted);。
//1
unshift:将一个或多个元素添加到数组的开头。同样，它在适当的位置修改数组。与许多其他方法不同，函数本身返回数组的新长度。
letarr=[1,2,3,4];。
constunshifted=arr.unshift(5,6,7);。
console.log(arr);。
//[5,6,7,1,2,3,4]。
console.log(unshifted);。
//7
splice,slice
splice：通过删除或替换现有元素和/或添加新元素来更改数组的内容，此方法会修改了数组本身。
下面的代码示例的意思是：在数组的位置1上删除0个元素，并插入b。
letarr=['a','c','d','e'];。
arr.splice(1,0,'b')。
slice：从指定的起始位置和指定的结束位置之前返回数组的浅拷贝。如果未指定结束位置，则返回数组的其余部分。
重要的是，此方法不会修改数组，而是返回所需的子集。
letarr=['a','b','c','d','e'];。
constsliced=arr.slice(2,4);。
console.log(sliced);。
//['c','d']
console.log(arr);。
//['a','b','c','d','e']。
sort
sort：根据提供的函数对数组进行排序。这个方法就地修改数组。如果函数返回负数或0，则顺序保持不变。如果返回正数，则交换元素顺序。
letarr=[1,7,3,-1,5,7,2];。
constsorter=(firstEl,secondEl)=>firstEl-secondEl;。
arr.sort(sorter);。
console.log(arr);。
//[-1,1,2,3,5,7,7]。
07、Generators(生成器)。
生成器是一种特殊的行为，实际上是一种设计模式，我们通过调用next()方法来遍历一组有序的值。想象一下，例如使用遍历器对数组[1,2,3,4,5]进行遍历。第一次调用next()方法返回1，第二次调用next()方法返回2，以此类推。当数组中的所有值都返回后，调用next()方法将返回null或false或其它可能的值用来表示数组中的所有元素都已遍历完毕。
function*greeter(){。
yield'Hi';
yield'Howareyou?';。
yield'Bye';
constgreet=greeter();。
console.log(greet.next().value);。
//'Hi'
console.log(greet.next().value);。
//'Howareyou?'
console.log(greet.next().value);。
//'Bye'
console.log(greet.next().value);。
//undefined
使用生成器生成无限个值：
function*idCreator(){。
leti=0;
while(true)
yieldi++;
constids=idCreator();。
console.log(ids.next().value);。
//0
console.log(ids.next().value);。
//1
console.log(ids.next().value);。
//2
//etc...
08、恒等运算符(===)与相等运算符(==)。
大家一定要知道JavaScript中的恒等运算符(===)和相等运算符(==)之间的区别!。
==运算符在比较值之前会进行类型转换，而===运算符在比较之前不会进行任何类型转换。
console.log(0=='0');。
//true
console.log(0==='0');。
//false
09、对象比较
我看到JavaScript新手所犯的错误是直接比较对象。变量指向内存中对象的引用，而不是对象本身!实际比较它们的一种方法是将对象转换为JSON。
字符串。这有一个缺点：对象属性顺序不能保证!比较对象的一种更安全的方法是引入专门进行深度对象比较的库(例如，lodash的isEqual)。
下面的对象看起来是相等的，但实际上它们指向不同的引用。
constjoe1={name:'Joe'};。
constjoe2={name:'Joe'};。
console.log(joe1===joe2);。
//false
相反，下面的计算结果为true，因为一个对象被设置为与另一个对象相等，因此指向相同的引用(内存中只有一个对象)。
constjoe1={name:'Joe'};。
constjoe2=joe1;。
console.log(joe1===joe2);。
//true
相反，以下计算结果为true，因为一个对象设置为等于另一个对象，因此指向相同的引用(内存中只有一个对象)。
constjoe1={name:'Joe'};。
constjoe2=joe1;。
console.log(joe1===joe2);。
//true
10、回调函数
很多人都被JavaScript回调函数吓倒了!他们很简单，举个例子。console.log函数作为回调传递给myFunc。
它在setTimeout完成时执行。
functionmyFunc(text,callback){。
setTimeout(function(){。
callback(text);。
},2000);
myFunc('Helloworld!',console.log);。
//'Helloworld!'。
11、Promises
一旦你理解了JavaScript回调，很快就会发现自己陷入了“回调地狱”中。这个时候可以使用promise,将异步逻辑包装在promise。
中，成功时resolve或在失败时reject使用“then”来处理成功的情况，使用catch来处理异常。
constmyPromise=newPromise(function(res,rej){。
setTimeout(function(){。
if(Math.random()。
returnres('Hooray!');。
returnrej('Ohno!');。
},1000);
});
myPromise
.then(function(data){。
console.log('Success:'+data);。
})
.catch(function(err){。
console.log('Error:'+err);。
});
//IfMath.random()returnslessthan0.9thefollowingislogged:。
//"Success:Hooray!"。
//IfMath.random()returns0.9orgreaterthefollowingislogged:。
//"Error:Onno!"。
12、Async/Await
在掌握了promise的用法后，你可能也会喜欢asyncawait，它只是一种基于promise。
的“语法糖”。在下面的示例中，我们创建了一个async函数，并awaitgreeterpromise。
constgreeter=newPromise((res,rej)=>{。
setTimeout(()=>res('Helloworld!'),2000);。
})
asyncfuncti
抱起亚轩找小葵
javascript常用的技巧
今天小编要跟大家分享的文章是关于Web前端工程师应该知道的JavaScript使用小技巧。任何一门技术在实际中都会有一些属于自己的小技巧。同样的，在使用JavaScript时也有一些自己的小技巧，只不过很多时候有可能容易被大家忽略。而在互联网上，时不时的有很多同行朋友会总结(或收集)一些这方面的小技巧。
今天在这篇文章中，小编会整理一些大家熟悉或不熟悉的有关于JavaScript的小技巧，希望能够对大家的学习和工作有所帮助。
一、数组
先来看使用数组中常用的一些小技巧。
01、数组去重
ES6提供了几种简洁的数组去重的方法，但该方法并不适合处理非基本类型的数组。对于基本类型的数组去重，可以使用...new。
Set()来过滤掉数组中重复的值，创建一个只有唯一值的新数组。
constarray=[1,1,2,3,5,5,1]。
constuniqueArray=[...newSet(array)];。
console.log(uniqueArray);。
>Result:(4)[1,2,3,5]。
这是ES6中的新特性，在ES6之前，要实现同样的效果，我们需要使用更多的代码。该技巧适用于包含基本类型的数组：undefined、null、boolean、string和number。如果数组中包含了一个object,function或其他数组，那就需要使用另一种方法。
除了上面的方法之外，还可以使用Array.from(newSet())来实现：
constarray=[1,1,2,3,5,5,1]。
Array.from(newSet(array))。
>Result:(4)[1,2,3,5]。
另外，还可以使用Array的.filter及indexOf()来实现：
constarray=[1,1,2,3,5,5,1]。
array.filter((arr,index)=>array.indexOf(arr)===index)。
>Result:(4)[1,2,3,5]。
注意，indexOf()方法将返回数组中第一个出现的数组项。这就是为什么我们可以在每次迭代中将indexOf()方法返回的索引与当索索引进行比较，以确定当前项是否重复。
02、确保数组的长度
在处理网格结构时，如果原始数据每行的长度不相等，就需要重新创建该数据。为了确保每行的数据长度相等，可以使用Array.fill来处理：
letarray=Array(5).fill('');。
console.log(array);。
>Result:(5)["","","","",""]。
03、数组映射
不使用Array.map来映射数组值的方法。
constarray=[
ame:'大漠',
email:'w3cplus@#'。
},
ame:'Airen',
email:'airen@#'。
constname=Array.from(array,({name})=>name)。
>Result:(2)["大漠","Airen"]。
04、数组截断
如果你想从数组末尾删除值(删除数组中的最后一项)，有比使用splice()更快的替代方法。
例如，你知道原始数组的大小，可以重新定义数组的length属性的值，就可以实现从数组末尾删除值：
letarray=[0,1,2,3,4,5,6,7,8,9]。
console.log(array.length)。
>Result:10
array.length=4
console.log(array)。
>Result:(4)[0,1,2,3]。
这是一个特别简洁的解决方案。但是，slice()方法运行更快，性能更好：
letarray=[0,1,2,3,4,5,6,7,8,9];。
array=array.slice(0,4);。
console.log(array);。
>Result:[0,1,2,3]。
05、过滤掉数组中的falsy值。
如果你想过滤数组中的falsy值，比如0、undefined、null、false，那么可以通过map和filter方法实现：
constarray=[0,1,'0','1','大漠','#',undefined,true,false,null,'undefined','null',NaN,'NaN','1'+0]。
array.map(item=>{。
returnitem
}).filter(Boolean)。
>Result:(10)[1,"0","1","大漠","#",true,"undefined","null","NaN","10"]。
06、获取数组的最后一项
数组的slice()取值为正值时，从数组的开始处截取数组的项，如果取值为负整数时，可以从数组末属开始获取数组项。
letarray=[1,2,3,4,5,6,7]。
constfirstArrayVal=array.slice(0,1)。
>Result:[1]
constlastArrayVal=array.slice(-1)。
>Result:[7]
console.log(array.slice(1))。
>Result:(6)[2,3,4,5,6,7]。
console.log(array.slice(array.length))。
>Result:[]
正如上面示例所示，使用array.slice(-1)获取数组的最后一项，除此之外还可以使用下面的方式来获取数组的最后一项：
console.log(array.slice(array.length-1))。
>Result:[7]
07、过滤并排序字符串列表
你可能有一个很多名字组成的列表，需要过滤掉重复的名字并按字母表将其排序。
在我们的例子里准备用不同版本语言的JavaScript。
保留字的列表，但是你能发现，有很多重复的关键字而且它们并没有按字母表顺序排列。所以这是一个完美的字符串列表(数组)来测试我们的JavaScript小知识。
varkeywords=['do','if','in','for','new','try','var','case','else','enum','null','this','true','void','with','break','catch','class','const','false','super','throw','while','delete','export','import','return','switch','typeof','default','extends','finally','continue','debugger','function','do','if','in','for','int','new','try','var','byte','case','char','else','enum','goto','long','null','this','true','void','with','break','catch','class','const','false','final','float','short','super','throw','while','delete','double','export','import','native','public','return','static','switch','throws','typeof','boolean','default','extends','finally','package','private','abstract','continue','debugger','function','volatile','interface','protected','transient','implements','instanceof','synchronized','do','if','in','for','let','new','try','var','case','else','enum','eval','null','this','true','void','with','break','catch','class','const','false','super','throw','while','yield','delete','export','import','public','return','static','switch','typeof','default','extends','finally','package','private','continue','debugger','function','arguments','interface','protected','implements','instanceof','do','if','in','for','let','new','try','var','case','else','enum','eval','null','this','true','void','with','await','break','catch','class','const','false','super','throw','while','yield','delete','export','import','public','return','static','switch','typeof','default','extends','finally','package','private','continue','debugger','function','arguments','interface','protected','implements','instanceof'];。
因为我们不想改变我们的原始列表，所以我们准备用高阶函数叫做filter，它将基于我们传递的回调方法返回一个新的过滤后的数组。回调方法将比较当前关键字在原始列表里的索引和新列表中的索引，仅当索引匹配时将当前关键字push到新数组。
最后我们准备使用sort方法排序过滤后的列表，sort只接受一个比较方法作为参数，并返回按字母表排序后的列表。
在ES6下使用箭头函数看起来更简单:。
constfilteredAndSortedKeywords=keywords。
.filter((keyword,index)=>keywords.lastIndexOf(keyword)===index)。
.sort((a,b)=>a。
这是最后过滤和排序后的JavaScript保留字列表：
console.log(filteredAndSortedKeywords);。
>Result:['abstract','arguments','await','boolean','break','byte','case','catch','char','class','const','continue','debugger','default','delete','do','double','else','enum','eval','export','extends','false','final','finally','float','for','function','goto','if','implements','import','in','instanceof','int','interface','let','long','native','new','null','package','private','protected','public','return','short','static','super','switch','synchronized','this','throw','throws','transient','true','try','typeof','var','void','volatile','while','with','yield']。
08、清空数组
如果你定义了一个数组，然后你想清空它。通常，你会这样做：
letarray=[1,2,3,4];。
functionemptyArray(){。
array=[];
emptyArray();
但是，这有一个效率更高的方法来清空数组。你可以这样写:。
letarray=[1,2,3,4];。
functionemptyArray(){。
array.length=0;。
emptyArray();
09、拍平多维数组
使用...运算符，将多维数组拍平：
10、从数组中获取最大值和最小值。
可以使用Math.max和Math.min取出数组中的最大小值和最小值：
constnumbers=[15,80,-9,90,-99]。
constmaxInNumbers=Math.max.apply(Math,numbers)。
constminInNumbers=Math.min.apply(Math,numbers)。
console.log(maxInNumbers)。
>Result:90
console.log(minInNumbers)。
>Result:-99
另外还可以使用ES6的...运算符来完成：
constnumbers=[1,2,3,4];。
Math.max(...numbers)。
>Result:4
Math.min(...numbers)。
>>Result:1。
二、对象
在操作对象时也有一些小技巧。
01、使用...运算符合并对象或数组中的对象。
同样使用ES的...运算符可以替代人工操作，合并对象或者合并数组中的对象。
//合并对象
constobj1={
ame:'大漠',
url:'#'
constobj2={
ame:'airen',
age:30
constmergingObj={...obj1,...obj2}。
>Result:{name:"airen",url:"#",age:30}。
//合并数组中的对象
constarray=[
ame:'大漠',
email:'w3cplus@#'。
},
ame:'Airen',
email:'airen@#'。
constresult=array.reduce((accumulator,item)=>{。
return{
...accumulator,。
[item.name]:item.email。
},{})
>Result:{大漠:"w3cplus@#",Airen:"airen@#"}。
02、有条件的添加对象属性
不再需要根据一个条件创建两个不同的对象，以使它具有特定的属性。为此，使用...操作符是最简单的。
constgetUser=(emailIncluded)=>{。
return{
ame:'大漠',
blog:'w3cplus',。
...emailIncluded&&{email:'w3cplus@#'}。
constuser=getUser(true)。
console.log(user)。
>Result:{name:"大漠",blog:"w3cplus",email:"w3cplus@#"}。
constuserWithoutEmail=getUser(false)。
console.log(userWithoutEmail)。
>Result:{name:"大漠",blog:"w3cplus"}。
03、解构原始数据
你可以在使用数据的时候，把所有数据都放在一个对象中。同时想在这个数据对象中获取自己想要的数据。
在这里可以使用ES6的Destructuring特性来实现。比如你想把下面这个obj中的数据分成两个部分：
constobj={
ame:'大漠',
blog:'w3cplus',。
email:'w3cplus@#',。
joined:'2019-06-19',。
followers:45
letuser={},userDetails={}。
({name:user.name,email:user.email,...userDetails}=obj)。
>{name:"大漠",blog:"w3cplus",email:"w3cplus@#",joined:"2019-06-19",followers:45}。
console.log(user)。
>Result:{name:"大漠",email:"w3cplus@#"}。
console.log(userDetails)。
>Result:{blog:"w3cplus",joined:"2019-06-19",followers:45}。
04、动态更改对象的key
在过去，我们首先必须声明一个对象，然后在需要动态属性名的情况下分配一个属性。在以前，这是不可能以声明的方式实现的。不过在ES6中，我们可以实现：
constdynamicKey='email'。
letobj={
ame:'大漠',
blog:'w3cplus',。
[dynamicKey]:'w3cplus@#'。
console.log(obj)。
>Result:{name:"大漠",blog:"w3cplus",email:"w3cplus@#"}。
05、判断对象的数据类型
使用Object.prototype.toString配合闭包来实现对象数据类型的判断：
constisType=type=>target=>`[object${type}]`===Object.prototype.toString.call(target)。
constisArray=isType('Array')([1,2,3])。
console.log(isArray)。
>Result:true。
上面的代码相当于：
functionisType(type){。
returnfunction(target){。
return`[object${type}]`===Object.prototype.toString.call(target)。
isType('Array')([1,2,3])。
>Result:true。
或者：
constisType=type=>target=>`[object${type}]`===Object.prototype.toString.call(target)。
constisString=isType('String')。
constres=isString(('1'))。
console.log(res)。
>Result:true。
06、检查某对象是否有某属性
当你需要检查某属性是否存在于一个对象，你可能会这样做：
varobj={
ame:'大漠'
if(obj.name){
console.l
大圣杰锅是
帮助Web前端初学者快速掌握JavaScript技术的方法
1) 使用!!将变量转换成布尔类型。
有时，我们需要检查一些变量是否存在，或者它是否具有有效值，从而将它们的值视为true。对于做这样的检查，你可以使用||（双重否定运算符），它能自动将任何类型的数据转换为布尔值，只有这些变量才会返回false：0，null，""，undefined或NaN，其他的都返回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 。
在这个例子中，如果account.cash的值大于零，则account.hasMoney的值就是true。
2) 使用+将变量转换成数字
这个转换超级简单，但它只适用于数字字符串，不然就会返回NaN（不是数字）。看看这个例子：
function toNumber(strNumber) {。
return +strNumber;。
console.log(toNumber("1234")); // 1234 。
console.log(toNumber("ACB")); // NaN 。
这个转换操作也可以作用于Date，在这种情况下，它将返回时间戳：
console.log(+new Date()) // 1461288164385 。
3) 短路条件
如果你看到过这种类似的代码:
if (conected) {。
login();
那么你可以在这两个变量之间使用&&（AND运算符）来缩短代码。例如，前面的代码可以缩减到一行：
conected && login(); 。
你也可以用这种方法来检查对象中是否存在某些属性或函数。类似于以下代码：
user && user.login(); 。
4) 使用||设置默认值
在ES6中有默认参数这个功能。为了在旧版浏览器中模拟此功能，你可以使用||（OR运算符），并把默认值作为它的第二个参数。如果第一个参数返回false，那么第二个参数将会被作为默认值返回。看下这个例子：
function User(name, age) {。
this.name = name || "Oliver Queen";。
this.age = age || 27;。
var user1 = new User(); 。
console.log(user1.name); // Oliver Queen 。
console.log(user1.age); // 27。
var user2 = new User("Barry Allen", 25); 。
console.log(user2.name); // Barry Allen 。
console.log(user2.age); // 25 。
5) 在循环中缓存array.length。
这个技巧非常简单，并且在循环处理大数组时能够避免对性能造成巨大的影响。基本上几乎每个人都是这样使用for来循环遍历一个数组的：
for (var i = 0; i < array.length; i++) {。
console.log(array[i]);。
如果你使用较小的数组，那还好，但是如果处理大数组，则此代码将在每个循环里重复计算数组的大小，这会产生一定的延迟。为了避免这种情况，你可以在变量中缓存array.length，以便在循环中每次都使用缓存来代替array.length：
var length = array.length; 。
for (var i = 0; i < length; i++) {。
console.log(array[i]);。
为了更简洁，可以这么写：
for (var i = 0, length = array.length; i < length; i++) {。
console.log(array[i]);。
6) 检测对象中的属性
当你需要检查某些属性是否存在，避免运行未定义的函数或属性时，这个技巧非常有用。如果你打算编写跨浏览器代码，你也可能会用到这个技术。例如，我们假设你需要编写与旧版Internet Explorer 6兼容的代码，并且想要使用document.querySelector()来通过ID获取某些元素。 但是，在现代浏览器中，这个函数不存在。所以，要检查这个函数是否存在，你可以使用in运算符。看下这个例子：
if ('querySelector' in document) {。
document.querySelector("#id");。
} else {
document.getElementById("id");。
在这种情况下，如果在document中没有querySelector函数，它就会使用document.getElementById()作为代替。
小韩在追星
老司机常用的几个JavaScript调试技巧
今天小编要跟大家分享的文章是关于帮助web前端初学者快速掌握JavaScript技术的方法。当你试图学习JavaScript或其他编程语言的时候，你通常会遇到如下挑战：
·一些概念让你感到困惑，特别是如果之前学过其他类型的语言。
·很难找到学习的时间(或者动力)去学习。
·你很容易忘掉之前学到的东西。
·JavaScript工具太多并且经常更新，以至于很难找到学习的切入点。
幸运的是，这些难题最终能够被克服。在这篇文章，将展示六个能够帮助你更快、更开心、更高效地学习JavaScript的六个思维技巧。下面来和小编一起看一看吧！
1、不要对未来的忧虑干扰你现在的学习。
有些JavaScript初学者会问刚开始要学习哪种框架，但是如果你还没能熟练使用原生JavaScript，你就不应该问这种问题。因为你会花很多时间研究各种框架而得不到进步。
走出这个陷阱的一个方法是制定一个学习路径图。例如，要成为前端开发，你的路径图可能是下图。在将来你能够使用HTML和CSS制作动态页面。
将上图步骤分开执行，每个时间段只专注于提高一项技能，你将不会把时间浪费在担心后面的技能上。
2、不要让自信骗你进入持续遗忘的陷阱。
快速理解一个概念会是JavaScript进步的最大阻碍，下面我将解释。
当你遇到一个知识点，而你好像理解了，你很可能抑制不住内心跳到下一个知识点的冲动。现实可能是你会理解下一个知识点然后继续跳到下一个知识点。但是，很快你会到达一个节点，在这个节点你发现自己已经忘了前面所学，于是你需要回过头复习，你快速瞟了一下之前所学然后又继续学习新的知识。但是现在，你忘记了其他东西。你一直重复这种继续-回顾-继续-回顾模式直到你发现自己完全迷失。你开始沮丧，想要休息，然后当你开始重振旗鼓，却发现自己已经忘掉所有。
幸运的是，我们有两个应对上述问题的方法：
1、一次只学一样东西
2、做练习-实际上是敲代码
当你学习一个新的概念，你要将它实践出来，练习它，与它和善相处，甚至能够将它与其他概念联系到一起。当你学习一个示例，最重要的是你要自己将代码敲出来，这样能帮助你吸收它。另外，一次只学一个东西能够帮助你巩固所学，因为记忆更少的东西更容易。
这个过程看起来貌似比阅读然后快速跳到下一个知识点要花费更长的时间，但是实际上它所花的时间更少，因为这样你就不需要频繁复习之前所学。我在好几个场合后才艰难的领悟到这个道理。
3、使用正确的思维方式练习
很多人认为敲代码是烦人的重复性工作，所以他们通常会跳过这个步骤试着寻找捷径。如果你试图为JavaScript练习寻找捷径，你将会为此花费更多的时间。但是我们如何才能使得敲代码更加的有趣，使得我们愿意去敲代码呢?。
试着改变为下面的思维模式：
如果你刚学了一个JavaScript概念，然而你被告知不能使用它，对此你感觉如何?个人来说我会感到有点恼火，特别是为了弄懂它我花费了宝贵的时间。这就像是一个小孩得到了一个新的玩具，但却被限制不能玩它。
当你学习JavaScript的新知识，试着将这个知识点视作一个新玩具，例如新车、一双新鞋、或任何你觉得值得有趣的东西。然后，不要把敲代码当成工作，将敲代码视作你正在玩游戏。你正在使用刚学的技能做一些很酷的事情。给自己惊喜，把成果展示给你的朋友。
带着游戏的思维模式你将学得更快，将记忆的更牢，同时你将体会到更多乐趣。
4、使用Facebook技巧为编程腾时间。
人们遇到的一个普遍问题是，他们通常找不到时间去敲代码。通常，这些人会花好几个小时浏览例如Facebook、YouTube、Wikipedia或者Reddit这样的网站。无论你是否符合上述描述，我们都能从中学到一些东西。
我当然有时间只浏览Facebook一会儿，但通常我会在上面待好几个小时浏览往返。这是如何发生的?我认为原因在于，刚开始我并没打算花在这上面花费那么多时间。开始行动是做一件事情最困难的部分，所以将目标设定的足够小能够帮助我们进入状态。如果有人问我是不是打算花几个小时浏览Facebook，我会回答不，因为我没有时间。然而，对于仅仅尝试一下我是能够接受的，这也是我能够沉浸其中的方法。
好消息是，你能够对敲代码运用同样的心理技巧。不要计划花几个小时敲代码，因为你会发现自己没有时间。相反的，告诉自己只敲三分钟代码。这样你就不需要为寻找敲代码的时间烦心。
5、思考的慢你将学得更快
这一条听起来违反直觉，所以下面我将用一个故事来解释。
我的一个朋友又一次对JavaScript的一个特性感到困惑。我让他将他知道的解释给我听，然后告诉我哪儿让他困惑。当它向我解释代码，我发现他在跳步。
“等会儿!”我说道。“慢慢来，然后将这些一步步解释给我听。”
我的朋友直接将整个代码的功能总结给我听。
我再次让他暂停。“你还是在跳步。再解释一次，这次我需要你一步步将每一行代码发生了什么解释给我听。”
这一次，我的朋友能够更好的解释代码是如何运行的。关键在于他花时间去理解每一行代码而不是试图一下理解所有。
在上述这种案例中，思考的更慢实际上让你学得更快。
6、在写复杂代码前先用简单语言写下。
如果你要写的代码是复杂并且不常见的，先用简单语言将代码写下。这样，你能够你能够在真正写之前知道自己要做什么。下面是使用这个方法的两个好处：
1、你将更容易更快速的写代码，因为你不需要时刻停下来思考自己将要怎么做。
2、由于你知道代码要干什么，能够更好的排除错误。
总结：
我们已经讲了好几个更快速学习JavaScript的方法，但是你也能将上述方法运用于学习其他东西。下面是上述方法的概括：
1、不要再想将要学什么，沉浸于现在。
2、通过把新技能当做玩具使得练习更有趣。
3、就像浏览Facebook、YouTube之类的网站一样，在敲代码前告诉自己只敲几分钟，这样你就拥有了敲代码的时间。
4、慢下来，小步向前，你将学得更快。
以上就是小编今天为大家分享的关于帮助web前端初学者快速掌握JavaScript技术的方法的文章，希望本篇文章能够对正在从事web前端学习的小伙伴们有所帮助，想要了解更多web前端相关知识记得关注北大青鸟web培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的web前端工程师。
来源：#/shehui/2016/10-24/11717064.html。
小韩在追星
javascript 一个小技巧
1. debugger
2. 用表格显示对象
有时， 有一组复杂的对象要查看。可以通过console.log查看并滚动浏览，亦或者使用console.table展开，更容易看到正在处理的内容！
var animals = [。
{ animal: 'Horse', name: 'Henry', age: 43 },。
{ animal: 'Dog', name: 'Fred', age: 13 },。
{ animal: 'Cat', name: 'Frodo', age: 18 }。
];console.table(animals);。
3. 使用不同屏幕尺寸
在桌面上安装不同移动设备模拟器非常棒，但现实确是不可行的。如何调整窗口大小呢？Chrome提供了所需的一切。跳到控制台并点击‘切换设备模式’按钮。观察窗口变化即可!。
4. 使用 console.time() 和 console.timeEnd() 测试循环。
要得知某些代码的执行时间，特别是调试缓慢循环时，非常有用。 甚至可以通过给方法传入不同参数，来设置多个定时器。来看看它是怎么运行的：
console.time('Timer1');var items = [];for(var i = 0; i < 100000; i++){。
items.push({index: i});。
}console.timeEnd('Timer1');。