前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >举例说明了十大ES6功能

举例说明了十大ES6功能

作者头像
frontoldman
发布于 2019-09-02 09:44:38
发布于 2019-09-02 09:44:38
72500
代码可运行
举报
文章被收录于专栏:樯橹代码樯橹代码
运行总次数:0
代码可运行

虽然ES6规范不是最近才发布,但我认为很多开发人员仍然不太熟悉。 主要原因是在规范发布之后,Web浏览器的支持可能很差。 目前,规范发布已经超过2年了,现在很多浏览器对ES6支持良好。 即使您(或您的客户)不使用最新版本的Web浏览器,也可以使用转换器(如Babel),在应用程序的构建过程中将ES6转换为ES5。 这意味着要向前迈出一步,学习ES6。

在本文中,我将尽量简单地介绍最有用的功能。 在本教程之后,您将拥有基本技能,并能够将其应用于实际项目中。 不要将其视为指南或文件。 我的目标是鼓励你深入挖掘并熟悉ES6。

1. const和let关键字

const使您能够定义常量(最终变量!)。 let让你定义变量。 这很棒,但是JavaScript中没有变量吗? 是有的,但是由var声明的变量具有函数范围,并被提升到顶部。 这意味着在声明之前可以使用一个变量。 让变量和常量具有块范围(由{}包围),在声明之前不能使用。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function f() {
  var x = 1
  let y = 2
  const z = 3
  {
    var x = 100
    let y = 200
    const z = 300
    console.log('x in block scope is', x)
    console.log('y in block scope is', y)
    console.log('z in block scope is', z)
  }
  console.log('x outside of block scope is', x)
  console.log('y outside of block scope is', y)
  console.log('z outside of block scope is', z)
}

f()

运行结果如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
x in block scope is 100 
y in block scope is 200 
z in block scope is 300 
x outside of block scope is 100 
y outside of block scope is 2 
z outside of block scope is 3 

2. 数组辅助方法

出现了新的很酷的功能,这有助于在很多情况下使用JS Array。 您实现了多少次的逻辑,如:过滤,检查是否有任何或所有元素符合条件,或者元素转换? 是不是很多种情景下都有用过? 现在语言本身自带这些很好用的功能。 在我看来,这是最有价值的功能:

forEach

对数组的每个元素执行传入的函数,将数组元素作为参数传递。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var colors = ['red', 'green', 'blue']

function print(val) {
  console.log(val)
}

colors.forEach(print)

运行结果如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
red 
green 
blue 

map

创建一个包含相同数量元素的新数组,但是由传入的函数返回元素。 它只是将每个数组元素转换成别的东西。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var colors = ['red', 'green', 'blue']

function capitalize(val) {
    return val.toUpperCase()
}

var capitalizedColors = colors.map(capitalize)

console.log(capitalizedColors)

运行结果如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
["RED","GREEN","BLUE"] 

filter

创建一个包含原始数组子集的新数组。 新数组包含的这些元素通过由传入的函数实现的测试,该函数应该返回true或false。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var values = [1, 60, 34, 30, 20, 5]

function lessThan20(val) {
    return val < 20
}

var valuesLessThan20 = values.filter(lessThan20)

console.log(valuesLessThan20)

运行结果如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
[1,5] 

find

找到通过传入的函数测试的第一个元素,该函数应该返回true或false。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var people = [
  {name: 'Jack', age: 50},
  {name: 'Michael', age: 9}, 
  {name: 'John', age: 40}, 
  {name: 'Ann', age: 19}, 
  {name: 'Elisabeth', age: 16}
]

function teenager(person) {
    return person.age > 10 && person.age < 20
}

var firstTeenager = people.find(teenager)

console.log('First found teenager:', firstTeenager.name)

运行结果如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
First found teenager: Ann 

every

