美文网首页
ES6的一些笔记(六)

ES6的一些笔记(六)

作者: 曾迦 | 来源:发表于2017-02-14 05:32 被阅读37次

函数

新特性


新增参数默认值

在写函数的时候可以给形参所在的变量分配一个默认值,如果在调用函数的时候,没有写入实参,那么形参变量中的值就是默认值。
默认值会让functionlength属性失真,在默认值后包含默认值的形参将不会计入length属性,并且严格模式不可以使用。

function test(x,y=10) {    
return x + y;
}
console.log(test())   // NaN 因为x没有值 而y是一个数字
console.log(test(3,3))  // 6
console.log(test(3));   // 13
新增rest参数

写法...vals,vals只是一个变量名,写什么都可以,记得放在参数末尾也就是最后一个参数,不然会报错。
rest参数就是一个数组。严格模式不可以使用。

function testEach(...vals) {    
    vals.forEach(function (val) {        
        console.log(val);    
    })
}
function test(...vals) {    
    for (var val in vals){        
        console.log(vals[val]);    
    }
}
test("呵","呵")   // 呵,呵
testEach(1,2,3,4)  // 1,2,3,4
新增扩展运算符...

...可以把一个数组转化为序列的方式,不止是数组伪数组也可以。
严格模式不可以使用。

function test(a,b,c) {    
  return a+b+c;
}
console.log(test(...[1,2,3]));   // 6
函数的name属性

name返回的是一个函数的名称

function test() {
}
var arr = new Array();
console.log(test.name)   // test
console.log(arr.push.name)     // push 
函数的新写法“箭头函数”

箭头函数可以简化原先函数的书写方式,实例如下。

var myparseInt =  num => Number.parseInt(num)
var n = myparseInt("72b");
console.log(n); // 72

如上代码num => Number.parseInt(num)相当于一个匿名函数,而myparselnt则相当于一个函数的名称,也可以说是一个变量接收了一个匿名函数那么久可以通过这个变量来调用函数,匿名函数如果放到ES5中代码如下:

var  myparseInt  =function(num) {    
    return Number.parseInt(num)
}

多个参数或者没有参数可以用()来表示参数的地方如:

var test=  ()=> "返回值"
//等同于
var  test  =function() {    
    return "返回值"
}

如果返回值大于一条语句要用{}包裹起来。

var test=  (num1,num2)=> {    
    var n = num1 + num2;   
    return n/10;
}
console.log(test(30,40))  // 70

箭头函数里面根本没有自己的this,而是引用外层的this。

function fn() {
    return () =>{
        return () =>{
            return this.name
        }
    }
}

var jack = fn.call({"name":"jack"})

/** 
  获取的jack
  function () {
        return function () {
            return _this.name;
        };
    }
*/
console.log(jack) 

console.log("---" + jack.name)  // ---
console.log(jack.call()()) // jack
console.log(jack.call({"name":"jack2"})()) // jack
var jack2 =jack.call({"name":"jack2"});
console.log("---" + jack2.name) // ---
/**
  jack2
  function () {
            return _this.name;
  }
*/
console.log(jack2)
console.log(jack2()) // jack

对象

新特性


对象属性的简易写法
// 变量
var name = "jack";
var age = 18;
// 将变量赋值给对象
var obj = {name};
obj = {age}
console.log(obj) // Object {age: 18} 会覆盖上一个name
obj = {name,age} 
console.log(obj) // Object {name: "jack", age: 18} 这样就可以不覆盖了
对象的方法简易写法(五星好评)
var p = {
    run(){
        console.log("跑");
    }
}
p.run()
属性名与方法名可以利用表达式
var n = "name"
var r = "run";

var obj = {
    [n] : "jack",
    [r](){
        return "跑";
    }
}
console.log(obj.name)  // jack
console.log(obj.run()) // 跑
Object.is()

判断2个值是否相等

var a = NaN;
var b = NaN;

console.log(Object.is(a,b)) // true
Object.assign()

合并对象,包含属性和方法的合并,第一个参数是主对象,后面的是要合并的对象。

var obj = {};
var car = {
    run(){
        return "跑";
    }
}
var dog = {
    eat(){
        return "吃";
    }
}
Object.assign(obj,car,dog);
console.log(obj.run());  // 跑
console.log(obj.eat());  // 吃
Object的描述对象Descriptor

Object.getOwnPropertyDescriptor(obj,key)获取这个描述对象

var car = {
    run(){
        return "跑";
    }
}
/**
  描述对象 enumerable 决定是否是可以在循环中被遍历出的属性
  Object
    configurable: true
    enumerable: true
    value: run()writable: true
    __proto__: Object
*/
console.log(Object.getOwnPropertyDescriptor(car,"run"));
Object.keys(obj)

返回由对象所有键所组成的数组

