专栏首页码农UP2U后端程序员的 ES6 超简单入门笔记

后端程序员的 ES6 超简单入门笔记

在早期的 Web 项目当中,后端的语言和前端的语言混合在一起,比如在 jsp 和 php 的代码中能看到大篇幅的 HTML 代码。后来逐步的发展到有了“模板语言”,使得后端语言和前端语言进行了部分的分离,虽然前端中调用模板的方法,但是前端还需要后端来进行渲染。到现在,前后端语言完全分离,前端做交互,后端写接口,各司其职。在移动互联网的飞速发展,前端也日益重要,尤其是出现了所谓的“大前端”。

作为一个后端程序员对前端知识不用懂太多,能看懂、或够用就行。为了弥补自己不懂前端的短板,周末对前端进行了简单的了解,就有了这份笔记。

ECMAScript 6

什么是 ES 6 呢,我这里引用了网上给出的说明,引用如下:

JavaScript 是大家所了解的语言名称,但是这个语言名称是商标( Oracle 公司注册的商标)。因此,JavaScript 的正式名称是 ECMAScript 。1996年11月,JavaScript 的创造者网景公司将 JS 提交给国际化标准组织 ECMA(European computer manufactures association,欧洲计算机制造联合会),希望这种语言能够成为国际标准,随后 ECMA 发布了规定浏览器脚本语言的标准,即 ECMAScript。这也有利于这门语言的开放和中立。 https://www.runoob.com/w3cnote/es6-tutorial.html

我这里整理了 ES 6 的几个特性,当然 ES 6 的特性不只有这些,这些是最基本的部分。

一、变量定义

在 ES 6 中增加了 let 关键字用于定义变量,let 的用法与之前的关键字 var 有所不同。

let 关键字有作用域、不能重复声明和不存在变量提升。

这里演示一下作用域、不能重复声明和变量提升。

// 定义变量
{
    var a = 1;
    let b = 2;
}
console.log(a);
console.log(b); // b is not defined

在 { } 中使用 let 定义的变量,在 { } 外进行输出时,提示变量未定义,这是 let 的作用域的特性。

var m = 1;
var m = 2;

let n = 10;
let n = 20; // Identifier 'n' has already been declared

当在同一作用域使用 let 定义同一变量时,会提示该标识符已经被定义。

console.log(x)  // Cannot access 'x' before initialization
let x = 100;

console.log(y)  // undefined
var y = 200;

从上面的代码可以看到,在未定义 y 在前面输出 y 时,y 已经存在,由于未赋值,因此输出 undefined,而在 x 前面输出 x 时,则会提示不能在 x 初始化之前访问 x。

二、常量定义

常量的定义使用 const 关键字,常量在定义时必须赋值,且之后值不可以改变。

// 定义常量
const PI = 3.1415926
PI = 3  // Assignment to constant variable.

当对 const 定义的常量赋值时,会提示“在给常量赋值”。

const MY    // Missing initializer in const declaration

当定义常量没有赋值时,会提示“定义常量时没有指定值”。

三、解构赋值

解构赋值时对赋值运算的扩展,来看一下最基本的解构使用方法。

let a = 1, b = 2, c = 3
console.log(a, b, c)

之前的赋值需要逐个赋值,对于 ES 6 可以使用新的方法进行赋值,方法如下:

// ES6
let [x, y, z] = [1, 2, 3]
console.log(x, y, z)

上面的方式为数组模型的解构,除了对数组进行解构外,还可以对对象进行解构,方法如下:

// 对象解构
let user = {name: 'Helen', age: 18}

// ES6
let {name, age} = user  // 解构的变量必须是user中的属性
console.log(name, age)

解构的变量需要和 user 中的属性相同。

上面是解构的基本用法,除了基本用法外,还可以使用可嵌套可忽略、不完全解构、剩余运算符、结构默认值等方法。

四、字符串

