HTML5技术

es6笔记4^_^function - webNick

字号+ 作者:H5之家 来源:H5之家 2017-01-19 14:00 我要评论( )

一、function默认参数 现在可以在定义函数的时候指定参数的默认值了,而不用像以前那样通过逻辑或操作符来达到目的了。 es5 function sayHello(name){ // 传统的指定默认参数的方式let name1 = name||'hubwiz' ; return 'Hello'+ name1;} 运用ES6的默认参数

一、function默认参数   现在可以在定义函数的时候指定参数的默认值了,而不用像以前那样通过逻辑或操作符来达到目的了。
  es5

function sayHello(name){ //传统的指定默认参数的方式 let name1 = name||'hubwiz'; return 'Hello'+name1; }

  运用ES6的默认参数

function sayHello2(name='hubwiz'){ return `Hello ${name}`; } function sayHello3(name='张三',age=19){ return `大家好,我叫${name},今年${age}岁`+'\n' +"大家好,我叫"+name+",今年"+age; } console.log(sayHello());//输出:Hello hubwiz console.log(sayHello('汇智网')); //输出:Hello 汇智网 console.log(sayHello2()); //输出:Hello hubwiz console.log(sayHello2('汇智网')); console.log(sayHello3());//输出:Hello 汇智网 console.log(sayHello3('nick',26));

二、rest参数   rest参数(形式为“...变量名”)可以称为不定参数,用于获取函数的多余参数,这样就不需要使用arguments对象了。
  rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。

function add(...values) { console.log(...values);//1 2 3 console.log(values);//[1,2,3] let sum = 0; for (var val of values) { sum += val; } return sum; } console.log(add(1, 2, 3));

  不定参数的格式是三个句点后跟代表所有不定参数的变量名。比如以上示例中,...values 代表了所有传入add函数的参数。 三、扩展运算符   扩展运算符(spread)是三个点(...)。它好比rest参数的逆运算,将一个数组转为用逗号分隔的参数序列。该运算符主要用于函数调用。   它允许传递数组或者类数组直接做为函数的参数而不用通过apply。

let people=['张三','李四','王五']; //sayHello函数本来接收三个单独的参数people1,people2和people3 function sayHello4(people1,people2,people3){ console.log(`Hello ${people1},${people2},${people3}`); } //但是我们将一个数组以拓展参数的形式传递,它能很好地映射到每个单独的参数 sayHello4(...people); //输出:Hello 张三,李四,王五 //而在es5,如果需要传递数组当参数,我们需要使用函数的apply方法 sayHello4.apply(null,people); //输出:Hello 张三,李四,王五

四、箭头函数   箭头函数是使用=>语法的函数简写形式。这在语法上与 C#、Java 8 和 CoffeeScript 的相关特性非常相似

let array = [1, 2, 3]; //传统写法 array.forEach(function(v) { console.log(v); }); //ES6 array.forEach(v => console.log(v)); //它们同时支持表达式体和语句体。与(普通的)函数所不同的是,箭头函数和其上下文中的代码共享同一个具有词法作用域的this。 let evens = [1,2,3,4,5]; let fives = []; // 表达式体 let odds = evens.map(v => v + 1); let nums = evens.map((v, i) => v + i); let pairs = evens.map(v => ({even: v, odd: v + 1})); // 语句体 nums.forEach(v => { if (v % 5 === 0){ fives.push(v); } }); console.log(fives);

  具有词法作用域的 this

let bob = { _name: "NICK", _friends: ["Amy", "Bob", "Cinne", "Dylan", "Ellen"], printFriends() { this._friends.forEach(f => console.log(this._name + " knows " + f)); } } bob.printFriends();

例子:
  es6

(x, y) => {x++; y--; return x+y};

  相当于es5

function test(x, y) { x++; y--; return x + y; }

  this问题

class Animal { constructor(){ this.type = 'animal' } says(say){ setTimeout(function(){ console.log(this.type + ' says ' + say) }, 1000) } } var animal = new Animal() animal.says('hi') //undefined says hi

  运行上面的代码会报错,这是因为setTimeout中的this指向的是全局对象。所以为了让它能够正确的运行,传统的解决方法有两种:
  第一种是将this传给self,再用self来指代this

function says(say) { var self = this; setTimeout(function () { console.log(self.type + ' says ' + say) }, 1000) }

  第二种方法是用bind(this),即

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • es6笔记3^_^object - webNick

    es6笔记3^_^object - webNick

    2017-01-18 11:00

  • es6笔记2^_^array - webNick

    es6笔记2^_^array - webNick

    2017-01-16 13:01

  • 读书笔记:《HTML5开发手册》Web表单 - 绿岛之北

    读书笔记:《HTML5开发手册》Web表单 - 绿岛之北

    2017-01-14 15:04

  • 读书笔记:《HTML5开发手册》--现有元素的变化 - 绿岛之北

    读书笔记:《HTML5开发手册》--现有元素的变化 - 绿岛之北

    2017-01-14 10:02

网友点评