函数参数的默认值
//在ES6之前，不能直接为函数的参数指定默认值，只能采用变通的方法。
function log(x,y) {
y = y || 'World';
console.log(x,y);
}
log('Hello') // Hello World
log('Hello','China') // Hello China
log('Hello','') // Hello World
//ES6允许为函数的参数设置默认值，即直接写在参数定义的后面。
function log(x,y = 'World') {
console.log(x,'') // Hello
与解构赋值默认值结合使用
//参数默认值可以与解构赋值的默认值，结合起来使用。
function foo({x,y = 5}) {
console.log(x,y);
}
foo({}) // undefined,5
foo({x: 1}) // 1,5
foo({x: 1,y: 2}) // 1,2
foo() // TypeError: Cannot read property 'x' of undefined
function m1({x = 0,y = 0} = {}) {
return [x,y];
}
function m2({x,y} = {x:0,y:0}) {
return [x,y];
}
console.log(m1())//[0,0];
console.log(m2())//[0,0];
console.log(m1({x: 3,y: 8})) // [3,8]
console.log(m2({x: 3,8]
// x有值，y无值的情况
console.log(m1({x: 3})) // [3,0]
console.log(m2({x: 3})) // [3,undefined]
// x和y都无值的情况
console.log(m1({})) // [0,0];
console.log(m2({})) // [undefined,undefined]
console.log(m1({z: 3})) // [0,0]
console.log(m2({z: 3})) // [undefined,undefined]
参数默认值的位置
//如果非尾部的参数设置默认值，实际上这个参数是没法省略的。
// 例一
function f(x = 1,y) {
return [x,y];
}
f() // [1,undefined]
f(2) // [2,undefined])
f(,1) // 报错
f(undefined,1) // [1,1]
// 例二
function f(x,y = 5,z) {
return [x,y,z];
}
f() // [undefined,5,undefined]
f(1) // [1,undefined]
f(1,2) // 报错
f(1,undefined,2) // [1,2]
作用域
//全局作用域
var x = 1;
function f(x,y = x) {
console.log(y);
}
f(2) // 2
//如果调用时，函数作用域内部的变量x没有生成，结果就会不一样。
let x = 1;
function f(y = x) {
let x = 2;
console.log(y);
}
f() // 1
//如果此时，全局变量x不存在，就会报错。
function f(y = x) {
let x = 2;
console.log(y);
}
f() // ReferenceError: x is not defined
应用
//利用参数默认值，可以指定某一个参数不得省略，如果省略就抛出一个错误。
function throwIfMissing() {
throw new Error('Missing parameter');
}
function foo(mustBeProvided = throwIfMissing()) {
return mustBeProvided;
}
foo()
// Error: Missing parameter
rest参数（形式为“...变量名”)
//用于获取函数的多余参数，这样就不需要使用arguments对象了
function add(...values) {
let sum = 0;
for (var val of values) {
sum += val;
}
return sum;
}
console.log(add(2,3)) // 10
替代数组的apply方法
// ES5的写法
function f(x,z) {
// ...
}
var args = [0,1,2];
f.apply(null,args);
// ES6的写法
function f(x,2];
f(...args);
//下面是扩展运算符取代apply方法的一个实际的例子，应用Math.max方法，简化求出一个数组最大元素的写法。
// ES5的写法
Math.max.apply(null,[14,3,77])
// ES6的写法
Math.max(...[14,77])
// 等同于
Math.max(14,77);
//另一个例子是通过push函数，将一个数组添加到另一个数组的尾部。
// ES5的写法
var arr1 = [0,2];
var arr2 = [3,4,5];
Array.prototype.push.apply(arr1,arr2);
// ES6的写法
var arr1 = [0,5];
arr1.push(...arr2);
扩展运算符的应用
（1）合并数组
var more = [111,222];
// ES5
console.log([1,2].concat(more));
// ES6
console.log([1,2,...more])
（2）与解构赋值结合
const [first,...rest] = [1,5];
first // 1
rest // [2,5]
const [first,...rest] = [];
first // undefined
rest // []:
const [first,...rest] = ["foo"];
first // "foo"
rest // []
（3）函数的返回值
（4）字符串
扩展运算符还可以将字符串转为真正的数组。
console.log([...'hello']) // [ "h","e","l","o" ]
（5）实现了Iterator接口的对象
任何Iterator接口的对象，都可以用扩展运算符转为真正的数组。
var nodeList = document.querySelectorAll('div');
var array = [...nodeList];
（6）Map和Set结构，Generator函数
let map = new Map([
[1,'one'],[2,'two'],[3,'three'],]);
let arr = [...map.keys()]; // [1,3]
//Generator函数运行后，返回一个遍历器对象，因此也可以使用扩展运算符。
var go = function*(){
yield 1;
yield 2;
yield 3;
};
[...go()] // [1,3]
name属性
function foo() {}
foo.name // "foo"
var func1 = function () {};
// ES5
func1.name // ""
// ES6
func1.name // "func1"
箭头函数=>
var f = v => v;
上面的箭头函数等同于：
var f = function(v) {
return v;
};
//如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。
var f = () => 5;
// 等同于
var f = function () { return 5 };
var sum = (num1,num2) => num1 + num2;
// 等同于
var sum = function(num1,num2) {
return num1 + num2;
};
//如果箭头函数直接返回一个对象，必须在对象外面加上括号。
var getTempItem = id => ({
id: id,name: 'temp'
})
var ss = new getTempItem('1');
console.log(ss.name)
//箭头函数可以与变量解构结合使用。
const full = ({ first,last }) => first + ' ' + last;
// 等同于
function full(person) {
return person.first + ' ' + person.last;
}
//箭头函数的一个用处是简化回调函数。
// 正常函数写法
[1,3].map(function (x) {
return x * x;
});
// 箭头函数写法
[1,3].map(x => x * x);
//函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象
function foo() {
setTimeout(()=>{
console.log('id:',this.id)
},100);
}
var id = 21;
foo.call({id:42}) //id:42
function Timer() {
this.s1 = 0;
this.s2 = 0;
setInterval(()=> this.s1++,1000);
setInterval(function(){
this.s2++;
},1000)
}
var timer = new Timer();
setTimeout(() => console.log('s1:',timer.s1),3100) //s1:3
setTimeout(() => console.log('s2:',timer.s2),3100) //s2:0
函数绑定
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。