检查数组的每个元素是否通过传入函数的测试,该函数应该返回true或false(每个函数都返回true,则结果为true,否则为false)。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var people = [
  {name: 'Jack', age: 50},
  {name: 'Michael', age: 9}, 
  {name: 'John', age: 40}, 
  {name: 'Ann', age: 19}, 
  {name: 'Elisabeth', age: 16}
]

function teenager(person) {
    return person.age > 10 && person.age < 20
}

var everyoneIsTeenager = people.every(teenager)

console.log('Everyone is teenager: ', everyoneIsTeenager)

运行结果如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Everyone is teenager:  false 

some

检查数组的任何元素是否通过由提供的函数实现的测试,该函数应该返回true或false。(有一个函数返回true,则结果true。否则结果为false)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var people = [
  {name: 'Jack', age: 50},
  {name: 'Michael', age: 9}, 
  {name: 'John', age: 40}, 
  {name: 'Ann', age: 19}, 
  {name: 'Elisabeth', age: 16}
]

function teenager(person) {
    return person.age > 10 && person.age < 20
}

var thereAreTeenagers = people.some(teenager)

console.log('There are teenagers:', thereAreTeenagers)

运行结果如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
There are teenagers: true 

reduce

方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。 累加器的初始值应作为reduce函数的第二个参数提供。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var array = [1, 2, 3, 4]

function sum(acc, value) {
  return acc + value
}

function product(acc, value) {
  return acc * value
}

var sumOfArrayElements = array.reduce(sum, 0)
var productOfArrayElements = array.reduce(product, 1)

console.log('Sum of', array, 'is', sumOfArrayElements)
console.log('Product of', array, 'is', productOfArrayElements)

运行结果如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Sum of [1,2,3,4] is 10 
Product of [1,2,3,4] is 24 

3.箭头函数

执行非常简单的函数(如上述的SumProduct)需要编写大量的模版。 有什么解决办法吗? 是的,可以尝试箭头函数!

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var array = [1, 2, 3, 4]

const sum = (acc, value) => acc + value
const product = (acc, value) => acc * value

var sumOfArrayElements = array.reduce(sum, 0)
var productOfArrayElements = array.reduce(product, 1)

箭头函数也可以内联。 它真的简化了代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var array = [1, 2, 3, 4]

var sumOfArrayElements = array.reduce((acc, value) => acc + value, 0)
var productOfArrayElements = array.reduce((acc, value) => acc * value, 1)

箭头函数也可以更复杂,并且有很多行代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var array = [1, 2, 3, 4]

const sum = (acc, value) => {
  const result = acc + value
  console.log(acc, ' plus ', value, ' is ', result)
  return result
}

var sumOfArrayElements = array.reduce(sum, 0)

4. 类

哪个Java开发人员在切换到JS项目时不会错过类? 谁不喜欢显式继承,像Java语言,而不是为原型继承编写魔术代码? 这引起了一些JS开发者反对,因为在ES6中已经引入了类。 他们不改变继承的概念。 它们只是原型继承的语法糖。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class Point {
    constructor(x, y) {
        this.x = x
        this.y = y
    }

    toString() {
        return '[X=' + this.x + ', Y=' + this.y + ']'
    }
}

class ColorPoint extends Point {
    static default() {
        return new ColorPoint(0, 0, 'black')
    }

    constructor(x, y, color) {
        super(x, y)
        this.color = color
    }

    toString() {
        return '[X=' + this.x + ', Y=' + this.y + ', color=' + this.color + ']'
    }
}

console.log('The first point is ' + new Point(2, 10))
console.log('The second point is ' + new ColorPoint(2, 10, 'green'))

运行结果如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
The first point is [X=2, Y=10] 
The second point is [X=2, Y=10, color=green] 
The default color point is [X=0, Y=0, color=black] 

5.对象功能增强

对象功能已被增强。 现在我们可以更容易地:

  1. 定义具有和已有变量名称相同且赋值的字段
  2. 定义函数
  3. 定义动态(计算)属性
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const color = 'red'
const point = {
  x: 5,
  y: 10,
  color,
  toString() {
    return 'X=' + this.x + ', Y=' + this.y + ', color=' + this.color
  },
  [ 'prop_' + 42 ]: 42
}

