一、声明变量
1.let:ES6中新增的用于声明变量的关键字
- let声明的变量有严格局部作用域,所谓的块级作用域
- let只能声明一次
- let不存在变量提升
2.const声明变量相当于声明了一个常量
- 声明之后不允许改变
- 声明常量时必须赋值
- 具有块级作用域
二、解构赋值
ES6中允许从数组中提取值,按照对应位置,对变量赋值,对象也可以实现解构。
1. 数组解构
let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a, b, c) //1,2,3
2.对象解构
const obje= {
name: "zhangsan",
age: 22,
language: ['C+', 'JS', 'CSS']
}
const { name, age, language } = obje
console.log(name, age, language) //zhangsan 22 ["C+", "JS", "CSS"]
三、剩余参数
剩余参数语法允许我们将一个不定数量的参数表示为一个数组(剩余参数和解构配合使用)
let arr = ['lisi','wanger','xiaoming'];
let [s1,...s2] = arr;
console.log(s1);//'lisi'
console.log(s2);//['wanger','xiaoming']
四、扩展运算符
将数组或者对象转为用逗号分隔的参数序列
//对数组的操作
let arr = [1,2,3];
console.log(...arr) //1,2,3
//合并数组
let arr1 = [1,2,3]
let arr2 = [3,4,5]
let arr3 = [...arr1,...arr2];
console.log(arr3);//[1,2,3,3,4,5]
//在对象上的运用
//拷贝对象(深拷贝)
let p1 = { name: "shiba", age: 23 }
let obj = { ...p1 }
console.log(obj)//{name: "shiba", age: 23}
//合并对象
let age1 = { age: 24 }
let name1 = { name: "shiba" }
let p2 = {}
p2 = { ...age1, ...name1 }
console.log(p2) //{age: 24, name: "shiba"}
//如果p2中原本有name,age属性会被覆盖
五、字符串扩展
let str = "HelloWorld";
console.log(str.startsWith("Hello")) //true
console.log(str.endsWith("World")) //true
console.log(str.includes("e")) //true
console.log(str.includes("Hello"))//true
六、字符串模板
模板字面量使用反引号 (``) 而不是引号 (“”) 来定义字符串:
let text = `Hello World!`;
模板字面量允许多行字符串
let text =
`The quick
brown fox
jumps over
the lazy dog`;
模板字面量提供了一种将变量和表达式插入字符串的简单方法。该方法称为字符串插值
// ${...}
let firstName = "Bill";
let lastName = "Gates";
let text = `Welcome ${firstName}, ${lastName}!`;//Welcome Bill, Gates!
七、箭头函数
1.ES6中新增的定义函数的方式
2.在箭头函数中,如果函数体中只有一句代码,并且代码的执行结果就是函数的返回值,函数体大括号可以省略
//原先写法
function num(num1,num2){
return num1 + num2;
}
//箭头函数
const num = (a, b) => a + b;
console.log(num(2, 4)) // 6
八、Map和Set
ES6提供了新的数据结构Set,它类似于数组,但是成员的值都是唯一的,没有重复的值。
Set
const s = new Set();
const set = new Set([1,1,1,2,3,4,3,5]);
console.log(set ) //{1, 2, 3, 4, 5}
四个操作方法:
- add(value):添加某个值,返回 Set 结构本身。
- delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
- has(value):返回一个布尔值,表示该值是否为Set的成员。
- clear():清除所有成员,没有返回值。
Map
Map 实例的属性和方法如下:
1.size:获取成员的数量
2.set:设置成员 key 和 value
3.get:获取成员属性值
4.has:判断成员是否存在
5.delete:删除成员
6.clear:清空所有
let arr = ["1", "3", "4", "23"]
arr = arr.map(item => item * 2)
console.log(arr) //[2, 6, 8, 46]
九、对象优化
1、es6给Object扩展了许多新的方法:
- key(obj):获取对象的所有key形成的数组
- value(obj):获取对象的所有value形成的数组
- entries(obj):获取对象所有的key和value形成的二维数组
const person = {
name: "shiba",
age: 23,
language: ["java", "js", "css"]
}
console.log(Object.keys(person)) //["name","age","language"]
console.log(Object.values(person)) // ["shiba",23,Array(3)]
console.log(Object.entries(person)) //[Array(2),Array(2),Array(2)]
2、Object.assign方法的第一个参数是目标对象,后面的参数都是源对象;将源对象的属性赋值到目标对象中
onst target = { a: 1 }
const source1 = { b: 2 }
const source2 = { c: 3 }
Object.assign(target, source1, source2);
console.log(target) //{a: 1, b: 2, c: 3}
3、 声明对象简写
//以前
const name = 'shiba'
const age = 21
//将属性值name,age分别赋给person1对象的name,age,后面是属性值
const person1 = { name: name, age: age }
console.log(person1) //{name: "shiba", age: 21}
//es6:属性名和属性值变量名一样,可以省略
const person2 = {name,age}
console.log(person2) //{name: "shiba", age: 21}
十、模块化
什么是模块化:模块化就是把代码进行拆分,方便重复利用。类似Java中的导包,要使用一个包,必须先导包。二JS中没有包的概念,换来的就是模块
模块的功能主要有两个命令构成:export和import
- export命令用于规定模块的对外接口,export不仅可以导出对象,一切JS变量都可以导出。比如:基本类型变量、函数、数组、对象
- import命令用于导入其他模块提供的功能