es6学习笔记
#es6相关名词
ECMA中文名称为欧洲计算机制造商协会
这个组织的目标是评估、开发和认可电信和计算机标准
ECMAscript是标准化的脚本程序设计语言——ECMA262标准。
###为什么学习es6
- 版本变动最多具有里程碑意义
- es6加入了许多新的语法特性,编程实现更简单、高效
- es6是前端发展趋势,就业必备技能
###let关键字
变量声明
let a;
let b,c,d;
// 1、变量不可以重复声明
let a = 10;
let a = 20; //这是不允许的
块级别作用域,全局、函数、eval
//2、块级别作用域,**全局、函数、eval**
{
let girl = '周扬青';
}
不存在变量提升
//3、不存在变量提升的问题,不会像var那样,提前声明变量并赋值 undefined
不影响作用域链
//4、不影响作用域链
{
let school = "佛大";
function fun(){
console.log(school);
}
//调用函数
fun();
//直接输出“佛大”
}
注意点
- 变量不可以重复声明,防止变量被污染;
- 块级别作用域,全局、函数、eval
- 不存在变量提升的问题,不会像var那样,提前声明变量并赋值
- 不影响作用域链
#####做一个小尝试
<div class="container">
<h2 class="page-header">点击切换颜色</h2>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script>
//1、获取div元素对象
let items = getElementsByClassName('item');
//2、遍历并绑定事件
for(let i = 0;I<items.length;i++){
//绑定事件
items[i].onclick = function(){
items[i].style.background = 'pink';
}
}
</script>
###const关键字/常量声明
注意点:
-
常量名一般都用大写,以区别于其他的变量 const SCHOOL = ‘野鸡大学’;
-
一定要赋初始值
-
常量值不能修改
-
也是块级作用域
-
对于数组和对象的元素修改,不算是对常量的修改,可以这样修改
const TEAM = [‘UZI’,‘RNG’,Ming,‘Letme’];
//向数组中添加元素,不会报错
TEAM.push(‘Meiko’);
因为数组的对应的地址值没有发生改变,所以是可以的
##解构赋值
ES6允许按照一定模式从数组和对象中提取值,对变量进行赋值
-
数组的解构
const F4 = ['小沈阳','刘能','赵四','宋小宝']; let [xiao,liu,zhao,song] = F4; console.log(xiao); console.log(liu); console.log(zhao); console.log(song);
输出的结果是:小沈阳、刘能、赵四、宋小宝
-
对象的结构
const zhao = { name : '赵本山'; age : '不详'; xiaopin : function(){ console.log('我可以演小品'); } }; let {name,age,xiaopin} = zhao;
##模板字符串``
1、声明使用
let str = `我是一串字符串`;
console.log(str, typeof str);
2、内容中可以直接出现换行符,之前的’’ 和 “” 中是不可以出现换行符
let str = `<ul>
<li>足球</li>
<li>篮球</li>
<li>羽毛球</li>
</ul>`
//这样的定义可以的
3、变量的拼接
let lovest = '骑自行车';
let out = `${lovest}是我喜欢的运动`;
console.log(out);
##es6简化对象的写法
例如:
let name = '前端部门';
let change = function(){
console.log('一直写代码');
}
const programer = {
name,
change,
//还有一个简化
improve(){
console.log('我们可以提高自己的技能');
}
}
这里是引用