ES6汇总

2024-03-22 09:36:46

ES6

1. let，const

1.1 let 与 var

let：ES6新增，用于声明变量，有块级作用域
var：ES5中用于声明变量的关键字，存在各种问题

var 存在的问题

// 1.声明提升
// 此处会正常打印，但这是存在问题的(原则上来说不能声明提前)
 console.log(name); 
 var name = "k";
 
 // 2. 变量覆盖
 var demo = "小明";
 var demo = "小红";
 // 此处会打印小红（同一个项目中，发生变量覆盖可能会导致数据丢失以及各种不可预知的bug，原则上来说：变量不能重名）
 console.log(demo)

// 3. 没有块级作用域
  function fn2(){
      for(var i = 0; i < 5; i++){
          // do something
      }
      // 此处会正常打印出 i 的值，但这是存在问题的
      // 原则上i是定义在循环体for之内的，只能在循环体内打印
      console.log(i);
  }
  fn2();

let不会存在上述问题：

// 1. 不会存在声明提前
 // 此处会报错（这里报错，原则上来说不能声明提前）
 console.log(name); 
 let name = "k";
 
 // 2. 不会有变量覆盖
 let demo = "小明";
 let demo = "小红";
 // 此处会报错,告诉你已经定义了此变量。避免了项目中存在变量覆盖的问题
 console.log(demo)

// 3. 有块级作用域
  function fn2(){
      for(let i = 0; i < 5; i++){
          // do something
      }
      // 此处会报错，无法打印.
      // i是定义在循环体之内的，循环体外当然无法打印 
      console.log(i);
  }
  fn2();

1.2 const

const 声明一个只读的常量，一旦声明，常量的值就不能改变
一般用于全局变量
通常变量名必须全部大写

const PI = "3.1415926";

2、解构赋值

解构赋值是对赋值运算符的扩展
针对数组或者对象进行模式匹配，然后对其中的变量进行赋值
代码简洁且易读，语义更加清晰明了，方便了复杂对象中数据字段获取

2.1 解构数组

let [a, b, c] = [1, 2, 3];
// a = 1，b = 2，c = 3 相当于重新定义了变量a,b,c，取值也更加方便

// , = 占位符
let arr = ["小明", "小花", "小鱼", "小猪"];
let [,,one] = arr; // 这里会取到小鱼

// 解构整个数组
let strArr = [...arr];
// 得到整个数组
console.log(strArr);

2.2 解构对象

// 基本解构
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'

let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'

// 剩余运算符
let {a, b, ...demo} = {a: 1, b: 2, c: 3, d: 4};
// a = 1
// b = 2
// demo = {c: 3, d: 4}

3. 模板字符串

模板字符串相当于加强版的字符串，用反引号 ``
除了作为普通字符串，还可以用来定义多行字符串，可以在字符串中加入变量和表达式

3.1 普通字符串

// 普通字符串
let string = "hello"+"k";     // hellok
// 如果想要换行
let string = "hello'\n'k";
// hello
// k

3.2 模板字符串

let str1  = "你的";
let str2 = "风";
// 模板字符串
let newStr = `我是${str1}${str2}`;
console.log(newStr)   //我是你的风

// 字符串中调用方法
function fn3(){
  return "风";
}
let string2= `我是你的${fn3()}`;
console.log(string2);  // 我是你的风

4. ES6 函数

4.1 箭头函数

箭头函数是一种更加简洁的函数书写方式
箭头函数本身没有作用域（无this）
箭头函数的this指向上一层，上下文决定其this
基本语法：参数 => 函数体

a. 基本用法

let fn = v => v;
//等价于
let fn = function(num){
 return num;
}
fn(100);  // 输出100

b. 带参数的写法

let fn2 = (num1,num2) => {
 let result = num1 + num2;
 return result;
}
fn2(3,2);  // 输出5

c. 箭头函数中的this指向问题

箭头函数体中的 this 对象，是定义函数时的对象，而不是使用函数时的对象。在函数定义的时候就已经决定了

function fn3(){
  console.log('----------');
  setTimeout(()=>{
    // 定义时，this 绑定的是 fn3 中的 this 对象
    console.log(this.a);
  },0)
}
var a = 10;
// fn3 的 this 对象为 {a: 10}，因为它指向全局: window.a
fn3.call({a: 18});  // 改变this指向，此时 a = 18

