今天分享一些ES6中新增的内容
1、let和const关键字
2、箭头函数
3、解构赋值
4、对象扩展
5、模板字符串
6、展开运算符
7、es6模块化开发
8、新增数据类型Symbol
9、新增数据结构set和map
let 和 const 关键字
以前都是用var关键字来声明变量,在es6中新增了let和const关键字,用来声明变量。
- let和const不允许重复声明变量
let num = 100
let num = 200 // 这里就会报错了
const sum = 300
const sum= 400 // 这里就会报错了
- let 和 const 声明的变量不会在预解析的时候解析(也就是没有变量提升)
- let 和 const 声明的变量会被所在代码块限制作用范围(块级作用域)
- let 声明的变量的值可以改变,const 声明的变量的值不可以改变
- let 声明的时候可以不赋值,const 声明的时候必须赋值
箭头函数
- 箭头函数只能简写函数表达式,不能简写声明式函数
- 如果函数体的代码只有一句话可以大括号省略并且默认返回那一句代码的结果
- 箭头函数内部没有 this,箭头函数的 this 是上下文的 this
- 箭头函数内部没有arguments这个参数集合
- 函数的行参只有一个的时候可以不写
()
其余情况必须写
解构赋值
解构赋值分为解构对象和解构数组
//解构对象
const obj = {
name: 'Jack',
age: 18,
gender: '男'
}
let { name, age, gender } = obj
//解构数组
const arr = ['Jack', 'Rose', 'Tom']
// arr 必须是一个数组
let [a, b, c] = arr// a b c 分别对应这数组中的索引 0 1 2
对象扩展
//合并对象 .assign
//把lisi 的所有的属性 给了 zhangsan , lisi没有任何的变化
var zhangsan = {name:'zhangsan'};
var lisi = {age:18};
Object.assign(zhangsan,lisi)
let res = Object.assign(zhangsan,lisi)//把lisi合并到zhangsan
console.log(zhangsan)//{name: "zhangsan", age: 18}
console.log(res)//{name: "zhangsan", age: 18}
console.log(lisi)//{age: 18}
模板字符串
ES5 中我们表示字符串的时候使用 ''
或者 ""
在 ES6 中,我们还有一个东西可以表示字符串,就是 ``(反引号)
- 反引号可以换行书写
- 反引号可以直接在字符串里面拼接变量
展开运算符
ES6 里面号新添加了一个运算符 ...
,叫做展开运算符
- 作用是把数组展开
let arr = [1, 2, 3, 4, 5]//-> 1, 2, 3, 4, 5
console.log(...arr) // 1 2 3 4 5
- 也可以合并对象使用
let obj = {
name: 'Jack',
age: 18
}
let obj2 = {
...obj,
gender: '男'
}
console.log(obj2)
es6模块化开发
模块功能主要由两个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。
- 导出模块export
- 导入模块import
语法import{ } from"地址"
新增数据类型Symbol
- Symbol类型-表示独一无二的值 (基本数据类型)
新增数据结构set和map
- set类似数组,不能存放重复的元素,可用于数组去重。
//数组去重 把arr中的重复元素去掉,得到一个新数组
let arr = [1,2,3,1,2,3]
let resArr = [...new Set(arr)]
let resArr = Array.from(new Set(arr))
- map可以存放键值对,属性名:属性值, map的属性名可以是任何类型的,而普通对象的属性名只能是字符串