ES5常见API

ES5常用API

ES 即 ECMAScript，是JavaScript的语言标准
ES5 即 ECMAScript 5，也称为 ECMAScript 2009
ES5支持情况：ie9+, chrome 19+, safari 5+, firefox 4+, opera 12+

严格模式
除了正常运行模式，ECMAscript5添加了第二种运行模式：“严格模式”（strict mode）。
顾名思义，这种模式使得Javascript在更严格的条件下运行。

设立"严格模式"的目的，主要有以下几个：
消除JavaScript语法的一些不合理、不严谨之处，减少一些怪异行为;
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的JavaScript做好铺垫。

进入"严格模式"的标志：“use strict”;

将 “use strict”; 放在脚本文件的第一行，则整个脚本都将以"严格模式"运行。

<script>
   "use strict";
   console.log("全局严格模式。");
</script>

将"use strict"放在函数体的第一行，则整个函数以"严格模式"运行。

function strict(){
    
    
   "use strict";
   console.log("全局严格模式。");
}

ES5严格模式的限制规范：

1.变量声明必须使用var，否则报错

2.对不合理的操作显示报错，不再做静默失败处理
NaN = 123;
var abc = 456;
delete abc;

3.禁止对象属性重名（IE）

4.禁止函数参数重名

5.禁止使用以0开头的八进制数字
ES6新的语法标准，八进制以0o来表示，与16进制的0x形成统一的语法格式

6.禁止使用with语句

7.强制为eval创建新作用域
eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行。
如果参数是一个表达式，eval() 函数将执行表达式。
如果参数是Javascript语句，eval()将执行 Javascript 语句。
严格模式为JavaScript程序创建了第三种作用域：eval作用域

8.arguments不再追踪参数变化

var x = 1
function fn1(x) {
    
    
    x = 2;
    arguments[0] = 3;
    alert(x);
}
fn1(4);

9.禁止使用arguments.callee

// 在匿名的递归函数中
var factorialArray = [1, 2, 3, 4, 5].map(function(n) {
    
    
return (n < 2) ? 1 : arguments.callee(n - 1) * n;
});
console.log(factorialArray);

10.函数中禁止this指向全局对象window，this变成undefined

11.函数必须声明在整个脚本或函数层面

12.新增一些保留字，不能使用他们作为标识符命名
implements, interface, let, package, private, protected, public, static, yield
…

Array扩展
indexOf() 方法返回指定元素在数组中的第一个的索引，不存在则返回 -1

lastIndexOf() 方法返回指定元素在数组中的最后一个的索引，不存在则返回 -1

forEach() 方法为每个元素执行对应的方法，无返回值

map() 方法对数组的每个元素进行一定操作后，返回一个新的数组

filter() 方法返回一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素

some() 用于检测数组中的元素是否满足指定条件，有一项满足条件就返回true

every() 判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true

reduce() 方法都会实现迭代数组的所有项，然后构建一个最终返回的值
方法接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。
reduce()函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。
这个函数返回的任何值都会作为第一个参数自动传给下一项。
第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。

Array.isArray() 方法检查对象是否为数组
…

Object扩展
返回指定对象的所有可枚举属性组成的数组
Object.keys(object)

var obj1 = {
    
    a: 123, b: 456, c: 789};
var obj2 = {
    
    7: 123, 3: 456, 13: 789};
console.log( Object.keys(obj1) ); // ["a", "b", "c"]
console.log( Object.keys(obj2) ); // ["3", "7", "13"]

for (var key in obj2){
    
    
    console.log(key); // '3'  '7'  '13'
}

返回指定对象的所有自身属性组成的数组（包括不可枚举属性）
Object.getOwnPropertyNames(object)

var obj1 = {
    
    a: 123, b: 456, c: 789};
var obj2 = {
    
    7: 123, 3: 456, 13: 789};
console.log( Object.getOwnPropertyNames(obj1) ); // ["a", "b", "c"]
console.log( Object.getOwnPropertyNames(obj2) ); // ["3", "7", "13"]

