资讯专栏INFORMATION COLUMN

ES5和ES6中的一些综合应用(持续更新)

DoINsiSt / 1050人阅读

摘要:函数的属性中,代表形参即希望传入的参数的数量,如等于中情况有所不同函数默认参数指定了默认参数后,函数的将返回没有指定默认参数的参数的个数变量名参数也不会计入属性类数组转成真正数组的几种方式中中可以将类似数组的对象和可遍历的对象转换为真正的

1.函数的length属性

ES5中,length代表形参(即希望传入的参数)的数量,如function display(a,b,c){ / /} ;display.length等于3
ES6中情况有所不同:
(1)函数默认参数
指定了默认参数后,函数的 length 将返回没有指定默认参数的参数的个数

funciton display(str1="test",str2){
    console.log(str1+str2);
}
display.length;//1

(2)rest(...变量名)
rest参数也不会计入length属性

funciton display(str1,...strs){
        console.log(str1+str2);
    }
    display.length;//1
2.类数组转成真正数组的几种方式

ES5中:Array.prototype.slice.call();

Array.prototype.slice.call(arguments);//argemtns->Array

ES6中:
(1)Array.from()可以将类似数组的对象和可遍历的对象转换为真正的数组

var arr = Array.from(arguments);

(2)rest参数 形式:“ ...变量名”主要用在将arguments对象转换为数组

把arguments类数组对象变为真正的对象:
funciton display(...arr){
    //...arr代替arguments
    arr instanceof Array //true
}

(3)扩展运算符:

[...arrayLive]

(4)set方法:

new Set(arrayLive);
3.使用函数函数的几点注意(重点理解)

箭头函数没有自己的this,它们的this都是外层函数的this
(1)函数体内的this对象就是定义时所在的对象,而不是使用时所在的对象
(2)不可以当作构造函数。也就是不可以使用new命令,否则会报错
(3)不可以使用arguments对象,该对象在函数体内不存在.如果要用可以用rest参数代替
(4)不可以使用yield命令,因此箭头函数不能做Generator函数
详细内容请参阅:http://es6.ruanyifeng.com/#do...

4.使用ES6为对象添加属性

Object.assign:用来将源对象的所有的可枚举属性复制到目标对象
语法:Object.assign(targetObj,source1,source2,...)
例如:

var target = {a:1,b:2};
var source1 = {c:3};
var source2 = {d:4};
Object.assign(target,source1,source2);
target//{a:1,b:2,c:3,d:4};

这里有一些需要注意的地方:
(1)只复制自由属性并且是可枚举的属性
(2)这里的复制是浅复制
(3)如果目标对象与原对象有同名属性,或者多个原对象有同名属性,则后面的属性会覆盖前面的属性

5.对象属性的遍历方法一览

ES5中有三种方法会忽略enumerable为false的属性
(1)for...in循环:遍历对象自身和继承可枚举的属性
(2)Object.keys():返回对象自身的所有可枚举的属性的键名
(3)json.stringify():只串行化对象自身的可枚举属性
ES6中新增了两个操作会忽略enumerable为false的属性
(1)Object.assign():只复制对象自身可枚举属性
(2)Reflect.enumerate():返回所有for...in会遍历的属性

属性的遍历:
ES6中有6中方法可以遍历对象
(1)for...in循环:遍历对象自身和继承可枚举的属性
(2)Object.keys():返回对象自身的所有可枚举的属性的键名
(3)getOwenPropertyNames():返回一个数组,包含对象自身所有的属性(不包括 Symbol属性,但是包括不可枚举属性)
(4)getOwenSymbolNames():返回一个数组,包含对象自身所有的Symbol属性
(5)Reflect.ownKeys():返回一个数组,包含对象自身所有的属性(包括Symbol和不可枚举属性)
(6)Reflect.enumerate():返回所有for...in会遍历的属性

以上6种方法共同遵守的遍历次序规则:
(1)首先遍历属性名为数字的属性,按照数字顺序排序
(2)其次遍历所有属性名为字符串的属性,按照字符串生成时间排序
(3)最后遍历所有属性名为symbol值得属性,按照生成时间排序
对象属性从属关系判断:
hasOwnPrototyOf():自身 可枚举
in :自身和继承

6._proto_属性

_proto_属性用来读取或者设置当前对象的prototype对象。
奉上链接:https://github.com/creeperyan...

7.Iterator 8.Generator

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82916.html

相关文章

  • ES5ES6中的一些综合应用持续更新

    摘要:函数的属性中,代表形参即希望传入的参数的数量,如等于中情况有所不同函数默认参数指定了默认参数后,函数的将返回没有指定默认参数的参数的个数变量名参数也不会计入属性类数组转成真正数组的几种方式中中可以将类似数组的对象和可遍历的对象转换为真正的 1.函数的length属性 ES5中,length代表形参(即希望传入的参数)的数量,如function display(a,b,c){ / /} ...

    NotFound 评论0 收藏0
  • ES5ES6中的一些综合应用持续更新

    摘要:函数的属性中,代表形参即希望传入的参数的数量,如等于中情况有所不同函数默认参数指定了默认参数后,函数的将返回没有指定默认参数的参数的个数变量名参数也不会计入属性类数组转成真正数组的几种方式中中可以将类似数组的对象和可遍历的对象转换为真正的 1.函数的length属性 ES5中,length代表形参(即希望传入的参数)的数量,如function display(a,b,c){ / /} ...

    Turbo 评论0 收藏0
  • 前端练级攻略(第二部分)

    摘要:是文档的一种表示结构。这些任务大部分都是基于它。这个实践的重点是把你在前端练级攻略第部分中学到的一些东西和结合起来。一旦你进入框架部分,你将更好地理解并使用它们。到目前为止,你一直在使用进行操作。它是在前端系统像今天这样复杂之前编写的。 本文是 前端练级攻略 第二部分,第一部分请看下面: 前端练级攻略(第一部分) 在第二部分,我们将重点学习 JavaScript 作为一种独立的语言,如...

    BWrong 评论0 收藏0
  • 你不知道的JavaScript(ES6与之未来)

    摘要:然而,临近规范发布时,有建议提及未来的版本号切换为编年制,比如用同来指代在年末前被定稿的所有版本。总得来说就是版本号不再那么重要了,开始变得更像一个万古长青的活标准。 你不知道的JS(下卷)ES6与之未来 第一章:ES的今与明 在你想深入这本书之前,你应该对(在读此书时)JavaScript的最近标准掌握熟练,也就是ES5(专业来说是ES 5.1)。在此,我们决定全方面地谈论关于将近的...

    Julylovin 评论0 收藏0
  • 【译】前端练级攻略

    摘要:由于系统变得越来越复杂,人们提出了称为预处理器和后处理器的工具来管理复杂性。后处理器在由预处理器手写或编译后对应用更改。我之前建议的文章,,也涵盖了预处理器相关的知识。 译者:前端小智 原文:medium.freecodecamp.org/from-zero-t… medium.freecodecamp.org/from-zero-t… 我记得我刚开始学习前端开发的时候。我看到了很多文章及...

    wuyumin 评论0 收藏0

发表评论

0条评论

DoINsiSt

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<