ES6的一些笔记(六)

函数

新特性


新增参数默认值

在写函数的时候可以给形参所在的变量分配一个默认值,如果在调用函数的时候,没有写入实参,那么形参变量中的值就是默认值。
默认值会让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对应

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容

  • 1.属性的简洁表示法 允许直接写入变量和函数 上面代码表明,ES6 允许在对象之中,直接写变量。这时,属性名为变量...
    雨飞飞雨阅读 1,097评论 0 3
  • 三,字符串扩展 3.1 Unicode表示法 ES6 做出了改进,只要将码点放入大括号,就能正确解读该字符。有了这...
    eastbaby阅读 1,439评论 0 8
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,132评论 0 4
  • 我们已经学过四季这篇课文。课文内容是“草芽尖尖,他对小鸟说:“我是春天。”荷叶圆圆,他对青蛙说:“我是夏天。”谷...
    张佳艺我的宝贝阅读 296评论 0 2
  • 明天是10月5日,星期三,对于很多人来说,不过是国庆小长假中平凡的一天。但,对于我来说,这一天到来,带来的是我与她...
    学生泽平阅读 324评论 0 1