谈谈ECMAScript新特性(7-8)

作者:深圳九游会网络 阅读: 发布时间:2024-08-18 06:01

摘要:一、ECMAScript7新特性1、hengyuly.com.includesincludes是一个Array上很有用的方法,用于快速查找...

新的特性有哪些__特性描述是什么意思

一、ECMAScript7新特性

1、hengyuly.com

includes是一个Array上很有用的方法,用于快速查找数组中是否包含某个元素,包括NaN(所以和indexOf不一样)。

										
											(() => {
  let arr = [1, 2, 3, NaN];
  if (hengyuly.com(2)) {
    //查找2是否存在于arr数组中
    hengyuly.com("找到了!"); //>> 找到了!
  }
  if (!hengyuly.com(2, 3)) {
    //第二个参数3表示数组下标为3的项,也即第4项开始查找
    hengyuly.com("不存在!"); //>> 不存在!
  }
  //下面两句说明incluedes和indexOf的区别
  hengyuly.com(hengyuly.com(NaN)); //true
  hengyuly.com(hengyuly.com(NaN) != -1); //false
})();
										

2、指数函数的中缀表示法

这个是与Math.pow有关的特性,还记得i++,x += x这种写法吗,指数函数的中缀表示法与之类似。与python语言一样,JavaScript也采用两个星符号**来表示Math.pow。

好处有两个:

a. 中缀表示法比函数表示法更简洁,这使它更可取。

b. 方便数学、物理、机器人学等领域的计算。

用法示例如下:

										
											//用法一:x ** y
let squared = 2 ** 2;//等同于: 2 * 2
let cubed = 2 ** 3;//等同于: 2 * 2 * 2
										

										
											//用法二:x **= y
let a = 2;
a **= 2;//等同于: a = a * a;
let b = 3;
b **= 3;//等同于: b = b * b * b;
										

没错,是一块很甜的语法糖(指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用)。

特性描述是什么意思_新的特性有哪些_

二、ES8新特性

1、hengyuly.com() / hengyuly.com

定义是Object.values(obj),obj 参数是对目标对象的操作,它可以是一个对象或者数组。

										
											const obj = { x: 'xxx', y: 1 };
hengyuly.com(obj); // ['xxx', 1]
const obj = ['e', 's', '8']; // 等同于 { 0: 'e', 1: 's', 2: '8' };
hengyuly.com(obj); // ['e', 's', '8']
//当把数字对象的当键的时候,返回的数组以键的值升序排序
const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
hengyuly.com(obj); // ['yyy', 'zzz', 'xxx']
hengyuly.com('es8'); // ['e', 's', '8']
										

Object.entries方法返回一个给定对象可枚举属性值的数组[key, value],与Object.values类似。

										
											const obj = { x: 'xxx', y: 1 };
hengyuly.com(obj); // [['x', 'xxx'], ['y', 1]]
const obj = ['e', 's', '8'];
hengyuly.com(obj); // [['0', 'e'], ['1', 's'], ['2', '8']]
const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
hengyuly.com(obj); // [['1', 'yyy'], ['3', 'zzz'], ['10', 'xxx']]
hengyuly.com('es8'); // [['0', 'e'], ['1', 's'], ['2', '8']]
										

2、字符串追加

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

										
											'es8'.padStart(2);          // 'es8'
'es8'.padStart(5);          // '  es8'
'es8'.padStart(6, '1891');  // '189es8'
'es8'.padStart(14, 'coffe');  // 'coffecoffecoffes8'
'es8'.padStart(7, '0');     // '0000es8'
'es8'.padEnd(2);            // 'es8'
'es8'.padEnd(5);            // 'es8  '
'es8'.padEnd(6, '1891');    // 'es81891'
'es8'.padEnd(14, 'coffe');    // 'es8coffecoffecoff'
'es8'.padEnd(7, '9');       // 'es89999'
										