d. 箭头函数中的this指向问题

当我们代码里存在这样的代码：let self = this;
需要新建变量去保存this的时候

案例如下：

let Person1 = {
    'age': 18,
    'sayHello': function () {
      setTimeout(()=>{
        console.log(this.age);
      });
    }
};
var age = 20;
Person1.sayHello();  // 18

4.2 函数参数的扩展

a. 默认参数

// num为默认参数，如果不传，则默认为10
function fn(type, num=10){
 console.log(type, num);
}
fn(1);	// 打印 1，10
fn(1,2); // 打印 1，2 （此值会覆盖默认参数10）

需要注意的是：只有在未传递参数，或者参数为 undefined 时，才会使用默认参数，null 值被认为是有效的值传递。

b. 不定参数

// 此处的values是不定的，且无论你传多少个
function f(...values){
    console.log(values.length);
}
f(1,2);      // 2
f(1,2,3,4);  // 4

5、Class类

class (类)作为对象的模板被引入，可以通过 class 关键字定义类
class 的本质是 function，同样可以看成一个块
可以看作一个语法糖，让对象原型的写法更加清晰
更加标准的面向对象编程语法

5.1 类的定义

// 匿名类
let Demo = class {
    constructor(a) {
        this.a = a;
    }
}
// 命名类
let Demo = class Demo {
    constructor(a) {
        this.a = a;
    }
}

5.2 类的声明

class Demo {
    constructor(a) {
        this.a = a;
    }
}

注意：

类不能重复声明
类定义不会被提升，必须在访问前对类进行定义，否则就会报错。
类中方法不需要 function 关键字。
方法间不能加分号

5.3 类的主体

公共属性（依然可以定义在原型上）

class Demo{}
Demo.prototype.a = 2;

实例属性

class Demo {
    a = 2;
    constructor () {
        console.log(this.a);
    }
}

方法：constructor

class Demo{
    constructor(){
      console.log('我是构造器');
    }
}
new Demo(); // 我是构造器

如果不写constructor，也会默认添加

5.4 实例化对象

class Demo {
    constructor(a, b) {
        this.a = a;
        this.b = b;
        console.log('Demo');
    }
    sum() {
        return this.a + this.b;
    }
}
let demo1 = new Demo(2, 1);
let demo2 = new Demo(3, 1);
// 两者原型链是相等的
console.log(demo1._proto_ == demo2._proto_); // true

demo1._proto_.sub = function() {
    return this.a - this.b;
}
console.log(demo1.sub()); // 1
console.log(demo2.sub()); // 2

6. Symbol

1. Symbol是什么

Symbol是ES6 引入了一种新的原始数据类型，表示独一无二的值。
它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。

2. Symbol 语法

Symbol([description]) // description为Symbol的描述，不影响Symbol的唯一

3. Symbol的特点

独一无二，Symbol(‘a’)和Symbol(‘a’)是不相等的
不能使用new关键字创建对象，new Symbol()是不合法的
Symbol值无法参与运算，无法隐士转成字符串，会报TypeError
作为对象属性无法用.运算符，但是可以使用方括号[]
作为对象属性，无法被循环遍历，如for…in、for…of，也不会被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回
Object.getOwnPropertySymbols()方法，可以获取对象的所有 Symbol 属性名
Reflect.ownKeys()可以返回所有类型的键名，包括常规键名和 Symbol 键名

例子：

const a = Symbol('a');
const b = Symbol('a');
//Symbol('a')和Symbol('a')是不相等的
a == b; // false

//Symbol值无法参与运算，无法隐士转成字符串，会报TypeError
a + "Hello"; // TypeError: Cannot convert a Symbol value to a string
a.toString() + ""; // 'Symbol()'

const obj = { [a]: 1, [b]: 2, c: 3 };
Object.keys(obj); // ['c']
//Object.getOwnPropertySymbols()方法，可以获取对象的所有 Symbol 属性名
Object.getOwnPropertySymbols(obj); // [ Symbol(a), Symbol(a) ]
//Reflect.ownKeys()可以返回所有类型的键名，包括常规键名和 Symbol 键名
Reflect.ownKeys(obj); // [ 'c', Symbol(a), Symbol(a) ]
JSON.stringify(obj); // '{"c":3}'

const obj2 = { a }; 
obj2; // { a: Symbol(a) }，Key为string，值为Symbol

码农公寓

ES6