JS高级-ES5中的新增方法

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);
})