ES5 总结

一、JSON拓展

1、parse—— 将json字符串转为js对象

JSON.parse(text, reviver)

text：若传入的字符串不符合 JSON 规范，则会抛出 SyntaxError 异常;不允许逗号作为结尾。

reviver(可选）：两个参数 为属性名、属性值，返回值为本次处理结果，作用域为当前遍历的对象；
函数的遍历顺序依照从最内层开始，按照层级顺序，依次向外遍历

JSON.parse('{"p": 5}', function (k, v) {
    if(k === '') return v;     // 如果到了最顶层，则直接返回属性值，
    return v * 2;              // 否则将属性值变为原来的 2 倍。
});                            // { p: 10 }

JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', function (k, v) {
    console.log(k); // 输出当前的属性名，从而得知遍历顺序是从内向外的，
            // 最后一个属性名会是个空字符串。结果见下图
    return v;       // 返回原始属性值，相当于没有传递 reviver 参数。
});
JSON.parse("[1, 2, 3, 4, ]");//不允许逗号作为结尾,

2、stringify——将js值（对象/数组）转为json字符串

JSON.stringify(value , replacer)

value
replacer（可选）

二、数组拓展

1、判断数组的方法：

• Object.prototype.toString.call（obj）； //"[object Array]"
• obj.constructor === Array； // true
• obj instanceof Array; // true
• Array.isArray(obj); // true

拓展：类数组转为数组的方法？
①Array.prototype.slice.call（arrayLike）注意能调用call的只有方法，不能[]调用
②[].slice.call(arrayLike);
③Array.from(arrayLike)

2、获取成员的索引：indexOf 、 lastIndexOf

参数：查找的成员
返回值：索引值；不存在返回-1

3、forEach——代替for循环；数组迭代器方法

参数：函数（成员值，索引值，原数组）{ }
作用域：window
返回值：始终为undefined

4、map——遍历数组并映射结果

参数：函数（成员值，索引值，原数组）{ }
作用域：window
返回值：执行后的数组成员（新的数组）

5、fill——填充数组

6、some——数组中是否有某些成员满足条件

参数：函数（成员值，索引值，原数组）{ } 函数return返回值：判断的依据；
some方法返回值：true代表至少有一个满足条件，false代表都不满足条件
对true敏感，遇到满足的停止执行；

7、every——数组中是否都满足条件

参数：函数（成员值，索引值，原数组）{ } return返回值：判断的依据；
every方法返回值：true代表所有成员满足条件，false代表都不满足条件
对false敏感，一遇到不满足的就停止执行

8、filter——对数组过滤

参数：函数（成员值，索引值，原数组）{ } return返回值：过滤的条件；
filter方法返回值：满足条件的成员组成的新数组

9、reduce——从前向后累加

10、reduceRight——从后向前累加

参数：函数（上一个累积结果，当前成员值，当前索引值，原数组）return返回值上一次累积结果

		var arr = [1, 4, 3, 2, 3, 2];
		
		//1、判断数组
		Array.isArray(arr); // true
		
		//2、indexOf 、lastIndexOf方法
		console.log(arr.indexOf(4)); //1
		console.log(arr.lastIndexOf(2)); //5
		
		//3、forEach
		var result1 = arr.forEach(function(item, index, arr) {
			console.log(this);// window
			return item;
		})	
		console.log(result1);//undefined
		
		//4、map
		var result2 = arr.map(function(item, index, arr) {
			console.log(this); // window
			return item.toString();
		})	
		console.log(result2); // ["1", "4", "3", "2", "3", "2"]
		
		//5、fill
		[1, 2, 3].fill(4);               // [4, 4, 4]
		[1, 2, 3].fill(4, 1);            // [1, 4, 4]
		
		//6、some
		var result3 = arr.some(function(item, index, arr) {
			return item === 3;
		})
		console.log(result3); //true
		
		// 7、every
		var result4 = arr.every(function(item, index, arr) {
			return item === 3;
		})
		console.log(result4);//false
		
		//8、filter
		var result5 = arr.filter(function(item, index, arr) {
			return item === 3;
		})
		console.log(result5);// [3, 3]
		
		// 9、reduce
		var result6 = arr.reduce(function(accumulator, currentValue, currentIndex, array){
			console.log(accumulator, currentValue);
		  	return accumulator + currentValue;
		});
		console.log(result6);//15
		
		// 10、reduceRight
		var result7 = arr.reduceRight(function(previousValue, currentValue, index, array) {
			console.log(previousValue, currentValue);
			return previousValue + currentValue;
		});
		console.log(result7);// 15

