ES7/8新特性学习随笔

Posted 2021-02-16 fe-linjin

随着每年EcmaScript都会为js带来一些新特性，带来更多美化的编程体验，今天就走进一下es2016/2017所带来的新特性

• ES7新特性

  • includes()

  • 指数操作符

• ES8新特性

  • async/await

  • Object.values()

  • Object.entries()

  • Object.getOwnPropertyDescriptors()

  • String padding

  • 函数参数列表结尾允许逗号

?

开始学习ES7

1. Array.prototype.includes()

includes() 函数用来判断一个数组是否包含一个指定的值，如果包含则返回 true，否则返回false。
includes 函数与 indexOf 函数很相似，下面两个表达式是等价的：

arr.includes(x)
arr.indexOf(x) >= 0

接下来我们来判断数字中是否包含某个元素：

// es7之前的做法
let arr = ['react', 'angular', 'vue'];

if (arr.indexOf('react') !== -1)
{
    console.log('react存在');
}

// 使用es7的includes
let arr = ['react', 'angular', 'vue'];

if (arr.includes('react'))
{
    console.log('react存在');
}

?

2. 指数操作符
在es7中引入了指数运算符，**具有与Math.pow(..)等效的计算结果。

// es7之前的做法
function calculateExponent(base, exponent)
{
    if (exponent === 1)
    {
        return base;
    }
    else
    {
        return base * calculateExponent(base, exponent - 1);
    }
}

console.log(calculateExponent(2, 10)); // 输出1024
console.log(Math.pow(2, 10)); // 输出1024

// es7
console.log(2**10);// 输出1024

?

开始学习ES8

?

1. async/await

这一篇章内容比较多，拆分了一个学习笔记（点击进入）
?

2. Object.values()

Object.values()是一个与Object.keys()类似的新函数，但返回的是Object自身属性的所有值，不包括继承的值。
假设我们要遍历如下对象obj的所有值：

const obj = {a: 1, b: 2, c: 3};

// 不使用es8之前
const vals=Object.keys(obj).map(key=>obj[key]);
console.log(vals);//[1, 2, 3]

//es8
const values=Object.values(obj1);
console.log(values);//[1, 2, 3]

3.Object.entries

Object.entries()函数返回一个给定对象自身可枚举属性的键值对的数组。
接下来我们来遍历上文中的obj对象的所有属性的key和value：

// ES8以前
Object.keys(obj).forEach(key=>{
    console.log('key:'+key+' value:'+obj[key]);
})
//key:a value:1
//key:b value:2
//key:c value:3

// es8

for(let [key,value] of Object.entries(obj1)){
    console.log(`key: ${key} value:${value}`)
}
//key:a value:1
//key:b value:2
//key:c value:3

?

4. Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors()函数用来获取一个对象的所有自身属性的描述符,如果没有任何自身属性，则返回空对象。

函数原型：Object.getOwnPropertyDescriptors(obj)
返回obj对象的所有自身属性的描述符，如果没有任何自身属性，则返回空对象。

const obj2 = {
    name: 'Jine',
    get age() { return '18' }
};
Object.getOwnPropertyDescriptors(obj2)
// {
//   age: {
//     configurable: true,
//     enumerable: true,
//     get: function age(){}, //the getter function
//     set: undefined
//   },
//   name: {
//     configurable: true,
//     enumerable: true,
//      value:"Jine",
//      writable:true
//   }
// }

?

5.String padding

在ES8中String新增了两个实例函数String.prototype.padStart和String.prototype.padEnd，允许将空字符串或其他字符串添加到原始字符串的开头或结尾。

String.padStart(targetLength,[padString])

• targetLength:当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
• padString:(可选)填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断，此参数的缺省值为 “ “。

console.log('0.0'.padStart(4,'10')) //10.0
console.log('0.0'.padStart(20))//             0.0     

String.padEnd(targetLength,padString])

• targetLength:当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
• padString:(可选) 填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断，此参数的缺省值为 “ “；

console.log('0.0'.padEnd(4,'0')) //0.00
console.log('0.0'.padEnd(10,'0'))//0.00000000

?

6 函数参数列表结尾允许逗号

这是一个不痛不痒的更新，主要作用是方便使用git进行多人协作开发时修改同一个函数减少不必要的行变更。

// es8之前
//程序员A
var f = function(a,
  b
   ) {
  ...
  }

//程序员B
var f = function(a,
  b,   //变更行
  c   //变更行
   ) {
  ...
  }

//程序员C
var f = function(a,
  b,
  c,   //变更行
  d   //变更行
   ) {
  ...
  }

// es8
//程序员A
var f = function(a,
  b,
   ) {
  ...
  }

//程序员B
var f = function(a,
  b,
  c,   //变更行
   ) {
  ...
  }

//程序员C
var f = function(a,
  b,
  c,
  d,   //变更行
   ) {
  ...
  }