console.log('The point is ' + point)
console.log('The dynamic property is ' + point.prop_42)

运行结果如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
The point is X=5, Y=10, color=red 
The dynamic property is 42 

6. 模板字符串

谁喜欢写大字符串和变量连接? 我相信我们中只有少数人喜欢。 谁讨厌阅读这样的代码? 我确定大家都是,ES6引入了非常易于使用的字符串模板和变量的占位符。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function hello(firstName, lastName) {
  return `Good morning ${firstName} ${lastName}! 
How are you?`
}

console.log(hello('Jan', 'Kowalski'))

运行结果如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Good morning Jan Kowalski! 
How are you? 

请注意,我们可以写多行文本。

重要提示:使用反引号代替撇号来包装文本。

7. 默认函数参数

你不喜欢提供所有可能的函数参数? 使用默认值。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function sort(arr = [], direction = 'ascending') {
  console.log('I\'m going to sort the array', arr, direction)
}

sort([1, 2, 3])
sort([1, 2, 3], 'descending')

运行结果如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
I'm going to sort the array [1,2,3] ascending 
I'm going to sort the array [1,2,3] descending 

8. rest参数和扩展运算符

扩展

它可以将数组或对象内容提取为单个元素。

示例 - 制作数组的浅拷贝:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var array = ['red', 'blue', 'green']
var copyOfArray = [...array]

console.log('Copy of', array, 'is', copyOfArray)
console.log('Are', array, 'and', copyOfArray, 'same?', array === copyOfArray)

运行结果如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Copy of ["red","blue","green"] is ["red","blue","green"] 
Are ["red","blue","green"] and ["red","blue","green"] same? false 

示例 - 合并数组:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var defaultColors = ['red', 'blue', 'green']
var userDefinedColors = ['yellow', 'orange']

var mergedColors = [...defaultColors, ...userDefinedColors]

console.log('Merged colors', mergedColors)

运行结果如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Merged colors ["red","blue","green","yellow","orange"] 

rest参数

您要将前几个函数参数绑定到变量,其他变量作为数组绑定到单个变量吗? 现在你可以很容易地做到这一点。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function printColors(first, second, third, ...others) {
  console.log('Top three colors are ' + first + ', ' + second + ' and ' + third + '. Others are: ' + others)
}
printColors('yellow', 'blue', 'orange', 'white', 'black')

运行结果如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Top three colors are yellow, blue and orange. Others are: white,black 

9. 解构赋值

数组

从数组中提取所请求的元素并将其分配给变量。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function printFirstAndSecondElement([first, second]) {
    console.log('First element is ' + first + ', second is ' + second)
}

function printSecondAndFourthElement([, second, , fourth]) {
    console.log('Second element is ' + second + ', fourth is ' + fourth)
}

var array = [1, 2, 3, 4, 5]

printFirstAndSecondElement(array)
printSecondAndFourthElement(array)

运行结果如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
First element is 1, second is 2 
Second element is 2, fourth is 4 

对象

从对象中提取所请求的属性,并将其分配给与属性相同名称的变量。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function printBasicInfo({firstName, secondName, profession}) {
    console.log(firstName + ' ' + secondName + ' - ' + profession)
}

var person = {
  firstName: 'John',
  secondName: 'Smith',
  age: 33,
  children: 3,
  profession: 'teacher'
}

printBasicInfo(person)

运行结果如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
John Smith - teacher 

10. Promises

Promises承诺(是的,我知道这听起来很奇怪),你将会得到延期或长期运行任务的未来结果。 承诺有两个渠道:第一个为结果,第二个为潜在的错误。 要获取结果,您将回调函数作为“then”函数参数。 要处理错误,您将回调函数提供为“catch”函数参数。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function asyncFunc() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
          const result = Math.random();
          result > 0.5 ? resolve(result) : reject('Oppps....I cannot calculate')
        }, 1)
    });
}

