百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程字典 > 正文

互联网WEB前端必备ES6(ECMAScript 6)学习

toyiye 2024-06-21 11:58 10 浏览 0 评论

ES 6简介

由ECMA(欧洲计算机制造联合会 )制定的标准

? 标准被称为ECMAScript或ECMA 262

? http://www.ecma-international.org/publications/standards/Ecma-262.htm

? ES 6在2015年发布,又称为ES 2015


新特性

? var / let / const

? Arrow functions

? Template Strings

? Destructuring

? Iterables & Looping

? arguments( Default / Spread / Rest)

ES 简介

? Classes

? Generators

? Collections ( Set / Map /

WeakSet / WeakMap)

? Proxy

? Promises

let

? 用法类似于var

? 声明的变量,只在let命令所在的代码块内有效


const

? 用来声明常量

? 一旦声明,常量的值就不能改变

? 不可随意修改,否则会导致SyntaxError(语法错误)

? const声明变量后必须要赋值

? 只在声明所在的块级作用域内有效

Arrow functions

? 箭头函数

? ES6允许使用"箭头"(=>)定义函数。

? 不支持 arguments

? 函数体内的this对象,绑定定义时所在的对象,而不是使用时所在的对象。

? this对象的指向是可变的,但是在箭头函数中,它是固定的

? 箭头函数可以让this指向固定化,这种特性很有利于封装回调函数

Template Strings

? 模板字符串

