导航:首页 > 使用方法 > js好用常用的方法

js好用常用的方法

发布时间:2022-08-25 08:07:29

① js常用的方法有几种

concat()连接两个或更多的数组,并返回结果。
join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()删除并返回数组的最后一个元素
push()向数组的末尾添加一个或更多元素,并返回新的长度。
reverse()颠倒数组中元素的顺序。

② Web前端工程师应该知道的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,Ɔ',Ƈ','大漠','#',undefined,true,false,null,'undefined','null',NaN,'NaN',Ƈ'+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下使用箭头函数看起来更简单:

=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.rece((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:񟭓-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((Ƈ'))

console.log(res)

>Result:true

06、检查某对象是否有某属性


当你需要检查某属性是否存在于一个对象,你可能会这样做:

varobj={

ame:'大漠'

}

if(obj.name){

console.l

③ js中操作数组的几个常用方法

1. Array.shift()------删除并返回第一个元素
作用:从数组中删除第一个元素(即下标为0的元素),并返回该元素。
注意:1)删除元素之后,数组的长度-1。2)如果数组是空的,那么 shift() 方法将不进行任何操作,返回 undefined 值。

④ underscorejs中比较好用的函数有哪些

jquery主要是用于处理js和html页面交互的,封装了很多操作dom的方法,以及ajax,相比于原生的js更加的简洁,提高了开发效率。而underscore则可以理解为一个js的函数库,其中主要封装了一些常用的js方法,比如数组操作的map,rece,filter等等,不过这些函数大多在es6中已经实现了。类似underscore的还是lodash,都是辅助js开发的。

⑤ 细谈JS刷新页面常用方法有哪些

js常见的几种页面刷新方法如下:
1 history.go(0);
2 location.reload();
3 location=location;
4 location.assign(location);
5 document.execCommand(‘Refresh‘);
6 window.navigate(location);
7 location.replace(location);
8 document.URL=location.href;
以上几种方法都是单纯的属性当前页面,如果框架页面中有子页面,只想刷新子页面的时候,可以用以下方法:
top.location.reload(); 刷新整页
self.location.reload(); 刷新本页
window.location.href="自定义页面地址";
自动刷新页面的方法:
在<head>标签中加入<meta http-equiv="refresh" content="10">
其中content是时间间隔,每10s刷新一次
在body中添加onload="opener.location.reload()",即<body onload="opener.location.reload()"> 为页面启动时刷新
在body中添加onUnload="opener.location.reload()",即<bodyonUnload="opener.location.reload()"> 为页面关闭时刷新

⑥ 关于JS截取字符串以及截取数组项的几种常见方法解析

关于js数组的用法有很多,下面主要针对一些简单的操作,比如合并,反转,添加删除等简单的操作总结一下。
关于js数组的用法有很多,下面主要针对一些简单的操作,比如合并,反转,添加删除等简单的操作总结一下。
第一:读取数组 for循环
方法如下:
var ay=[1,"sdsd","sdsd"]for (var i=0;i<ay.length;i++) {
console.log("index:"+i+" "+ay[i]) //index:0 1 index:1 sdsd index:2 sdsd
}
第二:合并数组 concat
方法如下:
var arr1=['w','e','s'];
var arr2=['e','y','u'];var arr3=arr1.concat(arr2);console.log(arr3) //['w','e','s''e','y','u'];第三:数组变为字符串格式 join
方法如下:
var arr1=['w','e','s'];
var arr4=arr1.join()console.log(arr4) //w,e,s
第四:删除最后一个元素,针对老数组是删除最后一个,针对新数组是返回最后一个 pop
var arr6=["d","s","t"];var arr7=arr6.pop();console.log(arr6) // ["d","s"];console.log(arr7);// t
第五:添加最后一个元素,针对老数组最后一个元素后面添加一个元素,新数组返回元素个数 push
var arr8=["i","u","t"];
var arr9=arr8.push("k");
console.log(arr8); //["i","u","t","k"];
console.log(arr9); // 4
第六:shift() 和pop()一样,不同的是操作的是开头删除的元素shift();具体操作不在展示第七:unshiift()和push一样,不同的是操作的是开头添加的元素unshift();具体操作不再展示
第八:反转数组 reverse
方法如下:
var arr1=['w','e','s'];
var arr10=arr1.reverse()
console.log(arr10) //['s','e','w'];
第九:数组排序 sort a-b正向 b-a 反向
正向
var arr11=[3,1,5,8,28]var arr12=arr11.sort(function (a,b) {return a-b;})console.log(arr12) //[1,3,5,8,28];
反向
var arr13=arr11.sort(function (a,b) {return b-a;})console.log(arr13) //[28,8,5,3,1]
第十:数组截取 数组截取的方法主要有slice 和splice,另外说到截取我这里随便也把字符串截取带上,字符串截取的方法主要有substr 和substring
(1)slice 使用方法arr.slice(m,n);其中arr为数组,m,n为两个参数,意思是从已有数组中返回选定的元素,截取位置均为下标,其中m必须,为起始位置,可以为负值,n为结束位置(截取位置并不包含)。
示例如下:
①只有起起始值,并且为正,默认的从起始位置一直到整个数组结束,起始下标从0开始
var arr=[2,3,5,6,8,9]var arr1=arr.slice(1)console.log(arr) // [2,3,5,6,8,9] 老数组是没有变化的,下面不在列举,都是一样的console.log(arr1) //[3,5,6,8,9] 只有起始参数,并且为正值,返回新数组从下标1开始截取
②只有起始值,并且为负,默认的是从起始位置一直到整个数组结束,此处没有起始值,数组的最后一个下标是-1,比如此例,如果从-6开始取,必定是整个数组
var arr=[2,3,5,6,8,9]var arr1=arr.slice(-1)console.log(arr1) //[9] 只有起始参数,并且为负值,从数组尾部截取元素
③有起始值和结束值,并且为正,此处需注意下标是从小到大,比如你(3,1)肯定是取不到值的,另外截取的下标个数并不包含最后一个下标
var arr=[2,3,5,6,8,9]var arr1=arr.slice(1,4)console.log(arr1) //[3,5,6] 此时是从下标1开始到下标4,但是需要注意的是并不包含下标4,准确的说是1-3的下标
④有起始值和结束值,并且为负,此处需注意下秒也是从小到大,同理,比如(-1,-6)也是肯定取不到值的,另外截取的下标个数也并不包含最后一个下标
var arr=[2,3,5,6,8,9]var arr1=arr.slice(-6,-1)console.log(arr1) //[2,3,5,6,8]
⑤有起始值和结束值,并且正负都有
负值到0
var arr=[2,3,5,6,8,9]var arr1=arr.slice(-1,0)
//刚刚都看到了,数组下标都是从小到大的,所以说如果正负都有的情况下,理论上应该可以取值的,比如这个例子,-1为9的小标,0为2的下标,所以取值应该为 [9],但是结果并不是这样的console.log(arr1) //[ ] 从这里可以看出他的结果是为空的,所以从负值到0结果是取不到的
负值到正直
var arr=[2,3,5,6,8,9]
var arr1=arr.slice(-1,2)
//那从负值到正值呢,同样也是取不到值的
console.log(arr1) //[ ]
正直到负值
var arr=[2,3,5,6,8,9]
var arr1=arr.slice(2,-1)
//那从正直到负值,这个理论上是取不到的,但是看下结果
console.log(arr1) //[ 5,6,8] 从结果可以看出是可以取的 原理是2的下标为5,-1的下标为9,不包含结束位置下标
总结:这个方法看着可能会麻烦些(也可能被我写的麻烦啦),比如正到负等,不知道大家都是怎么操作,我一般用这个取值都是只截取正的,所以这个实际操作还是非常简单的。
(2)splice 像数组中添加或者删除元素 arr.splice(m,n,index,index1,...,indexx) m是起始位置,n是删除元素的个数,index是要添加的元素,在不添加元素的前提下,只有第一个参数是必须的,后面两个都不是必须的,在需要添加元素的情况下,三个元素都是必须的,此方法和slice是不一样的,这个返回的是被删除的元素
示例如下:
只删除不添加
注意看此例,是(1,2)删除两个,如果是(1,0),则表示删除零个,也就是不删除的意思,如果只有一个参数则表示从这里开始删除,比如是(1)则为[2],当然这个也是可以取负值,但是这个和slice是不一样的,只能起始位置取负值,因为删除的个数不可能为负值,slice可以取(2,-1),这个就截然不同啦,但是刚刚也说啦,slice是不可以起始位置取负值,结束位置取正的,但是这个是可以的,比如(-1,0)则表示从-1开始删除零个,结果为[2,3,5,6,8,9],(-6,2),结果为[5,6,8,9],另外这个删除的第二个值如果写的过大,也只是删除从本下标到最后一个,比如(2,78)为[2,3]
var arr=[2,3,5,6,8,9]var arr1=arr.splice(1,2)console.log(arr) // [2,6,8,9] 注意看此处才是我们要的数组,从下标1开始删除删除两个console.log(arr1) //[3,5] 此处是我们删除掉的数组
删除加添加 具体的和上面的差不多,主要添加了添加元素的效果,这个也可以添加多个元素
var arr=[2,3,5,6,8,9]var arr1=arr.splice(1,2,"il")console.log(arr) //[2,"li",6,8,9] console.log(arr1) //[3,5]
总结:此方法用的时候,一般也都是只取正值
(3)substr 这个是字符串的用法 用法arr.substr(m,n) m必选也可以负值 n选填,注意看这个并不是结束为止而是截取的个数
示例如下:
只有一个参数 默认从此下标开始,取后面所有的
正值
var arr="sdhgfhf"var arr1=arr.substr(1)console.log(arr)// "sdhgfhf"这个是不变的,下面不再列举console.log(arr1)// "dhgfhf" 从下标1开始取后面所有的
负值
var arr="sdhgfhf"var arr1=arr.substr(-2)console.log(arr1)// "hf" 从下标-2开始取后面所有的
两个参数,从第一个下标开始,截取到下标2的长度
var arr="sdhgfhf"var arr1=arr.substr(1,3)console.log(arr1)// "dhg" 从下标1开始取后面所有的 同理如果为负值,比如(-6,3)则为"hjf";后面的始终为长度
总结:此方法需注意不要和数组的混淆,这个是截取长度的
(4)substring 用法arr.substring(m,n) 两个参数,m必须,起始位置 ,n选填,截取下标的结束位置,此用法和上面slice有点类似,但是需要注意的是此方法是不支持负值的
示例如下:
只有一个参数
var arr="sdhgfhf"var arr1=arr.substring(1)console.log(arr1)//"dhgfhf"从下标1开始取后面所有的
两个参数
var arr="sdhgfhf"var arr1=arr.substring(1,3)console.log(arr1)// "dh"从下标1开始截取到下标3,但是不包含3
总结:此方法不支持负值,只针对下标来截取的

如何封装常用的JS方法

1、JS封装就是尽量把使用的方式简单化,内部逻辑和使用解耦。通俗的说就是使用的时候只需要知道参数和返回值,其他条件尽量不要使用人员进行设置。

2、JS封装的方法有函数方式、对象的方式、闭包的方式。

举例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
1)函数方式
function kk(a,b){
内部对a,b怎么处理就不需要关心了
}

2)对象方式
function kk(a,b){
this.x = a;
this.y = b;
}
var k = new kk(1,2);//通过面向对象的方式
alert(k.x);
3)闭包方式
function kk(a,b){
var k = 1;
return function tt(){
k++;
}
}
var u = kk(1,2);
u();//闭包实现累加
u();//闭包实现累加

