[ES6] Function Params

1. Default Value of function param:

The function displayTopicsPreview() raises an error on the very first line when called with no arguments. Let‘s fix that!

function displayTopicsPreview( topics ){
  var message = "There are currently " + topics.length;
  _displayPreviewMessage(topics, message);
}

-----------------

function displayTopicsPreview( topics = [] ){
  let message = "There are currently " + topics.length;
  _displayPreviewMessage(topics, message);
}

2. Complete the setPageThread() function signature with the missing named parameters. You can check out the body of the function to help discover what options are expected.

function setPageThread(name,  ){
  let nameElement = _buildNameElement(name);
  let settings = _parseSettings(popular, expires, activeClass);

  _updateThreadElement(nameElement, settings);
}

-------------------

function setPageThread(name,  {popular, expires, activeClass}){
  let nameElement = _buildNameElement(name);
  let settings = _parseSettings(popular, expires, activeClass);

  _updateThreadElement(nameElement, settings);
}

3. Let‘s refactor the loadProfiles() function to use named parameters with default values.

function loadProfiles(userNames = [], options = {}) {
  let profilesClass = options.profilesClass || ".user-profile";
  let reverseSort   = options.reverseSort   || false;

  if (reverseSort) {
    userNames = _reverse(userNames);
  }

  _loadProfilesToSideBar(userNames, profilesClass);
}

------------------------------

function loadProfiles(userNames = [], {profilesClass, reverseSort} = {}) {
  profilesClass = profilesClass || ".user-profile";
  reverseSort   = reverseSort   || false;

  if (reverseSort) {
    userNames = _reverse(userNames);
  }

  _loadProfilesToSideBar(userNames, profilesClass);
}
function setPageThread(name, {popular, expires, activeClass} = {}){
  // ...
}

setPageThread("ES2015", {
    popular: true
}); 

//won‘t cause error

Important to take away from here is

  • Instead of giving options = {} in the function param, we give {profileClass, reserseSort} = {}
  • First it is more clear to see what "options" it is
  • Second we assign default param here.
时间: 2024-10-10 18:04:36

[ES6] Function Params的相关文章

echarts-中的事件-- demo1.on('事件类型', function (params) {}

ECharts 支持常规的鼠标事件类型,包括 'click'.'dblclick'.'mousedown'.'mousemove'. 'mouseup'.'mouseover'.'mouseout'.'globalout'.'contextmenu' 事件.下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例. <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts-en.common.js

es6 function扩展

_log = console.log//参数默认值function log(x,y = 'world'){ _log(`${x} ${y}`);} log('hello') //hello worldlog('hello', 'china') //hello china function Point(x = 0, y = 0){ this.x = x; this.y = y;} _log(new Point()); function add(x = 1){ let x = 2; //报错 con

ES6 function函数和箭头函数区别

1.写法不一样 //function function fn(a,b){ return a+b } //arrow function var foo = (a,b)=>{ return a+b } 2.this的指向,function中的this可变(window,内部),箭头函数固定不变指向window function foo(){ console.log(this) } var obj = {aa:foo} foo() //window obj.aa()//obj var foo = ()

[ES6] 06. Arrow Function =&gt;

ES6 arrow function is somehow like CoffeeScirpt. CoffeeScript: //function call coffee = -> coffee() coffee=(message) -> coffee("Yo"), coffee "Yo" coffee=(message, other) -> coffee("Yo", 2), coffee "Yo", 2 N

ES6的一些常用特性

Default Parameters(默认参数) 还记得我们以前不得不通过下面方式来定义默认参数: var link = function (height, color, url) { var height = height || 50; var color = color || 'red'; var url = url || 'http://azat.co'; ... } 但在ES6,我们可以直接把默认值放在函数申明里: var link = function(height = 50, col

JavaScript ES6功能概述(ECMAScript 6和ES2015 +)

JavaScript在过去几年中发生了很大的变化.这些是您今天可以开始使用的12项新功能! 该语言的新增内容称为ECMAScript 6.它也称为ES6或ES2015 +. 自1995年JavaScript构思以来,它一直在缓慢发展.每隔几年就会发生新增事件. ECMAScript于1997年成立,旨在指导JavaScript的发展方向.它已经发布了ES3,ES5,ES6等版本. 如您所见,ES3,ES5和ES6之间存在10年和6年的差距.此后每年??进行小幅增量变更.而不是像ES6那样一次做大

JavaScript ES6 规范

ES6 简介 ECMAScript 6 简称 ES6,是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了.它的目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言. ECMAScript 和 JavaScript 的关系:前者是后者的语法规格,后者是前者的一种实现 Babel:将ES6代码转为ES5代码 http://babeljs.io/ image 新特性 let.const let 定义的变量不会被变量提升,const 定义的常量

搭建ES6运行环境

当ES5还没有完全普及时,ES6就接踵而来了,2015年6月17日,ECMAScript 6发布正式版本,即ECMAScript 2015,我们也简称它为ES6或ES2015.在发布之后的将近一年内,很多小伙伴都踊跃的学习这门新的语言,之所以说是一门新的语言,是因为跟ES5相比,语法方面变化确实有点大,可以说新的JavaScript语法看上去有种脱胎换骨的感觉.博主也曾跃跃欲试,看了很多语法方面的教程,可是无奈浏览器还未完全支持ES6的规范,只看不练,有种眼高手低的感觉,相信朋友们也会有同样的心

ES6 箭头函数this指向

箭头函数有几个使用注意点. (1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. (2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误. (3)不可以使用arguments对象,该对象在函数体内不存在.如果要用,可以用Rest参数代替. (4)不可以使用yield命令,因此箭头函数不能用作Generator函数. 上面四点中,第一点尤其值得注意.this对象的指向是可变的,但是在箭头函数中,它是固定的. function foo() { setTi