在 ES 6 中对字符串提供了很多拓展方法,比如子串识别、字符串重复、字符串补全等。这里简单的介绍一下字符串模板的使用。

字符串模板使用反引号(`)进行标识,模板字符串具备普通字符串的用法,可以使用 ${} 将变量放入字符串中等功能。

<script>
    let name = 'lucy'
    let age = 20

    // 其中的换行在输出是也进行输出
    let info = `My name is ${name},
     i am ${age + 1} years old`

    console.log(info)
</script>

通过浏览器的 console 窗口来查看它的输出,输出如下:

My name is lucy,
         i am 21 years old

可以看到,在输出中将变量 name 进行了输出,将变量 age 进行加 1 后输出,在代码中的字符串模板中使用了换行,在控制台中字符串的输出也进行了换行。

五、对象

在 ES 6 中定义对象、对象拷贝、对象合并也非常的好用,对象定义的代码如下:

<script>
    const name = 'lucy'
    const age = 20

    // 其中的名字可以省略,名字和变量名相同
    const user = {name, age}
    console.log(user)
</script>

输出如下所示:

{name: "lucy", age: 20}
age: 20
name: "lucy"

对象拷贝的代码如下:

<script>
    // 对象复制
    let person = {name: 'amy', age: 15}
    let someone = { ... person }

    console.log(someone)
</script>

以上代码输出如下:

{name: "amy", age: 15}
age: 15
name: "amy"

对象合并的代码如下:

<script>
    // 对象合并
    let age = {age : 15}
    let name = {name : 'amy'}
    let person = { ... age, ... name}

    console.log(person)
</script>

以上代码输出如下:

{age: 15, name: "amy"}
age: 15
name: "amy"

ES 6 中还有其他的关于对象的操作,比如属性名表达式、方法名简写等。

六、箭头函数

在 ES 6 中提供了箭头函数,它是函数的一种简洁书写方式。这里整理了带一个参数和带多个参数的函数。先来看带一个参数的函数,代码如下:

<script>
    // 参数 => 函数体
    var f1 = a => a

    console.log(f1(3))
</script>

该函数等价于如下函数:

var f1 = function(a) {
    return a
}

因此,在上面的 console.log(f1(3)) 会输出一个 3。再来查看带多个参数的函数如何定义,代码如下:

<script>
    // ES6
    var f2 = (m, n) => m + n

    console.log(f2(3, 4))
</script>

在上面的代码中,m 和 n 是参数,返回值是 m + n 的和,上面的代码输出 7。当参数只有一个的时候可以不使用小括号,当没有参数或有一个以上的参数时,小括号不可用省略。

总结

上面是整理的部分关于 ES 6 的特性,ES 6 中还包括 Symbol、Map、Set、Proxy、Reflect、Promise、Generator 和async 等,具体参考连接为 :https://www.runoob.com/w3cnote/es6-tutorial.html,有需要的可以点击该连接自行阅读。

本文分享自微信公众号 - 码农UP2U(gh_3c91b47a82e0),作者:码农UP2U

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-09-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 后端程序员的 VUE 超简单入门笔记

    现在的各种开源项目中使用 Vue 的越来越多了,作为一个后端程序员不会点 Vue 也都玩不转了。所以抽空学习了一下 Vue 的简单用法,整理成笔...

    码农UP2U
  • TensorFlow学习笔记:2、TensorFlow超简单入门程序

    TensorFlow学习笔记:2、TensorFlow超简单入门程序 2.1 HelloWorld代码说明 import tensorflow as tf ...

    程裕强
  • React Native 学习资源精选仓库

    React Native Awesome汇集了各类react-native学习资料、工具、组件、开源App、资源下载、以及相关新闻等,只求精不求全。 如果你是...

    CrazyCodeBoy
  • TypeScript 入门教程

    本文转载自https://ts.xcatliu.com/,作者是:xcatliu,文档对应的Github托管地址为:typescript-tutorial

    ccf19881030
  • 小白前端入门笔记(18),form表单的简单用法

    几乎所有用户数据的提交和上传都是通过表单来进行的,比如用户注册的时候,我们填写的账号、密码、邮箱等信息,最后点击提交的时候提交的内容其实就是一个表单。

    TechFlow-承志
  • 【数据结构基础】栈简介(使用ES6)

    数据结构这词大家都不陌生吧,这可是计算机专业人员的必修课专业之一,如果想成为专业的开发人员,必须深入理解这门课程,在这系列文章里,笔者将使用ES6,让大家熟悉数...

    前端达人
  • 史上最全的前端资源大汇总

    Tanyboye
  • 后端程序员也能看懂的微信小程序开发入门

    小程序时至今日已经非常火爆了,作为软件体系中的一员,越来越多的公司与个人都在发展自己的小程序,而且小程序不再是单一的微信小程序了,还有百度小程序、支付宝小程序、...

    蒋老湿
  • 2019 前端秋季社招面试经历总结(二年多经验)

    推荐阅读:前端硬核面试专题[6],内容包含:HTML + CSS + JS + ES6 + Webpack + Vue + React + Node + HTT...

    夜尽天明
  • 力扣 (LeetCode)-合并两个有序链表,删除排序数组中的重复项,JavaScript笔记

    每天学习编程,让你离梦想更新一步,感谢不负每一份热爱编程的程序员,不论知识点多么奇葩,和我一起,让那一颗四处流荡的心定下来,一直走下去,加油,2021加油!欢迎...

    达达前端
  • GitHub这么火,程序员你不学学吗? 超简单入门教程干货2

    本GitHub教程旨在能够帮助大家快速入门学习使用GitHub,进行版本控制。帮助大家摆脱命令行工具,简单快速的使用GitHub。

    做全栈攻城狮
  • 程序员,一起玩转GitHub版本控制,超简单入门教程 干货2

    本GitHub教程旨在能够帮助大家快速入门学习使用GitHub,进行版本控制。帮助大家摆脱命令行工具,简单快速的使用GitHub。

    做全栈攻城狮
  • 用了这 7 个 VS Code 插件,想写一辈子代码

    你知道将高级开发人员与普通开发人员区分的条件是什么吗?没错,是所使用的工具,俗话说,"工欲善其事必先利其器", 拥有正确的工作工具可以让开发人员的生活变得更加轻...

    秋风的笔记
  • 最全前端资源汇总

    一、概要 这份汇总整理,很程度上参考了GitHub最全前端资源汇总;云集前端教程、开发资源、免费书籍、手册规范、求职面试等等,旨在为前端学习 & 技能提升提供方...

    张果
  • 2018计算机系书单推荐(持续更新)

    筑梦师winston
  • 前端资源分享——只为更好前端

    一、团队组织 网站说明腾讯 AlloyTeam 团队腾讯Web前端团队,代表作品WebQQ,致力于前端技术的研究ISUX腾讯社交用户体验设计,简称ISUX,腾...

    wangxl
  • 前端大牛们都学过哪些东西?

    单纯的技术层面也就是上述的那些个东西。如果某个同学都学会了上面的那些东西,是不是就能完全的胜任前端开发工作呢?

    web前端教室
  • 探讨后端选型中不同语言及对应的Web框架

    不得不指出的是,当我们喜欢一种语言的时候,我们可能会偏爱于在这门语言里寻找可用的方案。这自然是有好有坏,好的一点是:我们可以成为这门语言的专家;不好的一点是:选...

    博文视点Broadview
  • 服务注册、发现和远程调用

    本篇文章介绍如何完成一个简单的服务注册、发现和远程调用的 Demo,通过该 Demo 来学习和了解关于 Spring Cloud 相关的知识。

    码农UP2U

扫码关注云+社区

领取腾讯云代金券