es6 箭头函数 rest参数扩展运算符

Es6 箭头函数

语法：

普通函数： fn=function(){}

箭头函数： fn=()=>{}

特性：

this是静态的，this始终指向函数声明时所在作用域下的this的值（使用call，bind改变指向无效）

不能作为构造实例化对象

不能使用arguments变量

箭头函数简写（ 1，省略小括号，当形参只有一个的时候

2，省略花括号，当代码体只有一条语句的时候，此时return必须省略

而且语句的执行结果就是函数的返回值

）

//测试call是否可以改变this指向
function getName(){console.log(this.name)
}let getName2=()=>{console.log(this.name)
}// 设置window对象的this属性
window.name='小红花'
const school={name: '菊花'
}//直接调用
getName()   //结果为小红花
getName2()  // 结果为小红花    因为是在window作用域下//call方法调用
getName.call(school)
getName2.call(school)//再次调用
getName()    // 菊花
getName2()    // 小红花

箭头函数适合场景

适合与this无关的回调，定时器，数组方法的回调

不适合与this有关的回调，事件回调，对象的方法

Es6 允许函数有默认值

形参初始值具有默认值的参数，一般位置要靠后（潜规则）

function add(a,b,c=10){return a+b+c
}
let result = add(1,2)
console.log(result)// 13

与解构赋值结合

function connect({host='127.0.0.1',username,password,port}){console.log(host)console.log(username)console.log(password)console.log(port)}
connect({host:baidu.com',username:'xiaohong',password:'123',post:336
})

Es6 rest 参数

function date(a,...args){console.log(args)//打印结果['小明','小黄'],可以用数组方法
}
date('小红','小明','小黄')

Es6 扩展运算符

语法：

const tfboys=['小红','小明','小黄']function aaa(){console.log(arguments)
}aaa(...tfboys)  // 等价于aaa('小红','小明','小黄')

应用——数组

//数组
// 1 数组的合并
const num=[1,2]
const num1=[4,5]
console.log([...num,...num1])//2 浅拷贝
const dj=['E','G','M']
const arr=[...dj]
console.log(arr)  // ['E','G','M']// 3 将伪数组转为真的数组//例如获取到的元素集合[...伪数组]

应用——对象

//对象
//直接对 对象使用扩展运算符会报错
let obj = {a:1,b:2}let obj1={...obj}  //可以实现浅拷贝let obj2={...obj,a:3,d:4} //用来合并或修改值console.log(obj1) //{a:3,b:2,d:4}

es6 箭头函数 rest参数扩展运算符相关推荐

ES6 | let 关键字 + const关键字 + 箭头函数 + rest参数 + 扩展运算符 ... + Symbol + 迭代器 + 生成器 + 变量的解构赋值 + 模板字符串
目录 ECMASript 相关介绍 ECMASript 6 新特性 let 关键字 const关键字变量的解构赋值模板字符串简化对象写法箭头函数 => 参数默认值 rest参数扩展运算 ...
es6箭头函数(=)与展开特性运算符(...)的使用
2019独角兽企业重金招聘Python工程师标准>>> 箭头函数的几个写法 //当含有固定个参数的时候,es5写法 function test(a,b){ ..}//es6写法(es ...
es6 箭头函数使用_如何使用ES6箭头功能使JavaScript易于阅读
es6 箭头函数使用 Arrow functions are the new fundamental building blocks of building modern web applicatio ...
es6箭头函数_【知识点】ES6箭头函数、箭头函数与普通函数的区别
作者:長安曹公子文章出处:ES6 - 箭头函数.箭头函数与普通函数的区别一.基本语法 ES6中允许使用箭头=>来定义箭头函数,具体语法,我们来看一个简单的例子: // 箭头函数 let fu ...
ES6箭头函数以及promise/async/await测试案例
ES6箭头函数的运用下面以一段代码解释 function one(){return 1 以上函数用箭头函数写步骤,参考下面代码 {}和里面的东西先删去 one = (里面写参数/无参数的里面为空)= ...
[OHIF-Viewers]医疗数字阅片-医学影像-ES6箭头函数(=)
[OHIF-Viewers]医疗数字阅片-医学影像-ES6箭头函数(=>) https://www.liaoxuefeng.com/wiki/1022910821149312/103154957 ...
什么时候不该使用es6箭头函数 1
从开始接触es6到在项目中使用已经有一段时间了,es6有很多优秀的新特性,其中最有价值的特性之一就是箭头函数,他简洁的语法以及更好理解的this值都非常的吸引我.但是新事物也是有两面性的,箭头函数有他 ...
Javascript/ES6箭头函数
Javascript/ES6箭头函数文章目录 Javascript/ES6箭头函数一.箭头函数是什么? 二.箭头函数与普通函数的区别三.箭头函数的使用 1.箭头函数是匿名函数,不能作为构造函数, ...
ES6箭头函数中的this指向
1箭头函数中的this (1)箭头函数中没有this : 这意味着 call() apply() bind() 无法修改箭头函数中的this (2)箭头函数中的this指向 :访问上一个作用域的thi ...

es6 箭头函数 rest参数扩展运算符

箭头函数适合场景

Es6 允许函数有默认值

与解构赋值结合

Es6 rest 参数

Es6 扩展运算符

es6 箭头函数 rest参数扩展运算符相关推荐

最新文章

热门文章

es6 箭头函数 rest参数 扩展运算符

箭头函数适合场景

Es6 允许函数有默认值

与解构赋值结合

Es6 rest 参数

Es6 扩展运算符

es6 箭头函数 rest参数 扩展运算符相关推荐

最新文章

热门文章

es6 箭头函数 rest参数扩展运算符

es6 箭头函数 rest参数扩展运算符相关推荐