ES6新增内容

新增的声明变量的关键字

开发的时候推荐：大量使用 const 结合少量的 let

let

声明一个变量, 变量遵循块级作用域(其实就是变量被限制在了一个花括号内)
变量没有变量提升
声明的变量是可以被更改的
声明的时候可以不给初始值

const

声明一个常量, 常量遵循块级作用域
变量没有变量提升
声明的常量是不可以被更改的
声明的时候必须给初始值

let/const 与 var 的区别

var:
- 1. 定义的变量遵循全局作用域/函数作用域
- 1. 声明的变量可以变量提升(但是执行定义提升了, 值没有提升, 所以是 undefined)
- 1. 变量可以重复声明
let/const:
- 1. 定义的变量/常量遵循块级作用域/函数作用域
- 1. 声明的变量/常量不能变量提升具有暂时性死区(其实就是说没有变量提升)
- 1. 变量不可以重复声明

let 与 const 的区别

let
- 1. 声明的是变量
- 1. 声明的变量可以被修改
- 1. 声明的时候可以没有初始值
const
- 1. 声明的是常量
- 1. 声明的变量不可以被修改
- 1. 声明的时候必须有初始值

箭头函数

ES6 新增的一个对以前普通函数的一个写法优化

箭头函数专属的写法优化

箭头函数的形参如果只有一个, 并且没有默认值的时候, 可以省略形参的小括号不写，如果函数的形参有多个, 或者说有一个形参并且有默认值, 或者没有形参, 这些情况都必须书写形参的小括号。
如果函数的调用要执行的代码只有 1 行, 那么可以省略大括号, 并且默认自带 return 效果

箭头函数和普通函数的差别

写法不同
函数内部的 this 不同

        // 1. 函数只有一个形参
        const fn1 = a => { }
        // 2. 函数只有一个形参 但是具有默认值
        const fn2 = (a = 100) => { }
        // 3. 函数没有形参
        const fn3 = () => { }
        // 4. 函数有多个形参
        const fn4 = (a, b, c, d) => { }

        // 5. 函数没有返回值, 并且内部代码有多行
        const fn5 = () => {
            console.log(1)
            console.log(1)
            console.log(1)
        }
        // 6. 函数不需要返回值, 内部代码有一行
        const fn6 = () => console.log(1)
        // 7. 当函数只需要返回一个对象的时候
        // const fn7 = () => {
        //     return { a: 1, b: 2 }
        // }
        const fn7 = () => ({ a: 1, b: 2 })
        // console.log(fn7())

        // 8. 函数内部只需要返回一个数组
        const fn8 = () => [1, 2, 3]
        // console.log(fn8())

        // 9. 函数内部返回一个新的箭头函数
        // const fn9 = () => {
        //     // return function () {}
        //     return () => {}
        // }
        const fn9 = () => () => {}
        console.log(fn9())

函数传参的默认值

我们在定义函数的时候, 有的时候需要一个默认值出现
就是当我不传递参数的时候, 使用默认值, 传递参数了就使用传递参数的参数
在 ES6 中我们可以直接把默认值写在函数的形参位置

const fn = (a = 10) => {
    console.log(a);
};

解构赋值

解构对象

要求:
- 声明变量的时候需要使用 {} 包裹
- 变量的名字必须和对象内部的某一个属性完全相同
- = 右边必须书写一个对象
作用: 将对象内部属性对应的值给到 = 左边的变量中

        var obj = {
            name: '张三',
            id: 10086,
            age: 28
        }
        let { name, id } = obj
        console.log(name)

解构数组

要求:
- 声明变量的时候需要使用 [] 包裹
- [] 内部的变量名只要符合命名规范与规则就行了
- = 赋值号右边必须跟一个数组
作用: 会按照数组内部元素的排列顺序, 依次赋值给 = 左边的变量

模板字符串

ES5 中我们表示字符串的时候使用 '' 或者 ""
在 ES6 中, 我们还有一个东西可以表示字符串 `` (反引号)

反引号与之前的区别

反引号可以换行书写
反引号可以直接在字符串里拼接变量, 不过需要借助 ${}

let num = 100;
let str = `
    hello${num}
    world
`;

展开运算符

运算符 ..., 叫做扩展运算符,作用是把数组展开

合并数组的时候可以使用

let arr = [1, 2, 3, 4];
let arr1 = [...arr, 5, 6, 7];
console.log(arr1);

在函数传递参数的时候也可以使用

let arr = [1, 2, 3];
function fn(a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
}
fn(...arr);
// 等价于 fn(1, 2, 3)

伪数组转真数组

        // 1. 获取到伪数组
        var box = document.querySelectorAll('.box')
        console.log(box)
        // 2. 将伪数组转换为真数组
        var newBox = [...box]
        console.log(newBox)

        var box = [...document.querySelectorAll('.box')]
        console.log(box)

在函数的形参前书写一个 ...,能够将所有的实参的内容, 存放在这个形参中, 并且是以数组的形式存储的,其他形参能放前不能放后

fn = (fb, ...myEl) => {}

JSON 字符串

json 是一种特殊的字符串格式, 本质上还是一个字符串

JSON.parse 将 json 格式的字符串转换为 js 的对象或者数组

var obj = JSON.parse(jsonObj);

JSON.stringify 是将 json 格式的字符串转换为 js 的对象或者数组

var jsonObj = JSON.stringify(obj);

this 关键字

每一个函数内部都有一个关键字是 this
重点: 函数内部的 this 之和函数的调用有关, 和函数的定义方式没有关系

函数内部的 this 指向谁, 取决于函数的调用方式

全局定义的函数直接调用: this == window

function fn() {
    console.log(this);
}
fn();
// 此时 this 指向 window

对象内部的方法调用, this == 调用者

var obj = {
    fn: function () {
        console.log(this);
    },
};
obj.fn();
// 此时 this 指向 obj

定时器的处理函数, this == window

setTimeout(function () {
    console.log(this);
}, 0);
// 此时定时器处理函数里面的 this 指向 window

事件处理函数, this == 事件源

div.onclick = function () {
    console.log(this);
};
// 当点击 div 的时候, this 指向 div

自调用函数, this == window

(function () {
    console.log(this);
})();
// 此时 this 指向 window

箭头函数内部没有 this, 箭头函数的 this 是上下文的 this

修改函数内部this指向

因为箭头函数内部没有 this, 所以我们的这些修改方法只适用于普通函数

call

语法: 函数名.call(将函数内部的this指向谁, 实参1, 实参2, 实参3, 实参4....)
作用: 修改函数内部的this指向, 并将参数传递进去, 并执行函数

apply

语法: 函数名.apply(将函数内部的this指向谁, 实参1, 实参2, 实参3, 实参4....)
作用: 修改函数内部的this指向, 并将参数传递进去, 并执行函数

bind

语法: 函数名.bind(将函数内部的this指向谁, 实参1, 实参2, 实参3, 实参4....)
作用: 修改函数内部的this指向, 并将参数传递进去, 然后将处理好的函数返回
注意: 这个方法不会立即执行函数, 而是会将修改好this的一个函数返回出来, 需要使用的话, 可以自己调用

js要点整理-15