ES7的新特性

ES7的新特性

ES7 特性:

1.Array.prototype.includes
2.Exponentiation Operator(求幂运算)

一,Array.prototype.includes

Array.prototype.includes用法容易和简单。它是一个替代indexOf,开发人员用来检查数组中是否存在值,indexOf是一种尴尬的使用,因为它返回一个元素在数组中的位置或者-1当这样的元素不能被找到的情况下。所以它返回一个数字,而不是一个布尔值。开发人员需要实施额外的检查。在ES6,要检查是否存在值你需要做一些如下的小技巧,因为他们没有匹配到值,Array.prototype.indexOf返回-1变成了true(转换成true),但是当匹配的元素为0位置时候,该数组包含元素,却变成了false。includes在一个数组或者列表中检查是否存在一个值。

let arr = [‘react‘, ‘angular‘, ‘vue‘]

// WRONG
if (arr.indexOf(‘react‘)) { // 0 -> evaluates to false, definitely as we expected
  console.log(‘Can use React‘) // this line would never be executed
}

// Correct
if (arr.indexOf(‘react‘) !== -1) {
  console.log(‘Can use React‘)
}

使用一点点hack 位运算符 ~ 使代码更加紧凑一些,因为~(位异或)对任何数字相当于-(a + 1):

let arr = [‘react‘, ‘angular‘, ‘vue‘]

// Correct
if (~arr.indexOf(‘react‘)) {
  console.log(‘Can use React‘)
}

在ES7中使用includes代码如下:

let arr = [‘react‘, ‘angular‘, ‘vue‘]

// Correct
if (arr.includes(‘react‘)) {
  console.log(‘Can use React‘)
}

同时还可以在字符串中使用includes代码如下:

let str = ‘React-Native‘

// Correct
if (str.toLowerCase().includes(‘react‘)) {  // true
  console.log(‘Found "react"‘)
}

二,Exponentiation Operator(求幂运算)**

求幂运算大多数是为开发者做一些数学计算,对于3D,VR,SVG还有数据可视化非常有用。在ES6或者早些版本,你不得不创建一个循环,创建一个递归函数或者使用Math.pow,在ES6/2015ES,你能使用Math.pow创建一个短的递归箭头函数

calculateExponent = (base, exponent) => base*((--exponent>1)?calculateExponent(base, exponent):base)
console.log(calculateExponent(7,2) === Math.pow(7,2)) // true
console.log(calculateExponent(2,7) === Math.pow(2,7)) // true

在ES7 /ES2016,以数学向导的开发者可以使用更短的语法:

let a = 7 ** 2
let b = 2 ** 7
console.log(a === Math.pow(7,2)) // true
console.log(b === Math.pow(2,7)) // true

原文地址:https://www.cnblogs.com/jackson-zhangjiang/p/9783095.html

时间: 2024-10-24 10:37:03

ES7的新特性的相关文章

ES7/8新特性学习随笔

随着每年EcmaScript都会为js带来一些新特性,带来更多美化的编程体验,今天就走进一下es2016/2017所带来的新特性 ES7新特性 includes() 指数操作符 ES8新特性 async/await Object.values() Object.entries() Object.getOwnPropertyDescriptors() String padding 函数参数列表结尾允许逗号 ? 开始学习ES7 1. Array.prototype.includes() includ

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

ES全称ECMAScript,ECMAScript是ECMA制定的标准化脚本语言.目前JavaScript使用的ECMAScript版本为ECMA-417.关于ECMA的最新资讯可以浏览 ECMA news查看. ECMA规范最终由TC39敲定.TC39由包括浏览器厂商在内的各方组成,他们开会推动JavaScript提案沿着一条严格的发展道路前进. 从提案到入选ECMA规范主要有以下几个阶段: Stage 0: strawman——最初想法的提交. Stage 1: proposal(提案)——

TypeScript系列1-1.5版本新特性

1. 简介 随着PC端快速向移动端迁移,移动(体验)优先的概念也越来越响.由于ReactJS目前移动端仅仅支持iOS,因此移动端Web开发框架只能选择: AngularJS/Angula2 + Ionic框架 + Cordova.想要学习好Angula2以及阅读其代码, 就必须了解和学习TypeScript,也因此需要学习好ES6以及Web Component.近期将开始学习TypeScript语言. 下面先看看TypeScript语言的发展: 鉴于JavaScript这种脚本语言很难应用于大规

ES8新特性

ES8已经正式发布了,其新特性有:字符串填充.异步函数与共享内存与原子操作等.本文对着三个特性进行深入的解析.当然还有其他的一些特性. 1.字符串填充 ES8中为字符串添加了新的内置函数padStart().padEnd(),主要用于固定字符串的长度并且用指定的字符进行填充,以padStart为例,其例子如下: 1 var sourceStr="example", 2 targetLen=5, 3 padStr="foobar"; 4 sourceStr.padSt

ES6语法的新特性

ES6 就是ECMAScript 6是新版本JavaScript语言的标准.虽然目前已经更新到ES7,但是很多浏览器还不知处ES7语法,该标准仍在更新中,但目前部门网站都指出ES6的语法.目前ES6也是使用最多的最新的javaScript语言标准.要查看ES6的支持情况请点此. 在2009年ES5问世以后,javaScript的标准就一直没有更新.从那时起ES标准委员会就已经开始筹划新的ES标准,在2015年发布了ES6.ES6是ECMAScript 的第6个版本. 经过持续几年的磨砺,它已成为

web新特性 之 WebSocket

详情参见:你真的了解WebSocket吗?     WebSocket系列教程   HTML5新特性之WebSocket WebSocket协议是基于TCP的一种新的协议.WebSocket最初在HTML5规范中被引用为TCP连接,作为基于TCP的套接字API的占位符.它实现了浏览器与服务器全双工(full-duplex)通信.其本质是保持TCP连接,在浏览器和服务端通过Socket进行通信. 服务端与客户端的连接不断开,实现全双工的操作.及服务端或是客户端都会给对方发送消息. WebSocke

Java精品高级课,架构课,java8新特性,P2P金融项目,程序设计,功能设计,数据库设计,第三方支付,web安全,视频教程

36套精品Java架构师,高并发,高性能,高可用,分布式,集群,电商,缓存,性能调优,设计模式,项目实战,P2P金融项目,大型分布式电商实战视频教程 视频课程包含: 高级Java架构师包含:Spring boot.Spring  cloud.Dubbo.Elasticsearch,Redis.ActiveMQ.Nginx.Mycat.Spring.MongoDB.ZeroMQ.Git.Nosql.Jvm.Mecached.Netty.Nio.Mina.java8新特性,P2P金融项目,程序设计,

Atitit js es5 es6新特性 attilax总结

1.1. JavaScript发展时间轴:1 1.2. 以下是ES6排名前十的最佳特性列表(排名不分先后):1 1.3. Es6 支持情况 基本chrome ff 360se8全面支持了2 2. ECMAScript 2015(ES6)的十大特征 – WEB前端开发 - 专注前端开发,关注用户体验.html2 1.1. JavaScript发展时间轴: 1.1995:JavaScript诞生,它的初始名叫LiveScript. 2.1997:ECMAScript标准确立. 3.1999:ES3出

CSS3的新特性 行内盒子before和after

CSS3的新特性 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>before after</title> 6 <style type="text/css"> 7 /*在DIV1盒子内部前面*/ 8 #div1:before{ 9 width: 100p