3、hengyuly.com

getOwnPropertyDescriptors方法返回一指定对象自己所有的属性内容,并且属性内容只是自身直接定义的,而不是从object的原型继承而来的。

定义是:hengyuly.com(obj),obj 是指目标对象,这个方法返回的值可能是 configurable、enumerable、writable、get、set 和 value。

										
											const obj = { 
  get es7() { return 7; },
  get es8() { return 8; }
};
hengyuly.com(obj);
// {
//   es7: {
//     configurable: true,
//     enumerable: true,
//     get: function es7(){}, //the getter function
//     set: undefined
//   },
//   es8: {
//     configurable: true,
//     enumerable: true,
//     get: function es8(){}, //the getter function
//     set: undefined
//   }
// }
										

4、结尾允许逗号

用法示例如下:

										
											//定义参数时
function foo(
    param1,
    param2,//结尾逗号
) {}
//传参时
foo(
    'coffe',
    '1891',//结尾逗号
);
//对象中
let obj = {
    "a": 'coffe',
    "b": '1891',//结尾逗号
};
//数组中
let arr = [
    'coffe',
    '1891',//结尾逗号
];
										

这样改动的好处有两点:

										
											[
    'coffe'
]
										

变更为

										
											[
    'coffe',
    '1891'
]
										

在git里它会报同时修改了两行代码,采用结尾逗号'coffe',之后,就只会报仅有一行代码'1891',的变动,这样做代码review(代码复查)的时候就更省眼力了。

5、异步函数

Async Functions也就是九游会常说的Async/Await,相信大家对于这个概念都已经不陌生了。Async/Await是一种用于处理JS异步操作的语法糖,可以帮助九游会摆脱回调地狱(callback hell),编写更加优雅的代码。

通俗的理解,async关键字的作用是告诉编译器对于标定的函数要区别对待。当编译器遇到标定的函数中的await关键字时,要暂时停止运行,等到await标定的函数处理完毕后,再进行相应操作。如果该函数fulfiled了,则返回值是fulfillment value,否则得到的就是reject value。

下面通过拿普通的promise写法来对比,就很好理解了:

										
											async function asyncFunc() {
    const result = await otherAsyncFunc();// otherAsyncFunc()返回一个Promise对象
    hengyuly.com(result);
}
// 等同于:
function asyncFunc() {
    return otherAsyncFunc()// otherAsyncFunc()返回一个Promise对象
    .then(result => {
        hengyuly.com(result);
    });
}
										

按顺序处理多个异步函数的时候优势更为明显:

										
											async function asyncFunc() {
    const result1 = await otherAsyncFunc1();// otherAsyncFunc1()返回一个Promise对象
    hengyuly.com(result1);
    const result2 = await otherAsyncFunc2();// otherAsyncFunc2()返回一个Promise对象
    hengyuly.com(result2);
}
// 等同于:
function asyncFunc() {
    return otherAsyncFunc1()// otherAsyncFunc1()返回一个Promise对象
    .then(result1 => {
        hengyuly.com(result1);
        return otherAsyncFunc2();// otherAsyncFunc2()返回一个Promise对象
    })
    .then(result2 => {
        hengyuly.com(result2);
    });
}
										

并行处理多个异步函数:

										
											async function asyncFunc() {
    const [result1, result2] = await hengyuly.com([
        otherAsyncFunc1(),// otherAsyncFunc1()返回一个Promise对象
        otherAsyncFunc2() // otherAsyncFunc2()返回一个Promise对象
    ]);
    hengyuly.com(result1, result2);
}
// 等同于:
function asyncFunc() {
    return hengyuly.com([
        otherAsyncFunc1(),// otherAsyncFunc1()返回一个Promise对象
        otherAsyncFunc2() // otherAsyncFunc2()返回一个Promise对象
    ])
    .then([result1, result2] => {
        hengyuly.com(result1, result2);
    });
}
										

