找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发ES6 之扩展运算符以及箭头函数

2018-12-13 分类：JavaScript 阅读(909) 评论(0)
web前端开发和cs的区别吗
前端开发和后台的区别
前端开发和设计师的区别

1.扩展运算符

定义：扩展运算符（spread）是三个点（…），将一个数组||类数组||字符串转为用逗号分隔的序列。
这家伙是用来对数组进行操作的，把数组里面的东西统统拿出来。

代码1.1：
javascript 代码

let newArr1 = [1, 2, 3, 4]
console.log(…newArr1)
let newArr2 = [1, 2, 3, [5, 6, 7], 8]
console.log(…newArr2)

注意的是…只能解析最外层的数组，如果里面还有数组的话还是会整体输出的。

代码1.2:合并数组
javascript 代码

let newArr1 = [1, 2, 3, 4]
let newArr2 = [6, 7, 8]
let newArr3 = […newArr1, …newArr2]
console.log(newArr3)

代码1.3：将字符串转化为数组
javascript 代码

let newStr1 = ‘我是大胖我怕谁’
let newArr1 = […newStr1]
console.log(newArr1)

代码1.4：将dom节点类数组转为话数组
javascript 代码

let lilist = document.querySelectorAll(‘li’)
let nodeArr1 = Array.prototype.slice.call(lilist)
let nodeArr2 = […lilist]

代码1.5：深拷贝数组
javascript 代码

let arr1 = [1, 2, 3],
    arr2 = arr1,
    arr3 = […arr1]
arr1[0] = 10
console.log(arr2)
console.log(arr3)

数组的深拷贝就是要遍历数组的每一项才行，直接的赋值会造成2个数组的地址在内存中都是同一个，其中一个的改变会对另一个影响，现在用扩展运算符是不是很简单了。

小结：扩展运算符的作用就是对数组||类数组||字符串 切割，本来es35对数组以及字符串的切割已经有了很多方法了，比如对字符串的 substr(),substring(),slice(),对数组的splice()(这家伙会改变原数组),slice(),这么多方法如果不是经常用，真的分不清哪些是字符串的哪些是数组的，还有就是对经常用操作的dom类数组对象，我们不得不用Array.prototype.slice.call()这么恶心的方法来让他转化为真正的数组在操作。现在有了…是不是感觉之后在处理数据这方面轻松了很多，一个方法统统搞定！

2.箭头函数

定义：ES6时代的匿名函数

代码2.1
javascript 代码

let fn1 = function() {
    console.log(‘fn1’)
}
let fn2 = () => {
    console.log(‘fn2’)
}
fn1()
fn2()

代码2.2：函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象
javascript 代码

var name = ‘大胖’
let fn1 = function() {
    setTimeout(() => {
        console.log(this.name)
    }, 100)
}
let obj = {
    name: ‘二胖’,
}
fn1.call(obj) //二胖

来看一段相识的代码：
javascript 代码

var name = ‘大胖’
let fn2 = () => {
    setTimeout(() => {
        console.log(this.name)
    }, 100)
}
let obj1 = {
    name: ‘二胖’,
}
fn2.call(obj1) //大胖

上面2带代码是不是很像，不同的是第二段用了2个箭头函数，可是答案完全不一样。是不是很惊讶，实际原因是箭头函数根本没有自己的this，导致定义时候的内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。就是说箭头函数的this是个软骨头，谁在他外面他就指向谁。
所以第二代代码可以用ES5来写，方面理解。

javascript 代码

var name = ‘大胖’
var Othis = this
let fn3 = function() {
    setTimeout(function() {
        console.log(Othis.name)
    }, 100)
}
let obj2 = {
    name: ‘二胖’,
}
fn3.call(obj2) //大胖

代码2.3：隐式的return
javascript 代码

let fn1 = function(x) {
    return x
}
let fn2 = (x) => x
console.log(fn1(‘fn1’))
console.log(fn1(‘fn2’))

单个参数()消失了，{}也消失后，return关键字也跟着消失了。单行的箭头函数会提供一个隐式的return。有没有很简洁。感觉用了这个特性之后，代码量减少很多了，因为一个参数的函数最常见，因为当有很多参数的时候，可以用一个对象当参数。

网络工程于前端开发设计的区别
前端开发与后端开发区别
web前端设计与开发的区别吗
赞(0)
前端开发者 » 前端开发ES6 之扩展运算符以及箭头函数
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论