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() 方法返回一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素

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) 反转类

Last modification:October 30th, 2019 at 09:11 pm
如果觉得我的文章对你有用,请随意赞赏