⑧ 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');

//

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

}

functionintroce({name,age}){

console.log(`I'm${name}andI'm${age}yearsold!`);

}

console.log(introce(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、rece


JavaScript数组方法map、filter和rece容易混淆,这些都是转换数组或返回聚合值的有用方法。


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]

rece:按函数中指定的值累加constarr=[1,2,3,4,5,6];

constreced=arr.rece((total,current)=>total+current);

console.log(reced);

//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==Ɔ');

//true

console.log(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()<0.9){

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.:

//"Error:Onno!"

12、Async/Await


在掌握了promise的用法后,你可能也会喜欢asyncawait,它只是一种基于promise
的“语法糖”。在下面的示例中,我们创建了一个async函数,并awaitgreeterpromise。

constgreeter=newPromise((res,rej)=>{

setTimeout(()=>res('Helloworld!'),2000);

})

asyncfuncti

阅读全文

与js好用常用的方法相关的资料

热点内容
老疤怎么去除最有效方法 浏览:660
cfoutofmemory解决方法 浏览:705
惠普m436打印机使用方法视频 浏览:522
c型钢的安装方法 浏览:491
中医治湿疹有哪些方法治疗 浏览:356
小乌龟怎么养在家的方法 浏览:309
联想的设备中心在哪里设置方法 浏览:399
双电机顺序控制接线方法图片 浏览:309
扣费失败的原因和解决方法 浏览:383
腰疼什么方法治疗快 浏览:660
化学药物分析评价方法 浏览:544
资源税计算方法 浏览:525
海蜇头的制作方法步骤 浏览:861
如何做腰背肌锻炼方法 浏览:544
用什么方法教大班二十内加减法 浏览:974
土壤doc的计算方法 浏览:454
毛巾折的方法视频 浏览:149
快速治疗宝宝便秘的最佳方法 浏览:14
如何判断议论文论证方法 浏览:975
扑克牌魔术方法大全视频教程 浏览:949