ES6函数扩展

收集运算符 …

收集运算符可以代替arguments,将传入的实参转换为数组

function fun(...arg){
	console.log(arg)
}
fun(1,2,3,5,4,2) //[1, 2, 3, 5, 4, 2]

//这是一个真正的数组也就是说可以直接使用数组的方法
function fu(...arg){
		arg.sort(function(a,b){
			return a-b;
		})
		arg.pop();
		arg.shift();
		return arg
}
console.log(fu(5,4,6,3,8,7,4)) //[4, 4, 5, 6, 7]

收集运算符第二种用法:展开运算符

//数组展开
const arr = [5,1,6,4,7]
const arr1 = [1,2,3]
const arr2 = [...arr,...arr1] //[5, 1, 6, 4, 7, 1, 2, 3]
//字符串展开
const str = 'abcd'
const array = [...str] //['a','b','c','d']
//对象展开
let obj = {
		name : "jack",
		age : 18
}
let obj1 = {
		personNum : 30,
		leader : {
			...obj
		}	
}

参数的默认值

在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, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

//注意!参数变量是默认声明的,所以不能用let或const再次声明。

严格模式

严格模式:对代码进行一个更深度的监测
开发状态可以开启,代码编写更加严谨
线上环境一定要关闭,性能消耗

function doSomething(a, b) {
  'use strict';
  // code
}

函数参数使用了默认值、解构赋值、或者扩展运算符,那么函数内部就不能显式设定为严格模式,否则会报错。

如果写了参数默认值以后,该函数内默认开启严格模式
// 报错
function doSomething(a, b = a) {
  'use strict';
  // code
}

// 报错
const doSomething = function ({a, b}) {
  'use strict';
  // code
};

// 报错
const doSomething = (...a) => {
  'use strict';
  // code
};

const obj = {
  // 报错
  doSomething({a, b}) {
    'use strict';
    // code
  }
};

箭头函数

//基本用法
var f = function(v) {
  return v;
};

//换成箭头函数为:
var f = v => v;

//如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

//如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。

var sum = (num1, num2) => { return num1 + num2; }
//由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号。

var getTempItem = id => ({ id: id, name: "Temp" });

注意点!
this指向

1.直接调用函数,this指向window
2.通过对象的形式调用,this指向该对象
3.通过new关键字调用,this指向新创建的对象
4.如果是DOM事件函数,this指向事件源
5.如果是apply、call、bind调用函数,this指向绑定的对象

箭头函数的适用环境

1.事件处理函数
2.异步处理函数
3.其他临时处理函数
4.this需要指向外层的函数时候
5.在不影响代码前提,保证代码简介,回调函数(ES5)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值