ECMAScript新特性-创新互联
代码
创新互联长期为上1000家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为长子企业提供专业的成都做网站、网站制作,长子网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。ECMAScript概述ECMAScript 是脚本语言的标准化规范,也就是语言的语法。比如:怎样定义变量、怎样定义函数和逻辑运算等等。
那么ECMAScript 和 JavaScript 是何关系?
JavaScript 是ECMAScript 的扩展语言,JavaScript实现了ECMAScript。 比如在浏览器环境中 JavaScript 就是 ECMAScript 和 WebAPI的集合
ES(ECMAScript)于1997年被提出,2015年后基本保持一个版本的迭代
名称 | 标准版本 | 发布时间 |
---|---|---|
ECMAScript2019(ES2019) | 10 | 2019年6月 |
ECMAScript2018(ES2018) | 9 | 2018年6月 |
ECMAScript2017(ES2017) | 8 | 2017年6月 |
ECMAScript2016(ES2016) | 7 | 2016年6月 |
ECMAScript2015(ES2015) | 6 | 2015年6月 |
ECMAScript5.1(ES5.1) | 5.1 | 2011年6月 |
ECMAScript5(ES5) | 5 | 2009年12月 |
ECMAScript4(ES4) | 4 | 被放弃 |
ECMAScript3(ES3) | 3 | 1999年12月 |
ECMAScript2(ES2) | 2 | 1998年6月 |
ECMAScript1(ES1) | 1 | 1997年6月 |
ES2015 是最新ES标准比较典型的版本,主要在于
- 相比ES5.1变化较大
- 命名标准发生变化,按照年份命名
在有些书上或博客上对于ES6有两种意思,一种是特指(ES2015),另一种是泛指是指ES2015版本之后的所有版本。
ECMAScript新特性主要有以下内容:
- 解决原有语法上的的一些问题和不足 (var)
- 对原有语法进行增强 (对象解构)
- 全新的对象、全新的方法、全新的功能(class、promsie)
- 全新的数据类型和 数据结构(Symbol)
作用域:某个成员能够起作用的范围。
在ES2015之前,ES只有两种作用域:
- 全局作用域
- 函数作用域
在ES2015后,又增加了块级作用域。块级作用域:使用{} 中间的作用域。
在ES2015前没块级作用域作用域的概念,在{} 内容使用var 定义的变量,在{}外也可以访问,这样对于复杂代码是非常不安全的。
if(true) {
var foo_1 = "foo_1"
}
console.log(foo_1) // foo_1
在块作用域内使用let 声明变量,在{} 外部是不可以访问的:
if(true) {
let foo_2 = "foo_2"
}
// ReferenceError: foo_2 is not defined
console.log(foo_2)
在for 循环中会有会有两层嵌套的块级作用域,函数体中的作用域是嵌套在for 循环内部的单独的作用域
for(let i = 0;i< 3; i++) {
let i = "foo_3"
console.log(i)
}
上边代码我们可以简单的理解为下面:
let i = 0;
if(i< 3) {
let i = "foo_3"
console.log(i)
}
i++
if(i< 3) {
let i = "foo_3"
console.log(i)
}
i++
if(i< 3) {
let i = "foo_3"
console.log(i)
}
i++
let 声明的变量不会变量提升,所以在使用之前必须先声明
console.log(foo_4)
var foo_4 = "foo_4"
console.log(foo_5)
let foo_5 = "foo_5"
为啥ES2015不把var 废掉?
因为考虑到兼容,原来很多项目还在使用var
用于生成只读属性。 声明之时,就要赋值;声明之后,不可修改内存指向
const foo_6 = "foo_6"
const foo_7 = {
name: "hyb",
age: 18
}
foo_7.name = "hsf";
// TypeError: Assignment to constant variable.
// foo_7 = {}
var、let 、const 使用指南?
不用var; 主用const; 辅用let
当我们获取数组元素时,通常情况下通过下标获取
const arr = [100, 200, 300];
const firstObj = arr[0];
const secondObj = arr[1];
ES2015后我们可以通过数组解构获取元素。
const [arrFirst, arrSecond] = arr;
我们可以,获取指定位置的元素,剩余元素、和若获取元素为空时设置默认值
// 前面位置留空格
const [, arrSecond] = arr;
// 剩余元素
const [arrFirst, arrSecond2, ...rest] = arr;
// 默认值
const [arrFirst1,arrSecond3, arrThird, arrFour = 2] = arr;
console.log(arrSecond, rest ,arrFour)
对象解构数组时根据索引位置进行解构, 对象要根据key值进行解构
const obj1 = {
name: "hsf"
}
const name = "hyb";
// 如果我们提前已经定一个一个name 变量,肯定会冲突,那么起别名 和若解构出来为null, 设置默认值
const { name:nameAlias = "foo" , age = 2} = obj1;
console.log(nameAlias, age);
模版字符串在ES2016之前字符串换行和拼装字符串时
const name = "sanfen_hu"
const age = 18
// 换行
console.log(`fwfewfw\nwfee`)
// 拼接
let info1 = "my name is " + name + ",age is " + age + "."
console.log(info1)
ES2016后可以这样写
console.log(`fwfewfw
wfee`)
const info2 = `my name is ${name}, age is ${age}`;
console.log(info2)
在差值中我们可以写一些简单的逻辑
const value = 50;
const info3 = `average value is ${ 50< 60 ? 60 : value }`;
console.log(info3)
模版字符串标签函数
给模版字符串添加标签,标签其实就是一个函数,添加标签后,函数也会被执行,函数的第一个参数是分割后非模版变量切割后的数组,后面参数就是模版变量
// 会将字符串在插值处砍断,封装成数组
function tagFunction(string, name, age){
return "fefe";
}
const tagTemplate = tagFunction`my name is ${name},age is ${age}.`
console.log(tagTemplate)
字符串扩展的几个函数- includes 判断一个字符串是否包含另一个字符串
相比与indexOf ,从语义化角度讲includes更好,但是不能获取到索引下标 - startsWith 检测字符串是否以指定的子字符串开始
- endsWith 检测字符串是否以指定的子字符串结束
let foo = "sanfeng_hu"
console.log(foo.includes("feng"))
console.log(foo.indexOf("3feng"))
console.log(foo.startsWith("sanfeng"))
console.log(foo.endsWith("hu"))
箭头函数一个参数时,可以不用(), 函数体是单行时,可以不使用{},默认函数返回值就是当前表达式,当多条表达市时,要加{},需手动返回返回值。
参考资料ecma- ES新特性图
- ecma
你是否还在寻找稳定的海外服务器提供商?创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源,准确流量调度确保服务器高可用性,企业级服务器适合批量采购,新人活动首月15元起,快前往官网查看详情吧
当前题目:ECMAScript新特性-创新互联
当前地址:http://scyanting.com/article/cecsog.html