• 华为授权培训中心
  • 腾讯云一级认证培训中心
  • 百度营销大学豫陕深授权运营中心
  • Oracle甲骨文OAEP中心
  • Microsoft Azure微软云合作伙伴
  • Unity公司战略合作伙伴
  • 普华基础软件战略合作伙伴
  • 新开普(股票代码300248)旗下丹诚开普投资
  • 中国互联网百强企业锐之旗旗下锐旗资本投资
联系客服
微信公众号
官方微博
0371-86588008

这几种前端中的高级操作,你知道吗?

来源:云和教育 时间:2020-06-30 阅读:38

想成为一个高级的前端开发,必须要掌握一些高级的操作,今天就给你介绍几种前端中的高级操作,看看你会几种?

一、类型转换

1.快速转Number

var a = '1'

console.log(typeof a)

console.log(typeof Number(a)) // 普通写法

console.log(typeof parseInt()a) // 普通写法

console.log(typeof +a) // 高端写法

2.快速转 Boolean

var a = 0

console.log(typeof a)

console.log(typeof Boolean(a)) // 普通写法

console.log(typeof !!a) // 高端写法

小提示:

在js中==会把比较的二者进行类型转换,其中数字1为true、0、null、NAN、空字符串均为false。也就是说 0 == false,null==false等等结果都为正确(true)的。而在===中,也可以在说严格模式下,这些都是不成立的,例如:0===false结果为错误(false)的。

3.混写

先转为 Number 再转为 Boolean

var a = '0'

console.log(!!a) // 字符串数字直接转换得到 true,不符合预期

console.log(!!+a) // 先转为 Number 再转为 Boolean,符合预期。结果为false。

二、连续解构

1.最基本的解构

在对象中提取某个字段

const user = {

id: 123,

name: 'hehe'

};

const {name} = user;

console.log(name); //prints: hehe

2.解构嵌套对象

有时我们会遇到嵌套对象,如果我们了解未足够多时,会写出这种解构:

const user = {

id: 123,

name: 'hehe',

education: {

degree: 'Main'

}

};

// 假设我们要提取degree

const {education} = user;

const {degree} = education;

当然这种写法是比较麻烦的,一层层的剥开,明显繁琐。其实我们可以连续解构一步到位的:

const user = {

id: 123,

name: 'hehe',

education: {

degree: 'Main'

}

};

const {education: {degree}} = user;

console.log(degree); //输出结果为 Main

这种写法我通常会在element组件库中经常用到,比如在表格中:

通常写法:

<el-table-column label="作者" prop="author" align="center" width="100px">

<template slot-scope="scope">

<span v-html="scope.row.authorWrapper" />

</template>

</el-table-column>

改进后的写法

<el-table-column label="作者" prop="author" align="center" width="100px">

<template slot-scope="{row:{authorWrapper}}">

<span v-html="authorWrapper" />

</template>

</el-table-column>

这样是不是又简洁方便了许多呢?

当然,我们也会遇到另外一种情况:

从数组第一个对象元素中提取某个属性,比如:err 对象中包含一个 errors 数组,errors 数组每一个对象都包含一个 msg 属性

err = {

errors: [

{

msg: 'this is a message'

}

]

}

普通写法:

msg=err.errors[0].msg

连续解构写法:

const [{ msg }] = err.errors

如果您也正在学习前端的路上,记得关注云和数据公众号,学习更多关于前端的知识~