如果需要用javascript獲取id為username1， password1的輸入框的值，將其寫入id為username2， password2的輸入框，那么紅線區(qū)域的代碼是不可取的。這樣看到的結(jié)果是，alert依次彈出username1， password1的輸入框的值，事實(shí)上并沒有成功的賦值。這是為什么？因?yàn)関ar username2 = document.getElementById("username2").value; 這行代碼中username2的值是一個(gè)空字符串，舉個(gè)例子，如果username1 = "123"， 那么username2 = username1;就等價(jià)于""="123"，把一個(gè)字符串賦值給空字符串，沒有意義。同理，password2 = password1；也是一個(gè)道理
10年積累的網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先制作網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有海拉爾免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
解構(gòu)賦值語(yǔ)法是一種 JavaScript 表達(dá)式，通過(guò)解構(gòu)賦值， 可以將屬性/值從對(duì)象/數(shù)組中取出，賦值給其他變量。這種語(yǔ)法是 ECMAscript 6 規(guī)范引入了一種新語(yǔ)法，可以更輕松地從數(shù)組和對(duì)象中獲取值。
只需改動(dòng)上面紅色的四行代碼。如下所示，username2.value有兩個(gè)含義，1. 它的值是空字符串；2. 它表示元素對(duì)象的屬性，username2.value = username1; 就是把id為username1的輸入框的值賦值給id為username2的對(duì)象的屬性。
模塊化在項(xiàng)目中十分的重要，一個(gè)復(fù)雜的項(xiàng)目肯定有很多相似的功能模塊，如果每次都需要重新編寫模塊肯定既費(fèi)時(shí)又耗力。但是引用別人編寫模塊的前提是要有統(tǒng)一的“打開姿勢(shì)”，如果每個(gè)人有各自的寫法，那么肯定會(huì)亂套，下面介紹幾種JS的模塊化的規(guī)范。
一:模塊化進(jìn)程一：script標(biāo)簽
這是最原始的 JavaScript 文件加載方式，如果把每一個(gè)文件看做是一個(gè)模塊，那么他們的接口通常是暴露在全局作用域下，也就是定義在 window 對(duì)象中，不同模塊的接口調(diào)用都是一個(gè)作用域中，一些復(fù)雜的框架，會(huì)使用命名空間的概念來(lái)組織這些模塊的接口。
缺點(diǎn):
1、污染全局作用域
2、開發(fā)人員必須主觀解決模塊和代碼庫(kù)的依賴關(guān)系
3、文件只能按照script標(biāo)簽的書寫順序進(jìn)行加載
4、在大型項(xiàng)目中各種資源難以管理，長(zhǎng)期積累的問(wèn)題導(dǎo)致代碼庫(kù)混亂不堪
二:模塊化進(jìn)程二：CommonJS規(guī)范
該規(guī)范的核心思想是允許模塊通過(guò)require方法來(lái)同步加載所要依賴的其他模塊，然后通過(guò) exports 或 module.exports 來(lái)導(dǎo)出需要暴露的接口。
require("module");
require("../file.js");
exports.doStuff = function(){};
module.exports = someValue;
優(yōu)點(diǎn)：
1、簡(jiǎn)單并容易使用
2、服務(wù)器端模塊便于重用
缺點(diǎn):
1、同步的模塊加載方式不適合在瀏覽器環(huán)境中，同步意味著阻塞加載，瀏覽器資源是異步加載的
2、不能非阻塞的并行加載多個(gè)模塊
module.exports與exports的區(qū)別
1、exports 是指向的 module.exports 的引用
2、module.exports 初始值為一個(gè)空對(duì)象 {}，所以 exports 初始值也是 {}
3、require() 返回的是 module.exports 而不是 exports
exports示例：
// app.js
var circle = require('./circle');
console.log(circle.area(4));
// circle.js
exports.area = function(r){
return r * r * Math.PI;
}
module.exports示例：
// app.js
var area = require('./area');
console.log(area(4));
// area.js
module.exports = function(r){
return r * r * Math.PI;
}
錯(cuò)誤的情況：
// app.js
var area = require('./area');
console.log(area(4));
// area.js
exports = function(r){
return r * r * Math.PI;
}
其實(shí)是對(duì) exports 進(jìn)行了覆蓋，也就是說(shuō) exports 指向了一塊新的內(nèi)存（內(nèi)容為一個(gè)計(jì)算圓面積的函數(shù)），也就是說(shuō) exports 和 module.exports 不再指向同一塊內(nèi)存，也就是說(shuō)此時(shí) exports 和 module.exports 毫無(wú)聯(lián)系，也就是說(shuō) module.exports 指向的那塊內(nèi)存并沒有做任何改變，仍然為一個(gè)空對(duì)象{}，也就是說(shuō)area.js導(dǎo)出了一個(gè)空對(duì)象，所以我們?cè)?app.js 中調(diào)用 area(4) 會(huì)報(bào) TypeError: object is not a function 的錯(cuò)誤。
總結(jié)：當(dāng)我們想讓模塊導(dǎo)出的是一個(gè)對(duì)象時(shí)， exports 和 module.exports 均可使用（但 exports 也不能重新覆蓋為一個(gè)新的對(duì)象），而當(dāng)我們想導(dǎo)出非對(duì)象接口時(shí)，就必須也只能覆蓋 module.exports 。
三:模塊化進(jìn)程三：AMD規(guī)范
由于瀏覽器端的模塊不能采用同步的方式加載，會(huì)影響后續(xù)模塊的加載執(zhí)行，因此AMD(Asynchronous Module Definition異步模塊定義)規(guī)范誕生了。
AMD標(biāo)準(zhǔn)中定義了以下兩個(gè)API
1、require([module], callback);
2、define(id, [depends], callback);
require接口用來(lái)加載一系列模塊，define接口用來(lái)定義并暴露一個(gè)模塊。
示例：
define("module", ["dep1", "dep2"], function(d1, d2){
return someExportedValue;
});
require(["module", "../file"], function(module, file){ /* ... */ });
優(yōu)點(diǎn)：
1、適合在瀏覽器環(huán)境中異步加載模塊
2、可以并行加載多個(gè)模塊
缺點(diǎn)：
1、提高了開發(fā)成本，代碼的閱讀和書寫比較困難，模塊定義方式的語(yǔ)義不順暢
2、不符合通用的模塊化思維方式，是一種妥協(xié)的實(shí)現(xiàn)
四:模塊化進(jìn)程四：CMD規(guī)范
CMD(Common Module Definition)規(guī)范和AMD很相似，盡量保持簡(jiǎn)單，并與CommonJS和Node.js的 Modules 規(guī)范保持了很大的兼容性。在CMD規(guī)范中，一個(gè)模塊就是一個(gè)文件。
示例：
define(function(require, exports, module){
var $ = require('jquery');
var Spinning = require('./spinning');
exports.doSomething = ...
module.exports = ...
})
優(yōu)點(diǎn)：
1、依賴就近，延遲執(zhí)行
2、可以很容易在 Node.js 中運(yùn)行
缺點(diǎn)：
1、依賴 SPM 打包，模塊的加載邏輯偏重
AMD和CMD的區(qū)別
AMD和CMD起來(lái)很相似，但是還是有一些細(xì)微的差別，讓我們來(lái)看一下他們的區(qū)別在哪里：
1、對(duì)于依賴的模塊，AMD是提前執(zhí)行，CMD是延遲執(zhí)行。
2、AMD推崇依賴前置；CMD推崇依賴就近，只有在用到某個(gè)模塊的時(shí)候再去require?？创a：
// AMD
define(['./a', './b'], function(a, b){ // 依賴必須一開始就寫好
a.doSomething()
// 此處略去 100 行
b.doSomething()
...
});
// CMD
define(function(require, exports, module){
var a = require('./a')
a.doSomething()
// 此處略去 100 行
var b = require('./b')
// 依賴可以就近書寫
b.doSomething()
// ...
});
3、AMD 的 API 默認(rèn)是一個(gè)當(dāng)多個(gè)用，CMD 的 API 嚴(yán)格區(qū)分，推崇職責(zé)單一。
五:模塊化進(jìn)程五：ES6模塊化
EcmaScript6標(biāo)準(zhǔn)增加了JavaScript語(yǔ)言層面的模塊體系定義。ES6 模塊的設(shè)計(jì)思想，是盡量的靜態(tài)化，使得編譯時(shí)就能確定模塊的依賴關(guān)系，以及輸入和輸出的變量。CommonJS和AMD模塊，都只能在運(yùn)行時(shí)確定這些東西。
在 ES6 中，我們使用export關(guān)鍵字來(lái)導(dǎo)出模塊，使用import關(guān)鍵字引用模塊。需要說(shuō)明的是，ES6的這套標(biāo)準(zhǔn)和目前的標(biāo)準(zhǔn)沒有直接關(guān)系，目前也很少有JS引擎能直接支持。因此Babel的做法實(shí)際上是將不被支持的import翻譯成目前已被支持的require。
盡管目前使用import和require的區(qū)別不大(本質(zhì)上是一回事)，但依然強(qiáng)烈推薦使用import關(guān)鍵字，因?yàn)橐坏㎎S引擎能夠解析ES6的import關(guān)鍵字，整個(gè)實(shí)現(xiàn)方式就會(huì)和目前發(fā)生比較大的變化。如果目前就開始使用import關(guān)鍵字，將來(lái)代碼的改動(dòng)會(huì)非常小。
示例：
import "jquery";
export functiondoStuff(){}
module "localModule" {}
優(yōu)點(diǎn)：
1、容易進(jìn)行靜態(tài)分析
2、面向未來(lái)的 EcmaScript 標(biāo)準(zhǔn)
缺點(diǎn)：
1、原生瀏覽器端還沒有實(shí)現(xiàn)該標(biāo)準(zhǔn)
2、全新的命令字，新版的 Node.js才支持
今天小編要跟大家分享的文章是關(guān)于Web前端工程師應(yīng)該知道的提高JavaScript
技能的技巧!熟悉web前端工作的小伙伴都知道，JavaScript是前端工程師的必備技能。JavaScript
是一種復(fù)雜的語(yǔ)言。如果是你是高級(jí)或者初級(jí)web開發(fā)人員，了解它的基本概念非常重要。本篇文章小編就為大家介紹幾種提高JavaScript
技能的技巧，下面讓我們一起來(lái)看一看吧!
01、變量賦值(值vs引用)
理解JavaScript如何給變量賦值可以幫助我們減少一些不必要的bug。如果你不理解這一點(diǎn)，可能很容易地編寫被無(wú)意中更改值的代碼。
JavaScript總是按照值來(lái)給變量賦值。這一部分非常重要：當(dāng)指定的值是JavaScript的五種基本類型之一(即
Boolean，null，undefined，String和Number)時(shí)，將分配實(shí)際值。但是，當(dāng)指定的值是
Array，F(xiàn)unction或Object時(shí)，將分配對(duì)內(nèi)存中對(duì)象的引用給變量。
在以下代碼段中，使用var1對(duì)var2進(jìn)行賦值。由于var1是基本類型(String)，因此var2的值等于var1的String
值，并且可以認(rèn)為此時(shí)與var1完全不同。因此，重新賦值var2對(duì)var1沒有影響。
letvar1='Mystring';
letvar2=var1;
var2='Mynewstring';
console.log(var1);
//'Mystring'
console.log(var2);
//'Mynewstring'
接著，與對(duì)象賦值進(jìn)行比較。
letvar1={name:'Jim'}
letvar2=var1;
var2.name='John';
console.log(var1);
//{name:'John'}
console.log(var2);
//{name:'John'}
如果你期望它會(huì)像原始類型賦值那樣，很可能會(huì)出問(wèn)題!如果你創(chuàng)建了一個(gè)無(wú)意中會(huì)改變對(duì)象的函數(shù)，就會(huì)出現(xiàn)一些非預(yù)期的行為。
02、閉包
閉包是一個(gè)重要的JavaScript模式，可以私有訪問(wèn)變量。在本例中，createGreeter返回一個(gè)匿名函數(shù)，這個(gè)函數(shù)可以訪問(wèn)參數(shù)
greeting(在這里是“Hello”)。在后續(xù)的調(diào)用中，sayHello將有權(quán)訪問(wèn)這個(gè)greeting!
functioncreateGreeter(greeting){
returnfunction(name){
console.log(greeting+','+name);
}
}
constsayHello=createGreeter('Hello');
sayHello('Joe');
//Hello,Joe
在更真實(shí)的場(chǎng)景中，你可以設(shè)想一個(gè)初始函數(shù)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、解構(gòu)
JavaScript參數(shù)解構(gòu)可以從對(duì)象中干中提取所需屬性的常用方法。
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'
解構(gòu)經(jīng)常也用于直接用于提取傳給函數(shù)的參數(shù)。如果你熟悉React，可能已經(jīng)見過(guò)這個(gè)：
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、展開運(yùn)算
ES6的一個(gè)常用之一的特性就是展開(...)運(yùn)算符了,在下面的例子中，Math.max不能應(yīng)用于arr
數(shù)組，因?yàn)樗粚?shù)組作為參數(shù)，但它可以將各個(gè)元素作為參數(shù)傳入。展開運(yùn)算符...可用于提取數(shù)組的各個(gè)元素。
constarr=[4,6,-1,3,10,4];
constmax=Math.max(...arr);
console.log(max);
//10
05、剩余參數(shù)
剩余參數(shù)語(yǔ)法和展開語(yǔ)法看起來(lái)的一樣的，不同的是展開語(yǔ)法是為了結(jié)構(gòu)數(shù)組和對(duì)象;而剩余參數(shù)和展開運(yùn)算符是相反的，剩余參數(shù)收集多個(gè)元素合成一個(gè)數(shù)組。
functionmyFunc(...args){
console.log(args[0]+args[1]);
}
myFunc(1,2,3,4);
//3
restparameters和arguments的區(qū)別
1.arguments是偽數(shù)組，包含所有的實(shí)參
2.剩余參數(shù)是標(biāo)準(zhǔn)的數(shù)組，可以使用數(shù)組的方法
06、數(shù)組方法
JavaScript數(shù)組方法通?？梢蕴峁┝钊穗y以置信的、優(yōu)雅的方法來(lái)執(zhí)行所需的數(shù)據(jù)轉(zhuǎn)換。作為StackOverflow
的貢獻(xiàn)者，我經(jīng)?？吹疥P(guān)于如何以某種方式操縱對(duì)象數(shù)組的問(wèn)題，這往往也是數(shù)組方法的完美用例。
map、filter、reduce
JavaScript數(shù)組方法map、filter和reduce容易混淆，這些都是轉(zhuǎn)換數(shù)組或返回聚合值的有用方法。
map：返回一個(gè)數(shù)組，其中每個(gè)元素都使用指定函數(shù)進(jìn)行過(guò)轉(zhuǎn)換。
constarr=[1,2,3,4,5,6];
constmapped=arr.map(el=el+20);
console.log(mapped);
//[21,22,23,24,25,26]
filter：返回一個(gè)數(shù)組，只有當(dāng)指定函數(shù)返回true時(shí)，相應(yīng)的元素才會(huì)被包含在這個(gè)數(shù)組中。
constarr=[1,2,3,4,5,6];
constfiltered=arr.filter(el=el===2||el===4);
console.log(filtered);
//[2,4]
reduce:按函數(shù)中指定的值累加
constarr=[1,2,3,4,5,6];
constreduced=arr.reduce((total,current)=total+current);
console.log(reduced);
//21
find,findIndex,indexOf
find：返回與指定條件匹配的第一個(gè)實(shí)例，如果查到不會(huì)繼續(xù)查找其他匹配的實(shí)例。
constarr=[1,2,3,4,5,6,7,8,9,10];
constfound=arr.find(el=el5);
console.log(found);
//6
再次注意，雖然5之后的所有元素都滿足條件，但是只返回第一個(gè)匹配的元素。當(dāng)你發(fā)現(xiàn)匹配項(xiàng)時(shí)，通常會(huì)中斷for循環(huán)，在這種情況下，這實(shí)際上非常有用。
findIndex：這與find幾乎完全相同，但不是返回第一個(gè)匹配元素，而是返回第一個(gè)匹配元素的索引。
constarr=['Nick','Frank','Joe','Frank'];
constfoundIndex=arr.findIndex(el=el==='Frank');
console.log(foundIndex);
//1
indexOf：與findIndex幾乎完全相同，但它不是將函數(shù)作為參數(shù)，而是采用一個(gè)簡(jiǎn)單的值。
當(dāng)w你需要更簡(jiǎn)單的邏輯并且不需要使用函數(shù)來(lái)檢查是否存在匹配時(shí)，可以使用此方法。
constarr=['Nick','Frank','Joe','Frank'];
constfoundIndex=arr.indexOf('Frank');
console.log(foundIndex);
//1
push,pop,shift,unshift
push：這是一個(gè)相對(duì)簡(jiǎn)單的方法，它將一個(gè)項(xiàng)添加到數(shù)組的末尾。它就地修改數(shù)組，函數(shù)本身會(huì)返回添加到數(shù)組中的項(xiàng)。
letarr=[1,2,3,4];
constpushed=arr.push(5);
console.log(arr);
//[1,2,3,4,5]
console.log(pushed);
//5
pop:這將從數(shù)組中刪除最后一項(xiàng)。同樣，它在適當(dāng)?shù)奈恢眯薷臄?shù)組，函數(shù)本身返回從數(shù)組中刪除的項(xiàng)。
letarr=[1,2,3,4];
constpopped=arr.pop();
console.log(arr);
//[1,2,3]
console.log(popped);
//4
shift:從數(shù)組中刪除第一項(xiàng)。同樣，它在適當(dāng)?shù)奈恢眯薷臄?shù)組。函數(shù)本身返回從數(shù)組中刪除的項(xiàng)。
letarr=[1,2,3,4];
constshifted=arr.shift();
console.log(arr);
//[2,3,4]
console.log(shifted);
//1
unshift:將一個(gè)或多個(gè)元素添加到數(shù)組的開頭。同樣，它在適當(dāng)?shù)奈恢眯薷臄?shù)組。與許多其他方法不同，函數(shù)本身返回?cái)?shù)組的新長(zhǎng)度。
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：通過(guò)刪除或替換現(xiàn)有元素和/或添加新元素來(lái)更改數(shù)組的內(nèi)容，此方法會(huì)修改了數(shù)組本身。
下面的代碼示例的意思是：在數(shù)組的位置1上刪除0個(gè)元素，并插入b。
letarr=['a','c','d','e'];
arr.splice(1,0,'b')
slice：從指定的起始位置和指定的結(jié)束位置之前返回?cái)?shù)組的淺拷貝。如果未指定結(jié)束位置，則返回?cái)?shù)組的其余部分。
重要的是，此方法不會(huì)修改數(shù)組，而是返回所需的子集。
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：根據(jù)提供的函數(shù)對(duì)數(shù)組進(jìn)行排序。這個(gè)方法就地修改數(shù)組。如果函數(shù)返回負(fù)數(shù)或0，則順序保持不變。如果返回正數(shù)，則交換元素順序。
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(生成器)
生成器是一種特殊的行為，實(shí)際上是一種設(shè)計(jì)模式，我們通過(guò)調(diào)用next()方法來(lái)遍歷一組有序的值。想象一下，例如使用遍歷器對(duì)數(shù)組[1,2,3,4,5]進(jìn)行遍歷。第一次調(diào)用next()方法返回1，第二次調(diào)用next()方法返回2，以此類推。當(dāng)數(shù)組中的所有值都返回后，調(diào)用next()方法將返回null或false或其它可能的值用來(lái)表示數(shù)組中的所有元素都已遍歷完畢。
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
使用生成器生成無(wú)限個(gè)值：
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、恒等運(yùn)算符(===)與相等運(yùn)算符(==)
大家一定要知道JavaScript中的恒等運(yùn)算符(===)和相等運(yùn)算符(==)之間的區(qū)別!
==運(yùn)算符在比較值之前會(huì)進(jìn)行類型轉(zhuǎn)換，而===運(yùn)算符在比較之前不會(huì)進(jìn)行任何類型轉(zhuǎn)換。
console.log(0=='0');
//true
console.log(0==='0');
//false
09、對(duì)象比較
我看到JavaScript新手所犯的錯(cuò)誤是直接比較對(duì)象。變量指向內(nèi)存中對(duì)象的引用，而不是對(duì)象本身!實(shí)際比較它們的一種方法是將對(duì)象轉(zhuǎn)換為JSON
字符串。這有一個(gè)缺點(diǎn)：對(duì)象屬性順序不能保證!比較對(duì)象的一種更安全的方法是引入專門進(jìn)行深度對(duì)象比較的庫(kù)(例如，lodash的isEqual)。
下面的對(duì)象看起來(lái)是相等的，但實(shí)際上它們指向不同的引用。
constjoe1={name:'Joe'};
constjoe2={name:'Joe'};
console.log(joe1===joe2);
//false
相反，下面的計(jì)算結(jié)果為true，因?yàn)橐粋€(gè)對(duì)象被設(shè)置為與另一個(gè)對(duì)象相等，因此指向相同的引用(內(nèi)存中只有一個(gè)對(duì)象)。
constjoe1={name:'Joe'};
constjoe2=joe1;
console.log(joe1===joe2);
//true
相反，以下計(jì)算結(jié)果為true，因?yàn)橐粋€(gè)對(duì)象設(shè)置為等于另一個(gè)對(duì)象，因此指向相同的引用(內(nèi)存中只有一個(gè)對(duì)象)。
constjoe1={name:'Joe'};
constjoe2=joe1;
console.log(joe1===joe2);
//true
10、回調(diào)函數(shù)
很多人都被JavaScript回調(diào)函數(shù)嚇倒了!他們很簡(jiǎn)單，舉個(gè)例子。console.log函數(shù)作為回調(diào)傳遞給myFunc。
它在setTimeout完成時(shí)執(zhí)行。
functionmyFunc(text,callback){
setTimeout(function(){
callback(text);
},2000);
}
myFunc('Helloworld!',console.log);
//'Helloworld!'
11、Promises
一旦你理解了JavaScript回調(diào)，很快就會(huì)發(fā)現(xiàn)自己陷入了“回調(diào)地獄”中。這個(gè)時(shí)候可以使用promise,將異步邏輯包裝在promise
中，成功時(shí)resolve或在失敗時(shí)reject使用“then”來(lái)處理成功的情況，使用catch來(lái)處理異常。
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的用法后，你可能也會(huì)喜歡asyncawait，它只是一種基于promise
的“語(yǔ)法糖”。在下面的示例中，我們創(chuàng)建了一個(gè)async函數(shù)，并awaitgreeterpromise。
constgreeter=newPromise((res,rej)={
setTimeout(()=res('Helloworld!'),2000);
})
asyncfuncti
EMCAScript6（ES6）是最新的Javascript，它包含了一些很棒的新特性。這些特性擁有不同程度的復(fù)雜性，對(duì)于簡(jiǎn)單的腳本和復(fù)雜的應(yīng)用程序都非常的有用。\x0d\x0a\x0d\x0a增加的新特性：\x0d\x0a\x0d\x0a1.箭頭操作符\x0d\x0a 如果你會(huì)C#或者Java，你肯定知道lambda表達(dá)式，ES6中新增的箭頭操作符=便有異曲同工之妙。它簡(jiǎn)化了函數(shù)的書寫。操作符左邊為輸入的參數(shù)，而右邊則是進(jìn)行的操作以及返回的值Inputs=outputs。\x0d\x0a 我們知道在JS中回調(diào)是經(jīng)常的事，而一般回調(diào)又以匿名函數(shù)的形式出現(xiàn)，每次都需要寫一個(gè)function，甚是繁瑣。當(dāng)引入箭頭操作符后可以方便地寫回調(diào)了。\x0d\x0a\x0d\x0a2.類的支持\x0d\x0a ES6中添加了對(duì)類的支持，引入了class關(guān)鍵字（其實(shí)class在JavaScript中一直是保留字，目的就是考慮到可能在以后的新版本中會(huì)用到，現(xiàn)在終于派上用場(chǎng)了）。JS本身就是面向?qū)ο蟮?，ES6中提供的類實(shí)際上只是JS原型模式的包裝。現(xiàn)在提供原生的class支持后，對(duì)象的創(chuàng)建，繼承更加直觀了，并且父類方法的調(diào)用，實(shí)例化，靜態(tài)方法和構(gòu)造函數(shù)等概念都更加形象化。\x0d\x0a\x0d\x0a3.增強(qiáng)的對(duì)象字面量\x0d\x0a 對(duì)象字面量被增強(qiáng)了，寫法更加簡(jiǎn)潔與靈活，同時(shí)在定義對(duì)象的時(shí)候能夠做的事情更多了。具體表現(xiàn)在：\x0d\x0a(1).可以在對(duì)象字面量里面定義原型\x0d\x0a(2).定義方法可以不用function關(guān)鍵字\x0d\x0a(3).直接調(diào)用父類方法\x0d\x0a\x0d\x0a4.字符串模板\x0d\x0a 字符串模板相對(duì)簡(jiǎn)單易懂些。ES6中允許使用反引號(hào) ` 來(lái)創(chuàng)建字符串，此種方法創(chuàng)建的字符串里面可以包含由美元符號(hào)加花括號(hào)包裹的變量${vraible}。如果你使用過(guò)像C#等后端強(qiáng)類型語(yǔ)言的話，對(duì)此功能應(yīng)該不會(huì)陌生。\x0d\x0a\x0d\x0a5.解構(gòu)\x0d\x0a 自動(dòng)解析數(shù)組或?qū)ο笾械闹?。比如若一個(gè)函數(shù)要返回多個(gè)值，常規(guī)的做法是返回一個(gè)對(duì)象，將每個(gè)值做為這個(gè)對(duì)象的屬性返回。但在ES6中，利用解構(gòu)這一特性，可以直接返回一個(gè)數(shù)組，然后數(shù)組中的值會(huì)自動(dòng)被解析到對(duì)應(yīng)接收該值的變量中。\x0d\x0a\x0d\x0a6.參數(shù)默認(rèn)值，不定參數(shù)，拓展參數(shù)\x0d\x0a(1).默認(rèn)參數(shù)值\x0d\x0a 現(xiàn)在可以在定義函數(shù)的時(shí)候指定參數(shù)的默認(rèn)值了，而不用像以前那樣通過(guò)邏輯或操作符來(lái)達(dá)到目的了。\x0d\x0a(2).不定參數(shù)\x0d\x0a 不定參數(shù)是在函數(shù)中使用命名參數(shù)同時(shí)接收不定數(shù)量的未命名參數(shù)。這只是一種語(yǔ)法糖，在以前的JavaScript代碼中我們可以通過(guò)arguments變量來(lái)達(dá)到這一目的。不定參數(shù)的格式是三個(gè)句點(diǎn)后跟代表所有不定參數(shù)的變量名。比如下面這個(gè)例子中，?x代表了所有傳入add函數(shù)的參數(shù).\x0d\x0a(3).拓展參數(shù)\x0d\x0a 拓展參數(shù)則是另一種形式的語(yǔ)法糖，它允許傳遞數(shù)組或者類數(shù)組直接做為函數(shù)的參數(shù)而不用通過(guò)apply。\x0d\x0a\x0d\x0a6.let與const 關(guān)鍵字\x0d\x0a 可以把let看成var，只是它定義的變量被限定在了特定范圍內(nèi)才能使用，而離開這個(gè)范圍則無(wú)效。const則很直觀，用來(lái)定義常量，即無(wú)法被更改值的變量。\x0d\x0a\x0d\x0a7.for of 值遍歷\x0d\x0a 我們都知道for in 循環(huán)用于遍歷數(shù)組，類數(shù)組或?qū)ο?，ES6中新引入的for of循環(huán)功能相似，不同的是每次循環(huán)它提供的不是序號(hào)而是值。\x0d\x0a8.模塊\x0d\x0a 在ES6標(biāo)準(zhǔn)中，JavaScript原生支持module了。這種將JS代碼分割成不同功能的小塊進(jìn)行模塊化的概念是在一些三方規(guī)范中流行起來(lái)的，比如CommonJS和AMD模式。\x0d\x0a\x0d\x0a9.Map，Set 和 WeakMap，WeakSet\x0d\x0a 這些是新加的集合類型，提供了更加方便的獲取屬性值的方法，不用像以前一樣用hasOwnProperty來(lái)檢查某個(gè)屬性是屬于原型鏈上的呢還是當(dāng)前對(duì)象的。同時(shí)，在進(jìn)行屬性值添加與獲取時(shí)有專門的get，set方法。\x0d\x0a\x0d\x0a10.Proxies\x0d\x0a Proxy可以監(jiān)聽對(duì)象身上發(fā)生了什么事情，并在這些事情發(fā)生后執(zhí)行一些相應(yīng)的操作。一下子讓我們對(duì)一個(gè)對(duì)象有了很強(qiáng)的追蹤能力，同時(shí)在數(shù)據(jù)綁定方面也很有用處。\x0d\x0a\x0d\x0a11.Symbols\x0d\x0a 我們知道對(duì)象其實(shí)是鍵值對(duì)的集合，而鍵通常來(lái)說(shuō)是字符串。而現(xiàn)在除了字符串外，我們還可以用symbol這種值來(lái)做為對(duì)象的鍵。Symbol是一種基本類型，像數(shù)字，字符串還有布爾一樣，它不是一個(gè)對(duì)象。Symbol 通過(guò)調(diào)用symbol函數(shù)產(chǎn)生，它接收一個(gè)可選的名字參數(shù)，該函數(shù)返回的symbol是唯一的。之后就可以用這個(gè)返回值做為對(duì)象的鍵了。Symbol還可以用來(lái)創(chuàng)建私有屬性，外部無(wú)法直接訪問(wèn)由symbol做為鍵的屬性值。\x0d\x0a\x0d\x0a12.Math，Number，String，Object 的新API\x0d\x0a 對(duì)Math,Number,String還有Object等添加了許多新的API。下面代碼同樣來(lái)自es6features，對(duì)這些新API進(jìn)行了簡(jiǎn)單展示。\x0d\x0a\x0d\x0a13.Promises\x0d\x0a Promises是處理異步操作的一種模式，之前在很多三方庫(kù)中有實(shí)現(xiàn)，比如jQuery的deferred 對(duì)象。當(dāng)你發(fā)起一個(gè)異步請(qǐng)求，并綁定了.when(), .done()等事件處理程序時(shí)，其實(shí)就是在應(yīng)用promise模式。
簡(jiǎn)單理解：解構(gòu)賦值的意思是對(duì)應(yīng)的位置，對(duì)應(yīng)的 key 自動(dòng)賦值。
使用 () 還是 {}，要看你定義的函數(shù)的參數(shù)是什么樣的，具體看下面的例子。
第一種：當(dāng)函數(shù)的參數(shù)是一個(gè)對(duì)象時(shí)，需要使用 {}。這樣在函數(shù)里面能通過(guò)參數(shù)的相同的 key 獲取到參數(shù)對(duì)象里的 key對(duì)應(yīng)的值。
function demo({name, age}) { console.log(`姓名：${name}`) console.log(`年齡：${age}`)
}
demo({ name: '張三', age: 24})
第二種：當(dāng)函數(shù)里的參數(shù)是多個(gè)時(shí)，這個(gè)時(shí)候用 ()。其實(shí)，這個(gè)不是結(jié)構(gòu)賦值，真的只是 ES5 里的形參而已，只不過(guò)你的代碼里用到了 ES6 中的參數(shù)默認(rèn)值設(shè)置而已。
function demo(name = "張三", age = 30) { console.log("姓名：" + name); console.log("nianl：" + age);
}
demo();
今天小編要跟大家分享的文章是關(guān)于Web前端工程師應(yīng)該知道的JavaScript使用小技巧。任何一門技術(shù)在實(shí)際中都會(huì)有一些屬于自己的小技巧。同樣的，在使用JavaScript時(shí)也有一些自己的小技巧，只不過(guò)很多時(shí)候有可能容易被大家忽略。而在互聯(lián)網(wǎng)上，時(shí)不時(shí)的有很多同行朋友會(huì)總結(jié)(或收集)一些這方面的小技巧。
今天在這篇文章中，小編會(huì)整理一些大家熟悉或不熟悉的有關(guān)于JavaScript的小技巧，希望能夠?qū)Υ蠹业膶W(xué)習(xí)和工作有所幫助。
一、數(shù)組
先來(lái)看使用數(shù)組中常用的一些小技巧。
01、數(shù)組去重
ES6提供了幾種簡(jiǎn)潔的數(shù)組去重的方法，但該方法并不適合處理非基本類型的數(shù)組。對(duì)于基本類型的數(shù)組去重，可以使用...new
Set()來(lái)過(guò)濾掉數(shù)組中重復(fù)的值，創(chuàng)建一個(gè)只有唯一值的新數(shù)組。
constarray=[1,1,2,3,5,5,1]
constuniqueArray=[...newSet(array)];
console.log(uniqueArray);
Result:(4)[1,2,3,5]
這是ES6中的新特性，在ES6之前，要實(shí)現(xiàn)同樣的效果，我們需要使用更多的代碼。該技巧適用于包含基本類型的數(shù)組：undefined、null、boolean、string和number。如果數(shù)組中包含了一個(gè)object,function或其他數(shù)組，那就需要使用另一種方法。
除了上面的方法之外，還可以使用Array.from(newSet())來(lái)實(shí)現(xiàn)：
constarray=[1,1,2,3,5,5,1]
Array.from(newSet(array))
Result:(4)[1,2,3,5]
另外，還可以使用Array的.filter及indexOf()來(lái)實(shí)現(xiàn)：
constarray=[1,1,2,3,5,5,1]
array.filter((arr,index)=array.indexOf(arr)===index)
Result:(4)[1,2,3,5]
注意，indexOf()方法將返回?cái)?shù)組中第一個(gè)出現(xiàn)的數(shù)組項(xiàng)。這就是為什么我們可以在每次迭代中將indexOf()方法返回的索引與當(dāng)索索引進(jìn)行比較，以確定當(dāng)前項(xiàng)是否重復(fù)。
02、確保數(shù)組的長(zhǎng)度
在處理網(wǎng)格結(jié)構(gòu)時(shí)，如果原始數(shù)據(jù)每行的長(zhǎng)度不相等，就需要重新創(chuàng)建該數(shù)據(jù)。為了確保每行的數(shù)據(jù)長(zhǎng)度相等，可以使用Array.fill來(lái)處理：
letarray=Array(5).fill('');
console.log(array);
Result:(5)["","","","",""]
03、數(shù)組映射
不使用Array.map來(lái)映射數(shù)組值的方法。
constarray=[
{
ame:'大漠',
email:'w3cplus@#'
},
{
ame:'Airen',
email:'airen@#'
}
]
constname=Array.from(array,({name})=name)
Result:(2)["大漠","Airen"]
04、數(shù)組截?cái)?/p>
如果你想從數(shù)組末尾刪除值(刪除數(shù)組中的最后一項(xiàng))，有比使用splice()更快的替代方法。
例如，你知道原始數(shù)組的大小，可以重新定義數(shù)組的length屬性的值，就可以實(shí)現(xiàn)從數(shù)組末尾刪除值：
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]
這是一個(gè)特別簡(jiǎn)潔的解決方案。但是，slice()方法運(yùn)行更快，性能更好：
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、過(guò)濾掉數(shù)組中的falsy值
如果你想過(guò)濾數(shù)組中的falsy值，比如0、undefined、null、false，那么可以通過(guò)map和filter方法實(shí)現(xiàn)：
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、獲取數(shù)組的最后一項(xiàng)
數(shù)組的slice()取值為正值時(shí)，從數(shù)組的開始處截取數(shù)組的項(xiàng)，如果取值為負(fù)整數(shù)時(shí)，可以從數(shù)組末屬開始獲取數(shù)組項(xiàng)。
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)獲取數(shù)組的最后一項(xiàng)，除此之外還可以使用下面的方式來(lái)獲取數(shù)組的最后一項(xiàng)：
console.log(array.slice(array.length-1))
Result:[7]
07、過(guò)濾并排序字符串列表
你可能有一個(gè)很多名字組成的列表，需要過(guò)濾掉重復(fù)的名字并按字母表將其排序。
在我們的例子里準(zhǔn)備用不同版本語(yǔ)言的JavaScript
保留字的列表，但是你能發(fā)現(xiàn)，有很多重復(fù)的關(guān)鍵字而且它們并沒有按字母表順序排列。所以這是一個(gè)完美的字符串列表(數(shù)組)來(lái)測(cè)試我們的JavaScript小知識(shí)。
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'];
因?yàn)槲覀儾幌敫淖兾覀兊脑剂斜?，所以我們?zhǔn)備用高階函數(shù)叫做filter，它將基于我們傳遞的回調(diào)方法返回一個(gè)新的過(guò)濾后的數(shù)組?；卣{(diào)方法將比較當(dāng)前關(guān)鍵字在原始列表里的索引和新列表中的索引，僅當(dāng)索引匹配時(shí)將當(dāng)前關(guān)鍵字push到新數(shù)組。
最后我們準(zhǔn)備使用sort方法排序過(guò)濾后的列表，sort只接受一個(gè)比較方法作為參數(shù)，并返回按字母表排序后的列表。
在ES6下使用箭頭函數(shù)看起來(lái)更簡(jiǎn)單:
constfilteredAndSortedKeywords=keywords
.filter((keyword,index)=keywords.lastIndexOf(keyword)===index)
.sort((a,b)=a
這是最后過(guò)濾和排序后的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、清空數(shù)組
如果你定義了一個(gè)數(shù)組，然后你想清空它。通常，你會(huì)這樣做：
letarray=[1,2,3,4];
functionemptyArray(){
array=[];
}
emptyArray();
但是，這有一個(gè)效率更高的方法來(lái)清空數(shù)組。你可以這樣寫:
letarray=[1,2,3,4];
functionemptyArray(){
array.length=0;
}
emptyArray();
09、拍平多維數(shù)組
使用...運(yùn)算符，將多維數(shù)組拍平：
10、從數(shù)組中獲取最大值和最小值
可以使用Math.max和Math.min取出數(shù)組中的最大小值和最小值：
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的...運(yùn)算符來(lái)完成：
constnumbers=[1,2,3,4];
Math.max(...numbers)
Result:4
Math.min(...numbers)
Result:1
二、對(duì)象
在操作對(duì)象時(shí)也有一些小技巧。
01、使用...運(yùn)算符合并對(duì)象或數(shù)組中的對(duì)象
同樣使用ES的...運(yùn)算符可以替代人工操作，合并對(duì)象或者合并數(shù)組中的對(duì)象。
//合并對(duì)象
constobj1={
ame:'大漠',
url:'#'
}
constobj2={
ame:'airen',
age:30
}
constmergingObj={...obj1,...obj2}
Result:{name:"airen",url:"#",age:30}
//合并數(shù)組中的對(duì)象
constarray=[
{
ame:'大漠',
email:'w3cplus@#'
},
{
ame:'Airen',
email:'airen@#'
}
]
constresult=array.reduce((accumulator,item)={
return{
...accumulator,
[item.name]:item.email
}
},{})
Result:{大漠:"w3cplus@#",Airen:"airen@#"}
02、有條件的添加對(duì)象屬性
不再需要根據(jù)一個(gè)條件創(chuàng)建兩個(gè)不同的對(duì)象，以使它具有特定的屬性。為此，使用...操作符是最簡(jiǎn)單的。
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、解構(gòu)原始數(shù)據(jù)
你可以在使用數(shù)據(jù)的時(shí)候，把所有數(shù)據(jù)都放在一個(gè)對(duì)象中。同時(shí)想在這個(gè)數(shù)據(jù)對(duì)象中獲取自己想要的數(shù)據(jù)。
在這里可以使用ES6的Destructuring特性來(lái)實(shí)現(xiàn)。比如你想把下面這個(gè)obj中的數(shù)據(jù)分成兩個(gè)部分：
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、動(dòng)態(tài)更改對(duì)象的key
在過(guò)去，我們首先必須聲明一個(gè)對(duì)象，然后在需要?jiǎng)討B(tài)屬性名的情況下分配一個(gè)屬性。在以前，這是不可能以聲明的方式實(shí)現(xiàn)的。不過(guò)在ES6中，我們可以實(shí)現(xiàn)：
constdynamicKey='email'
letobj={
ame:'大漠',
blog:'w3cplus',
[dynamicKey]:'w3cplus@#'
}
console.log(obj)
Result:{name:"大漠",blog:"w3cplus",email:"w3cplus@#"}
05、判斷對(duì)象的數(shù)據(jù)類型
使用Object.prototype.toString配合閉包來(lái)實(shí)現(xiàn)對(duì)象數(shù)據(jù)類型的判斷：
constisType=type=target=`[object${type}]`===Object.prototype.toString.call(target)
constisArray=isType('Array')([1,2,3])
console.log(isArray)
Result:true
上面的代碼相當(dāng)于：
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、檢查某對(duì)象是否有某屬性
當(dāng)你需要檢查某屬性是否存在于一個(gè)對(duì)象，你可能會(huì)這樣做：
varobj={
ame:'大漠'
}
if(obj.name){
console.l
重慶分公司
重慶分公司
