ES6 开发常用新特性以及简述ES7

Posted 2021-01-16 ljx20180807

一、关于变量

ES6新增：块级作用域变量

1、let定义块级作用域变量

• 没有变量的提升，必须先声明后使用
• let声明的变量，不能与前面的let，var，conset声明的变量重名

{   
   {
      console.log(a)    // 报错  必须先声明再使用
      let a = 10;       // 只在当前大括号可以使用
      var b = "abc";    // 全局作用域变量
      console.log(a);   // 10
      // let a = 10     // 报错 Uncaught SyntaxError: Identifier ‘a‘ has already been declared
      console.log(b);   // bac
   }
   console.log(b);      // abc  var 存在变量提升所以不会报错
   console.log(a);      // 报错 let 不存在变量提升 有作用域问题 只能在大括号中使用
}

2、const 定义只读变量

• const声明变量的同时必须初始化赋值，一旦初始化完毕就不允许修改
• const声明变量也是一个块级作用域变量
• const声明的变量没有“变量的提升”，必须先声明后使用
• const声明的变量不能与前面的let， var ， const声明的变量重名

{
   const CONSTANT = 100
   console.log(CONSTANT) // 100 只能在括号里使用
}
   console.log(CONSTANT) // CONSTANT is not defined  报错  也是作用域问题

二、关于函数

1、ES6可以给形参函数设置默认值

就是说，当我们调用函数时，如果设置了默认形参，即使没给函数传入实参，那么函数的实参就是默认形参。

function fun2(a = 1, b= 2){
    console.log(a,b)  // 1,2
}
fun2(10,20);  // 10 20
fun2(100);   // 100 2  没有传参  则取初始默认值

在构造函数中也可是使用的

function Person(name, age, sex = "男"){
    this.name = name;
    this.age = age;
    this.sex = sex;
}
var p1 = new Person("张三", 20);
console.log(p1)     // Person {name: "张三", age: 20, sex: "男"}
var p2 = new Person("李四", 30);
console.log(p2)     // Person {name: "李四", age: 30, sex: "男"}
var p3 = new Person("王五", 20, "女");
console.log(p3)     // Person {name: "王五", age: 20, sex: "女"

2、箭头函数

// 正常函数
var fun3 = function(a){
    console.log(a);
}
// 箭头函数  区别在于 this 的指向    开发中建议都有箭头函数  能省去很多代码
var fun3 = (a)=>{console.log(a);}
fun3(999);

复习一下this的认识

1.在函数体外，this指的就是window对象
2.在函数替内，谁调用函数this就指向谁
3.在构造函数中，this指的是新创建的对象
4.在html标签中，this指的是当前的这个标签元素
5.在ES6中，对于箭头函数，它本身没有this，要看它在哪里创建的，和当前函数的作用域, 通俗说由执行上下文确定。

三、... 扩展运算符   可以将对象或者数组里面的值展开

1、对象用法

const a = [1, 2, 3]
console.log(a) // 1 2 3
const b = {a: 1, b: 2}
console.log({c: 3, ...b}) // {a: 1, b: 2, c: 3}

2、在数组之前加上三个点（...）

var arr = [1,2,3,4,5];
console.log(arr);    // [1, 2, 3, 4, 5]
console.log(...arr)  // 1 2 3 4 5

3、可以根据数组的展开运算用数组给函数批量的传参 （用的比较多）

function fun5(a,b,c,d,e,f){
    console.log(a,b,c,d,e,f)
}

fun5([1,2,3,4,5])  // [1, 2, 3, 4, 5] undefined undefined undefined undefined undefine

fun5(...[11,22,33,44,55,66]) // 11 22 33 44 55 66

四、关于apply和call

apply和call，都是对象本身没有某个属性或者方法，去引用其他对象的属性或方法，也就是说两者都可以改变this的属性

不同之处

apply(this的指向，数组/arguments)
call(this的指向，参数1，参数2，参数3)

var name ="window的name";
var obj = {
    name:"obj的name",
    showName:function(v1,v2,v3){

        console.log(v1,v2,v3)
    }
}
obj.showName();
obj.showName.apply(window,[10,20,30]); // 10 20 30
// apply括号里的是谁，调用的前面的函数里面的this就是谁
obj.showName.call(window,10,20,30) // 10  20  30
var color = "yellow";
function showColor(){
    console.log(this.color)
}
var obj = {
    color:"red",
}
showColor(); // yellow
showColor.apply(obj); // red
showColor.call(obj); // red
showColor.apply(this); // yellow
showColor.call(window); // yellow

五、关于解构赋值

1、数组的解构赋值

  var [a,b,c] = [11,22,33]
  console.log(a,b,c)    //  11 22 33
  var [e,[f,g],k] = [1,[2,3],5]
  console.log(e,f,g,k)  //  1 2 3 5

2、对象的解构赋值

 var{name,age}={name:"张三", age:"20"}
 console.log(name, age)  //  张三 20

 // 以前我们互换两个变量的值，需要借助第三个变量，利用解构赋值，就方便很多了
 var f1 = 88;
 var f2 = 99;
 [f1,f2] = [f2 ,f1];
 console.log(f1, f2) // 99 88

3、解构json

 var jike = {"name":"tom","age":"23","sex":"男"};
 var {name,age,sex}=jike;
 console.log(name,age,sex)//tom 23 男

 function cal(a,b){
    var ret1 = a+b;
    var ret2 = a-b;
    var ret3 = a*b;
    var ret4 = a/b;
    return [ret1,ret2,ret3,ret4]
 }
 var [r1,r2,r3,r4] = cal(10,5);
 console.log(r1,r2,r3,r4)  // 15 5 50 2

