ES6 新特性
1.let(变量) & const(常量)
特点:
- 不存在变量提升
- 不允许重复声明
- 只在块级作用域内有效 —— { }内
- const在声明时必须赋初始值,对于数组和对象的元素修改,不算做对常量的修改,const保存的是内存地址
2.解构赋值
ES6允许按照一定模式从数组和对象中提取值,对变量进行赋值
- 数组:
const a = ['one','two','three']
let [value1,value2,value3] = a
console.log('value1-----', value1) //value1-----one
console.log('value2-----', value2) //value2-----two
console.log('value3-----', value3) //value3-----three
- 对象
const person = {
name:'张三',
age:18,
tell:function(){
console.log('我叫张三,今年18岁')
}
}
let {name,age,tell} = person
console.log(name) //张三
console.log(age) //18
console.log(tell) //ƒ () {console.log("我叫张三,今年18岁");}
tell() //我叫张三,今年18岁
3.模板字符串
` `(反引号)内容中可以进行变量拼接 ${变量} 或者使用换行符,’ '和" "中则不可以,出现会报错
const person = {
name: "张三",
age: 18,
};
console.log("我叫" + person.name + ",今年" + person.age + "岁");
console.log(`我叫${person.name},今年${person.age}岁`);
4.简化对象写法
ES6允许在大括号里面,直接写入变量和函数,作为对象的属性和方法(在属性名和变量名相同的情况下),这样的书写更加简洁
let name = '张三';
let age = 18;
const person = {
name, // name:name
age, //age:age
tell(){ //tell:function()
console.log('我叫张三,今年18岁')
}
}
5.箭头函数
- 外部没有函数时,箭头函数的this指向window,有则指向外部函数
- 当形参有且只有一个的时候,可以省略( ),当代码体只有一条语句的时候,可以省略{ },此时return必须省略,而且语句的执行结果就是函数的返回值
let a = 10;
let b = 20;
let add = (x,y) =>{
return x + y
}
console.log(add(a,b));
6.形参赋值
ES6允许给函数参数赋初始值
let add = (x = 10,y = 20) =>{
return x + y
}
console.log(add()); //30
console.log(add(2,3)); //5
7.rest参数
代替arguments,用在函数定义时的形参前面,当函数调用时,用于接收不确定的参数,或与解构赋值结合使用,用于接收剩余的值,存储在数组中.
function number(a, b, ...args) {
console.log(a);
console.log(b);
console.log(...args);
}
number(1, 2, 3, 4, 5);
var array = [1, 2, 3, 4, 5, 6];
var [a, b, ...c] = array;
console.log(a); //1
console.log(b); //2
console.log(c); //[3, 4, 5, 6]
8.拓展运算符
… 用在字符串或数组前面时称为扩展运算符,将数组或字符串进行拆解
注:虽然形式与rest参数类似,但是rest参数是用在函数定义时的形参位置,扩展运算符是用在函数实际调用时的实参位置
const STUDENTS = ["小明", "小芳", "小红"];
function show(...args) { //rest参数
console.log(...args);
}
show(STUDENTS); // ["小明", "小芳", "小红"]
show(...STUDENTS); // 拓展运算符 小明 小芳 小红
9.set(集合)
ES6提供了新的数据结构set(集合),本质上是一个对象。它类似于数组,但成员的值都是唯一的。
set的属性和方法:
- size,返回集合的元素个数
- add,增加一个新元素,返回当前集合
- delete,删除元素,返回Boolean值
- has,检测集合中是否包含某个元素,返回Boolean值
let s = new Set(['red','bule','green','red']) // red blue green
let size = s.size // 查看元素个数
let has = s.has('red') // 检测是否含该元素 true
s.add('yellow') // 添加元素
s.delete('blue') // 删除元素
let has2 = s.has('blue') // 检测是否含该元素 false
// 遍历集合
for(let item of s){
console.log(item)
}
s.clear() // 清空集合
console.log(size,has,has2, typeof s) //3 true false "object
10.map
ES6提供了Map数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当做键。
Map的属性和方法:
- size,返回Map的元素个数
- set,增加一个新元素,返回当前Map
- get,返回键名对象的键值
- has,检测Map中是否包含某个元素,返回Boolean值
- clear,清空集合,返回undefined
let m = new Map();
// 添加元素
m.set("name", "张三"); // 键名,键值
m.set("tell", function () {
console.log("我是张三 ");
});
let friend = {
school: "三中",
};
m.set(friend, ["小吴", "小王", "小芳"]);
console.log(m); //Map(3) {"name" => "张三", "tell" => ƒ, {…} => Array(3)}
// 删除元素
m.delete("tell");
// 获取元素
let friends = m.get(friend);
console.log(friends); // (3) ["小吴", "小王", "小芳"]
// 获取元素个数
let size = m.size;
console.log(size); // 2
// 遍历Map
for (let item of m) {
console.log("item---", item);
// 每一个item都是一个数组,第一个元素为键,第二个元素为值
}
// 清空Map
m.clear();
console.log(typeof m); // object
11.Promise
Promise是ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数,用来封装异步操作并可以获取其成功或失败的结果
一个 Promise 必然处于以下几种状态之一:
- pending:等待状态,比如正在进行网络请求,或者定时器没有到时间。
- fulfill:满足状态,当我们主动回调了resolve时,就处于该状态,并且会回调.then()
- reject:拒绝状态,当我们主动回调了reject时,就处于该状态,并且会回调.catch()
new Promise((resolve, reject) => {
setTimeout(() => {
//resolve("hello world");
reject("error data");
}, 1000);
}).then(
(data) => {
console.log(data); //hello world
},
(error) => {
console.log(error); // error data
}
);
12. Generator函数(生成器)
Generator 函数是 ES6 提供的 一种异步编程解决方案,语法行为与传统函数完全不同 。
Generator函数有两个特征:
- function命令与函数名之间有一个星号 *
- 函数体内部使用 yield 语句定义不同的内部状态。
function* hello () {
yield "hello";
yield "world";
return "done";
}
let h = hello();
console.log(h.next()); //{value: "hello", done: false}
console.log(h.next()); //{value: "world", done: false}
console.log(h.next()); //{value: "done", done: true}
console.log(h.next()); //{value: undefined, done: true}
注:next调用和for…of调用同时存在,只会支持最先的一个
for (let obj of h) {
console.log(obj);
}// 输出:hello world
13.模块化
模块化就是把代码进行拆分,方便重复利用。类似 Java 中的导包:要使用一个包,必须先导入一个包。而 JS 中没有包的概念,换来的是模块。
模块功能主要是由两个命令构成:export 和 import 。
- export:用于规定模块的对外接口;
- import:用于导入其他模块提供的功能。
number.js
export function add(x,y){
return x + y
}
use.js
import add from './number.js'
console.log(add(2+3))
14.class(类)
ES6中引入 class 的概念,通过 class 关键词自定义类。
- constructor内定义的方法和属性是实例对象自己的,而constructor外定义的方法和属性则是所有实例对象可以共享的。
- class之间可以通过extends关键字实现继承父类的所有属性和方法。
- super关键字,它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。
class People {
constructor(name) {
//构造函数
this.name = name;
}
sayName() {
console.log(this.name);
}
}
class Student extends People {
constructor(name, grade) {
//构造函数
super(name); //调用父类构造函数
this.grade = grade;
}
sayGrade() {
console.log(this.grade);
}
}
let S = new Student("张三", 80);
console.log(S.sayName(), S.sayGrade()); //张三 80
15.Map和Reduce
在ES6中,数组新增了map() 和 reduce()方法
- map():接收一个函数,将原数组中的所有元素用这个函数处理后放入新的数组返回。
let str = ['1','2','3','4']
console.log(str); //["1","2","3","4"]
let num = str.map(s => parseInt(s));
console.log(num); //[1,2,3,4]
- reduce():接收一个函数(必须)和一个初始值(可选),该函数接收两个参数:
- 第一个参数是上一次reduce处理的结果
- 第二个参数是数组中要处理的下一个元素
- reduce()会从左至右依次把数组中的元素用reduce()处理,并把处理结果作为下一次reduce的第一个参数,如果是第一次,会把前两个元素作为计算参数,或者把传入的初始值参数作为起始值。
const arr = [2, 3, 4, 5];
//无初始值
console.log(arr.reduce((a, b) => a + b)); //14
console.log(arr.reduce((a, b) => a * b)); //120
// 有初始值
console.log(arr.reduce((a, b) => a + b, 1)); //15
console.log(arr.reduce((a, b) => a * b, 0)); //0
console.log(arr.reduce((a, b) => a + b, 10)); // 24
console.log(arr.reduce((a, b) => a * b, 6)); // 360