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);
具有词法作用域的 thislet 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};
相当于es5function 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),即