三、bind——函数绑定作用域

目前改变作用域方法：bind、call、apply、with、eval

第一个参数都是改变的作用域
call 从第二个参数开始，表示传递给函数的参数，bind与call类似
apply 第二个参数是数组，每一个成员表示传递给函数的参数

区别：
call | apply 调用即执行
bind调用不执行，但是得到一个新的方法，可以执行
实现bind方法

	// @target:要改变的作用域
	Function.prototype.bind = null;
		// 实现bind方法
		Function.protoatype.bind = function(target) {
			// 获取剩余的参数
			var arg = [].slice.call(arguments, 1);
			// 缓存this
			var me = this;
			// 返回新的函数
			return function() {
				// 获取剩余参数
				var addNum = [].slice.call(arguments);
				// 使用数组拼接方法 将参数合并
				var result = arg.concat(addNum);
				me.apply(target, result)
			}
		}

		var result = fun.bind(document, 6, 7, 8, 9);
		result(1, 2);

四、日期拓展

toJSON将日期转化为json格式

		var date = new Date();
		console.log(date);
		console.log(date.toJSON());//标准化的格式

五、严格模式

使代码更加安全可靠、提高效率、增加运行速度

特点：
1、开启严格模式：“use strict”。
在该代码之前处于正常模式；开启后认识的浏览器自动开启，不认识当做字符串定义，不影响后续代码；
js第一行加入“use strict”，将处于“全局严格模式”；
某函数第一行加入，函数执行时，将处于“局部严格模式”。
2、变量必须声明后再使用；
3、使用arguments.callee，报错；
4、不能使用八进制；0O、0o、0
5、不能使用delete；
6、不允许使用保留字定义变量（如public）；
7、不能使用eval函数；
8、不能使用with；
9、对象不能使用同名属性(不会报错）；
10、全局作用域为undefined，可避免污染全局作用域；
11、函数参数同名会报错。

六、对象拓展

特性：就是描述属性的

1、特性

① Object.defineProperty

作用：设置对象单个属性特性
Object.defineProperty(obj, property, options)

obj: 被设置的对象
property: 被设置的属性
options: 描述特性对象

特性： value（配置值）、writable（可修改性）、enumerable（可枚举性）、configurable（可配置性）；
特性方法：get（取值器）、set（赋值器）
注意：

• 千万不要在get方法获取该属性，千万不要在该set方法中设置该属性，否则会递归死循环；
  通常我们设置设置该属性的一个备用值；
• 一旦设置了特性方法（get或者是set）将不能再次设置 value 和 writable

	// 定义特性
	var obj = {color: "red"};
	Object.defineProperty(obj, "color", {
		// 配置值
		value: "blue",
		// 不可修改
		writable: false,
		// 不可枚举
		enumerable: true,
		// 不可配置
		configurable: true,
		
		//当obj.color; 时候会触发get方法， 当obj.color = xx; 会触发set方法
		//特性方法：get取值器
		get: function() { 
			// 获取备用值_color
			return this._color;
			},
		//特性方法：set赋值器
		set: function() { 
			// 设置备用值_color
			this._color = value; 
			}
	})
	
	obj.color = "blue";// 触发set方法
	console.log(obj.color); // 触发了get方法

② Object.defineProperties

作用：定义多个属性特性
Object.defineProperties(obj, options)

	var obj = {
		color: "red",
		num: 90
	}

	// 设置color和num的特性
	Object.defineProperties(obj, {
		// 设置color特性
		color: {
			// 配置值
			value: "blue",
			// 不可修改
			writable: false,
			// 不可枚举
			enumerable: false 
		},
		// 设置num
		num: {
			get: function() {
				return this._num;
			},
			set: function(value) {
				this._num = value;
			},
			// 不可枚举
			enumerable: false,
			// 一旦设置了特性方法（get或者是set）将不能再次设置 value 和 writable
			// 不可修改
			// writable: false
			value: 300  //写入将会报错
		}
	})

	obj.color = "orange";
	obj.num = 500;
	console.log(obj);

	for (var i in obj) {
		console.log(i, obj[i])
	}

2、可拓展性、封闭、冻结

	作用	设置后	查看:返回的是 true| false
Object.preventExtensions(obj)	取消对象的可拓展性	仍可修改、删除属性；不可添加、增加属性	对象可拓展性:Object.isExtensible(obj)
Object.seal(obj)	封闭对象	对象可被访问、修改；不可新增、删除	对象是否被封闭：Object.isSealed(obj)
Object.freeze(obj)	冻结对象	对象可被访问；不可修改、新增、删除	对象是否冻结：Object.isFrozen(obj)

3、原型方法

1、isPrototypeOf（） 用来判断原型对象是否是参数对象的原型，参数是实例化对象
2、getPrototypeOf 对象静态方法，用来获取原型对象

// 定义数组
	var arr = [1, 2, 3];
	// 类数组对象
	var divs = document.getElementsByTagName("div");

	// 用于判断是否是参数对象的原型
	console.log(Array.prototype.isPrototypeOf(arr));// true
	console.log(Array.prototype.isPrototypeOf(divs));// false
	// 查找原型的时候，会查找整个原型链
	console.log(Object.prototype.isPrototypeOf(arr));// true
	console.log(Object.prototype.isPrototypeOf(divs));//true

	// 获取arr的原型对象
	console.log(arr.__proto__);//es5之前，[constructor: ƒ, concat: ƒ, find: ƒ, findIndex: ƒ, pop: ƒ, …]
	console.log(Object.getPrototypeOf(arr));// [constructor: ƒ, concat: ƒ, find: ƒ, findIndex: ƒ, pop: ƒ, …]
	console.log(Object.getPrototypeOf(arr) === arr.__proto__);//true

4、对象创建新方法：Object.create（）

使用方式： Object.create(prototype, options)
两个参数：
第一个参数：一个对象，Object.create创建出来的对象的原型对象
第二个参数（可选）：一个对象，该对象是Object.create创建出来的特性对象，必须是null或对象，不然抛出一个 TypeError 异常
返回值：一个新对象，带着指定的原型对象和属性

	//原型对象作为第一个参数
	var prototype = {
		say: function()  {
			console.log("say");
		},
		sayHello: function() {
			console.log("sayHello");
		},
		sayNihao: function() {
			console.log("sayNihao");
		}
	}
	//特性对象作为第二个参数
	var options = {
		color: {
			value: "blue",
			writable: false,
			enumerable: false
		},
		width: {
			value: 200,
			writable: false,
			enumerable: false
		}
	}

	var obj = Object.create(prototype, options);

作用：完善继承，使组合性继承的子类原型上没有多余的属性

具体 组合式继承（类式继承）的内容：参见“面向对象”的组合式继承

	function Father(name, age) {
		this.name = name;
		this.age = age;
	}
	Father.prototype.say = function() {
		return "Hello";
	}

	function Son(name, age, grade) {
		Father.call(this, name, age);
		this.grade = grade;
	}
	// Son.prototype = new Father();
	Son.prototype = Object.create(Father.prototype);
	Son.prototype.constructor = Son;
	Son.prototype.sayHi = function() {
		return "Hi";
	}
	var Tom = new Son("Tom", "12", "6");