ES5总结

es5总结

xiong.jpg

1. strict模式

严格模式，限制一些用法，'use strict';

为什么使用严格模式:

• 消除代码运行的一些不安全之处，保证代码运行的安全；

• 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;

• 提高编译器效率，增加运行速度；

• 为未来新版本的Javascript做好铺垫。

"use strict";
 x = 3.14;   //报错 不允许使用未声明的变量或对象
  "use strict"; var x = 3.14; delete x;   //报错 不允许删除变量或对象。
  "use strict"; function x(p1, p2) {}; 
 delete x;  //报错 不允许删除函数。
  "use strict"; function x(p1, p1) {};   // 报错 不允许变量重名
  "use strict"; var x = 010; // 报错 不允许使用八进制
  "use strict"; var x = \010; // 报错 不允许使用转义字符
  "use strict"; var obj = {}; Object.defineProperty(obj, "x", {value:0, writable:false});
 obj.x = 3.14; // 报错 不允许对只读属性赋值
  "use strict"; var obj = {get x() {return 0} };
 obj.x = 3.14;            // 报错 不允许对一个使用getter方法读取的属性进行赋值
  "use strict"; delete Object.prototype; // 报错 不允许删除一个不允许删除的属性
  "use strict"; var eval = 3.14;         // 报错 变量名不能使用 "eval" 字符串:
  "use strict"; var arguments = 3.14;         // 报错 变量名不能使用 "arguments"  字符串:
  "use strict"; with (Math){x = cos(2)}; // 报错 不允许使用with
  "use strict"; eval ("var x = 2");
 alert (x);               // 报错 由于一些安全原因，在作用域 eval() 创建的变量不能被调用：
 
 禁止this关键字指向全局对象 function f(){  return !this;
 } 
 // 返回false，因为"this"指向全局对象，"!this"就是false
 
 function f(){ 
  "use strict";  return !this;
 } 
 // 返回true，因为严格模式下，this的值为undefined，所以"!this"为true。

2.Array增加方法

forEach (js v1.6)

forEach方法中的function回调支持3个参数，第1个是遍历的数组内容；第2个是对应的数组索引，第3个是数组本身

var sum=0;var arr=[1,2,3];
arr.forEach(function(value,i,arr){
 sum+=value; console.log(arr[i]==value)//true});console.log(sum);

map (js v1.6)

map方法的作用不难理解，“映射”嘛，也就是原数组被“映射”成对应新数组。下面这个例子是数值项求平方：

遍历数组，return返回组成一个新数组

var data = [1, 2, 3, 4];var arrayOfSquares = data.map(function (item) { return item * item
});
alert(arrayOfSquares); // 1, 4, 9, 16

filter (js v1.6)

过滤。刷选，filer过滤掉数组不需要的元素，返回过滤后的新组数，用法同map相似

filter的回调函数返回boolean为true的值

var arr=[1,3,4,5,0];var arr2=arr.filter(function(item){ return item;//为true则返回回去})//arr2=[1,3,4,5];var arr2=arr.filter(function(item){ return item=="3";
})

some (js v1.6)

只需一个满足条件

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。  如果没有满足条件的元素，则返回false。

array.some(function(currentValue,index,arr),thisValue)；//第1个是遍历的数组内容；第2个是对应的数组索引，第3个是数组本身 //thisValue可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"

every (js v1.6)

需要所有元素满足条件

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。

every() 方法使用指定函数检测数组中的所有元素：

• 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。

• 如果所有元素都满足条件，则返回 true。

array.every(function(currentValue,index,arr), thisValue);  //第1个是遍历的数组内容；第2个是对应的数组索引，第3个是数组本身 
  //thisValue可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
  如果省略了 thisValue ，"this" 的值为 "undefined"

indexOf (js v1.6)

用法：同字符串的indexOf一样。 arr.indexOf(str,index);str:为索引的内容，index为从第几项开始找（包括这一项）

arr.indexOf(4,2)//从索引是2的地方开始找，返回3，如果找不到就返回-1

lastIndexOf (js v1.6)

lastIndexOf,同indexOf一样,在数组末端开始找

arr.lastIndexOf(searchElement,Formindex);
从数组的末端开始找，Formindex默认为arr.length-1,依次递减

reduce (js v1.8)

递归。array.reduce(callback[, initialValue])

回调函数参数包括之前值、当前值、索引值以及数组本身。initialValue参数可选，表示初始值。若指定，则当作最初使用的previous值；如果缺省，则使用数组的第一个元素作为previous初始值，同时current往后排一位，相比有initialValue值少一次迭代。

注意: reduce() 对于空数组是不会执行回调函数的。

var sum = [1, 2, 3, 4].reduce(function (previous, current, index, array) { return previous + current;
});console.log(sum); // 10// 初始设置previous = initialValue = 1, current = 2// 第一次迭代previous = (1 + 2) =  3, current = 3// 第二次迭代previous = (3 + 3) =  6, current = 4// 第三次迭代previous = (6 + 4) =  10, current = undefined (退出）

reduceRight (js v1.8)

reduceRight() 方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。

var numbers = [2, 45, 30, 100];function getSum(total, num) { return total - num;
}function myFunction(item) { document.getElementById("demo").innerHTML = numbers.reduceRight(getSum);
}

3.Function增加属性方法

Function.prototype.bind();

bind() 方法的主要作用就是将函数绑定至某个对象，bind()方法会创建一个函数，函数体内this对象的值会被绑定到传入bind() 函数的值。

Function.prototype.bind =  function(context) { var self = this; // 保存原函数
 return function``() { // 返回一个新函数
 return self.apply(context, arguments); // 执行新函数时，将传入的上下文context作为新函数的this
 }
}//实列//1 实现对象继承var A = function(name) { this.name = name;
}var B = function() {
 A.bind(this, arguments);
}
B.prototype.getName = function() { return this.name;
}var b = new B("hello");console.log(b.getName()); // "hello"//2 事件处理ar paint = { color: "red", count: 0, updateCount: function() { this.count++; console.log(this.count);
 }
};// 事件处理函数绑定的错误方法：document.querySelector('button')
 .addEventListener('click', paint.updateCount); // paint.updateCount函数的this指向变成了该DOM对象// 事件处理函数绑定的正确方法：document.querySelector('button')
 .addEventListener('click', paint.updateCount.bind(paint)); // paint.updateCount函数的this指向变成了paint//3 时间间隔函数var notify = { text: "Hello World！", beforeRender: function() {
 alert(this.text);
 }, render: function() { // 错误方法：
 setTimeout(this.beforeRender, 0); // undefined
 // 正确方法：
 setTimeout(this.beforeRender.bind(this), 0); // "Hello World！"
 }
};
notify.render();4 借用Array的原生方法var a = {};Array.prototype.push.bind(a, "hello", "world")();console.log(a); // "hello", "world"

