ES6新特性+Vue使用小结

前言：本文为原创 若有错误欢迎评论！

一.ES6新特性

1.let和const

1. 原因： var有一个问题，就是定义的变量有时会莫名奇妙的成为全局变量
2. let： let所声明的变量，只在let命令所在的代码块内有效
3. const： const声明的变量是常量，不能被修改

2.解构表达式

1. 数组解构

   let arr = [1,2,3]
   const [x,y,z] = arr;// x，y，z将与arr中的每个位置对应来取值

2. 对象解构

           const person = {
               name:"jack",
               age:21,
               language: ['java','js','css']
           }
   
           // 解构表达式获取值
           //方式1：赋给对应得字段名
           const {name,age,language} = person;
           // 解构出来的对象可以直接打印（js只有一个变量类型 不用提前声明）
           console.log(name,age,language);
   
           //方式2：赋给对应字段名的变量
           //  {name:x}：name是person中的属性名，冒号后面的x是解构后要赋值给的变量
           const {name:x ,age:y ,language:z} = person;
           console.log(x,y,z);
   
   注意：对象解构时字段的名称必须相同 是根据字段名来赋值
   
   

3.函数优化

1. 函数参数可以带默认值

   function add(a , b = 1) {
   }

2. 箭头函数（相当于lamda表达式）

   // 两个参数（一个参数时可以省略括号）
   var sum = function (a , b) {
   return a + b;
   }
   // 简写为：
   var sum2 = (a,b) => a+b;

3. 箭头函数结合解构表达式

        const person = {
                name:"jack",
                age:21,
                language: ['java','js','css']
         }
   
        //函数获取对象某个字段值的常规办法 先传来整个对象
        function hello(person) {
                console.log("hello," + person.name)
        }
   
        //直接在参数就解构该对象 直接获得指定字段的值
        var hi = ({name}) =>  console.log("hello," + name);
   

4.数组的.map()和.reduce()方法

1. 数组.map() :
   接收带一个参数的函数，将原数组中的所有元素用这个函数处理后放入新数组返回。

                let arr = ['1','20','-5','3']
                //使用箭头函数
                arr = arr.map(s => parseInt(s));
   

2. 数组.reduce()
   接收两个参数：

   • 带两个参数的一个函数（必须）：从头开始每次用两个数组元素执行 第一个元素和第二个元素先执行 执行完后返回一个结果 又和第三个数组元素执行 以此类推
   • 起始参数（非必须）：即有该参数的话 将用该参数和数组第一个元素执行 返回结果再和第二个元素执行 以此类推

                  //定义一个数组
                   const arr = [1,2,3]
                   //没有其实参数
                   arr.reduce((a,b)=>a+b)）：6
                   //有起始参数
                   arr.reduce((a,b)=>a+b) ,1000）:1006
   
   

5.对象(Object)拓展

Object.keys(obj)：获取对象的所有key形成的数组
Object.values(obj)：获取对象的所有value形成的数组
Object.entries(obj)：获取对象的所有key和value形成的二维数组。格式：[[k1,v1],[k2,v2],…]
Object.assign(dest, …src) ：将多个src对象的值 拷贝到 dest中（浅拷贝）。

            let obj={name:"jack",age:10}
            let dest={}

            //获得obj的value数组
            Object.values(obj)

            //从第一个src开始复制 如果后面的src和dest或者前面的src相同字段 后面的将覆盖前面的
            Object.assign(dest,obj)

6.字符串拓展

1. api：

   startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
   endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

   2）字符串模板
   ES6中提供了`来作为字符串模板标记（即换行之后不会像用" "时 拼接成一个长串）

            let str=`<div>
              <h1> </h1>
              </div>
              `;
   

7.数组拓展

find(callback)
数组实例的find方法，用于找出第一个符合条件的数组成员。

• 参数是一个回调函数 返回值为bool，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

findIndex(callback)：

• 数组实例的findIndex方法的用法与find方法非常类似，
  返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

includes(数组元素)：

• 与find类似，如果匹配到元素，则返回true，代表找到了。

8.小结

1. const let
2. includes startsWith endsWith
3. 解构表达式：数组 const [x,y,z] = arr 对象 const {name:a, age:b}=person
4. 函数优化: 1.赋默认值 2.箭头 ()=>{} 3.对象 eat(){}
5. map(fun)：处理数组中的每一个元素放入新的数组
6. reduce((a,b)=>a+b, 100):
7. keys values entries
8. assign(dest, …src): 浅拷贝
9. find() findIndex includes

二.Vue安装

1.安装node.js和npm

• 参考我后面博客：”https://blog.csdn.net/weixin_43934607/article/details/100538881“ -> 第“八.8”

2.在idea创建好vue项目

1. 新建Empty project
2. 在该工程右键 新建module
3. 在module里选static web -> static web

3.用管理员身份运行cmd 并进入项目的根目录

4.进行初始化

npm init -y

• 根目录出现：“package.json” 和 “package-lock.json”

5.安装Vue

npm install vue --save

• 根目录出现："node_modules/vue/ "

6.在要使用vue时引入

<script src="node_modules/vue/dist/vue.js" ></script>

7.如果还要使用vue-router

1. 安装

npm install vue-router --save

2. 引入

<script src="../node_modules/vue-router/dist/vue-router.js"></script>

三.Vue小结

1.html指令

2.vue实例属性

3.vue定义组件

4.vue定义路由