带你了解ES6新特征!

ES6 新特性

基础使用

let

块级作用域,也就是在同一个作用域内,不能够重复声明同一个变量。

let name = 'xiaoming'

const

在 let 的基础上,声明的变量不能够被重新赋值。

const name = 'xiaoming'

解构赋值

简化对象获取属性、简化数组获取元素的写法。

const [a, b, c] = [1, 2, 3]

const { name, age } = { name: 'xiaoming', age: 18 }

扩展运算符

把对象的属性、数组的元素拆散成单个。

const arr = [1, 2, 3]
const arr2 = [...arr]

const obj = { name: 'xiaoming', age: 18 }
const obj2 = { ...obj }

模板字符串

简化字符串拼接 + 写法。

const name = 'xiaoming'

const res = `i am ${name}`

箭头函数

简化 function 写法,没有 this 指向。

const fn = (name) => {
    return name
}

const fn = (name) => name

for…of

循环语句(只能遍历数组),与 for…in 类似, for…in 是返回 key ,而 for…of 是返回 value 。

for (const value of arr) {
    console.log(value)
}

Promise

异步函数,延迟返回函数结果。

const score = 80

const p1 = new Promise((resolve, reject) => {
    if (score > 60) {
        resolve('考试通过了')
    } else {
        reject('考试不通过')
    }
})

// 成功
p1.then((res) => {
    console.log(res) // 考试通过了
})

// 失败
p1.then((res) => {
    console.log(res) // 考试不通过
})

Async、Await

异步函数,暂时可以理解为是 Promise 的语法糖(但实际不是),语法糖就理解是简化代码的意思。主要是让异步的代码写起来更像同步代码。

async function fn() {
    const res = await p1
}

Class

简化使用 function 实现类(构造函数)的写法。

class Person {
    constructor() {}
    myName() {}
}

ESM 模块化(import、export)

导出(a.js)。

const name = 'xiaoming'

export { name }

导入(b.js)。

import { name } from './a.js'

Map

数据结构字典,是一种无序且唯一的数据结构。

const map = new Map()

map.set('name', 'xiaoming')

Set

数据结构集合,是一种无序且唯一的数据结构。

const set = new Set()

set.add(1)

数组扩展方法

includes()

检测数组中是否包含某个元素。

const arr = ['xiaoming', 'libai', 'anqila']

const res1 = arr.includes('xiaoming') // true

const res2 = arr.includes('sunshangxiang') // false

find()

查找数组中满足条件的那一项。

const arr = [
    {
        name: 'xiaoming',
        age: 16
    },
    {
        name: 'libai',
        age: 17
    },
    {
        name: 'anqila',
        age: 18
    }
]

const res = arr.find((item) => item.name === 'xiaoming') // {name: 'xiaoming', age: 16}

findIndex()

查找数据中满足条件的那一项的索引。

const arr = [
    {
        name: 'xiaoming',
        age: 16
    },
    {
        name: 'libai',
        age: 17
    },
    {
        name: 'anqila',
        age: 18
    }
]

const res = arr.findIndex((item) => item.name === 'xiaoming') // 0

map()

遍历数组。

const arr = ['xiaoming', 'libai', 'anqila']

arr.map((item, index) => {
    console.log(item, index) // 分别打印 xiaoming 0、libai 1、anqila 2
})

fill()

遍历数组。

new Array(3).fill('xiaoming') // ['xiaoming', 'xiaoming', 'xiaoming']

sort()

数组排序。

const arr = ['b', 'a', 'c']

const arr2 = arr.sort((a, b) => (a > b ? 1 : -1)) // ['a', 'b', 'c']

filter()

数组过滤。

const arr = ['b', 'a', 'c']

const arr2 = arr.filter((x) => x !== 'a') // ['b', 'c']

some()

判断数组中任意一项满足条件

const arr = ['b', 'a', 'c']

const res = arr.some((x) => x === 'a') // true

every()

判断数组中所有项满足条件

const arr = ['b', 'a', 'c']

const res = arr.every((x) => x === 'a') // false

对象扩展方法

Object.assign()

对象浅拷贝。

const obj = {
    name: 'xiaoming',
    age: 18
}

const obj2 = Object.assign({}, obj)

obj2.name = 'libai'

console.log(obj.name) // 'xiaoming'

Object.keys()

提取对象的所有键组成一个数组返回。

const obj = {
    name: 'xiaoming',
    age: 18
}

const keys = Object.keys(obj) // ['name', 'age']

Object.values()

提取对象的所有值组成一个数组返回。

const obj = {
    name: 'xiaoming',
    age: 18
}

const values = Object.values(obj) // ['xiaoming', 18]

ESM 模块化

历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能。ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单。

:::warning 注意
ESM 必须应用在 script 标签 type=“module” 下才能够生效,并且必须把项目部署到服务端运行,否则在本地直接双击打开 index.html 文件会报错。VS Code 提供了把项目运行在服务端的插件,如有需要请查看 Live Server
:::

默认导出

标准语法:export default $variable

解析:其中 $variable 指的是要导出的变量名称。

// index.js

const person = {
    name: 'xiaoming',
    age: 18
}

export default person

按需导出

标准语法:export { $variable1, $variable2 }

解析:其中 $variable1 $variable2 指的是要导出的变量名称,导出多个的写法用逗号分隔。

// index2.js

const name = 'xiaoming'
const age = 18

export { name, age }

默认导入

标准语法:import $variable from $path

解析:其中 $variable 指的是要导入的变量名称,名称是可以自定义的,并非要求和导出的时候一样, $path 指的是导入的文件路径。

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Documenttitle>
    head>
    <body>
        <script type="module">
            import person from 'index.js'

            console.log(person)
        script>
    body>
html>

按需导入

标准语法:import { $variable1, $variable2 } from $path

解析:其中 $variable1 $variable2 指的是要导入的变量名称,名称必须和导出时一致, $path 指的是导入的文件路径。

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Documenttitle>
    head>
    <body>
        <script type="module">
            import { name } from 'index2.js'

            console.log(name)
        script>
    body>
html>

总结

当然不止是能导入 .js 文件,还能导入 .scss .vue .png 等等资源文件,基本上都需要搭配 webpack 中的 loader 去解析对应的文件,因为有些文件浏览器是不认识的。这些知识后面都会讲到。

原文链接:菜园前端

你可能感兴趣的:(es6,javascript,前端)