1.声明

1.1.let和var

let	var
变量不能重复声明	可以
具有块级作用域	没有
不存在变量提升	存在
不影响作用域链	也不影响

块级作用域：变量只在代码块内有效，出代码块就无效(读取不到) {} / if / else / while / for等

不影响作用域链：

{
    let star = 'yyqx';

    function fn() {
        console.log(star);
        //作用域链：fn里没有star 继续向上找 找到大括号里声明的star
    }
    fn();
}

var和let关于块级作用域的区别的案例

let items = document.getElementsByClassName('item');
for (var i = 0; i < items.length; i++) {
    console.log(i); // 打印出 0 1 2
    items[i].onclick = function() {
        console.log(i);
        // 只能用
        this.style.background = 'pink';
        // items[i].style.background = 'pink'; 这个就不好使
    }
}
// var声明的i没有块级作用域， 其一直是在全局中存在的
而let声明的i有块级作用域 
for (let i = 0; i < items.length; i++) {
    items[i].onclick = function() {
        // this.style.background = 'pink';
        items[i].style.background = 'pink';
    }
}

1.2.const

const定义常量：值不能修改的量称为常量

const声明常量时一定要赋初始值
const A; // 会报错
必须 const A = 100;
一般常量的值使用大写(潜规则)
常量的值不能修改
const A = 100;
A = 200;//fault
块级作用域
对于数组和对象的元素修改，不会报错。(注意是修改元素，而不是修改整个数组) 因为这样只改变了数组/对象里的元素，但这个数组/对象指的地址没有改变
可：

不可：

1.3.变量的解构赋值

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

1.数组解构
const F3 = ['易烊千玺', '刘宪华', '鞠婧祎'];
let [yyqx, lxh, jjy] = F3;
console.log(yyqx);
//输出易烊千玺
2.对象解构
const yi = {
    name: '易烊千玺',
    age: 20,
    jiewu: function() {
        console.log('他很会跳街舞');
    }
}
let {
    name,
    age,
    jiewu
} = yi;
console.log(name);
console.log(jiewu);
jiewu();

输出结果
在这里插入图片描述
然而实际应用中我们很少对属性进行解构赋值，更多的是对方法。

let {
    jiewu
} = yi;
jiewu();
//输出 他很会跳街舞

1.4.模板字符串

ES6引入新的声明字符串的方式 [``] 即反引号

//1. 声明
let str = `我是一个字符串`;
console.log(str, typeof str);
// 我是一个字符串 string
//2. 内容中可以直接出现换行符
let str = `<ul>
                    <li>沈腾</li>
                    <li>玛丽</li>
                    <li>魏翔</li>
                    <li>艾伦</li>
                    </ul>`;
//3. 变量拼接
let lovest = '魏翔';
let out = `${lovest}是我心目中最搞笑的演员!!`;
console.log(out);

1.5.箭头函数

知识

// 声明一个函数
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"
    }
    // 普通函数直接调用时，其this是指向window的
    //直接调用
getName(); //尚硅谷
getName2(); //尚硅谷

//call 方法调用
// call方法可以改变函数内部this的值
getName.call(school); //ATGUIGU
getName2.call(school); // 尚硅谷

2. 不能作为构造函数实例化对象

let Person = (name, age) => {
    this.name = name;
    this.age = age;
}
let me = new Person('xiao', 30);
console.log(me);

结果将是会报错
在这里插入图片描述
而如果仍用function，则不会出现这种情况

let person = function(name, age) {
    this.name = name;
    this.age = age;
}
let me = new person('xiao', 30);
console.log(me);

在这里插入图片描述
不过vscode中提示说此构造函数可能会转化为类声明。
按照提示将函数转化为ES2015类，则可得到

class person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}
let me = new person('xiao', 30);
console.log(me);

3.不能使用arguments变量¹
但是function可以

4.箭头函数的简写

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