本文详细介绍了ES6的多项核心特性，包括let和const变量的作用域与初始化，解构赋值在数组和对象中的应用，模板字符串的使用，简化对象写法，箭头函数的语法糖，形参赋值的灵活性，rest参数与扩展运算符的区别，Set和Map数据结构的介绍，Promise和Generator函数在异步编程中的作用，以及模块化、类和Map/Reduce方法的使用。这些特性极大地提升了JavaScript的可读性和效率。
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
扫一扫
1133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
