2021-06-10

es6学习笔记

#es6相关名词
ECMA中文名称为欧洲计算机制造商协会

这个组织的目标是评估、开发和认可电信和计算机标准

ECMAscript是标准化的脚本程序设计语言——ECMA262标准。

###为什么学习es6

1. 版本变动最多具有里程碑意义
2. es6加入了许多新的语法特性，编程实现更简单、高效
3. 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();
    //直接输出“佛大”
}

注意点

1. 变量不可以重复声明，防止变量被污染；
2. 块级别作用域，全局、函数、eval
3. 不存在变量提升的问题，不会像var那样，提前声明变量并赋值
4. 不影响作用域链

---

#####做一个小尝试

<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关键字/常量声明

注意点：

1. 常量名一般都用大写，以区别于其他的变量 const SCHOOL = ‘野鸡大学’;

2. 一定要赋初始值

3. 常量值不能修改

4. 也是块级作用域

5. 对于数组和对象的元素修改，不算是对常量的修改，可以这样修改

   const TEAM = [‘UZI’,‘RNG’,Ming,‘Letme’]；
   //向数组中添加元素，不会报错
   TEAM.push(‘Meiko’);
   因为数组的对应的地址值没有发生改变，所以是可以的

---

##解构赋值
ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值

1. 数组的解构

    const F4 = ['小沈阳','刘能','赵四','宋小宝'];
    let [xiao,liu,zhao,song] = F4;    
    console.log(xiao);
    console.log(liu);
    console.log(zhao);
    console.log(song);
   

输出的结果是：小沈阳、刘能、赵四、宋小宝

2. 对象的结构

    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('我们可以提高自己的技能');
    }
}

这里是引用