JavaScript进阶学习笔记(三)— ES5新增方法
1、forEach()
forEach(function(value,index,array){ }) 方法是用来遍历数组元素的,相当于 for循环。参数是一个函数,该函数有三个参数,分别为 value — 数组元素、index — 数组元素的索引、array — 当前遍历的数组。参数value必须有,其他参数可以看情况选择。forEach() 不支持的 continue 与 break 语句,所以一旦开始,就一定会遍历到最后。该方法不会改变原数组。
js">// 案例代码
var arr = [1,2,3,4,5];
// 遍历数组
arr.forEach(function(value, index, array) {
//参数一是:数组元素 参数二是:数组元素的索引 参数三是:当前的数组
console.log(value); // 1 2 3 4 5
console.log(index); // 0 1 2 3 4
console.log(array); // [1,2,3,4,5]
})
2、filter()
filter(function(value, index,array) { }) 方法用来过滤数组,筛选数组中所有符合条件的元素,并将这些数组复制到一个新的数组中,然后返回这个新数组。参数是一个函数,该函数有三个参数,分别为 value — 数组元素、index — 数组元素的索引、array — 当前遍历的数组。参数value必须有,其他参数可以看情况选择。该方法不会改变原数组。
js">// 案例代码
var arr = [12, 66, 4, 88, 3, 7];
var newArr = arr.filter(function(value, index,array) {
//参数一是:数组元素 参数二是:数组元素的索引 参数三是:当前的数组
if(value >= 20) { // 筛选条件
return value;
}
});
console.log(newArr);//[66,88] //返回值是一个新数组
3、some()
some(function(value, index,array) { }) 方法用于查找数组中是否存在满足条件的元素,返回值为一个布尔值。该方法会从第一个元素开始依次遍历数组中的元素,直到碰到一个满足条件的元素,返回 true ,然后停止遍历,剩下的元素不再进行访问。如果没有符合条件的元素则返回 false 。参数是一个函数,该函数有三个参数,分别为 value — 数组元素、index — 数组元素的索引、array — 当前遍历的数组。参数value必须有,其他参数可以看情况选择。该方法不会改变原数组。
js">// 案例代码
var arr = [10, 30, 4, 2];
var flag = arr.some(function(value,index,array) {
//参数一是:数组元素 参数二是:数组元素的索引 参数三是:当前的数组
return value < 3;
});
console.log(flag);// true 返回值是布尔值,只要查找到满足条件的一个元素就立马终止循环
4、every()
every(function(value, index,array) { }) 方法用于检测数组中的所有元素是否都符合条件,如果数组中存在一个元素不满足条件,则返回 false ,并且剩余的元素不会再进行检测。如果所有元素都符合条件,则返回 true 。参数是一个函数,该函数有三个参数,分别为 value — 数组元素、index — 数组元素的索引、array — 当前遍历的数组。参数value必须有,其他参数可以看情况选择。该方法不会改变原数组。
js">// 案例代码
var arr = [10, 30, 4, 2];
var flag = arr.every(function(value,index,array) {
//参数一是:数组元素 参数二是:数组元素的索引 参数三是:当前的数组
return value < 20;
});
console.log(flag);// false 返回值是布尔值,只要查找到不满足条件的一个元素就立马终止循环
5、map()
map(function(value, index,array) { }) 方法用于处理数组中的元素,比如算术运算、调用数学函数等,然后以一个新数组的形式返回处理后的数据。参数是一个函数,该函数有三个参数,分别为 value — 数组元素、index — 数组元素的索引、array — 当前遍历的数组。参数value必须有,其他参数可以看情况选择。该方法不会改变原数组。只是返回一个新数组。
js">// 案例代码
var arr = [10, 30, 4, 2];
var result = arr.map(function(value,index,array) {
//参数一是:数组元素 参数二是:数组元素的索引 参数三是:当前的数组
return value -1;
});
console.log(result);// [9,29,3,1]
6、some() 和 forEach()的区别
forEach() 方法是遍历数组中的所有元素,不会受任何语句影响,遇到 return 也不会停止迭代,一定会遍历所有元素。而 some() 方法也是遍历数组中的元素,但是一旦遇到符合条件的元素,就会立即停止遍历,或者遇到 return true; 也会停止遍历。
所以如果是查找数组中的唯一的元素或筛选是否又符合条件的元素,用 some() 效率更高。如果想要查找数组中所有符合条件的元素,则需要使用forEach() 。
7、trim()
trim() 方法用于删除字符串的头部和尾部的空白符,只保留中间的字符串,字符串中间的空白符是不会被去除的。空白符包括:空格、制表符 tab、换行符等等。但不会改变原字符串,只是返回一个处理后的新字符串。
js">// 案例代码
var str = ' hello '
console.log(str.trim()) //hello 去除两端空格
var str1 = ' he l l o '
console.log(str.trim()) //he l l o 去除两端空格
8、Object.keys()
Object.keys(obj) 方法是用来获取对象中的属性名,只有一个参数obj,代表要获取属性名的对象。返回值是一个数组,数组里面的元素就是获取的属性名。
js">// 案例代码
var obj = {
id: 1,
pname: '小米',
price: 1999,
num: 2000
};
var result = Object.keys(obj)
console.log(result)//[id,pname,price,num]
9、Object.defineProperty()
Object.defineProperty(对象,设置或修改对象的属性名,{value: 设置或修改对象的属性值}) 方法用于修改对象的属性值,或者给对象新增一条属性。共有三个参数,分别为: 要操作的对象、要操作的属性值、一个对象里面包含修改后的值,以及设置是否能被再次修改、是否能够被删除等属性。
js">// 案例代码
/*Object.defineProperty(对象,修改或新增的属性名,{
value:修改或新增的属性的值,
writable:true/false,//如果值为false 不允许修改这个属性值
enumerable: false,//enumerable 如果值为false 则不允许遍历
configurable: false //configurable 如果为false 则不允许删除这个属性 属性是否可以被删除或是否可以再次修改特性
}) */
var obj = {
id: 1,
pname: '小米',
price: 1999
};
// 1. 以前的对象添加和修改属性的方式
// obj.num = 1000;
// obj.price = 99;
// console.log(obj);
// 2. Object.defineProperty() 定义新属性或修改原有的属性
Object.defineProperty(obj, 'num', {
value: 1000,
enumerable: true
});
console.log(obj);
Object.defineProperty(obj, 'price', {
value: 9.9
});
console.log(obj);
Object.defineProperty(obj, 'id', {
// 如果值为false 不允许修改这个属性值 默认值也是false
writable: false,
});
obj.id = 2;
console.log(obj);
Object.defineProperty(obj, 'address', {
value: '中国山东蓝翔技校xx单元',
// 如果只为false 不允许修改这个属性值 默认值也是false
writable: false,
// enumerable 如果值为false 则不允许遍历, 默认的值是 false
enumerable: false,
// configurable 如果为false 则不允许删除这个属性 不允许在修改第三个参数里面的特性 默认为false
configurable: false
});
console.log(obj);
console.log(Object.keys(obj));
delete obj.address;
console.log(obj);
delete obj.pname;
console.log(obj);
Object.defineProperty(obj, 'address', {
value: '中国山东蓝翔技校xx单元',
// 如果只为false 不允许修改这个属性值 默认值也是false
writable: true,
// enumerable 如果值为false 则不允许遍历, 默认的值是 false
enumerable: true,
// configurable 如果为false 则不允许删除这个属性 默认为false
configurable: true
});