六、创建对象

ES6中创建对象  class

class className{
    // 肯定存在一个构造函数 constructor  如果不写构造函数，有一个默认的构造函数,内容为空
    constructor(){}  // 注意：这里不需要逗号
    // 下面是函数属性 比如属性有run  dark  函数和对象都可以
    run(){}
    dark(){}
}

举个例子

class Person{
    // 肯定存在一个构造函数 construtor
    constructor(name,age,sex,nativePlace){
        this.name=name; // 注意：这里是分号
        this.age=age;
        this.sex=sex;
        this.nativePlace=nativePlace;
    }
    // 下面是函数属性
    eat(){console.log("红烧排骨")}
    study(){console.log("英文")}
    play(){console.log("敲代码")}
}

var sunShine = new Person("fanfan","22","女","黑龙江");
console.log(sunShine) // Person {name: "fanfan", age: "22", sex: "女", nativePlace: "黑龙江"}

七、Promise 对象是一个构造函数，用来生成Promise实例。

const promise = new Promise(function(resolve, reject) {
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});
// 成功
promise.then(data => {
  console.log(data );
});
// 错误  异常
promise.catch(error => {
  console.log(error );
});

八、Set（）和Map（）

set（）有序列表集合（没有重复） 数组去重利器

Set()是指有序列表集合 (set中的元素是没有重复的)

set包含的方法
add()、has()、delete()、clear()等

add() 添加

var s = new Set();
s.add(1);
s.add(window);
s.add(true);
s.add(1);
console.log(s);//一共三个元素
console.log(s.size)//数组的长度是3  
delete（value） 删除指定元素

//结合上栗
s.delete(window);
console.log(s)   //1  true
console.log(s.size)   //2
has( value )用来判断指定的值是否在set集合中
存在返回true 不存在返回false

//结合上栗
console.log( s.has(1) )//true
clear（） 同来清空set集合的

//结合上栗
s.clear()
console.log(s)//此时为空
举个例子：生成10个1-20的随机数，要求不可以重复
var arr3 = new Set();
 while(arr3.size<10){
    var yuan = parseInt(Math.random() * (20 - 1 + 1) + 1);
    arr3.add(yuan);     
 }
 console.log(arr3)

Map() 用来存放键值对的集合

var map = new Map();
map.set("name","张三");
map.set("age",20);
console.log(map)    // Map {"name" => "张三", "age" => 20}
get(key)根据key值取得value

console.log( map.get("name"))  // 张三
has() 判断是否存在某个键值对
存在返回true 不存在返回fasle

console.log( map.has("age") )  // true
console.log( map.has("age1") ) // false
clear() 清空集合

map.clear();
console.log(map);//Map {}

九、模板字符串

const user = {
   name: ‘张三‘，
   age: 18    
}
console.log(`My name is ${user.name} and age is ${user.age}`) // My name is 张三 and age is 18

十、for of 值遍历

var someArray = [ "a", "b", "c" ];
for (v of someArray) {
    console.log(v); // 输出 a,b,c
}

十一、Proxies  Proxy可以监听对象身上发生了什么事情，并在这些事情发生后执行一些相应的操作。一下子让我们对一个对象有了很强的追踪能力，同时在数据绑定方面也很有用处

// 定义被侦听的目标对象
var engineer = { name: ‘Joe Sixpack‘, salary: 50 };
// 定义处理程序
var interceptor = {
  set: function (receiver, property, value) {
    console.log(property, ‘is changed to‘, value);
    receiver[property] = value;
  }
};
// 创建代理以进行侦听
engineer = Proxy(engineer, interceptor);
// 做一些改动来触发代理
engineer.salary = 60; // 控制台输出：salary is changed to 60

十二、 简述Es7 

一、异步函数（async/await） 常用利器

var fs = require(‘fs‘);
var readFile = function (fileName){
  // 需要被await的话 就用promise包装
  return new Promise(function (resolve, reject){
    fs.readFile(fileName, function(error, data){
      if (error) reject(error);
      resolve(data);
    });
  });
};
// await 等待的是一个promise对象
var asyncReadFile = async function (){
  // 当 f1 执行完毕后 f2 才会执行
  var f1 = await readFile(‘/etc/fstab‘);
  var f2 = await readFile(‘/etc/shells‘);
  console.log(f1.toString());
  console.log(f2.toString());
}

二 、string中加入include方法

includes("字符"); 用于判断字符串中是否包含某个字符
存在返回true 不存在返回false

includes("字符",startIndex); 用于判断字符串中下标startIndex是否是某个字符
是返回true 不是返回false

var str = "hello";
console.log( str.includes("e") )     // true
console.log( str.includes("e",3) );  // false

三、求幂运算

console.log(3**2)  // 9

四、Object.values/Object.entries

Object.values和 Object.entries是在ES2017规格中，它和Object.keys类似，返回数组类型，其序号和Object.keys序号对应。
Object.values,Object.entries和Object.keys各自项返回是数组，相对应包括key,value或者可枚举特定对象property/attribute

五、字符填充函数padStart 和 padEnd

console.log(‘0.00‘.padStart(20))           // 0.00   
console.log(‘10,000.00‘.padStart(20))      // 10,000.00
console.log(‘250,000.00‘.padStart(20))     //  250,000.00

以上只是些个人认为比较常用的欢迎指正不对不足之处，  详细的可以看看阮一峰大神的特篇  http://es6.ruanyifeng.com/