ES2019新特性的学习_柠浓_前端开发者

前言

前端技术更新的实在是太快了,各种框架百花齐放,随着NodeJs不断的兴起,各种构建工具也是层出不穷,这不,前两周尤雨溪开源了Vue.js3.0源码之后,很多大佬早已把源码剖析皮都不剩了;昨天NodeJs13.0又发布了,真的是学学学不动了,不过既然选择了程序员这条道路,就得时刻保持新技术的学习,ES2019(ES10)年初都发布了,但是项目中常用的还是ES6以及核心版本,所以还是有必须学习一下ES2019新特性的。

Vue.js3.0NodeJs13.0

注:调试代码浏览器版本: Google Chrome76.0.3809.132(64位)

注:调试代码浏览器版本: Google Chrome76.0.3809.132(64位)

1.Array.prototype flat

将多层级的数组平铺成一个数组在项目开发中还是常用的,flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回

语法

var newArray = arr.flat([depth])

var newArray = arr.flat([depth])

参数
指定要提取嵌套数组的结构深度,默认值为1,当层级超过一层的情况下,用Infinity可以把多级数组平铺为一个数组

返回值
一个包含将数组与子数组中所有元素的新数组

var arr=[1,2,[3,4,[5,6]]];
var arr2=arr.flat(); //[1, 2, 3, 4, [5, 6]]
var arr3=arr.flat(Infinity); //[1, 2, 3, 4, 5, 6] 

var arr=[1,2,[3,4,[5,6]]];
var arr2=arr.flat(); //[1, 2, 3, 4, [5, 6]]
var arr3=arr.flat(Infinity); //[1, 2, 3, 4, 5, 6]

2.String.prototype trimStart and trimEnd

js的String类型已经有trim()方法了,起作用时去除字符串前后空格

1.trimStart()方法从字符串的开头删除空格。trimLeft()是此方法的别名
返回值
一个新字符串,表示从其开头(左端)除去空格的调用字符串

var str="  Hello world  ";
var str1=str.trimStart(); //Hello world   
var str2=str.trimLeft(); //Hello world   

var str=" Hello world ";
var str1=str.trimStart(); //Hello world
var str2=str.trimLeft(); //Hello world

2.trimEnd()方法从一个字符串的末端移除空白字符。trimRight() 是这个方法的别名
返回值
一个新字符串,表示从调用字串的末(右)端除去空白

var str="  Hello world  ";
var str1=str.trimEnd(); //  Hello world 
var str2=str.trimRight(); //  Hello world

var str=" Hello world ";
var str1=str.trimEnd(); // Hello world
var str2=str.trimRight(); // Hello world

3.Object.fromEntries

Object.fromEntries是Object.entries的反向方法

Object.entries是将一个键值对对象,转换为Array

Object.fromEntries是将Array或Map等对象,转换为键值对对象

var arr=[
  ['name','tom'],
  ['age','18']
];
var arr1=Object.fromEntries(arr);
console.log(arr1);
// {name: "tom", age: "18"}

var arr=[
['name','tom'],
['age','18']
];
var arr1=Object.fromEntries(arr);
console.log(arr1);
// {name: "tom", age: "18"}

4.Function.prototype.toString

toString()方法返回一个表示当前函数源代码的字符串

toString()

function sayHello(){
  // say Hello
  alert('hello');
}
console.log(sayHello.toString());

// 打印结果
function sayHello(){
  // say Hello
  alert('hello');
}

function sayHello(){
// say Hello
alert('hello');
}
console.log(sayHello.toString());

// 打印结果
function sayHello(){
// say Hello
alert('hello');
}

5.可选的catch绑定(Catch Binding)

之前使用try catch的时候,catch有个必须要写的参数

try{
  alert(msg);
}catch(err){
  console.log(err);
}
// msg is not defined

try{
alert(msg);
}catch(err){
console.log(err);
}
// msg is not defined

现在catch后面不用写参数,方便了一点

try{
  // code
}catch{
  //
}

try{
// code
}catch{
//
}

6.JSON超集

此提议的动机是 JSON 字符串可以包含未转义的 U + 2028 LINE SEPARATOR 和 U + 2029 PARAGRAPH SEPARATOR 字符,而 ECMAScript 字符串则不能。在 ES2019 之前,它会产生错误SyntaxError: Invalid or unexpected token

const LS = eval(‘"\u2028"’);
const PS = eval("’\u2029’");

const LS = eval(‘"\u2028"’);
const PS = eval("’\u2029’");

以上只列了几个常用的ES2019新特性,并举例加以说明,恰逢今天有事10月24号程序员节,那就祝大家节日快乐,技术节节高升吧。

参考资料:
MDN

MDN

» 本文来自:前端开发者 » 《ES2019新特性的学习_柠浓_前端开发者》
» 本文链接地址:https://www.rokub.com/73852.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!