? 增强版的字符串,用反引号(`)标识

? 大括号内部可以进行运算,以及引用对象属性。

参数Arguments

Default arguments

? 函数参数的默认值

? 定义了默认值的参数,必须是函数的尾部参数

? 传入undefined,将触发该参数等于默认值,null 则没有这个效果

Rest参数

? ES6引入rest参数(...变量名)

? 用于获取函数的多余参数,

? rest参数搭配的变量是一个数组

? rest参数之后不能再有其他参数

Spread

? 扩展运算符

? 近似rest参数的逆运算

? 将一个数组,变为参数序列

解构Destructuring

数组的解构赋值

? ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值

? 不可对undefined或null进行解构

? 解构赋值允许指定默认值。

? 可用于具有Iterator接口数据结构

对象的解构赋值

? 对象的属性没有次序,变量必须与属性同名,才能取到正确的值

? 变量名与属性名不一致,需用冒号做匹配处理

Iterables & Looping

Iterator(遍历器)

? 遍历器(Iterator)是一种接口规格,任何对象只要部署这个接口,就可以完成遍历操作。它的作用有两个,一是为各种数据结构,提供一个统一的、简便的接口,二是使得对象的属性能够按某种次序排列。在ES6中,遍历操作特指for...of循环,即Iterator接口主要供for...of循环使用。

? 接口名 [Symbol.iterator]

for...of循环

? ES6中,一个对象只要部署了@@iterator方法,就被视为具有iterator接口,就可以用for...of循环遍历它的值。也就是说,for...of循环内部调用是原对象的 Symbol.iterator方法。

? for...of循环可以代替数组实例的

forEach方法

? 普通的对象,for...of结构不能直接使用,会报错,必须部署了iterator接口后才能使用

Generator

? 交出函数的执行权,暂停执行

? 在function和函数名之间有一个*

? 位置可以随意

? 执行过程中遇到yield就停止

? 调用函数不会立即执行,返回一个迭代器对象

? next方法,分阶段执行函数,返回当前阶段的信息(value表示yield后边的值,done表示是否执行完毕)

? 可以接受参数

Classes

? class关键字

? 在内部定义constructor和方法

? 一个class只能有一个constructor,默认为constructor(){}

? 实际上是通过prototype继承机制

? class的定义

? 块作用域、不存在变量提升、使用严格模式

? 如果有生成器方法,需要加*

? 有get和set方法

? 通过static创建静态方法

? 通过extends实现继承

? 在子类的构造器中必须在使用this之前调用super

? 由父类创建对象

? 如果没有super,需要返回对象

Collection

Set、Map、WeakSet、WeakMap

Set

? 类似数组,但里边的值是唯一的

? 对象比较的是引用,注意NaN是同一值

? Set中的值可以是任意的类型,包括数组、对象

? 创建Set:let set = new Set()

? 可以接受一个iterable对象(数组)

? 添加值:set.add(value),可链式调用

? 查看某个值是否存在:set.has(value),返回true和false

? 删除某个值:set.delete(value),返回true和false

? 清空Set:set.clear(),无返回值

? size属性,查看当前包含多少个元素:set.size

? keys方法返回值得迭代器

? valuses方法返回值得迭代器:默认的迭代方法

? entries方法返回[value,value]迭代器:迭代器每次输出一个数组,包含相等的两个值

? forEach方法遍历

Map

? 保存键值对,键是唯一的。

键的比较,NaN与NaN相同,其余使用===计算

? 键可以是任何类型,包括对象和数组

和JavaScript Object不一样,不会将键转为字符串

? 通过let map = new Map()创建

可以传递一个数组或者其他 iterable 对象,其元素或为键值对,或为两个元素的数组。

? size属性返回键值对的数量:map.size

? keys方法返回键名的迭代器

? values方法返回键值的迭代器

? entries方法返回所有成员的迭代器:默认遍历器接口

? forEach方法遍历所有的成员

WeakSet

和Set有着相似的API,但有些区别

? 键名必须是对象(null除外)

? 键名对象为弱引用,不影响垃圾回收机制

? 没有size属性

? 不能遍历

? 没有clear方法清除所有值

WeakMap

和Map的API相似,但有些不同

? 键名必须为对象(null除外)

? WeakMap键名所指对象不计入垃圾回收机制

? 没有size属性

? 不能遍历

? 没有clear方法

Proxy和Reflect

Proxy

? 功能:修改某些操作的默认行为

? let proxy = new Proxy(target, handler);

Promise

? 异步编程

? 有三种状态

pending、fulfilled、rejected

? Promise.prototype.then()

? Promise.prototype.catch()

? 静态方法

Promise.all()、Promise.race()、Promise.resolve()、Promise.reject()

Math

ES 6中新增了一些Math的静态函数。

Math.sign – 方法用来判断一个数到底是正数、负数、还是零。

它会返回五种值。

· 参数为正数,返回+1;

· 参数为负数,返回-1;

· 参数为0,返回0;

· 参数为-0,返回-0

· 其他值,返回NaN。

Math.trunc – 方法用于去除一个数的小数部分,返回整数部分。

Math.cbrt – 方法用于计算一个数的立方根。? ̄value

Math.expm1 – 返回ex - 1,即Math.exp(x) - 1

Math.log1p – 方法返回1 + x的自然对数,即Math.log(1 + x)。如果x小于-1,返回NaN

Math.log10 返回以10为底的x的对数。如果x小于0,则返回NaN。

Math.log2 – 返回以2为底的x的对数。如果x小于0,则返回NaN。

Math.sinh – 返回x的双曲正弦

Math.cosh – 返回x的双曲余弦

Math.tanh – 返回x的双曲正切

Math.asinh –返回x的反双曲正弦

Math.acosh – 返回x的反双曲余弦

Math.atanh 返回x的反双曲正切

Math.hypot – 方法返回所有参数的平方和的平方根。

Math.clz32 – 方法返回一个数的32位无符号整数形式有多少个前导0。

Math.imul – 方法返回两个数以32位带符号整数形式相乘的结果,返回的也是一个32位的带符号整数。

Math.fround – 方法返回一个数的单精度浮点数形式。

Number

Number.isNaN:用来检查一个值是否为NaN,只有对于NaN才返回true,非NaN一律返回false

Number.isFinite:用来检查一个数值是否为有限的,对于非数值一律返回false

Number.parseInt:等于全局方法parseInt()

Number.parseFloat:等于全局方法parseFloat()

Number.isInteger:用来判断一个值是否为整数。需要注意的是,在JavaScript内部,整数和浮点数是同样的储存方法,所以3和3.0被视为同一个值。

Number.EPSILON:新增一个极小的常量,用于浮点运算的精确处理

Number.MAX_SAFE_INTEGER:安全整数最大值

Number.MIN_SAFE_INTEGER:安全整数最小值

Number.isSafeInteger:是不是安全整数

Array

Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)

Array.of :方法用于将一组值,转换为数组。

Array.prototype.copyWithin在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。

Array.prototype.fill使用给定值,填充一个数组。

Array.prototype.find用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined

Array.prototype.findIndex返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1

Object

Object.assign :方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。

Object.is :判断两个对象是否一样,和===相似。但是NaN和NaN、+0和-0都返回true

String

String.prototype.startsWith:返回是否以某个字符串开始

String.prototype.endsWith:返回是否以某个字符串结尾

String.prototype.includes:返回字符串是否包含某个值

String.prototype.repeat:返回字符串重复N遍的值:'q'.repeat(2) //’qq’

相关推荐

为何越来越多的编程语言使用JSON(为什么编程)

JSON是JavascriptObjectNotation的缩写,意思是Javascript对象表示法,是一种易于人类阅读和对编程友好的文本数据传递方法,是JavaScript语言规范定义的一个子...

何时在数据库中使用 JSON(数据库用json格式存储)

在本文中,您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?,Devops,敏捷?,测试?以及?项目?管理?最新?,最热门?的?文章?,每天?花?...

MySQL 从零开始:05 数据类型(mysql数据类型有哪些,并举例)

前面的讲解中已经接触到了表的创建,表的创建是对字段的声明,比如:上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...

JSON对象花样进阶(json格式对象)

一、引言在现代Web开发中,JSON(JavaScriptObjectNotation)已经成为数据交换的标准格式。无论是从前端向后端发送数据,还是从后端接收数据,JSON都是不可或缺的一部分。...

深入理解 JSON 和 Form-data(json和formdata提交区别)

在讨论现代网络开发与API设计的语境下,理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里,特别值得关注的是两种主流数据格式:...

JSON 语法(json 语法 priority)

JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...

JSON语法详解(json的语法规则)

JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意:json的key是字符串,且必须是双引号,不能是单引号...

MySQL JSON数据类型操作(mysql的json)

概述mysql自5.7.8版本开始,就支持了json结构的数据存储和查询,这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库,在处理json这种非结构化的数据...

JSON的数据模式(json数据格式示例)

像XML模式一样,JSON数据格式也有Schema,这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...

前端学习——JSON格式详解(后端json格式)

JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...

什么是 JSON:详解 JSON 及其优势(什么叫json)

现在程序员还有谁不知道JSON吗?无论对于前端还是后端,JSON都是一种常见的数据格式。那么JSON到底是什么呢?JSON的定义...

PostgreSQL JSON 类型:处理结构化数据

PostgreSQL提供JSON类型,以存储结构化数据。JSON是一种开放的数据格式,可用于存储各种类型的值。什么是JSON类型?JSON类型表示JSON(JavaScriptO...

JavaScript:JSON、三种包装类(javascript 包)

JOSN:我们希望可以将一个对象在不同的语言中进行传递,以达到通信的目的,最佳方式就是将一个对象转换为字符串的形式JSON(JavaScriptObjectNotation)-JS的对象表示法...

Python数据分析 只要1分钟 教你玩转JSON 全程干货

Json简介:Json,全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...

比较一下JSON与XML两种数据格式?(json和xml哪个好)

JSON(JavaScriptObjectNotation)和XML(eXtensibleMarkupLanguage)是在日常开发中比较常用的两种数据格式,它们主要的作用就是用来进行数据的传...

取消回复欢迎 发表评论:

请填写验证码