ES6基础（入门笔记）

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('男');

总结：

1. 通过class 关键字创建类, 类名我们还是习惯性定义首字母大写

2. 类里面有个constructor 函数,可以接受传递过来的参数,同时返回实例对象

3. constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自动生成这个函数

4. 多个函数方法之间不需要添加逗号分隔

5. 生成实例 new 不能省略

6. 语法规范, 创建类 类名后面不要加小括号,生成实例 类名后面加小括号, 构造函数不需要加function

类的继承

• 语法(extends)

// 父类
class Father{   
} 
​
// 子类继承父类
class  Son  extends Father {  
}  

super

• 子类使用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  调用了继承的父类的加法方法

面向对象总结

1. 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的

2. 继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则)

3. 如果子类想要继承父类的方法,同时在自己内部扩展自己的方法,利用super 调用父类的构造函数,super 必须在子类this之前调用

4. constructor中的this指向的是new出来的实例对象

5. 自定义的方法,一般也指向的new出来的实例对象

6. 绑定事件之后this指向的就是触发事件的事件源

模块化

作用

模块化主要是把一个大的程序文件，分成很多小的程序文件，主要有下面几个作用：

1. 防止变量或者函数名冲突

2. 代码复用

3. 便于后期代码维护

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的区别

1. export与export default均可用于导出常量、函数、文件、模块等

2. 你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用

3. 在一个文件或模块中，export、import可以有多个，export default仅有一个

4. 通过export方式导出，在导入时要加{ }，export default则不需要

Promise

语法

Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。