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

Posted ljx20180807

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6 开发常用新特性以及简述ES7相关的知识,希望对你有一定的参考价值。

一、关于变量

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/

以上是关于ES6 开发常用新特性以及简述ES7的主要内容,如果未能解决你的问题,请参考以下文章

ES6/ES7/ES8常用特性和新特性

ES6/ES7/ES8常用特性和新特性

es6/es7/es8常用新特性总结(实用)文末有彩蛋

ES6、ES7、ES8、ES9、ES10新特性一览

ES6ES7ES8ES9ES10新特性

ES7-Es8 js代码片段