• 从javascript到es6的函数、数组、对象、运算符升级


    这一部分中,以es6函数的灵活定义和新增Symbol类型影响最大,其次是数组部分的扩充。Sysmbol降低了前端框架和复杂应用的组织难度,函数的灵活定义对框架的开发有大的帮助。数组部分的扩充对编写实际的业务功能有帮助。其余部分仅对缩减编码量有帮助。

    1、函数从js的规范定义到es6的灵活定义

    通常来说,js中函数定义中参数都是可写可不写,用的时候自己检查。当大规模组织函数形成有序的框架时,需要做额外的约定。如函数定义时必须明确定义形参,实际使用过程中,对某些不能提供实参的,需要提供默认值做支持。

    es6中对函数定义做了改善,特别是在定义形参时。同时还使用箭头函数做了简化处理。箭头函数不支持this,因为箭头函数体内部作用域找不到this指向的对象。

    示例代码如下:

    1. //js的标准不返工定义
    2. function getArea(x,y){
    3. if(!Number.isFinite(x)) x=0;
    4. if(!Number.isFinite(y)) y=0;
    5. return x*y;
    6. }
    7. //es6标准不返工定义
    8. function getArea(x=0,y=0,z=1){
    9. return x*y*z;
    10. }
    11. //es6缩水版定义
    12. let s=((r=1)=> 3.14*r*r);
    13. console.log(getArea(1,3));
    14. console.log(getArea(1,3,5));
    15. console.log(s(2));

    2、数组易用性的升级

    相较于js的数组,es6在数组的易用性上花了大力气,同时增加了Map、Set等数据结构,向Java这种面向对象的数据集合靠拢。这些都说明了,做前端的,你需要接触后端的东西;做后端的,你得想点办法增加前端的了解。

    es6中跟数组生成或初始化有关的方法:

    Array.from(): 将对象转化为数组

    Array.of():将一组值转化为数组

    copyWithin(target,start=0,end=this.length):在当前数组中,将start位置开始到end结束处的值复制到以target处开始,这会在当前数组中产生覆盖效果。

    fill():使用指定的值填充数组

    group():在原数组的基础上通过指定条件对数据分组,并返回分组情况。

    groupToMap():在原数组的基础上,通过指定条件对数据分组,并将数据结果以Map的形式返回

    es6中跟查找有关的函数:

    find():

    findIndex():

    findLast():

    findLastIndex():

    at():

    es6中跟调整数组内数据排列或结构情况的有关函数:

    flat():拉平内部嵌套数组

    flatMap():将数组内部增加一层嵌套结构

    toReversed():反序排列

    toSorted():排序

    toSpliced():分隔

    with():将指定位置的元素换成新的元素

    Array.prototype.sort():根据排序稳定性,分为stableSorting和unstableSorting,根据排序算法分类,插入排序、合并排序、冒泡排序等都是稳定的,堆排序、快速排序等是不稳定的。稳定排序是多次排序结果数据的位置和结果都是一致的,不稳定的排序在多次排序下,数据结果中数据的位置和结果可能不一致,特别是存在相同值的时候。调用排序方法时可以指定排序的稳定性参数。

    3、对象的升级

    es6在对象方面的升级主要体现在易用性上。

    对象变量的定义有两种,示例代码如下:

    1. let obj=new Object();
    2. let a={};

    es6比js多了属性名称可以在方括号内以表达式的方式定义。对象的遍历依然和js的类似,主要采用如下方式:

    a、for ... in

    b、Object.keys(obj)

    c、Object.getOwnPropertyNames(obj)

    d、Object.getOwnPropertySymbols(obj)

    e、Reflect.ownKeys(obj)

    es6规范化了Error对象来处理异常,AggregateError对象用来处理与promise相关的异常。

    es6还新增了一部分对象方法:

    Object.is():比较两个对象是否相同

    Object.assign():把第二个以后的对象内可枚举属性复制到第一个对象内,出现同名属性时以最后复制的为准

    Object.getOwnPropertyDescriptors():返回指定对象自身非继承属性的描述对象

    Object.setPrototypeOf():设置对象的原型

    Object.getPrototypeOf():获取对象的原型

    Object.keys(),Object.values(),Object.entries():跟对象的可枚举属性相关,均是对象本身非继承部分

    Object.fromEntrirs():将多组键值对转化为对象格式

    Object.hasOwn():判断对象属性是否为原生的,即非继承属性

    4、新数据类型Symbol

    es6引入这个新数据类型是为了解决单态问题。由于es6中提供了锁定内存地址的const类型,组合这个新数据类型Symbol,可以彻底的将一些数据变为不可修改的固定常量。Symbol本身可以支持查询功能,可以检验数据是否单态或者可新增。

    这种新的数据类型对大型的前端框架或者大型前端应用开发有极大的帮助作用。

    5、运算符部分的升级

    es6新增了指数级运算符,对链判断运算符、Null判断运算符、逻辑运算符的易用性上有提升。

    由于这些运算符大多是多目运算符,在使用时,特别时连续使用时需要用括号来保证执行次序。

    指数运算符: **

    链判断运算符: ?. ,表示如果?之前的部分不成立,就不在向后执行

    Null判断运算符:?? ,表示符号左侧部分是null或undefined,返回右侧的值

    逻辑赋值运算符:||=、&&=、??=相当于先进行逻辑运算,然后根据运算结果,再视情况进行赋值运算

    示例代码如下:

    1. console.log(2**5);
    2. let obj=new Object({b:10});
    3. let a={};
    4. console.log(obj?.b);
    5. console.log(a?.b);
    6. console.log(obj??b);
    7. console.log(a??b);
    8. console.log(obj.c);
    9. obj.c||=1;
    10. console.log(obj.c);

    运行结果:

    32

    10

    undefined

    {b: 10}

    {}

    undefined

    1

  • 相关阅读:
    050:vue+openlayers使用Popup组件显示经纬度坐标(代码示例)
    基于CNN实现谣言检测 - python 深度学习 机器学习 计算机竞赛
    el-input实现后缀图标和clearable的兼容,调整el-input clearable与自定义图标展示位置问题
    《Effective C++》条款23
    你管这叫操作系统源码(十五)
    ActiveReports.NET 17.1.X Carack
    ubuntu命令
    【无标题】chapter6卷积
    android背景音乐保活
    Java面试之JVM篇(offer 拿来吧你)
  • 原文地址:https://blog.csdn.net/seacean2000/article/details/125678350