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

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前端设计与开发的区别吗
» 本文来自:前端开发者 » 《前端开发ES6 之扩展运算符以及箭头函数》
» 本文链接地址:https://www.rokub.com/7017.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!