ES6-个人学习笔记一--let和const
es6已经推出一段时间了，虽然在兼容和应用上还有不少的难题，但是其提供的未来前端代码编程的发展趋势和一些好用的功能还是很吸引人的，因此个人买了‘阮一峰’先生的es6入门，希望对其有一个了解和学习，本系列博客文中为个人对书中例题的重现和理解，仅供学习交流之用，请勿转载，文中个人理解可能有误，请大家支持作者和正版阅读原版，在此感谢作者，书名为‘ES6标准入门’
首先由于阅览器的兼容问题，大家的es6代码如果需要实际运行必须经过解析为es5代码后插入网页才行，下面的方法直接使用了Google公司的Traceur转码器，比较方便，除此之外还可在安装完node.js环境后通过npm来下载对应的不同版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div ></div>
</body>
<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
<script>
//无法对traceur进行设置，编译时可能有错误
console.log(traceur);
// Create the System object
window.System = new traceur.runtime.browserTraceurLoader();
// Set some experimental options
var metadata = {
traceurOptions: {
experimental: true,
properTailCalls: true,
symbols: true,
arrayComprehension: true,
asyncFunctions: true,
asyncGenerators: exponentiation,
forOn: true,
generatorComprehension: true
}
};
// Load your module
System.import('./myModule.js', {metadata: metadata}).catch(function(ex) {
console.error('Import failed', ex.stack || ex);
});
</script>
<script type="module">
//这里是正文，上面是使用es6的必要引入，traceur可以将es6代码翻译为阅览器识别的es5代码
console.log([1,2,3].map(x=>x*x));//测试结果是否为【1,4,9】
//首先是两种新增的声明方式，let和const，当然还有import和class,这两种高级用法以后介绍
//let声明的使用
{
let a =10 ;
var b = 1;
}
console.log(b);
// console.log(a);//let命令，只在let所在的代码块内有效，因此a无法找到
//例1：
// 循环中的变量i用var来声明，最后的输出结果为10，i是累加的
var a=[];
for(var i=0;i<10;i++){
a[i]=function(){
console.log(i)
}
}
a[6]();
//如果换成let来声明，则每一个j实际上都是新的变量，因此其中保存的j为当前数值
var b=[];
for(let j=0;j<10;j++){
b[j]=function(){
console.log(j)
}
}
b[6]();
//注意点：
//1.let不会发生声明提升，因此先使用后声明的情况不会发生，需要注意（特殊：如有全局变量a，在代码块中如果使用了let a 那么在声明前也不能使用a变量，即使a在全局中已经声明过，这称为暂时性死区）
//2.同一块级区域内let不允许重复声明同一变量
//3.let和const声明的变量不是全局对象（window）的属性，而var和function声明的则是。 </script>
</html>
//const用于声明常量，声明时必须马上赋值并且不可改变
const f=123;
//注意，当const声明对象时，只是冻结了指向的地址，即地址不会被改变但是数据可以改变
const foo={};
foo.add=123;
//foo={}//报错,当需要冻结对象数据时可以使用Object.freeze()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div ></div>
</body>
<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
<script>
//无法对traceur进行设置，编译时可能有错误
console.log(traceur);
// Create the System object
window.System = new traceur.runtime.browserTraceurLoader();
// Set some experimental options
var metadata = {
traceurOptions: {
experimental: true,
properTailCalls: true,
symbols: true,
arrayComprehension: true,
asyncFunctions: true,
asyncGenerators: exponentiation,
forOn: true,
generatorComprehension: true
}
};
// Load your module
System.import('./myModule.js', {metadata: metadata}).catch(function(ex) {
console.error('Import failed', ex.stack || ex);
});
</script>
<script type="module">
//这里是正文，上面是使用es6的必要引入，traceur可以将es6代码翻译为阅览器识别的es5代码
console.log([,,].map(x=>x*x));//测试结果是否为【1,4,9】
//首先是两种新增的声明方式，let和const，当然还有import和class,这两种高级用法以后介绍
//let声明的使用
{
let a =10 ;
var b = ;
}
console.log(b);
// console.log(a);//let命令，只在let所在的代码块内有效，因此a无法找到
//例：
// 循环中的变量i用var来声明，最后的输出结果为，i是累加的
var a=[];
for(var i=;i<;i++){
a[i]=function(){
console.log(i)
}
}
a[]();
//如果换成let来声明，则每一个j实际上都是新的变量，因此其中保存的j为当前数值
var b=[];
for(let j=;j<;j++){
b[j]=function(){
console.log(j)
}
}
b[]();
//注意点：
//1.let不会发生声明提升，因此先使用后声明的情况不会发生，需要注意（特殊：如有全局变量a，在代码块中如果使用了let a 那么在声明前也不能使用a变量，即使a在全局中已经声明过，这称为暂时性死区）
//2.同一块级区域内let不允许重复声明同一变量
//3.let和const声明的变量不是全局对象（window）的属性，而var和function声明的则是。 </script>
</html>
ES6-个人学习笔记一--let和const的更多相关文章
- es6学习笔记1 --let以及const
let语句的基本用法: 1.let声明的变量为块级作用域,只在最近的{}里面有效,如果在外部引用就会报错. { let a = 10; var b = "hello" } ale ...
- ES6学习笔记(一)——let和const
1.ES6学习之let.const (1).var.let.const 变(常)量声明 ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景. 在ES6中let就诞生了,实际上它 ...
- ES6学习笔记(1)----let和const命令
参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ let和const命令 let 总结1.声明变量基本使用方法与var 相同 不同点 a.在代 ...
- ES6学习笔记之 let与const
在js中,定义变量时要使用var操作符,但是var有许多的缺点,如:一个变量可以重复声明.没有块级作用域.不能限制修改等. //缺点1:变量可以重复声明 var a=1; var a=2; conso ...
- es6小白学习笔记(一)
1.let和const命令 1.es6新增了let和const命令,与var用法类似,但它声明的变量只在let所在的代码块内有效(块级作用域,es5只有全局和函数作用域) { let a = 1; v ...
- ES6 promise学习笔记 -- 基本用法
ES6 规定,Promise对象是一个构造函数,用来生成Promise实例. 下面代码创造了一个Promise实例. const promise = new Promise(function(reso ...
- es6.3学习笔记
es版本发布相当快,从1.x到2.x,再直接到5.x,6.x 索引这个词在es中有多重意思: 索引(名词):一个索引类似于传统数据库中的一个索引,用于存储关系型文档.索引的复数为indexes或ind ...
- PHP学习笔记三十一【const】
<?php //常量都是public类型 // const 常量名=赋值 .变量名不需要加$符号,也不需要要访问修饰符,默认就是public class A{ const TAX_RATE=0. ...
- JavaScript（ES6）学习笔记-Set和Map数据结构（一）
一.Set 1.ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. , , , , ']); s; // ...
随机推荐
- ASP.NET【2】
从上一节我们了解到ASP.NET是一种动态网页技术,在服务器端运行.Net代码,服务器端接收处理动态生成HTML代码,然后发送给浏览器,再由浏览器解析HTML代码将数据呈现给用户. 那么,下面我来介绍 ...
- clas
- 开源的连接池技术DBCP和C3P0
概述: Sun公司约定: 如果是连接池技术,需要实现一个接口! javax.sql.DataSource; 相关jar包和资料下载 1.1 DBCP连接池: l DBCP 是 Apache 软 ...
- 检测到有潜在危险的Request.Form值
由于在.net中,Request时出现有HTML或Javascript等字符串时,系统会认为是危险性值.立马报出“从客户端 中检测到有潜在危险的Request.Form值”这样的错. 用encodeU ...
- 【剑指Offer学习】【面试题14 ：调整数组顺序使奇数位于偶数前面】
题目:输入一个整数数组,实现一个函数来调整该数组中数字的顺序.使得全部奇数位于数组的前半部分.全部偶数位予数组的后半部分. 这个题目要求把奇数放在数组的前半部分, 偶数放在数组的后半部分,因此全部的奇 ...
- 和菜鸟一起学linux内核源码之基础准备篇 系列 体系结构图
http://blog.csdn.net/eastmoon502136/article/details/8711104
- locale------- linux字符集
查看当前系统字符集 [root@server1 ~]# locale LANG=zh_CN.UTF-8LC_CTYPE="zh_CN.UTF-8"LC_NUMERIC=" ...
- UNIX环境高级编程---标准I/O库
前言:我想大家学习C语言接触过的第一个函数应该是printf,但是我们真正理解它了吗?最近看Linux以及网络编程这块,我觉得I/O这块很难理解.以前从来没认识到Unix I/O和C标准库I/O函数压 ...
- 【转】cocos2d-x游戏开发(八)各类构造器
欢迎转载:http://blog.csdn.net/fylz1125/article/details/8521997 这篇写cocos2d-x的构造器. cocos2d-x引入自动释放机制后,创建的对 ...
- 利用反射把数据库查询到的数据转换成Model、List（改良版）
之前也写过一篇这样的博文,但是非常的粗糙. 博文地址 后来看到了一位前辈(@勤快的小熊)对我的博文的评论后,让我看到了更加优雅的实现方式,于是重构了之前的代码. public static Li ...