带你学习ES5中新增的方法

我就是我 2023-07-10 08:56 4阅读 0赞

### 文章目录 ###

*   *   *  1. ES5中新增了一些方法，可以很方便的操作数组或者字符串，这些方法主要包括以下几个方面
         *  2. 数组方法
         *   *  2.1 forEach跟jQuery的each用法类似。语法是：
             *  2.2 map()
             *  2.3 filter()
             *  2.4 some()
             *  2.5 every()
             *  2.6 isArray()
         *  3. 字符串方法
         *  4. 对象方法
         *  总结

### 1. ES5中新增了一些方法，可以很方便的操作数组或者字符串，这些方法主要包括以下几个方面 ###

*  数组方法
 *  字符串方法
 *  对象方法

### 2. 数组方法 ###

迭代遍历方法：forEach()、map()、filter()、some()、every()  
判断方法：isArray()

#### 2.1 forEach跟jQuery的each用法类似。语法是： ####

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

运行效果如下图  
![image.png][]

#### 2.2 map() ####

array.map(function(currentValue, index, arr))

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。  
注意：map() 方法是直接返回一个新的数组

*  currentValue: 数组当前项的值
 *  index: 数组当前项的索引
 *  arr: 数组对象本身

var array1 = [1, 4, 9, 16];
    var map1 = array1.map(function(value, index, arr) { 
    return value * 2
    });
    console.log(map1) //[2,8,18,32]

#### 2.3 filter() ####

array.filter(function(currentValue, index, arr))

filter()方法用于筛选创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，主要用于筛选数组。  
filter()方法是直接返回一个新的数组

*  currentValue: 数组当前项的值
 *  index: 数组当前项的索引
 *  arr: 数组对象本身

