ES6（超详细）1—持续更新中~

Crizz
156 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，[点击查看活动详情]

ES6专题所有文章：

ES6-1（let、const、解构赋值、模板字符串、对象简化写法、箭头函数） ES6-2（函数默认参数、扩展运算符、rest参数、Symbol） ES6-3（迭代器、生成器、Promise、Set、Map） ES6-4（Class、数值扩展、对象方法扩展、模块化）

一、let和const命令

在ES6之前，我们定义变量都是通过var，现如今新增了let与const，而这两者最大的区别就是变量与常量的区别

let

  1. 同一变量名不可重复声明
let star='小明'
let star='小鸣'  //error

1.png

  1. let有块级作用域 利用常用的循环举例子：
for(let i = 0; i < 10; i++){
  console.log(i)
}
console.log(i)  //error

2.png

for循环中的i是利用let定义的，所以它的作用域仅在这个for循环中，如果在循环外直接访问i，将会抛出未定义的错误，因为在全局中未定义i这个变量； 如果是使用var定义，由于不存在块级作用域，则相当于直接在全局中定义了i这个变量

  1. 不存在变量提前
console.log(i);
let i = 1;   //error

3.png

var定义变量时，会将其提前至整个js文件的开头进行定义，而let不存在变量提前

  1. 不影响作用域链

const

声明常量

const A = 'abc'
  1. 一定要赋初始值
const A;  //error

4.png

const声明的是一个常量，即声明之后不能对其值做任何更改，所以声明时若不对其进行赋值操作，这个常量的声明将是无意义的，因此在声明常量的同时也需要对其进行赋初始值的操作，否则将会报错

  1. 一般常量使用大写（潜规则）

  2. 常量的值不能修改

const A = 123
A = 456   //error

5.png

  1. 也具有块级作用域
{
    const A = 123
}
console.log(A)  //error

6.png

注意： const的块级作用域与let一样，一般可以理解为一个花括号内为一个块级作用域

  1. 对于数组和对象的元素修改，不算做对常量的修改
const team = ['小明','小王','小刘','小红'];
team.push('小林');

这里虽然team为常量，并且对数组进行了修改，但是并未报错 原因是无论是数组还是对象，你定义的变量或常量存储的是一个地址，该地址指向对应的数组或对象，所以如果对数组或对象进行了修改，只是修改了地址指向的空间存储的内容，并未改变常量所存储的地址的值，因此可以认为未对常量进行修改

二、解构赋值

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

数组的解构

const list = ['小明','小刘','小红','小王']
let [ming,liu,hong,wang] = list; 
console.log(ming)
console.log(liu)
console.log(hong)
console.log(wang)

7.png

对数组进行解构赋值时会将数组中的各个元素按照索引值赋值给声明的变量

对象的解构

const person = {
    name : '小明',
    age: 20,
    talk: function(){
        console.log("我是小明")
    }
}
let {name,age,talk} = person;
console.log(name);
console.log(age);
talk();

8.png

对对象进行解构赋值时会将对象中的各个属性按照属性名赋值给声明的变量，这也是后续经常用于从大体积的对象中提取数据的方法

三、模板字符串

模板字符串与普通字符串的区别在于用的是反引号``包裹字符串，并且在不仅支持换行，在字符串中还可以利用${变量名}轻易拼接变量，其类型仍旧是string

声明

let str = `我是一个模板字符串`
console.log(str,typeof str);

9.png

  1. 内容可以直接进行换行
let str = `
    <ul>
        <li>123</li>
        <li>456</li>
    </ul>`;

换行的操作一般用于定义某个节点的innerHTML时会用到，能够让HTML结构更加清晰明朗

  1. 变量拼接

在出现模板字符串之前，如果我们需要将一些变量拼接进字符串中，还需要使用+进行string的加法来进行拼接，而有了模板字符串后则方便了许多

let name = '小明';
let str = `我是${name}`;
console.log(str)

10.png

四、对象的简化写法

在ES6中对象书写语法上，如果对象中的key和value的名字相同，则可以进行合并

  1. 在对象中，可以直接写入变量和函数，作为对象的属性和方法,这样的书写更加简洁
let name = '小明';
let print = function(){
    console.log('123');
}

const school = {
    name,
    print,
    improve(){
        consolg.log('456');
    }
}

示例中定义improve方法的写法，说明时定义了一个名为improve的方法，显然这种写法相比于improve:function(){console.log('456')}简洁了许多

同时这种定义方法的方式在Vue和React等框架的组件中也是随处可见的一种写法

五、箭头函数

ES6允许使用箭头（=>）定义函数，箭头函数与普通函数的最大区别便是其this指向的不同，普通函数的this指向的是调用该函数的实例对象，而箭头函数的this指向的是其在声明时的作用域下的this值，相当于继承了其作用域的this值

  1. 箭头函数的this是静态的
function A(){
    console.log(this.name)
}

let B = () => {
    console.log(this.name);
}

window.name = '小明';
const school = {
    name: 'xiaoming'
}

//直接调用
A()   //小明
B()  //小明

A.call(school); //xiaoming
B.cal(school);  //小明

call()方法可以指定调用的对象，代码中即让school这个实例对象分别去调用A和B这两个函数

显然A函数的this指向的是调用他的school对象，所以输出school.name

而B函数为箭头函数，其this指向声明时的作用域即全局作用域，即window对象，故输出window.name

  1. 不能作为构造函数构造实例化对象
let A = (name,age) => {
    this.name=name;
    this.age=age;
}
let me = new A('小明',123)  //error

11.png

  1. 不存在arguments变量
let fn = () => {
    console.log(arguments)；
}
fn(1,2,3)  //error

12.png

普通函数的身上会有arguments这个属性，其存储了函数传入所有参数

注意： arguments只是一个类数组，并不是数组

  1. 简写

当箭头函数的形参只有一个的时候，可以忽略参数的小括号 当箭头函数的内部语句只有一条的时候，可以省略花括号，并且此时return也要省略

let add = (n) => {
    return n + 1;
}
//上面的函数等同于下面
let add = n => n+1;

今天就到这吧，大二dog上课去了o(╥﹏╥)o

哈喽~ 这里是Crizz的前端之旅

ES6专题持续更新中~

若有收获，就点个赞吧

avatar
文章
阅读
粉丝