2016-09-06-day14
1.ES5中數(shù)組API:
1)判斷數(shù)組中的元素是否符合要求
- arr.every(): 每個(gè)元素是否都符合要求,every()是對(duì)數(shù)組中每一項(xiàng)運(yùn)行給定函數(shù)巡通,如果該函數(shù)對(duì)每一項(xiàng)返回true,則返回true薪缆。
- arr.some(): 是否包含符合要求的元素,some()是對(duì)數(shù)組中每一項(xiàng)運(yùn)行給定函數(shù),如果該函數(shù)對(duì)任一項(xiàng)返回true,則返回true片部。
如何使用:
arr.every(function(val,idx,arr){
return 判斷條件
});
arr.some(function(val,idx,arr){
return 判斷條件
});
arr.every()例子:檢測(cè)數(shù)組中的所有元素是否都大于 10。
function isBigEnough(val, index, array) {
return (val>= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
console.log(passed)//false
var passed2 = [12, 54, 18, 130, 44].every(isBigEnough);
console.log(passed2)//true
arr.every()例子:檢測(cè)數(shù)組中的所有元素是否都由奇數(shù)組成腹忽。
var arr1 = [1, 3, 5, 7, 9];
var arr2 = [2, 4, 6, 8, 10];
var arr3 = [1, , 3, , 5];
//判斷哪個(gè)數(shù)組全由奇數(shù)組成:
function isOdd(val) {
return val % 2 == 1;
}
arr1.some(isOdd) //true
arr2.some(isOdd) //false
arr3.some(isOdd) //true
arr.some()例子:檢測(cè)在數(shù)組中是否有元素大于 10旷偿。
function isBiggerThan10(val, index, array) {
return val> 10;
}
[2, 5, 8, 1, 4].some(isBiggerThan10); // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true
arr.some()例子:檢測(cè)在數(shù)組中是否是按升序排列的。
var arr4 = [1, 2, 3, 2, 1];
var arr5 = [5, 4, 3, 2, 1];
var arr6 = [1, 2, 3, 4, 5];
//判斷哪個(gè)數(shù)組是按升序排列的
function isAscending(val, index, arr) {
//當(dāng)前元素是否<=下一個(gè)元素
return index < arr.length - 1 ? val <= arr[index + 1] : true;
}
arr4.every(isAscending) //false
arr4.every(isAscending) //false
arr4.every(isAscending) //true
如果Array的原型對(duì)象中不包含every和some,那么可以用以下代碼實(shí)現(xiàn)自定義方法降允。
//如果Array的原型對(duì)象中不包含every
if (Array.prototype.every === undefined) {
Array.prototype.every =
function (callback) {
//遍歷當(dāng)前數(shù)組中每個(gè)元素
for (var i = 0; i < this.length; i++) {
//防止稀疏數(shù)組
//如果i位置不是undefined
//if(this[i]!==undefined){
if (i in this) {
//調(diào)用callback函數(shù)恩闻,傳入:當(dāng)前元素值,當(dāng)前位置,當(dāng)前數(shù)組 三個(gè)參數(shù),將執(zhí)行結(jié)果保存在變量r中
var r = callback(this[i], i, this);
if (!r) { //如果r為false
return false; //返回false
}
}
} //(遍歷結(jié)束)
return true; //返回true
}
}
//如果Array的原型對(duì)象中不包含some
if (Array.prototype.some === undefined) {
//在Array的原型對(duì)象中添加some方法剧董,參數(shù)為fun函數(shù)
Array.prototype.some = function (fun) {
//遍歷當(dāng)前數(shù)組:
for (var i = 0; i < this.length; i++) {
//如果當(dāng)前元素不是undefined
if (this[i] !== undefined) {
//調(diào)用fun函數(shù)幢尚,傳入:當(dāng)前元素值,當(dāng)前位置翅楼,當(dāng)前數(shù)組尉剩,返回結(jié)果保存在r中
var r = fun(this[i], i, this)
//如果r為true,就返回true
if (r) {
return true;
}
}
} //(遍歷結(jié)束)
return false; //返回false
}
}
2.遍歷API:對(duì)數(shù)組中每個(gè)元素執(zhí)行相同的操作
- arr.forEach(): 對(duì)原數(shù)組中每個(gè)元素毅臊,直接做相同的操作——直接修改原數(shù)組
- arr.map(): 依次取出原數(shù)組中每個(gè)元素理茎,執(zhí)行相同操作后,返回新數(shù)組
如何使用:
arr.forEach(function(val,index,arr){
直接修改arr中index位置的當(dāng)前元素
});
arr.map(function(val,index,arr){
return 一個(gè)新值
});
arr.forEach()例子:對(duì)數(shù)組中的每一個(gè)元素乘以2
var arr=[1,,3,,5];
arr.forEach(function(val,idx,arr){
arr[idx]=val*2;
});
console.log(arr) //[2, ,6, ,10]
arr.map()例子:對(duì)數(shù)組中的每一個(gè)元素乘以2
var arr_odd=[1,3,5,7,9];
var arr_even=arr_odd.map(function(val){
return val*2;
});
console.log(arr_odd) //[1,3,5,7,9]
console.log(arr_even) //[2,6,10,14,18]
使用map可以重新格式化數(shù)組對(duì)象的格式,例子如下:
var kvArray = [{key: 1, value: 10},
{key: 2, value: 20},
{key: 3, value: 30}];
var reformattedArray = kvArray.map(function(obj) {
var rObj = {};
rObj[obj.key] = obj.value;
return rObj;
});
// reformattedArray 數(shù)組為: [{1: 10}, {2: 20}, {3: 30}],
// kvArray 數(shù)組未被修改:
// [{key: 1, value: 10},
// {key: 2, value: 20},
// {key: 3, value: 30}]
使用map接口數(shù)據(jù)映射功蜓,例子如下:
let r = res.map(item => {
return {
title: item.name,
sex: item.sex === 1? '男':item.sex === 0?'女':'保密',
age: item.age,
avatar: item.img
}
})
利用map方法方便獲得對(duì)象數(shù)組中的特定屬性值,例子如下
var users = [
{name: "張含韻", "email": "zhang@email.com"},
{name: "江一燕", "email": "jiang@email.com"},
{name: "李小璐", "email": "li@email.com"}
];
var emails = users.map(function (user) { return user.email; });
console.log(emails.join(", ")); // zhang@email.com, jiang@email.com, li@email.com
返回一個(gè)數(shù)組宠蚂,數(shù)組中元素為原始數(shù)組的平方根式撼,例子如下:
var numbers = [4, 9, 16, 25];
function myFunction() {
x = document.getElementById("demo")
x.innerHTML = numbers.map(Math.sqrt);
}
如果原型對(duì)象中沒(méi)有forEach和map,那么可以粘貼以下代碼來(lái)實(shí)現(xiàn)功能
//如果Array的原型中沒(méi)有forEach方法
if(Array.prototype.forEach===undefined){
//就為Array的原型添加forEach方法求厕,參數(shù)定義為callback
Array.prototype.forEach=
function(callback){
//遍歷當(dāng)前數(shù)組中每個(gè)元素
for(var i=0;i<this.length;i++){
//如果當(dāng)前元素不是undefined
if(this[i]!==undefined){
//調(diào)用callback著隆,傳入當(dāng)前元素值,當(dāng)前位置,當(dāng)前數(shù)組作為參數(shù)
callback(this[i],i,this);
}
}
}
}
//如果Array的原型中沒(méi)有map方法
if(Array.prototype.map===undefined){
//就為Array的原型添加map方法呀癣,參數(shù)定義為callback
Array.prototype.map=
function(callback){
//創(chuàng)建一個(gè)空數(shù)組arr
var arr=[];
//遍歷原數(shù)組中每個(gè)元素
for(var i=0;i<this.length;i++){
//如果原數(shù)組中當(dāng)前元素不是undefined
if(this[i]!==undefined){
//調(diào)用callback,傳入當(dāng)前元素值,當(dāng)前位置美浦,原數(shù)組,將結(jié)果保存到arr的相同位置
arr[i]=
callback(this[i],i,this);
}
}//(遍歷結(jié)束)
return arr;//返回arr
}
}
3.過(guò)濾和匯總:
arr.filter(): 篩選出原數(shù)組中符合條件的元素项栏,返回新數(shù)組浦辨。
arr.reduce()匯總: 將數(shù)組中每個(gè)元素統(tǒng)計(jì)起來(lái),得出一個(gè)結(jié)果沼沈。
如何使用:
arr.filter(function(val,idx,arr){
return 判斷條件
});
var r=arr.reduce(
function(prev,val,idx,arr){
return prev+val;//prev自動(dòng)接收截止到目前已經(jīng)統(tǒng)計(jì)的臨時(shí)匯總結(jié)果流酬。
},
startVal //startVal是開(kāi)始匯總前的初始值
)
arr.filter()例子:取出數(shù)組中是偶數(shù)的元素(返回新數(shù)組)
var arr=[1,2,3,4,5];
var even=arr.filter(function(val){
return val%2==0;
});
console.log(arr); //[1,2,3,4,5]
console.log(even); //[2,4]
arr.reduce()例子:計(jì)算數(shù)組元素總和
var arr=[1,2,3,4,5];
var sum=arr.reduce(function(prev,val){
return prev+val;
});
console.log(sum);//1+2+3+4+5=15
var start=15;
var arr2=[6,7,8,9,10];
sum2=arr2.reduce(function(prev,val){
return prev+val;
},start);
console.log(sum2);//15+6+7+8+9+10=55
2. bind函數(shù):基于一個(gè)現(xiàn)有函數(shù),創(chuàng)建一個(gè)新函數(shù)列另,并永久綁定this為指定對(duì)象芽腾,同時(shí),還可提前綁定部分參數(shù)页衙。
何時(shí)使用: 在使用回調(diào)函數(shù)時(shí)摊滔,只要希望固定回調(diào)函數(shù)中的this時(shí)。
鄙視題: call apply bind
call和apply: 臨時(shí)借用構(gòu)造函數(shù)店乐,并臨時(shí)替換函數(shù)中的this為指定對(duì)象艰躺。
立刻執(zhí)行函數(shù)
調(diào)用后,this回復(fù)原樣
call: 參數(shù)單獨(dú)傳入
apply: 參數(shù)以數(shù)組傳入
bind: 創(chuàng)建一個(gè)函數(shù)响巢,并永久綁定this
不會(huì)立刻執(zhí)行新函數(shù)
一旦被bind創(chuàng)建的函數(shù)描滔,其中的this,無(wú)法再被call/apply替換
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<script>
//計(jì)算器: 計(jì)算總工資: 底薪+獎(jiǎng)金
function calc(base,bonus){
document.write(
this.name+"的總工資是"+(base+bonus)
+"<br>"
);
}
var lilei={name:"Li Lei"};
var hmm={name:"Han Meimei"};
//lilei臨時(shí)借用calc
calc.call(lilei,10000,5000);
//相當(dāng)于lilei.calc(10000,5000)
//hmm臨時(shí)借用calc
calc.apply(hmm,[9000,7000]);
//如果函數(shù)類型的原型中沒(méi)有bind方法
if(Function.prototype.bind===undefined){
//就在函數(shù)類型的原型中添加bind方法踪古,定義1個(gè)參數(shù)obj
Function.prototype.bind=
function(obj/*,args1*/){
var fun=this;//this->原函數(shù)對(duì)象
var args1=//將arguments轉(zhuǎn)化為純正的數(shù)組含长,并選取1位置之后的剩余元素
Array.prototype.slice.call(
arguments,1
);//arguments.slice(1)`
return function(/*args2*/){//返回新函數(shù):
var args2=
Array.prototype.slice.call(
arguments
);//arguments.slice();
//強(qiáng)行調(diào)用原函數(shù),臨時(shí)替換this為obj
fun.apply(
obj,args1.concat(args2)
);
}
}
}
//基于calc函數(shù),創(chuàng)建一個(gè)新函數(shù)伏穆,并永久綁定新函數(shù)中的this為lilei
var lilei_calc=calc.bind(lilei,10000);
//lilei_calc:function(){(閉包:fun->原函數(shù))
//fun.apply(lilei,arguments);
//}
lilei_calc(5000);
//lilei_calc.call(hmm,9000,7000);
</script>
</body>
</html>
執(zhí)行結(jié)果:
3. 嚴(yán)格模式:
如何使用:
在當(dāng)前范圍的開(kāi)頭: "use strice";
寫(xiě)在2個(gè)地方:
1. 寫(xiě)在一個(gè)函數(shù)內(nèi)部的開(kāi)頭:
僅函數(shù)內(nèi)使用嚴(yán)格模式拘泞,函數(shù)外依然使用普通模式
2. 寫(xiě)在一個(gè)script元素或js文件的開(kāi)頭
整個(gè)js文件或script代碼段都采用嚴(yán)格模式
1. 舊項(xiàng)目升級(jí),先逐個(gè)函數(shù)啟用嚴(yán)格模式
2. 新項(xiàng)目枕扫,開(kāi)始就使用嚴(yán)格模式
規(guī)定:
- 將靜默失敗升級(jí)為了錯(cuò)誤陪腌!
- 不允許對(duì)未聲明的變量賦值!
- 盡量少的或不使用arguments及其API
- 新增了eval作用域:
在eval中聲明的變量,eval結(jié)束后诗鸭,不能使用染簇。