- 1. rest操作符和拓展运算符
- rest操作符
- …拓展运算符
- 用途
- 2. 解构赋值和默认赋值
- 解构赋值
- 默认赋值
- 解构赋值和默认赋值配合使用
- 3. 箭头函数
- 示例
- 定义
- 使用方法
- 注意事项
1. rest操作符和拓展运算符
rest操作符
ES6
引入rest
参数, 代替arguments
变量, 用于获取函数的实参
// ES5获取函数实参的方法
function add() {
// 类数组
console.log(arguments)
}
add(1, 2)
// ES6获取函数实参的方法
function add(...args) {
// 数组 可以使用数组的方法
consol.log(args)
}
add(1, 2)
rest
参数必须放到函数参数声明的最后一个 代表剩余的所有的实参的集合
function add (a, b, ...args) {
console.log(a, b, args)
}
add(1, 2, 3, 4, 5, 6) // success a = 1, b = 2, c = [3, 4, 5, 6]
function add (a, ...args, b) {
console.log(a, b, args)
}
add(1, 2, 3, 4, 5, 6) // error Rest parameter must be last formal parameter
…拓展运算符
...
拓展运算符能将数组转换为逗号分隔的参数序列
const arr = ['1', '2', '3']
console.log(...arr) // success 1 2 3;
let nums = [1, 2, 3]
function add() {
console.log(arguments)
}
add(...nums) // success {0: 1, 1: 2, 2: 3, callee: xxx}; 类数组
用途
数组的合并(浅克隆)
const nums1 = ['1', '2', '3']
const nums2 = ['4', '5', '6']
// ES5的操作方法concat
const nums3 = nums1.concat(nums2)
console,log(nums3) // success ['1', '2', '3', '4', '5', '6']
// ES6的操作方法 ...拓展运算符
const nums3 = [...nums1, ...nums2]
console,log(nums3) // success ['1', '2', '3', '4', '5', '6']
将伪数组转换为真正的数组
const divs = document.querySeleclAll('div');
console.log(divs) // success 类数组
const divArr = [...divs]
console.log(divArr) /// success 数组 可以使用some map filter等数组函数
2. 解构赋值和默认赋值
解构赋值
函数
add
的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被结构成变量x
和y
function add([x,y]) {
console.log(x , y)
}
add() // x = 1; y = 2;
let arr = [[1,2],[3,4]].map(function([a,b]){
return a + b;
// 第一次: [1,2] [a,b] 模式匹配 return 3
// 第二次: [3,4] [a,b] 模式匹配 return 7
})
console.log(arr) // success [3, 7]
默认赋值
函数参数的默认赋值用到了
iterator
迭代器遍历, 因此传参必须是可迭代的, 否则会报错
function fn({x, y = 5}){
console.log(x,y)
}
//没有传对象 为null 没有Symbol.iterator属性 无法遍历
fn() // error Cannot destructure property 'x' of 'undefined' as it is undefined.
具有默认值的参数 一般放在最后的位置
解构赋值和默认赋值是
ES6
的语法, 所以会使用let
声明变量, 因此不允许重复声明变量
// 没有默认值
function add(a, a, b) {
console.log(a, a, b)
}
// 变量重复定义 不会报错 但是相同变量 后面的值会覆盖前面的值
add(1, 2, 3) // success 2, 2, 3
// 存在默认值
function add(a, b, b = 3) {
console.log(a, b, b)
}
// 变量重复定义 存在默认值 浏览器报错
add(1, 2, 3) // error Duplicate parameter name not allowed in this context
解构赋值和默认赋值配合使用
function deal({x,y} = {x: 1 , y: 2}) {
console.log(x, y);
}
//deal函数在调用的时候 参数严格等于undefined 默认赋值生效
deal() // success x = 1; y = 2
function move({x = 0,y = 0} = {}) {
console.log(x, y);
}
// move函数在调用的时候 没有传参 满足默认赋值的条件(严格等于undefined) 默认赋值了一个空对象
// move函数接收到空对象 x和y的默认赋值生效(严格等于undefined) 像x = 0; y = 0;
move() // success x = 0; y = 0
3. 箭头函数
示例
function Car(){
var name = 'xw';
var fn = () => {console.log(this.name)}
fn();
}
Car() // success 'xw'; 此时F()函数内this的指向为Window
new Car() //success 'undefined'; 此时this的指向为隐式创建的this对象
定义
箭头函数适用于与
this
无关的定时器、数据操作方法的回调函数箭头函数不适应与和
this
有关的回调函数 DOM元素事件的回调 对象的方法(不指向对象,指向外层作用域的this
)
var arrowFunc = ([arg1, arg2, ...]) => { ... }
// 定时器
dom.addEventListener('click', function () {
let _this = this
setTimeout(function(){
// 此时this指向的是window 只能使用_this(指向当前dom元素)
_this.style.background = 'pink'
}, 2000)
setTimeout(() => {
// this的指向为当前dom元素
this.style.background = 'pink'
}, 2000)
})
// 对象的方法
var sayHello = {
ctn : 'Hello World!',
say : () => {
console.log(this.ctn)
},
say1 : function () {
console.log(this.ctn)
}
}
sayHello.say() // undefined; this指向window window对象上没有ctn变量
sayHello.say1() // Hello World!; this指向sayHello
使用方法
箭头函数只有一个参数的时候
()
可以省略
var add = n => {return n * n }
箭头函数的代码体只有一条语句的时候,
{}
可以省略, 此时return
也必须省略,语句的执行结果就是箭头函数的返回值
var add = n => n * n
箭头函数
return
对象的时候比较特殊, 需要用()
包裹, 否则会被优先识别成代码块
// error 编辑器报错 识别成代码块 两条语句之间不能用,
var add = () => {a: 1, b: 2}
// success 成功返回一个对象
var add = () => ({a: 1, b: 2})
注意事项
箭头函数的
this
指向的是定义时作用域的this
, 而不是使用时的this
, 无法用call
和apply
var name = 'Hello World!'
var hello = {
name : 'GoodMorning!'
}
var sayHello = function () {
console.log(this.name)
}
var sayHello1 = () => console.log(this.name)
// 实例一
sayHello() // Hello World!; this指向window对象
sayHello1() // Hello World!; this指向window对象
// 实例二
sayHello.call(hello) // GoodMorning!; this指向hello对象
sayHello1.calc(hello) // Hello World!; this指向window对象
箭头函数无法当作构造函数
var Hello = () => {
return {
name : 'xxx',
age : 12
}
}
new Hello() // error Uncaught TypeError: Hello is not a constructor
箭头函数无法使用
arguments
变量, 需要使用...
拓展运算符来代替
var add = () => {
console.log(arguments)
}
add(1, 2, 3) // error Uncaught ReferenceError: arguments is not defined
var add = (...args) => {
// args 类数组
console.log(args)
}
add(1, 2, 3) // success [1, 2, 3]
箭头函数无法使用
yield
命令,不能当作Generator
函数