【前端基础】Es6新特性（一）
作者：互联网
1 Es6
全称为ECMAScript是浏览器脚本语言的规范，而各种我们熟知的js语言则是规范的具体体现。
1.1 Es6新特性
① let与var
- 作用域
<script>
{
var a = 1;
let b = 2;
}
console.log(a)
console.log(b) // b is not defined
</script>
var声明的变量往往可以跨域，let则有严格的作用域
- 声明次数
<script>
var m = 1
var m = 2
let n = 1
let n = 2
console.log(m)
console.log(n) // Identifier 'n' has already been declared
</script>
let只能声明一次而var可以声明多次
- 变量提升
<script>
console.log(x) // undefined
var x = 1
console.log(y) // Cannot access 'y' before initialization
let y = 2
</script>
未经声明的变量使用，var声明的变量会输出为undefined
let则会报错
② const声明常量（只读变量）
<script>
const a = 1
console.log(a)
a = 2 // Assignment to constant variable.
</script>
③ 解构表达式
数组解构
<script>
const arr = [1, 2, 3]
const [a, b, c] = arr
console.log(a, b, c)
</script>
对象解构
<script>
const person = {
name: "jack",
age: 18,
language: ["java", "python", "c"]
}
const {name:mingzi, age, language} = person
console.log(mingzi, age, language) // jack 18 (3) ['java', 'python', 'c']
</script>
④ 字符串扩展
startsWith()
endWith()
includes()
⑤ 字符串模板
使用反引号 `` 可以声明多行字符串
⑥ 字符串插入变量和表达式
在字符串中使用${}可以使用变量和表达式
⑦ 默认参数
在函数参数上赋值，则为空的时候启用该默认值
⑧ 不定参数
function fun(...value) value表示多个参数的数组形参
⑦ 箭头函数
箭头前面的表示参数，后面表示函数体
<script>
let print = (msg) => {console.log(msg)}
print(123)
</script>
函数参数只有一个值可以省略括号，只有一个返回值则可以省略大括号。
<script>
let add = a => ++a
console.log(add(1)) // 2
</script>
箭头函数加对象解构
<script>
const person = {
name: "jack",
age: 18,
language: ["java", "python", "c"]
}
var hello = ({name:mingzi}) => console.log("hello", mingzi)
hello(person) // hello jack
</script>
⑨对象优化
Api方法
-
Object.keys() 获取对象键
-
Object.values() 获取对象值
-
Object.entries() 获取对象键值对
const person = {
name: "jack",
age: 18,
language: ["java", "python", "c"]
}
console.log(Object.keys(person)) // ['name', 'age', 'language']
console.log(Object.values(person)) // ['jack', 18, Array(3)]
console.log(Object.entries(person)) // 0: (2) ['name', 'jack']
// 1: (2) ['age', 18]
// 2: (2) ['language', Array(3)]
- Object.assign()合并对象
<script>
target = {a:1}
source1 = {b:2}
source2 = {c:3}
target = Object.assign(target, source1, source2)
console.log(target) // {a: 1, b: 2, c: 3}
</script>
- 声明对象名的简写
当属性名与变量名一致时，只需要写一个即可
- 对象的函数属性简写
箭头函数尽量不要使用this指针
- 对象的扩展运算符 ...：表示深度拷贝对象，即拷贝对象的全部属性
<script>
let person = {
name: 'jack',
age: 18,
language: ['java', 'python', 'c']
}
let person1 = {...person}
console.log(person1) // {name: 'jack', age: 18, language: Array(3)}
</script>
- 合并对象
let name = {name: 'jack'}
let age = {age: 18}
let person = {...name, ...age}
console.log(person) // {name: 'jack', age: 18}
区别于Object.assign是将其他对象的属性加到第一个参数的对象，这个是合成一个新的对象
⑩ 数组优化
-
map：可以传入一个函数，以每一个数组元素作为参数返回其处理之后的值
-
reduce：传入一个函数和一个值作为初始元素值，然后函数的参数分别为上一个元素和当前处理元素
-
☆filter
<script>
let arr = ['1', '20', '-5', '3']
// arr = arr.map(item => {
// return item * 2
// })
arr = arr.map(item => item * 2)
console.log(arr) // [2, 40, -10, 6]
</script>
let arr = ['1', '20', '-5', '3']
arr = arr.reduce((a, b) => {
return a * 1 + b * 1
}, 100)
console.log(arr) // 119
表示不断将上个元素加到当前元素，最开始元素值为100，故结果为119
<script>
let arr = ['1', '20', '-5', '3']
arr = arr.filter(item => {
if (item == '1')
return false;
return true;
})
console.log(arr)
</script>
表示删除1
1.2 ☆promise异步编排
promise可以封装异步操作，特别重要单独放到下面讲了。
1.3 Es6模块化
模块化：模块化就是把代码进行拆分，方便反复利用。类似于java中的导包，要使用一个包必须要导包。而JS中没有包的概念，取而代之的是模块。
模块的主要操作包括：
export：暴露，不仅可以暴露对象，一切js变量都可以导出，比如基本类型变量、函数、数组、对象。
js、css、图像等等静态资源可以直接使用不需要暴露
import：导入
1.3.1 三种暴露方法
三种暴露方法的结果都是暴露js文件中的对象给其他地方使用。
默认暴露：直接将一个对象暴露
export default {
...
}
一个js文件中只能有一个export default
暴露出一个对象,直接就可以拿来使用，且在import的时候任意命名
分别暴露：将多个对象放在一起进行暴露，在import的时候需要使用{}进行导入
整体暴露：整体(统一)暴露是一个对象这个对象是我们自己需要写的，把所有的需要暴露的变量写到我们的对象当中
标签：Es6,arr,console,log,前端,特性,let,age,name 来源： https://www.cnblogs.com/tod4/p/16597277.html