跟着网上的视频学习了下es6的一些新的语法,在这里做一个笔记记录下,也起到一个反思和加深记忆的作用。
我们之前用的js版本是ECMAScript5,目前最新的ECMAScript6是在2015年6月正式发布的。 先来回顾一下什么是JavasScript。JavaScript一种动态类型、弱类型、基于原型的客户端脚本语言,用来给HTML网页增加动态功能。
动态:
在运行时确定数据类型。变量使用之前不需要类型声明,通常变量的类型是被赋值的那个值的类型。
弱类:
计算时可以不同类型之间对使用者透明地隐式转换,即使类型不正确,也能通过隐式转换来得到正确的类型。
原型:
新对象继承对象(作为模版),将自身的属性共享给新对象,模版对象称为原型。这样新对象实例化后不但可以享有自己创建时和运行时定义的属性,而且可以享有原型对象的属性。
PS:新对象指函数,模版对象是实例对象,实例对象是不能继承原型的,函数才可以的。
JavaScript由三部分组成:
1. ECMAScript(核心)
作为核心,它规定了语言的组成部分:语法、类型、语句、关键字、保留字、操作符、对象
2. DOM(文档对象模型)
DOM把整个页面映射为一个多层节点结果,开发人员可借助DOM提供的API,轻松地删除、添加、替换或修改任何节点。
PS:DOM也有级别,分为DOM1、DOM2、DOM3,拓展不少规范和新接口。
3. BOM (浏览器对象模型)
支持可以访问和操作浏览器窗口的浏览器对象模型,开发人员可以控制浏览器显示的页面以外的部分。
PS:BOM未形成规范
而es6在es5的基础上增加了很多新的特性:1.模块
之前的es5要实现js模块化功能需要使用第三方的一些工具比如SeaJs,RequireJs等,而es6则增加了模块这个功能
2.类
之前es5在面向对象是模拟了一个类的概念,而es6增加了class这个类的概念
3.块级作用域
es6引入了块级作用域可以帮助我们更好地了解作用域的概念
4.常量与变量
es6引入了用let来声明变量以及用const来声明常量
es6浏览器的支持程度可以看http://kangax.github.io/compat-table/es6/,chrome和firefox可以很好地支持es6,node也是
我们也可以通过Babel转码器把ES6写的代码转成ES5的,就不用担心运行环境是否支持
chrome下使用ES6为保证可以正常使用大部分语法,需要使用严格模式,即在js开始部分加上'use strict'
在firefox下使用ES6为保证可以正常使用大部分语法,需要知道测试版本,即在script标签的type属性中加上“application/javascript;version=1.7”属性值
总体上了解了es6,现在具体地来说一下es6的一些新增特性
1.let
之前es5都是用var来申明变量,es6开始用let,let主要有以下两个特点:
(1)let不能重复申明变量
之前var a =8;
var a=9;
最终输出的的是9,没问题,后面申明的9会替代之前申明的8,但是到了let如果
let a=8;
let a=9;就会报错
(2)块级作用域
do{
let a=8;
}while(0);
console.log(a);
块级作用域,这里用let申明的这个a只在do这个作用域里有效,所以在do外面打印a会报错,但是如果用var来声明就不会,因为let有块级作用域的作用
2.const
(1)用const申明一个常量的时候一定要初始化
const a;
console.log(a);像这样如果用const申明一个常量的时候没有初始化,这是会报错的
const a=8;
console.log(a);这样写才对,用const申明一个常量的时候一定要初始化
(2)初始化之后不能再赋值
const a=8;
a=9;
像这样初始化后再赋值是不可以的
(3)虽说const初始化之后不能再赋值,但是可以改变内容的属性,如:
const a={};
a.b=9;
console.log(a);