ES6语法

ES6是：ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现。

一、let和const

1、let与var的区别

let有块级作用域 {}，也就是说变量只能在{}里面起作用；var 声明的变量是函数作用作用域

let没有变量提升，var声明的变量可以提前调用；let不能提前使用

2、const声明的变量里面的内容不能更改

二、解构赋值

1、数组结构

let arr=[11,22,33,44];
let [a,b,c,d] = arr;
console.log(a);
console.log(b);
console.log(c);
console.log(d);

2、对象结构

let product={
id:"001",
price:4688,
isSale:true,
address:"北京"
}
let {id,price,isSale,address} = product;
console.log(id);
console.log(price);
console.log(isSale);
console.log(address);

三、箭头函数

1、无参写法

const fn = () => console.log("hello")

fn();

2、单句写法

const fn = (a, b) => a + b;
console.log(fn(10, 20));

3、箭头函数中的this

普通函数中的this指向window

function fn() {
    console.log(this); //window
  }
  fn();

箭头函数中的this指的是函数定义位置的上下文。

var obj = {
   name: "tom",
   say: () => {
     console.log(this);//window对象
   }
 };
 obj.say();

四、剩余参数

// ES5中自己定义一个函数 计算所有参数的和
        function sum () {
            //arguments 伪数组  代表函数中所有参数的集合
            //console.log(arguments);
            var sum = 0;
            for(var i = 0; i<arguments.length;i++){
                sum += arguments[i];
            }
            console.log(sum);
        }
        sum(10,20,30)
        // ES6中剩余参数的概念
        function sum2(...args){
            console.log(args);
            let sum = 0;
            args.forEach(item => {
                sum += item;
            });
            console.log(sum);
        }
        sum2(10,20,30)

五、扩展运算符

1、扩展运算符是把数组或者对象转换成用逗号分隔的参数序列

2、合并数组

 let arr1 = ["a", "b", "c"];
      let arr2 = ["d", "e", "f"];
​
      let arr3 = [...arr1, ...arr2]; //['a','b','c','d','e','f']
      console.log(arr3);

六、Array扩展

1、find方法：find是查找数组中符合条件的成员，如果没有找到返回undefined

2、findindex：findIndex是返回满足条件的索引号，查不到返回返回-1

3、includes：判断值是否存在数组中

4、set：去掉数组中重复的

七、字符串扩展

1、模板字符串的特点：

• 模板字符串可以解析变量

• 模板字符串里面可以换行，美观

• 模板字符串中可以嵌套函数

2、startsWith和endsWith

startsWith是判断字符串以什么开头 endsWith是判断字符串以什么结束

八、面向对象

1、创建对象

function Person(name,age){
    this.name=name;
    this.age=age;
}
​
var obj2=new Person('name',23);//实例化构造函数，创建对象

2、类

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

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

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

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

• 生成实例 new 不能省略

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

class Person{
            constructor(name,age){
                this.name = name;
                this.age = age;
            }
            // 行为
            say(){
                console.log(this.name + this.age + "会说话");
            }
            study(){
                console.log(this.name + this.age+ "会敲代码");
            }
        }
        let person1 = new Person("王建国",18);
        let person2 = new Person("啦啦啦",20);
        // 调用方法  实例化出来的对象.方法名()
        person1.say();
        person1.study();

3、类的继承

// 父类
class Father{   
} 

// 子类继承父类
class  Son  extends Father {  
}  
  实例
  // 父类
        class Father{
            constructor(x,y){
                this.x = x;
                this.y = y;
            }
            getSum(){
                console.log(this.x+this.y);
            }
        }
        var fa = new Father(10,20);
        fa.getSum();
        // 子类继承父类
        class Son extends Father{//子类添加自定义的方法
            constructor(x,y,z){
                super(x,y);//子类使用super关键字访问父类的方法
                this.z = z;
            }
            // 重写
            getSum(){
                console.log(this.x+this.y+this.z);
            }
        }
        var son1 = new Son(10,20,50);
        son1.getSum();

九、模块化

1、作用

• 防止变量或者函数名冲突

• 代码复用

• 便于后期代码维护

2、export和import

先生成json文件 npm init -y 再在文件里添加type:module

导入
export let num = 10;
export function fn() {
  console.log("hello");
}

导出
import { num, fn } from "./01.js";
console.log(num);
fn();

在vscode中按住ctrl+` 打开cmd命令行工具，输入node index.js，

3、default export

方式一：

export default function fn() {
  console.log("hello");
}

import myFn from "./01.js";
myFn();

注意export default导出的函数或者变量在引入的时候不需要添加{},变量或函数名可以和源文件中的名称不一致。

方式二：

let obj = {
  fn() {
    console.log("hello");
  },
  num: 10
};
export default obj;

import myobj from "./01.js";
console.log(myobj.num);
myobj.fn();

4、export和export default的区别

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

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

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

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