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

简介: 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}
相关文章
|
6天前
|
存储 网络架构
ES6之rest参数、扩展运算符
ES6之rest参数、扩展运算符
14 1
|
6天前
|
网络架构
ES6箭头函数的特性
ES6箭头函数的特性
|
9月前
|
前端开发 JavaScript API
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(五)
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(五)
|
9月前
|
前端开发 网络架构
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(四)
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(四)
|
9月前
|
前端开发 JavaScript 网络架构
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(三)
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(三)
|
9月前
|
前端开发 API 网络架构
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(六)
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(六)
|
9月前
|
前端开发 网络架构
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(二)
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(二)
|
9月前
|
前端开发 网络架构
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(一)
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map
|
10月前
|
自然语言处理 JavaScript
ES6中的箭头函数及其使用场景
ES6 (ECMAScript 2015) 引入了许多新特性,其中之一就是箭头函数。箭头函数是一种更加简洁和便捷的函数定义方式,本文将详细介绍 ES6 中的箭头函数,并探讨其适用场景及注意事项。