小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

本文作为本人学习总结之用，以笔记为主，同时分享给大家.
因为个人技术有限，如果有发现错误或存在疑问之处，欢迎指出或指点！不胜感谢！

let 和 const

1.1 let 关键字

let 关键字用来声明变量，使用 let 声明的变量有几个特点：

不允许重复声明
块儿级作用域
不存在变量提升
不影响作用域链

应用场景：for 循环的计数器和以后声明变量使用 let

1.2. const 关键字

const 关键字用来声明常量，const 声明有以下特点

声明必须赋初始值
标识符一般为大写
不允许重复声明
值不允许修改
块儿级作用域

注意对象属性修改和数组元素变化不会出发 const 错误

应用场景：声明对象类型使用 const，非对象类型声明选择 let

//1. 变量不能重复声明
 let star = '张三';
 let star = '李四';

//2. 块儿级作用域  全局, 函数, eval
// if else while for 
 {
     let girl = '周扬青';
 }
 console.log(girl);

//3. 不存在变量提升
 console.log(song);
 let song = '我的es练习';

//4. 不影响作用域链
{
    let school = '尚硅谷';
    function fn(){
        console.log(school);
    }
    fn();
}

变量的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
注意：频繁使用对象方法、数组元素，就可以使用解构赋值形式

//1. 数组的结构
const F4 = ['小沈阳','刘能','赵四','宋小宝'];
let [xiao, liu, zhao, song] = F4;
console.log(xiao);
console.log(liu);
console.log(zhao);
console.log(song);

//2. 对象的解构
const zhao1 = {
    name: '赵本山',
    age: '不详',
    xiaopin: function(){
        console.log("我可以演小品");
    }
};

let {name, age, xiaopin} = zhao1;
console.log(name);
console.log(age);
console.log(xiaopin);
xiaopin();

模板字符串

模板字符串（template string）是增强版的字符串，用反引号``标识，特点：

字符串中可以出现换行符
可以使用 ${xxx} 形式输出变量

注意：当遇到字符串与变量拼接的情况使用模板字符串

//1. 声明
let str = `我也是一个字符串哦!`;
console.log(str, typeof str);

//2. 内容中可以直接出现换行符
let str1 = `<ul>
            <li>沈腾</li>
            <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 school = {
    name,
    change,
    improve(){
        console.log("我们可以提高你的技能");
    }
}

console.log(school);

箭头函数

ES6 允许使用「箭头」（=>）定义函数。
箭头函数的注意点:

如果形参只有一个，则小括号可以省略
函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的

执行结果

箭头函数 this 指向声明时所在作用域下 this 的值
箭头函数不能作为构造函数实例化
不能使用 arguments

注意：箭头函数不会更改 this 指向，用来指定回调函数会非常合适

//声明一个函数
// let fn = function(){

// }
// let fn = (a,b) => {
//     return a + b;
// }
//调用函数
// let result = fn(1, 2);
// console.log(result);


//1. this 是静态的. this 始终指向函数声明时所在作用域下的 this 的值
function getName(){
    console.log(this.name);
}
let getName2 = () => {
    console.log(this.name);
}

//设置 window 对象的 name 属性
window.name = '尚硅谷';
const school = {
    name: "ATGUIGU"
}

//直接调用
// getName();
// getName2();

//call 方法调用
// getName.call(school);
// getName2.call(school);

//2. 不能作为构造实例化对象
// let Person = (name, age) => {
//     this.name = name;
//     this.age = age;
// }
// let me = new Person('xiao',30);
// console.log(me);

//3. 不能使用 arguments 变量
// let fn = () => {
//     console.log(arguments);
// }
// fn(1,2,3);

//4. 箭头函数的简写
    //1) 省略小括号, 当形参有且只有一个的时候
    // let add = n => {
    //     return n + n;
    // }
    // console.log(add(9));
    //2) 省略花括号, 当代码体只有一条语句的时候, 此时 return 必须省略
    // 而且语句的执行结果就是函数的返回值
    let pow = n => n * n;
        
    console.log(pow(8));

箭头函数实践

需求1 点击 div 2s 后颜色变成『粉色』

//获取元素
let ad = document.getElementById('ad');
//绑定事件
ad.addEventListener("click", function(){
    //保存 this 的值
    // let _this = this;
    //定时器
    setTimeout(() => {
        //修改背景颜色 this
        // console.log(this);
        // _this.style.background = 'pink';
        this.style.background = 'pink';
    }, 2000);
});

需求2 从数组中返回偶数的元素

const arr = [1,6,9,10,100,25];
// const result = arr.filter(function(item){
//     if(item % 2 === 0){
//         return true;
//     }else{
//         return false;
//     }
// });

const result = arr.filter(item => item % 2 === 0);

console.log(result);

箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调
箭头函数不适合与 this 有关的回调. 事件回调, 对象的方法

ES笔记（一）

前言