2016-09-06-day14
1.ES5中数组API:
1）判断数组中的元素是否符合要求
- arr.every(): 每个元素是否都符合要求,every()是对数组中每一项运行给定函数，如果该函数对每一项返回true,则返回true。
- arr.some(): 是否包含符合要求的元素,some()是对数组中每一项运行给定函数，如果该函数对任一项返回true，则返回true。
如何使用:
arr.every(function(val,idx,arr){
return 判断条件
});
arr.some(function(val,idx,arr){
return 判断条件
});
arr.every()例子：检测数组中的所有元素是否都大于 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()例子：检测数组中的所有元素是否都由奇数组成。
var arr1 = [1, 3, 5, 7, 9];
var arr2 = [2, 4, 6, 8, 10];
var arr3 = [1, , 3, , 5];
//判断哪个数组全由奇数组成:
function isOdd(val) {
return val % 2 == 1;
}
arr1.some(isOdd) //true
arr2.some(isOdd) //false
arr3.some(isOdd) //true
arr.some()例子：检测在数组中是否有元素大于 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()例子：检测在数组中是否是按升序排列的。
var arr4 = [1, 2, 3, 2, 1];
var arr5 = [5, 4, 3, 2, 1];
var arr6 = [1, 2, 3, 4, 5];
//判断哪个数组是按升序排列的
function isAscending(val, index, arr) {
//当前元素是否<=下一个元素
return index < arr.length - 1 ? val <= arr[index + 1] : true;
}
arr4.every(isAscending) //false
arr4.every(isAscending) //false
arr4.every(isAscending) //true
如果Array的原型对象中不包含every和some,那么可以用以下代码实现自定义方法。
//如果Array的原型对象中不包含every
if (Array.prototype.every === undefined) {
Array.prototype.every =
function (callback) {
//遍历当前数组中每个元素
for (var i = 0; i < this.length; i++) {
//防止稀疏数组
//如果i位置不是undefined
//if(this[i]!==undefined){
if (i in this) {
//调用callback函数，传入:当前元素值,当前位置,当前数组 三个参数，将执行结果保存在变量r中
var r = callback(this[i], i, this);
if (!r) { //如果r为false
return false; //返回false
}
}
} //(遍历结束)
return true; //返回true
}
}
//如果Array的原型对象中不包含some
if (Array.prototype.some === undefined) {
//在Array的原型对象中添加some方法，参数为fun函数
Array.prototype.some = function (fun) {
//遍历当前数组:
for (var i = 0; i < this.length; i++) {
//如果当前元素不是undefined
if (this[i] !== undefined) {
//调用fun函数，传入:当前元素值，当前位置，当前数组，返回结果保存在r中
var r = fun(this[i], i, this)
//如果r为true，就返回true
if (r) {
return true;
}
}
} //(遍历结束)
return false; //返回false
}
}
2.遍历API:对数组中每个元素执行相同的操作
- arr.forEach(): 对原数组中每个元素，直接做相同的操作——直接修改原数组
- arr.map(): 依次取出原数组中每个元素，执行相同操作后，返回新数组
如何使用:
arr.forEach(function(val,index,arr){
直接修改arr中index位置的当前元素
});
arr.map(function(val,index,arr){
return 一个新值
});
arr.forEach()例子：对数组中的每一个元素乘以2
var arr=[1,,3,,5];
arr.forEach(function(val,idx,arr){
arr[idx]=val*2;
});
console.log(arr) //[2, ,6, ,10]
arr.map()例子：对数组中的每一个元素乘以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可以重新格式化数组对象的格式，例子如下：
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 数组为： [{1: 10}, {2: 20}, {3: 30}],
// kvArray 数组未被修改:
// [{key: 1, value: 10},
// {key: 2, value: 20},
// {key: 3, value: 30}]
使用map接口数据映射，例子如下：
let r = res.map(item => {
return {
title: item.name,
sex: item.sex === 1? '男':item.sex === 0?'女':'保密',
age: item.age,
avatar: item.img
}
})
利用map方法方便获得对象数组中的特定属性值，例子如下
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
返回一个数组，数组中元素为原始数组的平方根，例子如下：
var numbers = [4, 9, 16, 25];
function myFunction() {
x = document.getElementById("demo")
x.innerHTML = numbers.map(Math.sqrt);
}
如果原型对象中没有forEach和map，那么可以粘贴以下代码来实现功能
//如果Array的原型中没有forEach方法
if(Array.prototype.forEach===undefined){
//就为Array的原型添加forEach方法，参数定义为callback
Array.prototype.forEach=
function(callback){
//遍历当前数组中每个元素
for(var i=0;i<this.length;i++){
//如果当前元素不是undefined
if(this[i]!==undefined){
//调用callback，传入当前元素值,当前位置，当前数组作为参数
callback(this[i],i,this);
}
}
}
}
//如果Array的原型中没有map方法
if(Array.prototype.map===undefined){
//就为Array的原型添加map方法，参数定义为callback
Array.prototype.map=
function(callback){
//创建一个空数组arr
var arr=[];
//遍历原数组中每个元素
for(var i=0;i<this.length;i++){
//如果原数组中当前元素不是undefined
if(this[i]!==undefined){
//调用callback,传入当前元素值,当前位置，原数组，将结果保存到arr的相同位置
arr[i]=
callback(this[i],i,this);
}
}//(遍历结束)
return arr;//返回arr
}
}
3.过滤和汇总:
arr.filter(): 筛选出原数组中符合条件的元素，返回新数组。
arr.reduce()汇总: 将数组中每个元素统计起来，得出一个结果。
如何使用：
arr.filter(function(val,idx,arr){
return 判断条件
});
var r=arr.reduce(
function(prev,val,idx,arr){
return prev+val;//prev自动接收截止到目前已经统计的临时汇总结果。
},
startVal //startVal是开始汇总前的初始值
)
arr.filter()例子：取出数组中是偶数的元素(返回新数组)
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()例子：计算数组元素总和
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函数:基于一个现有函数，创建一个新函数，并永久绑定this为指定对象，同时，还可提前绑定部分参数。
何时使用: 在使用回调函数时，只要希望固定回调函数中的this时。
鄙视题: call apply bind
call和apply: 临时借用构造函数，并临时替换函数中的this为指定对象。
立刻执行函数
调用后，this回复原样
call: 参数单独传入
apply: 参数以数组传入
bind: 创建一个函数，并永久绑定this
不会立刻执行新函数
一旦被bind创建的函数，其中的this，无法再被call/apply替换
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<script>
//计算器: 计算总工资: 底薪+奖金
function calc(base,bonus){
document.write(
this.name+"的总工资是"+(base+bonus)
+"<br>"
);
}
var lilei={name:"Li Lei"};
var hmm={name:"Han Meimei"};
//lilei临时借用calc
calc.call(lilei,10000,5000);
//相当于lilei.calc(10000,5000)
//hmm临时借用calc
calc.apply(hmm,[9000,7000]);
//如果函数类型的原型中没有bind方法
if(Function.prototype.bind===undefined){
//就在函数类型的原型中添加bind方法，定义1个参数obj
Function.prototype.bind=
function(obj/*,args1*/){
var fun=this;//this->原函数对象
var args1=//将arguments转化为纯正的数组，并选取1位置之后的剩余元素
Array.prototype.slice.call(
arguments,1
);//arguments.slice(1)`
return function(/*args2*/){//返回新函数:
var args2=
Array.prototype.slice.call(
arguments
);//arguments.slice();
//强行调用原函数,临时替换this为obj
fun.apply(
obj,args1.concat(args2)
);
}
}
}
//基于calc函数，创建一个新函数，并永久绑定新函数中的this为lilei
var lilei_calc=calc.bind(lilei,10000);
//lilei_calc:function(){(闭包:fun->原函数)
//fun.apply(lilei,arguments);
//}
lilei_calc(5000);
//lilei_calc.call(hmm,9000,7000);
</script>
</body>
</html>
执行结果：
3. 严格模式:
如何使用:
在当前范围的开头: "use strice";
写在2个地方:
1. 写在一个函数内部的开头:
仅函数内使用严格模式，函数外依然使用普通模式
2. 写在一个script元素或js文件的开头
整个js文件或script代码段都采用严格模式
1. 旧项目升级，先逐个函数启用严格模式
2. 新项目，开始就使用严格模式
规定:
- 将静默失败升级为了错误！
- 不允许对未声明的变量赋值！
- 尽量少的或不使用arguments及其API
- 新增了eval作用域:
在eval中声明的变量，eval结束后，不能使用。