var arr = [12,66,88]
    // 选出大于20的
    var newarr = arr.filter(function(value, index){ 
      return value >=20
    })
    可以简写成var newarr = arr.filter( //[66, 88])
    console.log(newArr) //[66, 88]

预览效果如下图  
![image.png][image.png 1]

#### 2.4 some() ####

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

some()方法用于检测数组中的元素是否满足指定条件，通俗点查找数组中是否有满足条件的元素  
注意： some()方法返回值是布尔值，如果查找到这个元素，就返回true,如果查找不到则返回false  
如果找到第一个满足条件的元素，则终止循环，不在继续查找

*  currentValue: 数组当前项的值
 *  index: 数组当前项的索引
 *  arr: 数组对象本身

var arr=[10,30,4]
    var b = arr.some(function(value){ 
    	return value > 20
    })
    console.log(b) //true

#### 2.5 every() ####

array.every(function(currentValue, index, arr))

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。  
注意：every() 方法必须每个元素都符合条件才能返回true，若有一个不符合，则返回false。  
若收到一个空数组，此方法在一切情况下都会返回 true。

*  currentValue: 数组当前项的值
 *  index: 数组当前项的索引
 *  arr: 数组对象本身

#### 2.6 isArray() ####

Array.isArray(obj)

Array.isArray() 用于确定传递的值是否是一个 Array

*  obj是需要检测的值。如果是数组则返回true,否则返回false

区别：

1.  filter 是查找满足条件的元素，返回的是一个数组，而且是把所有满足条件的元素返回回来
2.  some 是查找满足条件的元素是否存在，返回的是一个布尔值，如果查找第一个满足条件的元素，就终止循环。如果数组中查询唯一个元素，用some方法更为合适，因为它找到这个元素，就不在进行循环，效率更高
3.  every是查找所有的元素是否符合条件，返回的是一个布尔值
4.  map是创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果

### 3. 字符串方法 ###

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

str.trim()

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

### 4. 对象方法 ###

Object.defineProperty()定义对象中新增属性或修改原有的属性

Object.defineProperty(obj, prop, descriptor)

*  obj: 必需。目标对象
 *  prop: 必需。 需定义或修改的属性名字
 *  descriptor: 必需。目标属性所拥有的特性

Object.defineProperty() 第三个参数descriptor说明： 以对象形式\{\}书写

*  value：设置属性的值，默认为undefined
 *  writable:值是否可以重写。true | false 默认为false
 *  enumerable: 目标属性是否可以被枚举。true | false 默认为false
 *  configurable: 目标属性是否可以被删除或是否可以再次修改特性true | false 默认为false

var obj = { 
    id: 1,
    pname: '小米',
    price: 1999
    }
    //以前的对象添加和修改属性的方式
    obj.num = 1000
    obj.pirce = 99
    console.log(obj)
    
    //Object.deefineProperty()定义新属性或者修改原有的属性
    Object.defineProperty(obj, 'num',{ 
    	value: 1000,
    })
    Object.defineProperty(obj, 'pricee',{ 
    	value: 9.9,
    })
    Object.defineProperty(obj, 'id',{ 
      //如果值为false,则不允许修改
    	writable: false,
    })
    Object.defineProperty(obj, 'address',{ 
    	value: '中国郑州市',
      //如果值为false,则不允许遍历，枚举
      enumerable: false
    })
    console.log(obj)
    console.log(Object.keys(obj))

### 总结 ###

本篇文章主要分享了ES5新增的一些方法，有数组方法、字符串方法、对象方法等等，主要分享了哥方法的用法，特点等等。

[image.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAyMC9wbmcvMTQ4MTQ2LzE1ODMwNTQxODQ1NjctMmFmOGY3MTQtMWUzYS00NTgyLWIyYzgtNjAxYzRkZWYyODc4LnBuZw?x-oss-process=image/format,png#align=left&display=inline&height=259&name=image.png&originHeight=518&originWidth=854&size=176937&status=done&style=none&width=427
[image.png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAyMC9wbmcvMTQ4MTQ2LzE1ODMwNTQ4MjE4MjctMjZhZWE5MWMtYjJkMi00NTUzLTg1ZTUtNGM5NTkzZGQ3YTExLnBuZw?x-oss-process=image/format,png#align=left&display=inline&height=125&name=image.png&originHeight=250&originWidth=644&size=60622&status=done&style=none&width=322

发表评论取消回复

表情：

评论列表（有 0 条评论，4人围观）

还没有评论，来说两句吧...

相关阅读

相关带你学习ES5中新增的方法

文章目录 1. ES5中新增了一些方法，可以很方便的操作数组或者字符串，这些方法主要包括以下几个方面 2. 数组方法

我就是我/ 2023年07月10日 08:56/ 0 赞/ 5 阅读

相关 ES5中新增的方法，让你的开发效率6的飞起

前言 ES5也被称为ECMAScript 5或ECMAScript 2009，在ES5中新增了许多方法，包括数组方法、字符串方法、对象方法等。今天我们主要来学习以下内容：

本是古典何须时尚/ 2023年02月23日 05:10/ 0 赞/ 5 阅读

相关第二课：ES5中新增的方法（三）：对象方法（2021/4/15）

> 一、对象方法 1. Object.keys() Object.keys() 用于获取对象自身所有的属性用法：Object.keys(obj)

左手的ㄟ右手/ 2023年01月13日 04:27/ 0 赞/ 59 阅读

相关第二课：ES5中新增的方法（二）：字符串方法（2021/4/16）

> 一、字符串方法 1. trim() 用法：str.trim() trim()方法会从一个字符串的两端删除空白字符 trim()方法并

末蓝、/ 2023年01月13日 04:27/ 0 赞/ 61 阅读

相关第二课：ES5中新增的方法（一）：数组方法（2021/4/15）

> 一、数组方法迭代（遍历）方法： forEach()、map() 、filter()、some()、every() 1. forEach() 注意：遇

清疚/ 2023年01月13日 04:22/ 0 赞/ 90 阅读

相关 ES5新增数组的常见方法

1、indexof 方法可返回数组中某个指定的元素位置,索引位置从0开始,如果在数组中没找到指定元素则返回 -1。例: 从数组 arr = \[“a”,“b”,“c

女爷i/ 2022年12月16日 16:19/ 0 赞/ 203 阅读

相关 ES5中新增的Array方法详细说明

原文出处：来自张鑫旭-鑫空间-鑫生活的这篇文章(ES5中新增的Array方法详细说明) 前言-索引 ES5中新增的不少东西，了解之对我们写JavaScript会

左手的ㄟ右手/ 2022年08月21日 10:55/ 0 赞/ 187 阅读

相关 ES5的Function新增的bind方法简单介绍

Function.bind(obj, arguments) 说明 1. 简单来说，这个的返回值是一个函数，该函数未执行，该函数中的this指向obj这个对象。

喜欢ヅ旅行/ 2022年07月14日 03:12/ 0 赞/ 93 阅读

相关浅谈JavaScript数组，数组操作方法，ES5新增数组操作方法，ES6新增数组操作方法

一.定义数组的方法 1.字面量的方式定义数组 //定义一个空数组 var arr = []; //定义一个初始值分别是啊a,b,c

太过爱你忘了你带给我的痛/ 2022年05月27日 12:20/ 0 赞/ 320 阅读

相关数组循环 ES5新增方法

1. arr.forEach() // 代替for 循环 let arr = ['1','2','3','4','5']; arr.forEac

悠悠/ 2022年02月20日 17:51/ 0 赞/ 337 阅读