for (let i=0; i<10; i++) {
    asyncFunc()
        .then(result => console.log('Result is: ' + result))
        .catch(result => console.log('Error: ' + result))
}

运行结果如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Result is: 0.7930997430022211 
Error: Oppps....I cannot calculate 
Result is: 0.6412258210597288 
Result is: 0.7890325910244533 
Error: Oppps....I cannot calculate 
Error: Oppps....I cannot calculate 
Result is: 0.8619834683310168 
Error: Oppps....I cannot calculate 
Error: Oppps....I cannot calculate 
Result is: 0.8258410427354488 

总结

我希望你喜欢这篇文章。 如果您想要一些练习,您可以使用沙箱进行学习过程:https://es6console.com/。 如果您需要更多信息,可以在这里找到

翻译自Top 10 ES6 features by example

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
Python——JSON
json.loads 用于解码 JSON 数据,将Json格式字符串解码转换成Python对象
羊羽shine
2019/05/29
9680
Python学习—json模块
json模块 四个常用方法 son.dumps() 将python对象编码成为json的字符串格式(最常用的是字典,列表集合等都可以) json.dump() 将python对象编码成为json的字符串格式并写入文件 json.loads() 将json的字符串格式解码成python对象 json.load() 将文件中的json的字符串格式解码成python对象 例子 import json #将python对象编码成为json的字符串格式 d = {'name':'haha
py3study
2020/01/13
6200
Python json中一直搞不清的load、loads、dump、dumps、eval
做接口测试的时候,有时候需要对字符串、json串进行一些转换,可是总是得花费一些时间,本质来说还是有可能是这几个方法的使用没有弄清楚。
虫无涯
2023/01/31
1.2K0
15.python json模块
JSON 的全称是 JavaScript Object Notation,即 JavaScript 对象符号,它是一种轻量级、跨平台、跨语言的数据交换格式,其设计意图是把所有事情都用设计的字符串来表示,这样既方便在互联网上传递信息,也方便人进行阅读。
猿说编程[Python和C]
2020/03/12
4830
15.python json模块
Python爬虫笔记5-JSON格式数
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,它使得人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成。适用于进行数据交互的场景,比如网站前台与后台之间的数据交互。 Python中自带了json模块,直接import json即可使用
py3study
2020/01/03
1.2K0
假期玩得开心也不忘充电,学习Python操作JSON,网络数据交换不用愁
国庆长假即将结束了,虽然不上班是很开心,但是假期里走走走、挤挤挤、等等等,也是挺辛苦哒。
Python猫
2019/04/10
6470
Python3~Json模块dumps、loads、dump、load函数介绍
json.dumps()用于将dict类型的数据转成str,因为如果直接将dict类型的数据写入json文件中会发生报错,因此在将数据写入时需要用到该函数。
双面人
2019/04/10
8560
Python3~Json模块dumps、loads、dump、load函数介绍
Python中json和pickle模快dumps()、loads()、dump()、load()序列化和反序列化实例
在python中,序列化可以理解为:把python的对象编码转换为json格式的字符串,反序列化可以理解为:把json格式字符串解码为python数据对象。在python的标准库中,专门提供了json库与pickle库来处理这部分。
王大力测试进阶之路
2019/10/25
1.3K0
Python解析JSON数据教程
JSON格式是网站和API使用的通用标准格式,现在主流的一些数据库(如PostgreSQL)都支持JSON格式。在本文中,我们将介绍如何使用Python处理JSON数据。首先,让我们先来看看JSON的定义。
用户7850017
2021/10/29
4.4K0
Python解析JSON数据教程
python 解析json loads dumps
认识 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript(Standard ECMA-262 3rd Edition - December 1999)的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生成。 引用模块 impor
程序员同行者
2018/07/02
6410
python中json.load()、json.loads()、json.dump()、json.dumps()的区别
"{ \"name\": \"anthony\", \"sex\": \"man\" }"
yaohong
2019/09/11
3.7K0
Python json.load/loads以及json.dump/dumps有什么区别?
网络传输是一种常见的数据传输场景,在传输前,我们先将编程语言对象序列化为json/xml文件;在传输后,在将json/xml文件反序列化为对应语言的对象。
Steve Wang
2022/01/05
1.4K0
半小时掌握Python的JSON模块
本文详细介绍了Python json模块的用法,本文适合Python GUI编程的小白上手。
疯狂软件李刚
2020/06/24
9120
你真的会用Python中的JSON吗,超级详细的JSON常用方法讲解,一文搞定JSON!
Python对象:通常是字典(对应于JSON对象)或列表(对应于JSON数组)。如果JSON字符串表示的是其他类型(如字符串、数字、布尔值、null),则返回相应的Python类型。
小白的大数据之旅
2024/11/20
2790
Python-数据解析-json模块
其中 loads() 和 load() 方法用于 python 对象的反序列化,dumps() 和 dump() 方法用于 python 对象的序列化。
小团子
2019/07/18
1.3K0
Python-数据解析-json模块
python︱处理与使用json格式的数据(json/UltraJSON/Demjson)、pickle模块
版权声明:博主原创文章,微信公众号:素质云笔记,转载请注明来源“素质云博客”,谢谢合作!! https://blog.csdn.net/sinat_26917383/article/details/77509447
悟乙己
2019/05/26
5.3K0
网络文件操作(一)、json模块
JSON(JavaScriptObjectNotation)格式最初是为JavaScript开发的,但随后成了一种常见文件格式,被包括python在内的众多语言采用。模块JSON让你能够将简单的python数据结构转储到文件中,并在程序再次运行时加载该文件中的数据,还可以使用JSON在python程序之间分享数据。更重要的是,JSON数据格式并非python专用的,这让你能够将JSON格式存储的数据与使用其他编程语言的分享。很多程序都要求用户输入某种信息,如让用户存储游戏首选项或提供可视化的数据。不管专注的是什么,程序都把用户提供的信息存储在列表和字典等数据结构中。用户关闭程序时,你几乎总是要保存他们提供的信息。它的典型结构如下:
狼啸风云
2019/10/22
2.9K0
Python爬虫(十六)_JSON模块与JsonPath
本篇将介绍使用,更多内容请参考:Python学习指南 数据提取之JSON与JsonPATH JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它是的人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成。适用于进行数据交互的场景,比如网站前台与后台之间的数据交互。 JSON和XML的比较可谓不相上下。 Python2.7中自带了JSON模块,直接import json就可以使用了。 官方博客:http://docs.python.org/library/
用户1174963
2018/01/17
2.4K0
Python爬虫(十六)_JSON模块与JsonPath
python读写json_python格式化json
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C、C++、Java、JavaScript、Perl、Python等)。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率)。
全栈程序员站长
2022/09/27
1.3K0
超详细JSON教程!那些Python中JSON的使用方式都在这里
Python对象:通常是字典(对应于JSON对象)或列表(对应于JSON数组)。如果JSON字符串表示的是其他类型(如字符串、数字、布尔值、null),则返回相应的Python类型。
小白的大数据之旅
2024/11/20
2.2K0
推荐阅读
相关推荐
Python——JSON
更多 >
LV.1
ICT自然语言处理实习
目录
  • 1. const和let关键字
  • 2. 数组辅助方法
    • forEach
    • map
    • filter
    • find
    • every
    • some
    • reduce
  • 3.箭头函数
  • 4. 类
  • 5.对象功能增强
  • 6. 模板字符串
  • 7. 默认函数参数
  • 8. rest参数和扩展运算符
    • 扩展
    • rest参数
  • 9. 解构赋值
    • 数组
    • 对象
  • 10. Promises
  • 总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文