ES5和ES6那些你必须知道的事儿

Posted 薛小白

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES5和ES6那些你必须知道的事儿相关的知识,希望对你有一定的参考价值。

ES5和ES6那些你必须知道的事儿

ES5新增的东西

二、对象方法

  1、Object.getPrototypeOf(object)

    返回对象的原型

function Pasta(grain, width) {
    this.grain = grain;
    this.width = width;
}

var spaghetti = new Pasta("wheat", 0.2);

var proto = Object.getPrototypeOf(spaghetti);

console.log(proto)

     输出:

 

  2、Object.create

    用法:Object.create(prototype, descriptors)
   prototype

      必需。  要用作原型的对象。  可以为 null。  

   descriptors

      可选。  包含一个或多个属性描述符的 javascript 对象。  

      “数据属性”是可获取且可设置值的属性。  

      数据属性描述符包含 value 特性,

      以及 writableenumerable 和 configurable 特性。  

      如果未指定最后三个特性,则它们默认为 false。 

   返回:一个具有指定的内部原型且包含指定的属性(如果有)的新对象

var newObj = Object.create(null, {
            size: {
                value: "large",
                enumerable: true
            },
            shape: {
                value: "round",
                enumerable: true
            }
        });

document.write(newObj.size + "<br/>");
document.write(newObj.shape + "<br/>");
document.write(Object.getPrototypeOf(newObj));

// Output:
// large
// round
// null

 

  3、Object.getOwnPropertyNames
    方法返回对象的所有自身属性的属性名(包括不可枚举的属性)组成的数组,但不会获取原型链上的属性。
    即对象的所有key值
 
  4、Object.defineProperty
     方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。
     用法:Object.defineProperty(obj, prop, descriptor)
     obj:要在其上定义属性的对象。
     prop:要定义的key。
     descriptor:要定义的key对应的value。
 
  5、Object.getOwnPropertyDescriptor
     返回对象指定的key对应的value
     Object.getOwnPropertyDescriptor(obj, prop)
     obj:要在其上获取属性的对象。
     prop:要获取的key。
 
  6、Object.defineProperties
     Object.defineProperties(obj, props)
     obj: 将要被添加属性或修改属性的对象
    props: 该对象的一个或多个键值对定义了将要为对象添加或修改的属性的具体配置
var obj = new Object();
Object.defineProperties(obj, {
    name: {
        value: \'张三\',
        configurable: false,
        writable: true,
        enumerable: true
    },
    age: {
        value: 18,
        configurable: true
    }
})

console.log(obj.name, obj.age) // 张三, 18

 

  7、Object.keys
     Object.keys(obj)
     一个表示给定对象的所有可枚举属性的字符串数组。
     即对象所有key值组合成的数组。
var obj = { 0: \'a\', 1: \'b\', 2: \'c\' };
console.log(Object.keys(obj)); // console: [\'0\', \'1\', \'2\']

 

  8、Object.preventExtensions / Object.isExtensible
     应该使该对象不可扩展/应该检查的对象
     可防止将新属性添加到对象中
 
  9、Object.seal / Object.isSealed
     将要被密封的对象/判断一个对象是否被密封
 
  10、Object.freeze / Object.isFrozen
    方法可以冻结一个对象,冻结指的是不能向这个对象添加新的属性,不能修改其已有属性的值,不能删除已有属性,以及不能修改该对象已有属性的可枚举性、可配置性、可写性。该方法返回被冻结的对象。
    方法判断一个对象是否被冻结

 

三、 strict模式(严格模式)

  “use strict”

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

 

  严格模式影响范围

    •   变量:  var、delete、变量关键字
    •   对象: 只读属性、 对象字面量属性重复申明
    •   函数:参数重名、arguments对象、申明
    •   其他:this、eval、关键字...

  

  设立"严格模式"的目的,主要有以下几个:错误检测、规范、效率、安全、面向未来

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

    - 消除代码运行的一些不安全之处,保证代码运行的安全;

    - 提高编译器效率,增加运行速度;

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

 

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

function strict(){  
  "use strict";  
  return "这是严格模式。";  
}  
function notStrict() {  
  return "这是正常模式。";  
}  

 

  具体体现:

    a、变量都必须先用var命令显示声明,然后再使用

    b、严格模式不能对变量调用 delete 操作符

    c、不用保留字做 变量名 或 参数名

    d、为只读属性赋值报错

    e、严格模式下参数名不能重复

    f、只能在脚本的顶级和在函数内部申明函数,if for等语句中申明函数会导致语法错误    

    g、严格模式下抑制this

 

四、Array.isArray() 

  用于确定传递的值是否是一个 Array

Array.isArray([1, 2, 3]);  
// true
Array.isArray({foo: 123}); 
// false
Array.isArray("foobar");   
// false
Array.isArray(undefined);  
// false
// 下面的函数调用都返回 true
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
// 鲜为人知的事实:其实 Array.prototype 也是一个数组。
Array.isArray(Array.prototype); 

// 下面的函数调用都返回 false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray(\'Array\');
Array.isArray(true);
Array.isArray(false);
Array.isArray({ __proto__: Array.prototype });

  instanceof 和 isArray

当检测Array实例时, Array.isArray 优于 instanceof,因为Array.isArray能检测iframes.

 

以上是关于ES5和ES6那些你必须知道的事儿的主要内容,如果未能解决你的问题,请参考以下文章

Day1 敏捷入门关于敏捷和Scrum你必须知道的那些事儿

Vue.use内部那些你不知道的事儿

ES6 模块串联

学习C语言你必须知道的事儿!

股权架构设计— 企业家必须知道的那些事儿

前端那些事六(ES6-11)