Vue3.0入门知识：Npm使用、模板字面量、函数、展开运算符、对象字面量、解构赋值、箭头函数、

Vue3.0学习笔记一

本文章为本人学习笔记，仅供参考，如有不足，恳请指正。

NPM

npm installL安装程序包及其依赖的所有程序包，如果package.json文件存在则安装依赖包，不存在则创建

npm install <package-name>  //安装特定名称的软件包 特点：安装模块到项目node_modules目录下，不会修改package.json文件，运行 npm install 初始化项目时不会下载模块。
    
npm install <package-name>  -g //安装模块到全局，不会在项目node_modules目录中保存模块包。 不会修改package.json文件。 运行 npm install 初始化项目时不会下载模块。

npm install <package-name> --save  // 安装模块到项目node_modules目录下。会在package.json文件的dependencies 属性将模块依赖写入。运行 npm install 初始化项目时，会将模块下载到项目目录下。运行npm install --production或者注明NODE_ENV变量值为production时，会自动下载模块到node_modules目录中。

npm install  <package-name>  --save-dev // 安装模块到项目node_modules目录下。会在package.json文件的devDependencies 属性将模块依赖写入。运行 npm install 初始化项目时，会将模块下载到项目目录下。 运行npm install --production或者注明NODE_ENV变量值为production时，不会自动下载模块到node_modules目录中。

npm更新依赖包

npm update <name> -g://全局更新
npm update <name> --save：//更新当前生产环境依赖包
npm update <name> --save-dev：//更新开发环境依赖包

JS6基础知识

模板字面量

使用反引号`可以实现多行字符串

let str=`hello
world`
hello
world

使用类似于EL表达式的字符串占位符

let name="love";
let hello="hello"+${name};
hello love

函数

默认参数

js支持设置函数默认值，如下：

function f(url="/local",time=2000){}
f();//两个参数都使用默认值
f("/test");//url使用给定值，time使用默认值
f("/test",1000);//两个参数均使用给定值

rest参数

js的函数无论在函数申明里定义了多少形参，都可以传入任意数量的参数，函数内可以通过arguments对象来访问传入的参数

function f(op){
    let res=0;
    if(op=='+'){
        for(let i=1;i<arguments.length;i++){//第一个参数是命名参数已被使用，因此遍历时需要从1开始遍历
            res+=arguments[i];
        }
	}
    return res;
}
/*如果从0下标开始遍览arguments对象结果是0+123456，arguments[0]是字符串类型*/
f('+',1,2,3,4,5,6);
21

使用rest参数指定参数

function f(op,...data){
    let res=0;
    if(op=='+'){
        for(let i=0;i<data.length;i++){
            res+=data[i];
        }
	}
    return res;
}
f('+',1,2,3,4,5,6);
21

传入的data是一个数组对象，可以接受任意数量的参数

展开运算符

类似于rest参数"…"，不过rest参数是将多个独立参数整合为数组，而展开运算符是将一个数组展开为独立的参数，如下

function sun(a,b,c){
    return a+b+c;
}
let arr=[1,2,3];
console.log(sum(...arr));
6

展开运算符将arr里的参数展开为独立参数传入函数，你可以想象成展开运算符将数组展开成了"1,2,3"形式的代码

//其他用法
//复制数组
let arr1=[1,2,3];
let arr2=[...arr1];//类似于let arr2=[1,2.3]
arr2=[1,2,3]//arr2是复制的arr1，不是arr1的引用，两个数组的值修改不会相互影响

//合并数组
let a1=[1,2];
let a2=[3,4];
let a3=[...a1,...a2];
a3=[1,2,3,4];

//复制对象属性
let obj1={
    title:"love",
    main:"xl"
}
let obj={...obj1,time:1000}
//新添加的属性如果位于位于复制进来的对象属性右边且和其某个相同将会覆盖
//let obj2={...obj1,title:1000}->obj2={title:1000,main:"xl"}
obj={ 
    title:"love",
    main:"xl",
    time:1000
}

对象字面量语法拓展

属性初始值简写

let name="xl";
let sex="女";
let obj={name,sex}
obj={name:"xl",sex:"女"}

对于对象的属性名和变量名相同的，可以不用写成key:value形式，默认变量名就是属性名

对象方法简写

let obj={
    show(){
        console.log("love xl forever");
    }
}

对象方法可省去function关键字和冒号

可计算的属性名

JS中对对象属性的访问有.访问和[‘属性名’]两种方式，对于普通字符串属性名可以直接使用点访问，如果属性名包含特殊字符或者中文，亦或需要通过计算得到属性名，则只能通过方括号访问进行初始化，访问都可以使用。

let obj={};
obj.("a"+"b")=123;//×
obj["a"+"b"]=123;//√

解构赋值

当需要将一个变量的某个/些属性赋值给某个变量时，可以通过JS的解构进行赋值，见如下代码：

let book={
    title:"JS从入门到入土",
    price:9.9
};
let {title,price}=book;//使用花括号包含变量的声明方式声明时必须赋值
let title,price;
{title,price}=book;//使用已经声明的变量进行解构赋值时必须加花括号
title="JS从入门到入土"
price=9.9

对于解构赋值如果使用var,let,const声明解构式变量{value1,…}则在声明时必须同时赋值。以上两种方式要求变量名需要在对象属性里出现同名的才能对应赋值，如果不存在则会赋值为Undefined，可以通过如下方式对对象中不存在对应的变量赋值：

/*1、指定字段对应:属性名：局部变量名*/
let {title:t,price:p}=book;
t="JS从入门到入土"
p=9.9

/*2、赋初值*/
let {title,p=8.9}=book;
title="JS从入门到入土"
p=8.9

用例一

给变量赋值时同时给函数传参

function f(book){}
let title,price;
f({title,price}=book);

用例二

对嵌套对象赋值

let obj={
    name:"love",
    who:"xl",
    time:{
        today:"2021-7-31"
    }
};
let {name,who,time:{today:time}}=obj;
name="love";
who="xl";
time:"2021-7-31";

对time赋值意思是找到obj的time属性后继续查找name属性，并且对应变量time

数组解构

数组结构使用的是方括号[]

let arr=[1,2,3];
let [a,b,c]=arr;//基本用法，声明时赋值
a=1;
b=2;
c=3;
let [,,m]=arr;//为某个位置提供一个变量名即可实现第某个元素赋值
m=3
let a,b,c;
[a,b,c]=arr;//声明后赋值加[]
[a,b,c,d=0]=arr;//指定默认值，不存在时为默认值
d=0

嵌套数组赋值

let arr=['i','love',['xl','么么哒']];
let {a,b,[,c]}=arr;
a=i
b=love
c=mmd

展开运算符+数组解构

let arr=[1,2,3,4];
let {copy,..last};//将除去第一个元素的剩下元素赋值给last
copy=1
last=[2,3,4] 

箭头函数

let welcome=msg=>msg;
/*相当于*/
function welcome(msg){
    return msg;
}

如果函数参数多余一个，则需要在箭头左侧参数两侧加括号，并且在箭头右端的参数需加模板字面量

let Love=(name,msg)=>`${name},${msg}`;

空参数列表函数

let welcome=()=>"welcome you";
/*相当于*/
function welcome(){
    return "welcome you";
}

多语句函数体函数，需要用花括号包裹函数体

let sum=(a,b)=>{
    let c=a+b;
    return c;
}

其他应用

/*1、空函数*/
let f=()=>{};

/*2、返回值是对象*/
let f=(name,sex)=>({name,sex});