ES6总结上

Posted 2021-10-13 且听风呤dzq

es6总结上

ES6总结下

文章目录

• es6总结上
• 一、let与const 关键字
• 二、解构赋值
• 三、模板字符串和对象的扩展
• 四、参数默认值，不定参数，拓展参数
• 五、箭头操作符
• 六、Class类
• 七、增强的对象字面量

---

一、let与const 关键字

var与let差别：
var

1. 声明提升
2. 变量覆盖
3. 没有块级作用域

let

1. 不存在声明提前
2. 不会有变量覆盖
3. 有块级作用域

let的缺点：
暂时性死区：在一个块级作用域内，如果用let声明了某个变量，那么该变量就自动绑定了该作用域，该作用域就形成了一个封闭的作用域。

const

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

二、解构赋值

自动解析数组或对象中的值。比如若一个函数要返回多个值，常规的做法是返回一个对象，将每个值做为这个对象的属性返回。但在ES6中，利用解构这一特性，可以直接返回一个数组，然后数组中的值会自动被解析到对应接收该值的变量中。

1.变量的解构赋值
2.扩展运算符 …
3.对象的解构赋值

//变量的解构赋值
let [a, b, c] = [1, 2, 3];
// , = 占位符
let arr = ["小董", "小刘", "小王", "小涂"];
let [,,one] = arr; // 这里会取到小王

//扩展运算符 ... 
//将数组或者类数组结构拆分为参数序列
// 解构整个数组,输出数组中的每一个。
console.log(...arr);

//对象的解构赋值
let obj = {
   className : "dzq",
   age: 21
}
let {className} = obj; // 得到dzq
let {age} = obj;	// 得到21

//如果出现多层嵌套的对象需要解构
let dataJson = {
title:"abc",
name:"winne",
test:[{
   title:"ggg",
   desc:"对象解构赋值"
}]
}
//我们需要取出需要的两个title值（注意结构和键名）
let {title:oneTitle,test:[{title:twoTitle}]} = dataJson;


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

三、模板字符串和对象的扩展

模板字符串是用反引号 ``
允许换行，除了作为普通字符串，还可以用来定义多行字符串，可以在字符串中加入变量和表达式，变量和表达式要写在${}里面。

//模板字符串
//产生一个随机数
var num=Math.random();
//将这个数字输出到console
console.log(`your num is ${num}`);

对象的扩展
1.允许在对象之中，直接写变量
2.如果对象的属性值是个变量，并且该变量名跟属性名一样，那么可以省略为一个
3.对象中的函数属性，可以省略：function

   // ES6 允许在对象之中，直接写变量。
    const name = 'wjx';
    const names = {name};//等同于const names1 = {name: name};
    console.log(names);//{name: "wjx"}
    
	//变量名跟属性名一样，那么可以省略为一个,比如：
	function f(x, y) {
	  return {x, y}; // 等同于return {x: x, y: y};
	}
	f(1, 2) // {x: 1, y: 2}
	
	//对象中的函数属性，可以省略：function
	const h = {
	  method() {	// 等同于method: function() {
	    return "Hello!";
	  }
	};

四、参数默认值，不定参数，拓展参数

默认参数值
现在可以在定义函数的时候指定参数的默认值了，而不用像以前那样通过逻辑或操作符来达到目的了。
需要注意的是：只有在未传递参数，或者参数为 undefined 时，才会使用默认参数，null 值被认为是有效的值传递。

function sayHello(name){
	//传统的指定默认参数的方式
	var name=name||'dude';
	console.log('Hello '+name);
}
	//运用ES6的默认参数
function sayHello2(name='dude'){
	console.log(`Hello ${name}`);
}

不定参数
不定参数是在函数中使用命名参数同时接收不定数量的未命名参数。这只是一种语法糖，在以前的javascript代码中我们可以通过arguments变量来达到这一目的。不定参数的格式是三个句点后跟代表所有不定参数的变量名。
比如下面这个例子中，…x代表了所有传入add函数的参数。

//将所有参数相加的函数
function add(...x){
	return x.reduce((m,n)=>m+n);
}
//传递任意个数的参数
console.log(add(1,2,3));//输出：6
console.log(add(1,2,3,4,5));//输出：15

拓展参数
拓展参数则是另一种形式的语法糖，它允许传递数组或者类数组直接做为函数的参数而不用通过apply。

五、箭头操作符

箭头函数是一种更加简洁的函数书写方式
基本语法：参数 => 函数体 例(let fn=(m)=>{return m})
如果只有一个参数，可以省略小括号，如果想返回一个值，return连同大括号一起省 略，如果要返回一个对象的话，对象外面要套括号避免歧义

箭头函数中的this指向：指向的是函数定义时所在的对象 。
箭头函数不允许当作构造函数，也就是不能new

//只有一个参数，且只返回一个值写法
let fn = v => v;
/*等价于
let fn = function(num){
 return num;
}*/
fn(100);  // 输出100

//箭头函数中的this指向
let Person1 = {
    'age': 18,
    sayHello(){
      setTimeout(()=>{
        console.log(this.age);
      });
    }
};
var age = 20;
Person1.sayHello();  // 18

六、Class类

可以通过 class 关键字定义类，可以看作一个语法糖，让对象原型的写法更加清晰，对象的创建，继承更加直观了，并且父类方法的调用，实例化，静态方法和构造函数等概念都更加形象化，更加标准的面向对象编程语法。

class的注意点：
1.类的所有方法都定义在类的prototype属性上面。
2.定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了
3.方法之间不需要逗号分隔，加了会报错
4.ES6的class使用方法与ES5的构造函数一模一样
5.类不能重复声明，类定义不会被提升，必须在访问前对类进行定义，否则就会报错

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

//公共属性（依然可以定义在原型上）
class Demo{}
Demo.prototype.a = 2;

Class的基本语法之constructor
constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。constructor方法默认返回实例对象（即this），完全可以指定返回另外一个对象

Class的基本语法之类的调用方式
类必须使用new调用，否则会报错。这是它跟普通构造函数 ( 普通构造函数完全可以当做普通函数使用 ) 的一个主要区别，后者不用new也可以执行。

//实例化对象
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

七、增强的对象字面量

对象字面量被增强了，写法更加简洁与灵活，同时在定义对象的时候能够做的事情更多了。
具体表现在：
1.可以在对象字面量里面定义原型
2.定义方法可以不用function关键字
3.直接调用父类方法

这样一来，对象字面量与前面提到的类概念更加吻合，在编写面向对象的JavaScript时更加轻松方便了。

//通过对象字面量创建对象
var human = {
    breathe() {
        console.log('breathing...');
    }
};
var worker = {
    __proto__: human, //设置此对象的原型为human,相当于继承human
    company: 'freelancer',
    work() {
        console.log('working...');
    }
};
human.breathe();//输出 ‘breathing...’
//调用继承来的breathe方法
worker.breathe();//输出 ‘breathing...’