var car = {
    run(){
        return "跑";
    }
}
var arr = Object.keys(car)
console.log(arr); //  ["run"];
Object.values(obj)

返回由对象所有值所组成的数组,其特性与keys一样

var test = {name:"test"}
var vals = Object.values(test)

console.log(vals) // ["test"]
Object.entries(obj)

这个返回值有2种情况,当对象只有一个键值对的时候只会返回一个一维数组,0下标的是key1下标的是val,但是当这个对象有多个键值对的时候,所返回的就是一个二维数组,每一个键值对就是一个一维数组.

var test = {name:"test"}
test.age = 12;

var entries = Object.entries(test)

console.log(entries) // [["name","test"],["age",12]]
Object.getOwnPropertyNames(obj)

表面看和keys这个方法区别不大,但是如果是enumerable: true描述对象中的这个属性为否在keys中是不可能遍历出的但是在这里就可以遍历了

var arr = [1];
arr.name = "数组";

var keysArr = Object.keys(arr)
var getOwnPropertyNamesArr = Object.getOwnPropertyNames(arr);
console.log(keysArr); // ["0", "name"]
console.log(getOwnPropertyNamesArr) // ["0", "length", "name"]
Reflect.ownKeys(obj)

返回值为数组,包含所有的key,不论enumerableSymbol

var arr = [1];
arr.name = "数组";
var keysArr = Reflect.ownKeys(arr)
console.log(keysArr); // ["0", "length", "name"]
Object.setPrototypeOf(obj,proto)

可以设置对象中的proto属性

var car = {
    run(){
        return "跑";
    }
}
console.log(car);
/**
  结果如下:
Object
run: run()
__proto__:Object
__defineGetter__:__defineGetter__()
__defineSetter__:__defineSetter__()
__lookupGetter__:__lookupGetter__()
__lookupSetter__: __lookupSetter__()
constructor: Object()
hasOwnProperty: hasOwnProperty()
isPrototypeOf:isPrototypeOf()
propertyIsEnumerable:propertyIsEnumerable()
toLocaleString: toLocaleString()
toString: toString()
valueOf: valueOf()
get __proto__: __proto__()
set __proto__: __proto__()
*/


var car = {
    run(){
        return "跑";
    }
}
var test = {name:"test"}
Object.setPrototypeOf(car,test);
console.log(car) 
/**
  Object
      run: run()
      __proto__: Object
          name: "test"
          __proto__: Object
              __defineGetter__:__defineGetter__()
              __defineSetter__:__defineSetter__()
              __lookupGetter__:__lookupGetter__()
              __lookupSetter__: __lookupSetter__()
              constructor: Object()
              hasOwnProperty: hasOwnProperty()
              isPrototypeOf:isPrototypeOf()
         propertyIsEnumerable:propertyIsEnumerable()
              toLocaleString: toLocaleString()
              toString: toString()
              valueOf: valueOf()
              get __proto__: __proto__()
              set __proto__: __proto__()
*/
Object.getPrototypeOf(obj)

取出一个对象的proto属性 和setPrototypeOf对应

相关文章

  • ES6的一些笔记(六)

    函数 新特性 新增参数默认值 在写函数的时候可以给形参所在的变量分配一个默认值,如果在调用函数的时候,没有写入实参...

  • Ant Design Pro的知识储备

    Less 笔记 Less 官方文档 ReactJs笔记 ReactJs官方文档 ES6笔记 ES6文档 dvaJs...

  • ES6从入门到...

    项目中基本上用的都是Es6看阮一峰大神的ECMAScript 6 入门整理一些学习笔记 let ES6 新增了le...

  • ES6 学习笔记(二)

    ES6 学习笔记,如有错误,欢迎指正。 笔记只记录了一些个人认为需要记住的知识点。 参考:ECMAScript 6...

  • [总结]ES6 Array

    学习es6时做得小笔记

  • 6 【单向链表】单向链表

    昨天写链表出现了一些问题,而且现有教材有些代码陈旧,没有使用ES6语法,于是啃了一天的ES6,笔记还在整理,整理好...

  • ES6函数扩展

    本文只是学习es6的一些简单笔记,详情请看阮一峰的es6入门。 关于函数参数的默认值 什么时候需要为函数参数设置默...

  • ES6 学习笔记(一)

    ES6 学习笔记,如有错误,欢迎指正。 笔记只记录了一些个人认为需要记住的知识点,其他的可以参考文末的网站。 le...

  • ES6入门笔记(六)

    Proxy Proxy用于修改某些操作的默认行为,等同于在语言层面作出修改,所以属于一种“元编程”,即对编程语言进...

  • ES6_note

    ES6笔记 es6 - 解构 数组的 解构赋值 let [a, b, c] = [1, 2, 3]; 这种写法属于...

网友评论

      本文标题:ES6的一些笔记(六)

      本文链接:https://www.haomeiwen.com/subject/hkrkvttx.html