bind与 call/apply方法的区别

共同点：

都可以改变函数执行的上下文环境；

不同点：

bind: 不立即执行函数，一般用在异步调用和事件； call/apply： 立即执行函数。

call/apply上下文函数回顾

一般来说，this总是指向调用某个方法的对象，但是使用call()和apply()方法时，就会改变this的指向。

• apply()方法

• 定义：应用某一个对象的一个方法，以另一个对象替换当前对象  apply(this,arguments);  apply(this,[arg1,arg2,...]);

var arr = [9,3,5,7,8,2]; var max = Math.max.apply(null,arr);console.log(max);function fn(){ var arr = [];
 arr.push.apply(arr1,arguments); return arr1;
}//改变原来方法中的this指向，指向新的对象；//例：改变了arr.push()中this的指向，指向到apply()中的arr1。call同理

• call()方法

• 定义：应用某一个对象的一个方法，以另一个对象替换当前对象  call(this,arg1,arg2,...);

4.Date.now()

Date.now方法返回当前时间距离时间零点（1970年1月1日 00:00:00 UTC）的毫秒数，相当于 Unix 时间戳乘以1000。es5新增

5.Object方法

Object.getPrototypeOf、Object.create

为了语法的规范性，用Object.setPrototypeOf()（写操作）、Object.getPrototypeOf()（读操作) 、Object.create()（生成操作）替换原来对象proto属性

//Object.setPrototypeOf()（**写操作**），用来设置一个对象的prototype对象let proto = {};let obj = { x: 10 };Object.setPrototypeOf(obj, proto);//Object.getPrototypeOf()（**读操作**)var rec = new Rectangle();Object.getPrototypeOf(rec) === Rectangle.prototype// true//Object.create()（**生成操作**） 第一个参数是要继承的原型，如果不是一个子函数，可以传一个null，第二个参数是对象的属性描述符，这个参数是可选的function Car (desc) { this.desc = desc; this.color = "red";
}
Car.prototype = { getInfo: function() { return 'A ' + this.color + ' ' + this.desc + '.';
 }
};//instantiate object using the constructor functionvar car =  Object.create(Car.prototype);
car.color = "blue";
alert(car.getInfo());

Object.getOwnPropertyNames

返回对象所有属性名称，并添加到数组中

function Pasta(grain, width, shape) { // Define properties.
 this.grain = grain; this.width = width; this.shape = shape; this.toString = function () { return (this.grain + ", " + this.width + ", " + this.shape);
 }
}// Create an object.var spaghetti = new Pasta("wheat", 0.2, "circle");// Get the own property names.var arr = Object.getOwnPropertyNames(spaghetti);document.write (arr);// Output://   grain,width,shape,toString

