1.ECMASript相关介绍(基础理解)
1.1什么是ES
ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以它可以理解为是javascript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。
1.2什么是ECMAScript
ECMAScript是由Ecma国际通过ECMA-262标准化的脚本程序设计语言。
1.3什么是ECMA-262
Ecma国际制定了许多标准，而ECMA-262只是其中的一个，所有标准列表查看 http://www.ecma-international.org/publications/standards/Standard.htm
1.4ECMA-262历史
ECMA-262(ECMAScript)历史版本查看网址
http://www.ecma-international.org/publications/standards/Ecma-262-arch.htm
第1版 |
1997年 |
制定了语言的基本基本语法 |
第2版 |
1998年 |
较小改动 |
第3版 |
1999年 |
引入正则、异常处理、格式化输出等。IE开始支持 |
第4版 |
2007年 |
过于激进，未发布 |
第5版 |
2009年 |
引入严格模式、SON,扩展对象、数组、原型、字符串、日期方法 |
第6版 |
2015年 |
模块化、面向对象语法、Promise、箭头函数、Iet、const、数组解构赋值等等 |
第7版 |
2016年 |
幂运算符、数组扩展、Async/await关键字 |
第8版 |
2017年 |
Async/await、字符串扩展 |
第9版 |
2018年 |
对象解构赋值、正则扩展 |
第10版 |
2019年 |
扩展对象、数组方法 |
ES.next |
动态指向下一个版本 |
1.5谁在维护ECMA-262
TC39(Technical Committee39)是推进ECMAScript发展的委员会。其会员都是公司（其中主要是浏览器厂商，有苹果、谷歌、微软、因特尔等）。TC39定期召开会议，会议由会员公司的代表与特邀专家出席
1.6为啥学习这个捏
- ES6的版本变动内容最多，具有里程碑意义
- ES6加入许多新的语法特性，编程实现更简单、高效
- ES6是前端发展趋势，就业必备技能
1.7ES6兼容性
ECMAScript 6 compatibility table (kangax.github.io)可查看兼容性
2.变量
2.1let声明变量
2.1.1声明以及赋值
//声明变量
//单个变量声明
let a;
//多个变量声明
let b,c,d;
//对单个变量赋值
let e = 100;
//对多个变量赋值
let f=999,g='love',h=[];2.1.2注意
- 变量不能重复声明
let sun;
let sun;
他会报错，说这个变量已经被声明，对新手来说是值得注意的，如果你已经有其他语言的经验的话，那这种报错基本上很容易找到。
需要注意的是如果使用的var来声明变量，使用同一个是可以的。
也就是说let的命名规则要比var规范
- 作用域
- 块级
- let定义
- var定义
{
let gril = 'none';
}
console.log(gril)
报错显示未定义变量，但实际上你定义了，但是因为作用域的问题，导致你的作用范围不在全局生效，只在代码块内生效，全局找不到，当然就报错了。
{
var gril = 'none';
}
console.log(gril)
换成var就能读取到变量值了,这是为什么呢? 因为var在代码中没有块级作用域，会向全局的window属性添加属性。 if while for等等这些有{}的都不会生效
- 全局
- 函数
- eval
- 不存在变量提升
- 使用var
console.log(name)
var name = '张三'
var name; console.log(name) var name = '张三'
- 使用let
console.log(name)
let name = '张三'
- 不影响作用域链
{
let school='浅辄'
function fn(){
console.log(school);
}
fn();
}
2.2const声明常量
2.2.1声明以及赋值
//声明常量
const SCHOOL = '浅辄';
console.log(SCHOOL)
2.2.2注意
- 一定要赋初始值
const A;
- 一般常量使用大写(都很默认的规则啦)
const a = 1;反正也不报错，不正式
- 常量值不能修改
const SCHOOL = '浅辄';
SCHOOL = 'QZ'
- 块级作用域
{
const PLAYER = 'Lee';
}
console.log(PLAYER)
- 对于数组和对象的元素修改，不算做对常量的修改，不会报错
const TEAM = ['UZI','FAKER','6.6']
TEAM.push('Mekio')
console.log(TEAM)
这是为什么，因为常量指向的地址没有发生改变，虽然数组元素发生变化，但是常量所指向地址没有报错。
2.3变量结构赋值
ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。
2.3.1数组的结构
const F4 = ['莱昂纳多·小沈阳','约翰尼·宋小宝','克里斯蒂安·刘能','尼古拉斯·赵四']
let [xiao,liu,zhao,song]=F4;
console.log(xiao)
console.log(liu)
console.log(zhao)
console.log(song)
2.3.2对象的解构
const zhao = {
name: '赵本山',
age: '不知道',
xiaopin: function() {
console.log("卖拐");
}
};
let {
name,
age,
xiaopin
} = zhao
console.log(name);
console.log(age);
console.log(xiaopin);
xiaopin()
这样是为了重复调用的时候少写zhao.xiaopin(),减少代码的冗余。
2.4模板字符串
ES6引入新的声明字符串的方式「''」
2.4.1声明
let str = `i am a string!`
console.log(str,typeof str)
2.4.2特性
- 内容中可以直接出现换行符
let str='<u1>
<1i>周星驰</1i>
<1i>周润发</1i>
</u1>';
使用单引号就不可以出现换行符
let str=`<u1>
<1i>周星驰</1i>
<1i>周润发</1i>
</u1>`;
就不会报错了
- 变量拼接
let favorite = '杰森';
let out = `${favorite}是我喜欢的演员`;
console.log(out)