ECMAScript 6教程 (一)
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出 原文连接,博客地址为 http://www.cnblogs.com/jasonnode/ 。该系列课程是汇智网 整理编写的,课程地址为 http://www.dwz.cn/3e6Yml
什么是ES6?
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上,推出JavaScript 2.0。
ECMAScript和JavaScript到底是什么关系?很多初学者会感到困惑,简单来说,ECMAScript是JavaScript语言的国际标准,JavaScript是ECMAScript的实现。
1996年11月,JavaScript的创造者Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望这种语言能够成为国际标准。次年,ECMA发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为ECMAScript。这个版本就是ECMAScript 1.0版。
ES6的目标,是使得JavaScript语言可以用来编写大型的复杂的应用程序,成为企业级开发语言。
作为新一代标准ES6将为我们带来很多令人欣喜的功能特性,本课程将着重带领大家领略ES6的风采,因此在学习本课程前需要具备JavaScript的基础知识,如果你并不了解JavaScript是什么,可以先学习一下JavaScript的入门课程。
支持
虽说ES6已经作为新一代标准发布了,但是各大浏览器对新功能实现支持的还需要一段时间,那么我们怎么知道自己使用的浏览器是否支持ES6的相应功能呢?
不用紧张,对ES6的支持可以查看kangax.github.io/es5-compat-table/es6/,在这里可以清晰的了解到不同版本的浏览器对ES6功能的支持情况。随着时间的推移,支持度已经越来越高了,ES6的大部分特性都实现了。
如果你想现在就在浏览器使用ES6的特性,还可以通过引用兼容包的方式提前尝尝鲜。https://github.com/paulmillr/es6-shim
环境支持
直接插入网页
Traceur允许将ES6代码直接插入网页。首先,必须在网页头部加载Traceur库文件。
<!-- 加载Traceur编译器 --> <script src="http://google.github.io/traceur-compiler/bin/traceur.js" type="text/javascript"></script> <!-- 将Traceur编译器用于网页 --> <script src="http://google.github.io/traceur-compiler/src/bootstrap.js" type="text/javascript"></script> <!-- 打开实验选项,否则有些特性可能编译不成功 --> <script>traceur.options.experimental = true; </script><script type="module">class Calc {constructor(){console.log('Calc constructor');}add(a, b){return a + b;}}var c = new Calc();console.log(c.add(4,5)); </script>
注意,script标签的type属性的值是module(或者traceur),而不是text/javascript。这是Traceur编译器识别ES6代码的标识,编译器会自动将所有type=module的代码编译为ES5,然后再交给浏览器执行。
let
let是ES6中新增关键字。
它的作用类似于var,用来声明变量,但是所声明的变量,只在let命令所在的代码块内有效。
if(true){var a = 1; l et b = 2; } document.write(a); document.write(b); // 报错:ReferenceError: b is not defined
体会下let和var的作用域范围:
function f1() {var a = 8;let n = 5;if (true) {let n = 10;var a = 20}document.write(n); // 5document.write(a); // 20 } f1();
let应用
for循环的计数器,就很合适使用let命令。
var a = []; for (let i = 0; i < 10; i++) {a[i] = function () {document.write(i);}; } document.write(a[6]());
const命令
const 声明的是常量,一旦声明,值将是不可变的。
const PI = 3.1415; PI // 3.1415 PI = 3; PI // 3.1415 const PI = 3.1; PI // 3.1415
const 也具有块级作用域
if (true) {const max = 5; } document.write(max); // ReferenceError 常量MAX在此处不可得
const 不能变量提升(必须先声明后使用)
if (true) {document.write(MAX); // ReferenceErrorconst MAX = 5; }
const 不可重复声明
var message = "Hello!"; let age = 25;// 以下两行都会报错 const message = "Goodbye!"; const age = 30;
const 指令指向变量所在的地址,所以对该变量进行属性设置是可行的(未改变变量地址),如果想完全不可变化(包括属性),那么可以使用冻结。
const C1 = {}; C1.a = 1; document.write(C1.a); // 1 C1 = {}; // 报错 重新赋值,地址改变//冻结对象,此时前面用不用const都是一个效果 const C2 = Object.freeze({}); C2.a = 1; //Error,对象不可扩展 document.write(C2.a);
是否包含字符串三种新方法
传统上,JavaScript只有 indexOf 方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6又提供了三种新方法。
- includes():返回布尔值,表示是否找到了参数字符串。
- startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。
- endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。
var str = "Hello world!";str.startsWith("Hello") // true str.endsWith("!") // true str.includes("o") // true
这三个方法都支持第二个参数,表示开始搜索的位置。
var str = "Hello world!";str.startsWith("world", 6) // true str.endsWith("Hello", 5) // true str.includes("Hello", 6) // false
上面代码表示,使用第二个参数n时,endsWith 的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束。
repeat()原字符串重复
repeat()返回一个新字符串,表示将原字符串重复n次。
var str = "x"; str.repeat(3) // "xxx"var str1 = "hello"; str1.repeat(2) // "hellohello"
模板字符串
模板字符串提供了3个有意思的特性。
模板字符中,支持字符串插值:
let first = 'hubwiz'; let last = '汇智网'; document.write(`Hello ${first} ${last}!`); // Hello hubwiz 汇智网!
模板字符串可以包含多行:
let multiLine = 'This isa stringwith multiplelines'; document.write(multiLine);
标签模板
标签模板
var a = 5; var b = 10;tag`Hello ${ a + b } world ${ a * b }`;
上面代码中,模板字符串前面有一个标识名tag,它是一个函数。整个表达式的返回值,就是tag函数处理模板字符串后的返回值。
tag函数所有参数的实际值如下。
- 第一个参数:['Hello ', ' world ']
- 第二个参数: 15
- 第三个参数:50
也就是说,tag函数实际上以下面的形式调用。
tag(['Hello ', ' world '], 15, 50)
下面是tag函数的一种写法,以及运行结果。
var a = 5; var b = 10;function tag(s, v1, v2) { document.write(s[0]); document.write(s[1]); document.write(v1); document.write(v2);return "OK"; }tag`Hello ${ a + b } world ${ a * b}`; // "Hello " // " world " // 15 // 50 // "OK"
String.raw()
模板字符串可以是原始的:
ES6还为原生的String对象,提供了一个raw方法。
若使用String.raw 作为模板字符串的前缀,则模板字符串可以是原始(raw)的。反斜线也不再是特殊字符,\n 也不会被解释成换行符:
let raw = String.raw`Not a newline: \n`; document.write(raw === 'Not a newline: \\n'); // true
转载于:https://www.cnblogs.com/jasonnode/p/4651514.html
ECMAScript 6教程 (一)相关推荐
- ECMAScript6入门教程(二)
ECMAScript入门教程(一) 2.11 生成器 生成器函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同 function * gen(){yield '一只没有耳朵';yi ...
- 拜托!程序员的工作不能用时间来衡量
昨天跟一个小伙伴聊微信的时候,他说起自己身边的一个同事,每次都按时下班,而自己却经常加班.感觉自己被分配的任务量是他的几倍,内心很不平衡. 我觉得这事不能这么看,程序员的工作量不能只看工作时间来衡量. ...
- 新手程序员如何找一个靠谱的公司
web前端教程 用大白话,来讲编程 暑假将至,很多小伙伴也将面临着大学毕业找工作或者找实习,在微信上问前端君:怎样才能找到一家靠谱的公司? 大学的时候,由于我比较早出来实习,经历过大公司,也经历过小公 ...
- 程序员像瞎子,产品经理像跛子
web前端教程 用大白话,来讲编程 近期微信收到小伙伴的困惑,说自己团队产品经理能力实在是不敢恭维,需求不合理,业务逻辑漏洞百出,修改反反复复,马上就要上线了还要提新需求,工期安排不合理等等问题. 我 ...
- 别做码农了,去做一名工程师
web前端教程 用大白话,来讲编程 作为软件开发者,小伙伴们都听过这样的词汇:工程师,程序员,码农. 今天前端君就和大家来聊一聊这些词汇的区别.很多新手不以为然,看上去似乎没有什么区别,甚至不过是一些 ...
- 【资料篇】你需要掌握SEO的8个常用知识点
web前端教程 用大白话,来讲编程 之前招聘的时候,由于公司的产品线有一部分是PC端的web业务,所以对SEO(搜索引擎优化)有一定的要求.但应聘者中能回答的上来的应聘者寥寥无几. 部分应聘者过往的工 ...
- 50道 JavaScript 经典面试题汇总篇
web前端教程 用大白话,来讲编程 有很多小伙伴都跟我提过,为什么之前<经典面试题>系列不像<趣味ES6>和<vue基础系列>一样,来个汇总篇呗,免得想看的话要一道 ...
- 编程学不来就去当产品经理,没那么简单!
web前端教程 用大白话,来讲编程 早上有个小伙伴跟我聊,说自己编程干不下去了,觉得很吃力,有点迷茫,觉得自己选错了岗位,想转型转岗,有点慌. 碰巧,产品经理也是我曾经考虑从事的一个岗位.当时机缘巧合 ...
- 不要老去打断程序员的工作
web前端教程 用大白话,来讲编程 之前我在朋友圈问大家:工作中最讨厌的事情是什么?答案不是加需求,不是临下班前给任务,而是敲代码的时候老被别人打断. 相信猿们都有这样的经历:在聚精会神地处理逻辑比较 ...
最新文章
- 第十五届全国大学生智能汽车竞赛确定各分赛区总决赛名单数量分配草案
- 安装setuptools与pip
- 话里话外:装备制造业企业迫切需要实现信息化综合集成
- SpringAPI手动创建代理对象——ProxyFactory
- 改进型的时钟置换算法-解惑
- 面试又栽在JVM调优上了!
- asp.net Cache缓存定时更新数据
- 要使一个问题能够用计算机解决,如何正确并解决在使用计算机中的问题?
- 树的子结构(C++)
- pxe无人值守智能安装linux
- 阿里云ECS云服务器通过SAP HANA认证 海量数据处理技术助力企业数字化转型
- 【原创】2019.10.24模拟赛 嘟嘟噜/天才绅士少女助手克里斯蒂娜/凤凰院凶真
- struts1 标签
- 计算机网络教程第五版|微课版 - 第四章 网络层 - 习题【补充】
- 纳米孔测序仪市场现状研究分析与发展前景预测报告
- 二叉树中序遍历(递归+非递归)Java
- Oracle-多表查询
- Python之Scrapy框架的安装和使用
- CSS-display属性
- Vmware配置共享文件功能(针对ubuntu的/mnt/hgfs无文件内容问题)