ES5新增方法总结（数组方法，字符串方法，对象方法）

Posted 2021-09-01 星河梦~

目录

• 数组方法
• • 迭代（遍历）方法
  • 具体用法
  • filter()与some()方法的区别
• 字符串方法
• 对象方法
• • Object.keys()
  • Object.defineProperty()

首先来看看什么是ES5.

ES5：是ECMAScript(基于javascript的规范)标准的修正。 与html5规范进程本质类似，ES5通过对现有JavaScript方法添加语句和原生ECMAScript对象做合并实现标准化。

ES5中新增了一些方法，可以很方便的操作数组、字符串以及对象

数组方法

迭代（遍历）方法

使用forEach()、map()、filter()、some()、every()等方法来遍历数组。

具体用法

（1）forEach()、map()

arr.forEach(function(value,index,array))
arr.map(function(value,index,array))   //遍历数组

value：数组当前项的值

index：数组当前项的索引

array：数组本身

例如：

  var arr = [1, 2, 3];
  var sum = 0;
  arr.forEach(function(value, index, array) {
      console.log('每个数组元素' + value);
      console.log('每个元素的索引号' + index);
      console.log('数组' + array);
      sum += value;
  })
  console.log(sum);   //6

（2）filter()

arr.filter(function(value,index,array))     //直接返回一个新的数组

value：数组当前项的值

index：数组当前项的索引

array：数组本身

注意：filter()方法创建一个新的数组，新的数组中的元素是通过检查指定数组中符合条件的所有元素。用法——>筛选数组。

例如：

// filter 筛选数组
var arr = [12, 66, 4, 88, 3, 7];
var newArr = arr.filter(function(value, index) {
    // return value >= 20;  //0：66，1：88
	return value % 2 === 0;    //12，66，4，88
});
console.log(newArr);

（3）some()

arr.some(function(value,index,array))

value：数组当前项的值

index：数组当前项的索引

array：数组本身

some()方法用于检测数组中的元素是否满足指定条件。也就是说，some()方法用于查找数组中是否有满足条件的元素。

它的返回值是布尔值，如果含有满足条件的元素就返回true；如果找不到就返回false。

注意：如果找到第一个满足条件的元素，则终止循环，不再继续查找。

例如：

var arr1 = ['red', 'pink', 'blue'];
var flag1 = arr1.some(function(value) {
    return value == 'pink';
});
console.log(flag1);     //true

（4）every()

arr.some(function(value,index,array))

查找数组所有的元素，当所有的元素满足指定条件时返回true，有一个不满足条件则返回false。

例如：

var arr = [10, 30, 4];
var flag = arr.every(function(value) {
    return value > 3;
});
console.log(flag);           //true

filter()与some()方法的区别

1. filter()：查找满足条件的元素，返回的是一个数组，而且是把所有满足条件的元素返回回来

2. some()：查找满足条件的元素是否存在 ，返回的是一个布尔值，如果查找到第一个满足条件的元素就终止循环。
   
   

字符串方法

trim()：trim()方法会从一个字符串的两端删除空白字符。

用法：

str.trim()

注意：trim()方法并不影响原字符串本身，它返回的是一个新的字符串。

例如：

var input = document.querySelector('input');
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.onclick = function() {
var str = input.value.trim();
if (str === '') {
    alert('请输入内容');
} else {
    console.log(str);         //12345   两端没有空格
    console.log(str.length);        //5
    div.innerHTML = str;  
}
}

对象方法

Object.keys()

Object.keys()用于获取对象自身所有的属性。

用法：

Object.keys(obj)

它的效果类似于for…in

例如：

var obj = {
    id: 1,
    name: '小文',
    age: 18,
    sex: '女'
};
var arr = Object.keys(obj);
console.log(arr);
arr.forEach(function(value) {
    console.log(value);
})

Object.defineProperty()

Object.defineProperty()： 用于定义对象中新属性或修改原有的属性。

用法：

Object.defineProperty(obj,prop,descriptor)

obj：目标对象

prop：需要定义或修改的属性的名字

descriptor：目标属性拥有的特性,以对象{}形式书写

1、以前添加和修改对象属性的方法：

var obj = {
    id: 1,
    name: '小文',
    age: 18,
    sex: '女'
};
obj.grand = 1;
obj.age = 20;
console.log(obj);

2.、使用Object.defineProperty() 定义新属性或修改原有的属性

var obj = {
    id: 1,
    name: '小文',
    age: 18,
    sex: '女'
};
       
Object.defineProperty(obj, 'age', {
    value: 20,
});