一、JSON拓展

1、JSON.parse(str,fun)：将JSON字符串转为js对象

　　接收一个参数，是一个函数

　　　　函数有两个参数：str表示要处理的字符串；fun处理函数，函数有连个参数，属性名、属性值

  1.  1 // 定义json字符串
  2.  2 var str = '{"a": 1, "b": "2", "c": {"d": 3}}'
  3.  3 // 转为对象
  4.  4 var obj = JSON.parse(str, function(key, value) {
  5.  5     // console.log(this, arguments)
  6.  6     // 我们要把所有的字符串转为数字
  7.  7     if (typeof value === "string") {
  8.  8         // 转为数字
  9.  9         return +value;
  10. 10     }
  11. 11     return value;
  12. 12 });

2、JSON.stringify(obj,fun)将js对象转为JSON字符串

　　接收一个参数，是一个函数

　　　　函数有两个参数：obj表示要处理的对象，fun表示处理函数，函数有两个参数，属性名、属性值

  1. // 定义js对象
  2.         var obj = {
  3.             a: 1,
  4.             b: "2",
  5.             c: {
  6.                 d: 3
  7.             }
  8.         }
  10.         // 将对象转为字符串
  11.         var str = JSON.stringify(obj, function(key, value) {
  12.             // console.log(this, arguments)
  13.             // 将字符串转为数字
  14.             if (typeof value === "string") {
  15.                 return +value
  16.             }
  17.             return value
  18.         })

二、数组拓展

1、forEach()循环数组

用法：arr.forEach(function(key,index,arr){})

接收一个参数，是一个函数

　　函数有三个参数：第一个key表示成员值，第二个index表示索引值，第三个arr表示原数组

forEach()返回值无效，始终是undefined

  1. var arr = [1,2,3,4,5,6,7,8,9];
  2. arr.forEach(function(key,idx,arr) {
  3.     console.log(key,idx)
  4. })

2、map()循环数组，使用方法和forEach类似，区别是返回值有效

用法：arr.map(function(key,index,arr){})

接收一个参数，是一个函数

　　函数有三个参数：第一个key表示成员值，第二个index表示索引值，第三个arr表示原数组

返回值：根据函数内部的返回条件，返回新数组

  1. var arr = [1,2,3,4,5,6,7,8,9];
  2. var result = arr.map(function(key,idx,arr) {
  3.     return key * 3
  4. })
  5. console.log(result)//返回[3,6,9,12,15,18,21,24,27]
  6. console.log(arr)

3、some()判断数组中是否有成员满足条件

用法：arr.some(function(key,index,arr){})

接收一个参数，是一个函数

　　函数有三个参数：第一个key表示成员值，第二个index表示索引值，第三个arr表示原数组

返回值：布尔值

  1. 1 var arr = [1,2,3,4,5,6,7,8,9];
  2. 2 var result = arr.some(function(key,idx,arr) {
  3. 3     //return key === 2;//检测数组里面是否有数字2
  4. 4     return typeof key === "string";//检测数组里面是否有字符串
  5. 5 })
  6. 6 console.log(result)

4、every()判断数组中所有成员是否满足条件

用法：arr.every(function(key,index,arr){})

接收一个参数，是一个函数

　　函数有三个参数：第一个key表示成员值，第二个index表示索引值，第三个arr表示原数组

返回值：布尔值

  1. var arr = [1,2,3,4,5,6,7,8,9];
  2. var result = arr.every(function(key,idx,arr) {
  3.     return typeof key === "number";//检测数组中所有的值是否都是数字类型
  4. })
  5. console.log(result)

5、fill()填充数组的方法

用法：arr.fill()

返回值：原数组，原数组会发生改变

  1. var arr = new Array(5)//创建一个长度为5的数组
  2. arr.fill(2)//用2填充数组

6、reduce()累加方法

该方法是从前往后累加，对所有成员逐一处理，将结果返回

reduce()从第二个成员开始遍历，第一个成员作为第一次遍历的第一个参数传递

接收一个参数，是一个函数

　　函数有四个参数：第一个是上次累加的结果，第二个是当前成员值，第三个是当前索引值，第四个是原数组

返回值：累加的结果

累加的结果将会在下一次执行的时候作为第一个参数传递

  1. // 定义数组
  2. var arr  = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  3. // 求相加的结果
  4. var result = arr.reduce(function(pre, key, index, arr) {
  5.     // console.log(arguments)
  6.     
    　　　　console.log(pre,key,index)
    　　　　return pre + key
  7. })
  8. // 输出结果
  9. console.log(result)

7、reduceRight()累加方法

该方法是从后往前累加，对所有成员逐一处理，将结果返回

reduceRight()从倒数第二个成员开始遍历，倒数第一个成员作为第一次遍历的第一个参数传递

接收一个参数，是一个函数

　　函数有四个参数：第一个是上一次的累加结果，第二个是当前成员值，第三个是当前索引值，第四个是原数组

返回值：累加的结果

累加的结果将会在下一次执行的时候作为第一个参数传递

  1. // 定义数组
  2. var arr  = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  3. // 求乘积
  4. var result = arr.reduceRight(function(pre, key, index, arr) {
  5.     //console.log(arguments)
  6.     console.log(pre,key,index)
  7.     return pre * key
  8. })
  9. // 输出结果
  10. console.log(result)

8、indexOf()检索，获取成员索引值

从前往后查找

参数：要检索的成员

