ES5新增方法总结(数组方法,字符串方法,对象方法)


首先来看看什么是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,
});

在这里插入图片描述

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值