学了ES6，你真的在项目中使用了吗？

crazyu
2,126 阅读6分钟

作为一个前端老司机，在公司工作的时候,会遇到跟其他项目组的开发公司协同办公,有的同事的代码真的让我难以吐槽,每次修改某一个功能的时候，被他的代码给气到，明明学了那么多好用的语法,在代码里面很多部分都没体现。

我要感谢在我实习的时候遇到的技术老板，那段时间每次提交代码,Boss都会codeReview,在代码风格、性能、严谨性、是否简洁易懂、代码是否有注释都有要求,让我养成了良好的代码习惯,后来在工作中自己几乎不使用代码校验工具也能写出规范性的代码,这让我很开心.再次感谢boss对我的栽培。

重要的提示:良好的代码习惯不会让你开发能力有增加,但是会让你的代码变得更加规范,让你的有更好的职业素养,良好的职业素养是一个专业的开发人员必备的素质

希望大家在写代码的时候就要去考虑那种多种方案,那个api能让代码更简洁、性能更好、通俗易懂、易维护等方面

1.对象解构

const result = {
    name: 'crazyu',
    age: 12,
    sex: 'man',
    address: '江苏省上海市'
}

// 不推荐写法: 这种写法没有错误，但是不够简洁
// result 可能是后台返回的值
const name = result && result.name
const age = result && result.age
const sex = result && result.sex
const address = result && result.address

// 推荐写法
const { name, age, sex, address } = result || {}

// tips: 如果你需要解构的变量很多,建议这行写，这样代码很整洁,避免单行代码过长导致阅读困难，
// 需要左右滚动的文件真的会很麻烦，也很让人抓狂, 代码中该空格的地方要空格
const {
    name,
    age,
    sex,
    address,
    favorite: '',
    movie,
    music,
    id,
} = result || {}

2. 数组结构

const arr = ['1', '2', '3']

// 不推荐写法
const a = arr[0]
const b = arr[1]
const c = arr[2]

// 推荐写法
const [a, b, c] = arr


const result = [
    {
        name: 'crazyu',
        age: 18,
        sex: 'man'
    },
    '222' // 数组的最后一个元素不需要,
]

// 不推荐写法
const name = arr && arr[0] && arr[0].name || ''
const num = arr && arr[1] && arr[1] || ''

// 推荐写法
const [{name}, num] = result || [];

3.解构默认值 (如果某一个值是有默认值的,可以在解构的时候增加默认值,初始化渲染的时候显示)

const result = {
    name: 'crazyu',
    age: 18,
    sex: 'woman'
}

// 推荐的写法
const {
    name,
    age,
    sex = 'woman'
} = result || {}

4.链判断运算符(此语法是在ES2020新增的，并非ES6里面的,但是目前的单页面一般都增加了新语法的解析了)

如果？前面的内容是null、undefined,则直接返回undefined,不会继续往下判断

const message = {
    body: {
        user: {
            name: 'crazyu',
            age: 18,
            id: '1000'
        }
    }
}
// 不安全写法,
const name = message.body.user.name || ''

// 正确的写法
const name = message && message.body && message.body.user && message.body.user.name || ''

// 推荐的写法
const name = message?.body?.user?.name || ''

5.数组some、every的区别(性能优化)

// some: 数组中的元素有某一项符合条件的就返回true,并且不继续往下循环,减少了循环的次数
// every: 判断每一个回调函数是否否为true, 都为true, 则返回true, 如果有一个回调函数返回false, 则直接返回false

const result = [
    {
        name: 'crazyu1',
        id: '111',
        age: 8
    },
    {
        name: 'crazyu2',
        id: '222',
        age: 18
    },
    {
        name: 'crazyu3',
        id: '333',
        age: 28
    },
    {
        name: 'crazyu4',
        id: '444',
        age: 48
    }
]

// 如果查找是否存在id = ‘333’的元素,则使用some,不要去使用for 、map等其他循环体完整的去循环数组
const isExist = result.some(item => item.id === '333')

// 如果查找数组的元素是否都符合某一个条件使用 every
// 比如当前数组元素age是否都大于18
const isAdult = result.every(item => item.age > 18)