创建新对象并指定其原型，返回新对象
Object.create(prototype, [descriptors])
prototype：新对象的原型对象，不能省略，可以为 null
[descriptors]：可选，为新对象指定新的属性, 并对属性进行描述

var obj = {
    
    a: 123, b: 456};
var obj1 = Object.create(null); // 没有继承的属性
var obj2 = Object.create(obj); // 继承了obj对象

返回对象的原型
Object.getPrototypeOf(object)

var proto = Object.getPrototypeOf(obj2);
console.log(proto); // {a: 123, b: 456}

直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象
Object.defineProperty(object, property, descriptor)
object 要在其上定义属性的对象。
property 要定义或修改的属性的名称。
descriptor 将被定义或修改的属性描述符(对象)

descriptor 属性描述符具有以下可选键值：
configurable
当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false。
enumerable
当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中。默认为 false。
writable
当且仅当该属性的writable为true时，value才能被赋值运算符改变。默认为 false。
value
该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。

var obj1 = Object.defineProperty({
    
    },'abc',{
    
    
    configurable: true,
    enumerable: true,
    writable: true, // 默认值false
    value: '123'
});
obj1.abc = 456;
console.log(obj1.abc);

对象访问器属性 Getter 和 Setter，ES5 允许使用类似于获取或设置属性的语法来定义对象方法。
get
一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，该方法会被执行，默认为 undefined。
set
一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。默认为 undefined。

var obj3 = {
    
    
    name: 'xm',
    age: 18,
    say: function (){
    
    
        alert('大家好');
    }
}
Object.defineProperty(obj3,'age',{
    
    
    // 是否可配置(枚举、可写、删除)
    configurable: true,
    // 是否可枚举属性（遍历属性）
    enumerable: true,
    set(value) {
    
    
        console.log('触发setter函数');
        this._age = value; //用中间介质变量this._age，不能直接用this.age
    },
    get() {
    
    
        console.log('触发getter函数');
        return this._age; //用中间介质变量this._age，不能直接用this.age
    }
});
obj3.age = 22;
console.log(obj3.age);
console.log( Object.getOwnPropertyDescriptor(obj3,'age') );

注意：一个描述符不能同时有(writable、value)和(get、set)关键字。

添加或更改多个对象属性
Object.defineProperties(object, descriptors)

返回对象的属性的描述符
Object.getOwnPropertyDescriptor(object, property)

String扩展
String.trim() 删除字符串两端的空白字符。
var str = " Hello World! ";
console.log( str.trim() ); // ‘Hello World!’

Date扩展
Date.now() 返回自时间起点到当前的毫秒数
Date.now() 的返回与在 Date 对象上执行 getTime() 的结果相同

console.log( Date.now() ); // 1566646195347
console.log( new Date().getTime() ); // 1566646195347

Function扩展
bind(obj) 将函数内的this绑定为obj, 并将函数返回

var obj = {
    
    abc: 123};
setTimeout(function (){
    
    
    console.log(this); // obj
}.bind(obj),1000);

JSON方法
在数据传输流程中，JSON是以文本(即字符串)的形式传递

var json1 = ‘{ “name”: “cxh”, “sex”: “man” }’; // JSON字符串
var json2 = { “name”: “cxh”, “sex”: “man” }; // JSON对象

JSON.parse() 用于将JSON字符串转换为JSON对象
var obj = JSON.parse(json1); // 需严格的json格式

JSON.stringify() 用于将JSON对象转换为JSON字符串
var str = JSON.stringify(json2);

classList对象
在新的API里，页面里的每个DOM节点上都有一个classList对象
可以使用classList对象里面的方法新增、删除、修改及判断节点上的CSS类

classList对象一些很有用的属性方法：
length 类名个数
item(index) 获取类名
add(class1,class2, …) 添加类
remove(class1,class2, …) 删除类
contains(class) 判断类
toggle(class) 反转类

猜你喜欢