JS高级-ES5中的新增方法
1.ES5新增方法概述
ES5中给我们新增了一些方法,可以很方便的操作数组或者字符串,这些方法主要包括:
- 数组方法
- 字符串方法
- 对象方法
1.1数组方法
迭代(遍历)方法:forEach()、map()、filter()、every();
forEach()
语法:array.forEach(function(currentValue,index,arr))
- currentValue:数组当前项的值
- index:数组当前项的索引
- arr:数组对象本身
var arr=[1,2,3];
arr.forEach(function (value,index,array) {
console.log('每个数组元素'+value);
console.log('每个数组元素的索引号'+index);
console.log('数组本身'+array);
})
利用**forEach()**进行加法运算
var arr=[1,2,3];
var num=0;
arr.forEach(function (value,index,array) {
console.log('每个数组元素'+value);
console.log('每个数组元素的索引号'+index);
console.log('数组本身'+array);
num+=value;
})
console.log(num);
filter()
语法:array.filter(function(currenValue,index,arr))
- filter()方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组
- 直接返回一个新的数组
- currentValue:数组当前项的值
- index:数组当前项的索引
- arr:数组对象本身
//filter()筛选数组
var arr=[11,22,33,24];
//因为返回的是一个新的数组,所以需要用一个变量接收
var newArr=arr.filter(function(value,index,array){
return value>=20;
});
console.log(newArr);
some()
语法:array.some(function(currentValue,index,arr))
- some()方法用于检测数组中的元素是否满足指定条件,通俗点就是指查找数组中是否又满足条件的元素
- 返回值为布尔值,如果查找到为true,否则为false
- 如果找到第一个满足条件的元素,则终止循环,不在继续查找
- currentVlaue:数组当前项的值
- index:数组当前项的索引
- arr:数组对象本身
//some()查找数组中是否有满足条件的元素
var arr=[10,22,44,11];
var flage=arr.some(function (value,index) {
return value>=20;
});
console.log(flage);//true
1.2 forEach() 和 some() 的区别
- forEach() 里面的 return 不会终止迭代
var arr=['red','green','blue','pink']
arr.forEach(function (value) {
if(value=='green'){
console.log('找到');
return true;
}
console.log(11);
})
- some() 里面的 return 会终止迭代
var arr=['red','green','blue','pink']
arr.some(function (value) {
if(value=='green'){
console.log('找到');
return true;
}
console.log(11);
})
因此我们可以得知 some() 方法比 forEach() 方法的效率要更高一些
1.3 字符串方法
trim() 方法会从一个字符串的两端删除空白字符
语法:str.trim()
trim() 方法并不影响原字符串本身,它返回的是一个新的字符串
var str=' zh ';
console.log(str);
var str1=str.trim();
console.log(str1);
1.4 对象方法
Object.definePrpPerty() 定义对象中新属性或修改原有的属性
语法:Object.definePrpPerty(obj,prop,descriptor)
- obj:必需。目标对象
- prop:必需。需定义或修改的属性的名字
- descriptor:必需。目标属性所拥有的特性
Object.definePrpPerty() 第三个参数descriptor说明:以对象形式{}书写 - value:设置属性的值,默认为undefined
var obj={
id:1,
name:'zh',
age:22
};
Object.defineProperty(obj,'age',{
value:1000
});
console.log(obj);
- writable:值是否可以重写,true|false 默认为 false
var obj={
id:1,
name:'zh',
age:22
};
Object.defineProperty(obj,'age',{
value:1000
});
Object.defineProperty(obj,'id',{
writable:false
});
obj.id=2;
console.log(obj);
- enumerable:目标属性是否可以被枚举,true|false 默认为 false
var obj={
id:1,
name:'zh',
age:22
};
Object.defineProperty(obj,'sex',{
value:'男',
enumerable:false
});
console.log(obj);
console.log(Object.keys(obj));
- configurable:目标属性是否可以被删除或者是否可以再次修改特性
true|false 默认为 false
var obj={
id:1,
name:'zh',
age:22
};
Object.defineProperty(obj,'sex',{
value:'男',
enumerable:false,
configurable:false
});
delete obj.sex;
console.log(obj);
delete obj.age;
console.log(obj);
Object.keys()方法用于获取对象自身所有的属性
语法:Object.keys(obj)
- 效果类似 for…in
- 返回由一个属性名组成的数组
var obj={
id:1,
name:'zh',
age:22
};
var objNew=Object.keys(obj);
console.log(objNew);
同样的我们可以利用forEach()来对数组进行遍历输出
var obj={
id:1,
name:'zh',
age:22
};
var objNew=Object.keys(obj);
console.log(objNew);
objNew.forEach(function(value){
console.log(value);
})