6.数组find、findIndex的区别(性能优化)

// find 查找数组中符合条件的第一个元素,查到则不继续往下查找，如果没有符合条件的数组，返回undefined
// findIndex 查找数组中是否符合条件的第一个条件的的元素的下标，如果有则返回下标，并且不继续查找数组，
// 如果没有，返回 -1

const result = [
    {
        name: 'crazyu1',
        id: '111',
        age: 8
    },
    {
        name: 'crazyu2',
        id: '222',
        age: 18
    },
    {
        name: 'crazyu3',
        id: '333',
        age: 28
    },
    {
        name: 'crazyu4',
        id: '444',
        age: 48
    },
    {
        name: 'xiaoming',
        id: '5555',
        age: 18
    }
]

// 查找age == 18的元素，并且返回
const item = result.find(item => item.age === 18)
console.log(item) // { name : 'crazyu2', id: '222', age: 18 }

// 查找age == 18的下标
const index = result.findIndex(item => item.age === 18)
console.log(index) // 1

7.数组filter、map的区别(性能优化)

// filter 查找数组符合某一个条件的集合,
// map 遍历数组
const result = [
    {
        name: 'crazyu1',
        id: '111',
        age: 8
    },
    {
        name: 'crazyu2',
        id: '222',
        age: 18
    },
    {
        name: 'crazyu3',
        id: '333',
        age: 28
    },
    {
        name: 'crazyu4',
        id: '444',
        age: 48
    },
    {
        name: 'xiaoming',
        id: '5555',
        age: 18
    }
]

// 查找 age > 18 的元素集合
//不推荐写法
const arr = []
result.map(item => {
    if (item.age > 18) {
        arr.push(item)
    }
})

// 推荐写法
const adults = result.filter(item => item.age > 18) || []

8.Null判断运算符: ?? (ES2020引入)

??的作用是: 判断值是否是null 或者是 undefined

// 在某一个特定的场景下你需要排除字段 不能是以下这种情况: null、undefined 、 ‘’, 
// 不推荐写法

if (result !== null && result !== undefined && result !== '') {

}

// 推荐写法
if ((result ?? '') !== '') {

}

9.逻辑赋值运算符

const x = 10
const y = 100

// 或赋值运算符: ||=
x ||= y     // 等价于: x || (x = y)

// 与赋值运算符: &&=
x &&= y    // 等价于: x && (x = y)

// Null值运算符: ??=
x ??= y    // 等价于: x ?? (x = y)

实际项目应用场景

// 老的写法
user.id = (user.id || 1)

// 新的写法
user.id ||= 1

// 老的写法
type = (type && '1')

// 新的写法
type &&= 1

// 老的写法
type = (type && '')

// 新的写法
type &&= ''

10.async用了，但是没使用await

const getData = axios.get('https://xxx.com?id=1')

// 不止一次看到有人这样,搞不明白写这意义是啥
async created () {
    axios.get('https://xxx.com?id=1').then((res) => {
        console.log(res)
    })
}

// 推荐的写法
async created () {
    const res = await getData()
    console.log(res)
}

11.箭头函数能省略大括号的时候，请不要写

const arr = [1, 2, 3, 4, 5, 6]
// 不推荐写法
const reslut = arr.filter(item => {
    if (item > 3) {
        return true
    } else {
        return false
    }
})

// 推荐写法
const result = arr.filter(item => item > 3)

// 返回对象的示例如下

const users = [
    {
        name: 'crazyu',
        id: '111'
    },
    {
        name: 'crazyu',
        id: '111'
    }
]

// 不推荐写法
const target = user.map(item =>{
    return  {
        ...item,
        age: 18
    }
})

// 推荐写法
const target = user.map(item => ({
    ...item,
    age: 18
}))

12.模板字符串

const appId = '2333'
// 不推荐写法
const str = ‘appId=’ + appId

// 推荐写法
const str = `appId=${appId}`

写在最后

至此，文章就分享完毕了。

我是crazyu，一位前端开发工程师。

  • 文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注😊
  • 本文首发于掘金，未经许可禁止转载
avatar
文章
阅读
粉丝