共计 3898 个字符,预计需要花费 10 分钟才能阅读完成。
ES6 新个性
原文链接:https://note.noxussj.top/?source=sifo
根底应用
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 在语言规范的层面上,实现了模块性能,而且实现得相当简略。
默认导出
规范语法: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>Document</title>
</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>Document</title>
</head>
<body>
<script type="module">
import {name} from 'index2.js'
console.log(name)
</script>
</body>
</html>
总结
当然不止是能导入 .js 文件,还能导入 .scss .vue .png 等等资源文件,基本上都须要搭配 webpack 中的 loader 去解析对应的文件,因为有些文件浏览器是不意识的。这些常识前面都会讲到。
原文链接:https://note.noxussj.top/?source=sifo