Object.defineProperty

将属性添加到对象，或修改现有属性的特性

Object.defineProperty(object, propertyname, descriptor)

参数1，对象；参数2：属性名；参数3：属性内容；

var newLine = "<br />";// Create a user-defined object.var obj = {};// Add a data property to the object.Object.defineProperty(obj, "newDataProperty", { value: 101, writable: true, enumerable: true, configurable: true});// Set the property value.obj.newDataProperty = 102;document.write("Property value: " + obj.newDataProperty + newLine);// Output:// Property value: 102

Object.getOwnPropertyDescriptor

获取指定对象的自身属性描述符。自身属性描述符是指直接在对象上定义（而非从对象的原型继承）的描述符。

非原型对象属性

Object.getOwnPropertyDescriptor(object, propertyname)；//实例var obj = {};// Add a data property.obj.newDataProperty = "abc";// Get the property descriptor.var descriptor = Object.getOwnPropertyDescriptor(obj, "newDataProperty");

Object.defineProperties

将一个或多个属性添加到对象，并/或修改现有属性的特性。

object.defineProperties(object, descriptors)//实例var newLine = "<br />";var obj = {};Object.defineProperties(obj, { newDataProperty: { value: 101, writable: true, enumerable: true, configurable: true
 }, newAccessorProperty: { set: function (x) { document.write("in property set accessor" + newLine); this.newaccpropvalue = x;
 }, get: function () { document.write("in property get accessor" + newLine); return this.newaccpropvalue;
 }, enumerable: true, configurable: true
 }});// Set the accessor property value.obj.newAccessorProperty = 10;document.write ("newAccessorProperty value: " + obj.newAccessorProperty + newLine);// Output:// in property set accessor// in property get accessor// newAccessorProperty value: 10

Object.keys

返回对象的可枚举属性和方法的名称，返回的结果添加到一个新的数组中

// Create a constructor function.function Pasta(grain, width, shape) { this.grain = grain; this.width = width; this.shape = shape; // Define a method.
 this.toString = function () { return (this.grain + ", " + this.width + ", " + this.shape);
 }
}// Create an object.var spaghetti = new Pasta("wheat", 0.2, "circle");// Put the enumerable properties and methods of the object in an array.var arr = Object.keys(spaghetti);document.write (arr);// Output:// grain,width,shape,toString

Object.preventExtensions / Object.isExtensible

Object.preventExtensions 阻止向对象添加新属性。

// Create an object that has two properties.var obj = { pasta: "spaghetti", length: 10 };// Make the object non-extensible.Object.preventExtensions(obj);document.write(Object.isExtensible(obj));document.write("<br/>");// Try to add a new property, and then verify that it is not added.obj.newProp = 50;document.write(obj.newProp);// Output:// false// undefinedObject.isExtensible(object)；//返回一个值，该值指示是否可向对象添加新属性。

Object.seal / Object.isSealed

Object.seal(object)；阻止修改现有属性的特性，并阻止添加新属性。

• 使对象不可扩展，这样便无法向其添加新属性。

• 为对象的所有属性将 configurable 特性设置为 false。

// Create an object that has two properties.var obj = { pasta: "spaghetti", length: 10 };// Seal the object.Object.seal(obj);document.write(Object.isSealed(obj));document.write("<br/>");// Try to add a new property, and then verify that it is not added. obj.newProp = 50;document.write(obj.newProp);document.write("<br/>");// Try to delete a property, and then verify that it is still present. delete obj.length;document.write(obj.length);// Output:// true// undefined// 10Object.isSealed(object)；//返回一个值，该值指示是否可向对象修改现有属性的特性，添加新属性。

Object.freeze / Object.isFrozen

Object.freeze(object)；阻止修改现有属性的特性和值，并阻止添加新属性。

• 为对象的所有属性将 configurable 特性设置为 false。在 configurable 为 false 时，无法更改属性的特性且无法删除属性。

• 为对象的所有数据属性将 writable 特性设置为 false。当 writable 为 false 时，无法更改数据属性值。

// Create an object that has two properties.var obj = { pasta: "spaghetti", length: 10 };// Freeze the object.Object.freeze(obj);// Try to add a new property, and then verify that it is not added. 
 obj.newProp = 50; document.write(obj.newProp); document.write("<br/>");// Try to delete a property, and then verify that it is still present. delete obj.length;document.write(obj.length);document.write("<br/>");// Try to change a property value, and then verify that it is not changed. obj.pasta = "linguini";document.write(obj.pasta);// Output:// undefined// 10// spaghettiObject.isFreeze(object)；//返回一个值，该值指示是否可向对象修改现有特性和值，添加新属性。

作者：理想三旬7
链接：https://www.jianshu.com/p/febf41a8dc13