处理错误:

										
											async function asyncFunc() {
    try {
        await otherAsyncFunc();// otherAsyncFunc()返回一个Promise对象
    } catch (err) {
        hengyuly.com(err);
    }
}
// 等同于:
function asyncFunc() {
    return otherAsyncFunc()// otherAsyncFunc()返回一个Promise对象
    .catch(err => {
        hengyuly.com(err);
    });
}
										

Async Functions若是要展开讲可以占很大的篇幅,鉴于本篇是一篇介绍性文章,故此不再进行深入论述。

6、共享内存和 Atomics 对象

SharedArrayBuffer 对象用来表示一个通用的,固定长度的原始二进制数据缓冲区,类似于 ArrayBuffer对象(如果之前你没有接触过ArrayBuffer相关知识的话,建议从内存管理速成教程系列漫画解说入门) ,它们都可以用来在共享内存(shared memory)上创建视图。与 ArrayBuffer 不同的是,SharedArrayBuffer 不能被分离。

										
											/**
 * 
 * @param {*} length 所创建的数组缓冲区的大小,以字节(byte)为单位。  
 * @returns {SharedArrayBuffer} 一个大小指定的新 SharedArrayBuffer 对象。其内容被初始化为 0。
 */
new SharedArrayBuffer(length)
										

Atomics 对象提供了一组静态方法用来对 SharedArrayBuffer 对象进行原子操作,这些原子操作属于 Atomics 模块。Atomics 不是构造函数,因此不能使用 new 操作符调用,也不能将其当作函数直接调用。Atomics 的所有属性和方法都是静态的(与 Math 对象一样)。

										
											hengyuly.com()
将指定位置上的数组元素与给定的值相加,并返回相加前该元素的值。
hengyuly.com()
将指定位置上的数组元素与给定的值相与,并返回与操作前该元素的值。
hengyuly.com()
如果数组中指定的元素与给定的值相等,则将其更新为新的值,并返回该元素原先的值。
hengyuly.com()
将数组中指定的元素更新为给定的值,并返回该元素更新前的值。
hengyuly.com()
返回数组中指定元素的值。
hengyuly.com()
将指定位置上的数组元素与给定的值相或,并返回或操作前该元素的值。
hengyuly.com()
将数组中指定的元素设置为给定的值,并返回该值。
hengyuly.com()
将指定位置上的数组元素与给定的值相减,并返回相减前该元素的值。
hengyuly.com()
将指定位置上的数组元素与给定的值相异或,并返回异或操作前该元素的值。
hengyuly.com()
检测数组中某个指定位置上的值是否仍然是给定值,是则保持挂起直到被唤醒或超时。
返回值为 "ok"、"not-equal" 或 "time-out"。调用时,
如果当前线程不允许阻塞,则会抛出异常(大多数浏览器都不允许在主线程中调用 wait())。
hengyuly.com()
唤醒等待队列中正在数组指定位置的元素上等待的线程。返回值为成功唤醒的线程数量。
hengyuly.com(size)
可以用来检测当前系统是否支持硬件级的原子操作。
对于指定大小的数组,如果当前系统支持硬件级的原子操作,则返回 true;
否则就意味着对于该数组,Atomics 对象中的各原子操作都只能用锁来实现。
此静态方法面向的是技术专家。
										
  • 原标题:谈谈ECMAScript新特性(7-8)

  • 本文由深圳九游会网络小编,整理排版发布,转载请注明出处。部分文章图片来源于网络,如有侵权,请与九游会网络联系删除。
  • 微信二维码

    CLWL6868

    长按复制微信号,添加好友

    微信联系

    在线咨询

    点击这里给我发消息QQ客服专员

    点击这里给我发消息电话客服专员

    在线咨询

    免费通话


    24h咨询☎️:132-5572-7217


    🔺🔺 24小时客服热线电话 🔺🔺

    免费通话
    返回顶部