ES6的简介
ES6全称 ECMAScript 6.0是 JavaScript 语言的下一代标准
简单来说：ECMAScript 和 JavaScript的关系是，前者是后者的规格，后者是前者的一种实现
let 和 const
let块级作用域
let声明的变量具有块级作用域：{ }，变量只在{ }里面起作用，外边无法获取
if (true) {
? ? ? let a = 10;
? ? }
? ? console.log(a); //报错 a is not defined
let没有变量提升
console.log(num);//let声明的变量不能提前使用
let num = 10;
const声明常量
const 声明的常量里面的内容不能更改
解构赋值
数组结构
let [a, b, c] = [10, 20, 30];
console.log(a); //10
console.log(b); //20
console.log(c); //30
对象结构
let obj = { name: "tom", age: 23 };
let { name, age } = obj;
console.log(name);
console.log(age);
箭头函数
无参写法
const fn = () => console.log("hello");
fn();
单句写法
函数体中只有一句代码，代码执行的结果就是返回值的时候，可以省略箭头函数的大括号
const fn = (a, b) => a + b;
console.log(fn(10, 20));
箭头函数中的this
普通函数中的this指向window，箭头函数中的this指的是函数定义位置的上下文
var obj = {
? name: "tom",
? say: () => {
? ? console.log(this);//window对象
? }
};
obj.say();
剩余参数
运用场景
定义一个函数，如果是两个参数，就计算两个参数的和，如果是三个参数，就计算三个参数的和。
const fn = (...args) => {
? ? ? let sum = 0;
? ? ? args.forEach(item => {
? ? ? ? sum += item;
? ? ? });
? ? ? console.log(sum);
? ? };
? ? fn(10, 20); //30
? ? fn(10, 20, 30); //60
扩展运算符
基础使用
扩展运算符是把数组或者对象转换成用逗号分隔的参数序列
Array扩展
find方法
find是查找数组中符合条件的成员，如果没有找到返回undefined
let arr = [
? ? ? {
? ? ? ? id: "1",
? ? ? ? name: "tom"
? ? ? },
? ? ? {
? ? ? ? id: "2",
? ? ? ? name: "jim"
? ? ? }
? ? ];
? ? const obj = arr.find(item => item.id == 2);
? ? console.log(obj);
? 这个案例是查询对象的id是2的，返回结果是满足条件的那个对象
findindex
findIndex是返回满足条件的索引号，查不到返回返回-1
let arr = [
? ? ? {
? ? ? ? id: "1",
? ? ? ? name: "tom"
? ? ? },
? ? ? {
? ? ? ? id: "2",
? ? ? ? name: "jim"
? ? ? }
? ? ];
? ? const index = arr.findIndex(item => item.id == 3);
? ? console.log(index);
includes（包括）
判断10是不是在数组中存在
let arr = [10, 20, 30];
const res = arr.includes(10);
console.log(res);
set
set类似于数组，但是成员中的值是唯一的，不会出现重复的
const set = new Set([10, 22, 22, 10, 5]);
? ? set.add(11);
? ? set.add(99);
? ? set.delete(11);
? ? console.log(...set);
字符串扩展
模板字符串
模板字符串语法：`${}`
优点：
1.模板字符串可以解析变量
2.模板字符串里面可以换行
3.模板字符串可以嵌套函数
startsWith和endsWith
startsWith是判断字符串以什么开头 endsWith是判断字符串以什么结束
let str = "hello";
let res1 = str.startsWith("h");
let res2 = str.endsWith("o");
console.log(res1, res2);
repeat
可以复制变量
let str = "hello".repeat(2);
console.log(str);
面向对象
对象
对象是由属性和方法组成的：是一个无序键值对的集合,指的是一个具体的事物
创建对象方法1 字面量创建对象
var obj1={
? name:'tom',
? age:23,
? score:89
}
创建对象方法2 构造函数的方式创建对象
function Person(name,age){
? this.name=name;
? this.age=age;
}
?
var obj2=new Person('name',23);//实例化构造函数，创建对象
类
//步骤1 使用class关键字
class name {
//属性和方法
?
// 类的共有属性放到 constructor 里面
? constructor(name, age) {
? ? ? this.name = name;
? ? ? this.age = age;
? }
?
? //注意,方法与方法之间不需要添加逗号
? say(sex) {
? ? console.log(this.name + '说' + this.age+sex);
? }
} ? ?
//步骤2使用定义的类创建实例 注意new关键字
var xx = new name();
xx.say('男');
总结：
-
通过class 关键字创建类, 类名我们还是习惯性定义首字母大写 -
类里面有个constructor 函数,可以接受传递过来的参数,同时返回实例对象 -
constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自动生成这个函数 -
多个函数方法之间不需要添加逗号分隔 -
生成实例 new 不能省略 -
语法规范, 创建类 类名后面不要加小括号,生成实例 类名后面加小括号, 构造函数不需要加function
类的继承
// 父类
class Father{ ?
}
?
// 子类继承父类
class Son extends Father { ?
} ?
super
//定义了父类
? ? class Father {
? ? ? constructor(x, y) {
? ? ? ? this.x = x;
? ? ? ? this.y = y;
? ? ? }
? ? ? sum() {
? ? ? ? console.log(this.x + this.y);
? ? ? }
? ? }
? ? //子元素继承父类
? ? class Son extends Father {
? ? ? constructor(x, y) {
? ? ? ? super(x, y); //使用super调用了父类中的构造函数
? ? ? }
? ? }
? ? var son = new Son(10, 20);
? ? son.sum(); //结果为30
// 父类有加法方法
class Father {
? constructor(x, y) {
? this.x = x;
? this.y = y;
? }
? sum() {
? console.log(this.x + this.y);
? }
}
// 子类继承父类加法方法 同时 扩展减法方法
class Son extends Father {
? constructor(x, y) {
? // 利用super 调用父类的构造函数 super 必须在子类this之前调用,放到this之后会报错
? super(x, y);
? this.x = x;
? this.y = y;
?
}
subtract() {
console.log(this.x - this.y);
}
}
var son = new Son(5, 3);
son.subtract(); //2 调用子类自己的减法方法
son.sum();//8 调用了继承的父类的加法方法
面向对象总结
-
继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的 -
继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则) -
如果子类想要继承父类的方法,同时在自己内部扩展自己的方法,利用super 调用父类的构造函数,super 必须在子类this之前调用 -
constructor中的this指向的是new出来的实例对象 -
自定义的方法,一般也指向的new出来的实例对象 -
绑定事件之后this指向的就是触发事件的事件源
模块化
作用
模块化主要是把一个大的程序文件，分成很多小的程序文件，主要有下面几个作用：
-
防止变量或者函数名冲突 -
代码复用 -
便于后期代码维护
export导出
export let num = 10;
export function fn() {
console.log("hello");
}
import导入
import { num, fn } from "./01.js";
console.log(num);
fn();
export?default
一个模块只能有一个默认导出，对于默认导出，导入的名称可以和导出的名称不一致。
创建01.js
export default function fn() {
console.log("hello");
}
创建02.js?
import myFn from "./01.js";
myFn();
或者整体导出
01.js
let obj = {
fn() {
? console.log("hello");
},
num: 10
};
export default obj;
?
02.js
import myobj from "./01.js";
console.log(myobj.num);
myobj.fn();
export和export default的区别
-
export与export default均可用于导出常量、函数、文件、模块等 -
你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用 -
在一个文件或模块中，export、import可以有多个，export default仅有一个 -
通过export方式导出，在导入时要加{ }，export default则不需要
Promise
语法
Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。
|