返回值：被查找的成员下标，如果不存在返回-1

  1. var arr1 = [1,2,3,4,5,3,2,4]
  2. console.log(arr1.indexOf(2))//从前往后查找，输出1

9、lastIndexOf()检索，获取成员索引值

从后往前查找，下标永远是从左面开始计数，但是查找时是从后面开始找，返回第一个匹配的下标

参数：要检索的成员

返回值：被查找的成员下标，如果不存在返回-1

  1. var arr1 = [1,2,3,4,5,3,2,4]
  2. console.log(arr1.lastIndexOf(2))//从后往前查找，输出6

10、filter()过滤

用法：arr.filter(function(key,index,arr){})

接收一个参数，是一个函数

　　函数有三个参数：第一个key表示成员值，第二个index表示索引值，第三个arr表示原数

　返回值：满足条件的数据组成的新数组

  1. // 定义数组
  2. var arr = ["a", "b", "c", "d", 1, 2, 3, 4, 5];
  4. var result = arr.filter(function(value, index, arr) {
  5.      return typeof value === "string"
  6.  })
  7. console.log(result)

 

11、isArray()判断数组

参数：要判断的数组

用法：Array.isArray(arr)

 

判断数组的几种方式：

①arr instanceOf Array

②arr.constructor ===Array

③Object.prototype.toString.call(arr) === “[object Array]”

④Array.isArray(arr)

三、对象拓展（控制对象状态）

1、取消可拓展性，不能再添加新的属性

Object.preventExtensions(obj)

参数：obj表示要处理的对象

查看对象是否取消了可拓展性

Object.isExtensible(obj)

取消可拓展性之后仍然可以删除、修改属性

2、封闭方法

Object.seal(obj)

参数：obj表示要处理的对象

查看对象是否是封闭状态

Object.isSeal(obj) 

封闭之后只能修改，不能添加、删除属性

3、冻结方法

Object.freeze(obj)

参数：obj表示要处理的对象 

查看对象是否是冻结状态

Object.isfrozen(obj) 

冻结状态的对象，不能添加、修改、删除属性

四、对象特性（控制对象中一个属性的状态）

Object.defineProperty(obj,property,option)

参数：obj：要设置的对象

　　　property：要设置的属性名

　　　option：要设置的属性对象

1、特性——值

定义方式：Object.defineProperty(obj,property,{

　　　　　　value:””

　　　　})

  1.     var obj = {
  2.         color: "blue"
  3.     }
  5.     // 设置特性
  6.     Object.defineProperty(obj, "color", {
  7.         // 设置属性值
  8.         value: "red"
  9.     })

使用es5定义的属性值的时候，特性对象里面默认是false,
如果使用的es3.1定义的对象， 并且对象中默认已经存在相应属性， 这个时候特性配置对象全部默认是true

2、特性——可修改性

定义方式：Object.defineProperty(obj,property,{

　　　　　　writable:false//不可修改

　　　　　})

  1. var obj = {
  2.         color: "blue"
  3.     }
  5.     // 定义特性
  6.     Object.defineProperty(obj, "color", {
  7.         // 设置可修改性为false
  8.         writable: false
  9.     })
  10.     // 尝试修改obj.color
  11.     obj.color = "red";
  12.     // 输出 obj
  13.     console.log(obj)
  14.     // 此时，无法改变color的属性值， 因为设置了writable 为false

3、特性——可枚举性

定义方式：Object.defineProperty(obj,property,{

　　　　　　enumerable:false//不可枚举

　　　　　})

  1.     var obj = {
  2.         color: "blue"
  3.     }
  4.     // 设置特性
  5.     Object.defineProperty(obj, "color", {
  6.         // 设置可枚举性为false
  7.         enumerable: false
  8.     })
  9.     // 循环输出
  10.     for (var i in obj) {
  11.         console.log(i)
  12.     }
  13.     // 设置了特性之后， 不能循环显示出color

4、特性——可配置性

定义方式：Object.defineProperty(obj,property,{

　　　　　　configurable:false//不可配置

　　　　　})

  1. var obj = {
  2.         color: "blue"
  3.     }
  5.     // 定义特性
  6.     Object.defineProperty(obj, "color", {
  7.         // 设置可修改性为false
  8.         writable: false,
  9.         // 设置可配置性为false
  10.         configurable: false
  11.     })    
  12.     // 尝试修改obj.color
  13.     // obj.color = "red"
  14.     // // 输出
  15.     // console.log(obj)
  16.  
  17.     // 尝试再次配置
  18.     Object.defineProperty(obj, "color", {
  19.         writable: true
  20.     })

当配置了configurable为false之后

如果同时设置writable为false， 将不可以再次修改writable为true

如果同时设置writable为true， 将可以再次修改writable为false

不论设不设置enumerable， 都不可以再次修改enumerable

5、get和set

get是一个隐藏函数，在获取属性值时调用。set也是一个隐藏函数，在设置属性值时调用，它们的默认值都是undefined。Object.definedProperty()中的get和set对应于对象字面量中get和set方法。

一般get和set成对出现

  1. var obj = {
  2.         color: "red"
  3.     }
  4.     
  5.     Object.defineProperty(obj, "color", {
  6.         get: function() {
  7.             // 备份属性值
  8.             console.log("读取完成")
  9.             return this._color; 
  11.         },
  12.         set: function(value) {
  13.             // 设置备份属性值
  14.             console.log("设置完成")
  15.             return this._color = value; 
  16.         }
  17.     })

 

版权声明：本文为zjp-原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/zjp-/p/9152253.html