四川盐亭网站制作公司

ECMAScript新特性-创新互联

代码

创新互联长期为上1000家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为长子企业提供专业的成都做网站、网站制作，长子网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。ECMAScript概述

ECMAScript 是脚本语言的标准化规范，也就是语言的语法。比如：怎样定义变量、怎样定义函数和逻辑运算等等。

那么ECMAScript 和 JavaScript 是何关系？
JavaScript 是ECMAScript 的扩展语言，JavaScript实现了ECMAScript。 比如在浏览器环境中 JavaScript 就是 ECMAScript 和 WebAPI的集合
在这里插入图片描述
ES（ECMAScript）于1997年被提出，2015年后基本保持一个版本的迭代

名称标准版本发布时间
ECMAScript2019（ES2019）102019年6月
ECMAScript2018（ES2018）92018年6月
ECMAScript2017（ES2017）82017年6月
ECMAScript2016（ES2016）72016年6月
ECMAScript2015（ES2015）62015年6月
ECMAScript5.1（ES5.1）5.12011年6月
ECMAScript5（ES5）52009年12月
ECMAScript4（ES4）4被放弃
ECMAScript3（ES3）31999年12月
ECMAScript2（ES2）21998年6月
ECMAScript1（ES1）11997年6月

ES2015 是最新ES标准比较典型的版本，主要在于

  • 相比ES5.1变化较大
  • 命名标准发生变化，按照年份命名

在有些书上或博客上对于ES6有两种意思，一种是特指（ES2015）,另一种是泛指是指ES2015版本之后的所有版本。

ECMAScript新特性主要有以下内容：

  • 解决原有语法上的的一些问题和不足 (var)
  • 对原有语法进行增强 （对象解构）
  • 全新的对象、全新的方法、全新的功能（class、promsie）
  • 全新的数据类型和 数据结构（Symbol）
let 与块级作用域

作用域：某个成员能够起作用的范围。

在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

用于生成只读属性。 声明之时，就要赋值；声明之后，不可修改内存指向

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

其他资讯