一周学习总结：vue学前准备知识

学习目标：

       快速学完vue的学前准备知识，方便之后对vue2和vue3的学习

---

学习内容：

1. 学习es6语法规范及其新特性
2. 包管理器
3. 原型和原型链
4. 数组的常用方法

---

学习产出：

那么在本次博客中，我们会着重介绍一下es6的新特性

es6的新特性和语法规范

        1）let命令

                let的用法和var的作用相似，都是声明变量，但是区别在于：let的创建多了作用域的限制，在使用上和c语言c++更为相似

                在var创建的变量中，变量会被提升并且全局可用，在变量的调用中没有作用域的限制，通常会导致在预期的作用域外被意外调用，容错率非常低，使用起来很容易发生预料之外的错误。

                相较于var，let则有规定的作用域，称为块级作用域，其生命周期只在当前所在的花括号，在其对应的花括号外无法调用，也无法修改

                如上图，在let的花括号内可以调用let变量，但是在let花括号外调用就会报错

                此外，let变量在开始运行时不会被提前，不同于var变量。如下例子

                此处我们可以看到，var变量确实被提前了，返回了undefined，但是let变量就会报错。因为var在js引擎中会被先提升到整个代码的前边，但是let代码只对写在let变量定义后的作用域生效，与c语言和c++更相近。而且不同花括号中的同名变量并不互通，所以可以在不同的花括号中定义同名的函数，其值不会互通，不用担心出错。

         2）const命令

                const一旦声明不可改变，即常量，生成后其值不可改变，通常用于一些固定的数学数值，或者一旦设置不会被修改也不希望被修改的值。

                语法规范：const  变量名；（与c不同，const后并不用接var或者let）

                如上图所示，const值pai在定义后不饿能修改，否则会报错

                和let一样，const常量不会被提升，需要注意代码的定义和调用顺序

                

        3)对象解构赋值

                对象解构赋值，即将一个对象内的变量解构出来，然后将其变量的值赋值到指定的变量上去

                eg.
               

var user = {
    name = "zhang_san"
    age = 18;
}
const {name,age} = user;

                如上，则可将user中的值赋值给name和age，解构赋值不局限于变量的解构赋值，对于方法的解构赋值同样生效，例如我们常用的console.log也可用通过解构赋值来简化

const {log} = console;

                如上，以后再调用console.log时，不用打console，直接打log（）也可以调用console.log函数，其他函数同理

                但是这些赋值方法只能给和对象中同名的变量进行匹配，如果不同名不能赋值

        4）字符串的扩展和新增功能

                1.es6中新增了unicode功能，unicode用于解决不同语言之间的兼容性问题

                2.字符串遍历接口

                 在es6中想要遍历字符串中的每个字符只需要进行如下操作即可

var name = "zhang_san";

//传统的字符串遍历方法
for(var i=0; i<name.length, i++){
    console.log(name[i]);
}


//es6新增的遍历方法
for(var i of name){
    console.log(i);
}

                新增方法在使用时相对简单和便捷一些

                3.模板字符串

                在es6中，我们可以以字符串作为模板，在字符串中添加一些链接或者变量参杂使用，实际使用如下：

var name = "淘宝"；
var lian_jie = "htttp://taobao.com";
var mo_ban = `<a href="${href}">${name}</a>`;
//模板字符串需要用反引号`引起来
//在需要插如变量的位置可以用${}来输入变量，变量写在{}内

                4.新增检索函数includes(),startwith(),endwith()

                这三种新增方法都是检索当前字符串中是否有自己需要检索的字符串，返回的是布尔值

                区别在于includes()是只要有就返回1，startwith必须是在头部有才返回1，endwith是必须在尾部有才返回1

                下面直接上一个例子就很清楚了

                

                5.新增函数repeat()

                将一个字符串重复输出，次数和参数一致

                 放一张效果图，挺简单，没啥好补充的

                6.新增补全函数padStart(),padEnd()

                上边两个函数是当指定的字符串没有达到规定长度时，对其进行补全到指定长度的函数，padStart()是在字符串头部补充，padEnd()是在尾部补充

                直接解释可能有点直白，我们上个例子来分析一下

                 如上图，先写一个需要补全的变量，然后调用函数，在参数中需要输入两个值，第一个值代表需要补全到多长，第二个值就是不足的长度用什么来补全

                其中，用于补全的字符可以是字符串，如果最后剩余的长度超出了用于补全的字符串，则多余部分会被抹去，如下

                如上，需要补全六位，但是给定的补全字符串为“123456789”，则只取前六位“123456”，多余的抹去

                7.去除空格trim()，trimStart()，trimEnd()

                如上三种函数即为去除空格函数，用来去除字符串中的空格，trim()可以去除所有空格，trimStart()用于去除位于头部的空格，trimEnd()用于去除位于尾部的空格

                 具体效果如上图，也很简单直白，但是只能去除两边的空格，中间的是不能去除的不需要多说什么

                8.查询函数at()

                用at()函数即可查询指定序号的字符，支持负索引（即从后往前的序号，-1就是倒数第一位），超出长度则返回undefined

        5）数组的拓展

                1.遍历输出数组中每一个值...

                这里的三个点不是省略号的意思，是新的运算符"..."，在数组名前加上"..."即可展开输出数组的所有值

                2.from()转换为真数组

                可以将伪数组，类数组转换为真数组，或者类似于数组的对象，类似于argument等伪数组只能读取数组中的值，或者length属性，但是不能使用其他数组方法，通过from可以将其转换为真数组，进而来使用数组的功能和方法

                3.of()将一组值转换为数组

                就和上上边说的一样，把一组值转换成数组

        6）对象的拓展

                新增简写

                   当属性名和将要用来被用来赋值的变量名相同名，可以省略掉属性的赋值操作。函数体也有简写方式

                

                 可以看到两种方法都可以实现同样的结果，但是第二种要简洁一些

        7）箭头函数

                不同于之前的函数定义方式，箭头函数的定义更简洁一些

                语法：var 函数名 = （参数）=> 返回值

                 如图，两种方法都能实现功能，但是箭头函数相对简洁，当参数只有一个时，不需要加括号

                如果函数体内不止一条语句，还有其他操作，则需要用花括号括起来

                 如图，该情况下，箭头函数和原本的函数定义方式区别不大，如果返回的是一个对象，则需要在对象返回值的花括号外加上一个圆括号。箭头函数通常用于实现匿名函数

                箭头函数中不能使用this，因为箭头函数中的this是指向上一级的对象的this

        8）set数据结构

                set结构和数组类似，在set中只能存在任何类型的唯一值，所以在数组去重中会有较大的作用