前言：大概包含六部分
VSCode使用、ES6、Node.js、Vue、Babel、Webpack
ES6类似于Java中的JDK版本7811等等，6也只是个新版本。
一、各部分简单介绍
1. ES6
ECMAScript6.0是浏览器脚本语言的规范，而各种我们熟知的js语言如JavaScript是规范的具体实现。
2.Node.js
Node.js是一个基于ChromeV8引擎的JavaScript运行环境。
官网：http://nodejs.cn/api/
该商城项目主要关注npm功能即可。
NPM是随同Node.js一起安装的包管理工具，javaScript-NPM等同java-maven
下载安装：
a. 官网下载安装node.js，并使用node -v检查版本
b. 配置npm使用淘宝镜像
npm config set registry http://registry.npm.taobao.org/
3. Vue
类似于后端的Spring
4. Babel
Babel是一个JavaScript编译器，我们可以使用es的最新语法编程，而不用担心浏览器兼容问题，它会自动转化为浏览器兼容的代码。
5. Webpack
自动化项目构建工具，gulp也是同类产品。
二、VSCode使用
插件：
open in browser 右键选择浏览器直接打开页面。
live server 修改文件保存后，页面自动刷新。右键：open with live server
Vue 2 Snippets和VueHelper。vue的代码提示插件，安装其中一个就行。
Vetur 。方便代码编写等。
三、ES6新特性
- let严格的作用域
报错：1、let.html:18 Uncaught ReferenceError: b is not defined
<script>
//var声明的变量往往会越作用域
//let声明的变量有严格局部作用域
{
var a = 1;
let b =2;
}
console.log(a);//后台可以打印
console.log(b);//后台报错
</script>
- let只能被声明一次
报错：Uncaught SyntaxError: Identifier 'b' has already been declared - var存在变量提升，let不会
报错：Uncaught ReferenceError: Cannot access 'b' before
//var会变量提升，let不会
console.log(a);//let.html:29 undefined
var a = 1;
console.log(b);// Uncaught ReferenceError: Cannot access 'b' before initialization
let b = 2;
- const声明常量，不运行被修改
报错：Uncaught TypeError: Assignment to constant variable.
5. 解构表达式
a. 数组解构
let arr = [1,2,3];
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];
let [a,b,c]=arr;
console.log(a,b,c);
b. 对象解构
const person = {
name: "fangk",
age: 18,
language: ['java','js','css']
}
// const name = person.name;
// const age = person.age;
// const language = person.language;
//大括号内为需要解构的参数，等号后面为需要解构的对象，可选
const{name,age,language} = person;//相当于上面的这些操作
//name:abc 为将解构出的name值赋给abc
const{name:aa,age:bb} = person;//此处若不赋值给aa，则相当于再次定义const name=person.name。会报重复定义的错
console.log(name,age,aa,bb);//打印fangk 18 fangk 18
6. 字符串扩展
a. 几个新的API
let str = "hello.vue";
console.log(str.startsWith("hell"));//true，是否以XXX开头
console.log(str.endsWith("ue"));//true，是否以XXX结尾
console.log(str.includes("."));//true，是否包含XXX
b. 字符串模板
let s = `
<div>asdad
<div\>
`;
console.log(s);
//字符串插入变量和表达式，变量名卸载${}中，${}中可以放入JavaScript表达式
function fun(){
return "这是一个函数";
}
const name = "fangk";
const age = 18;
let info = `我是${name},今年${age+10}岁,我想说：${fun()}`;
console.log(info);
7.函数优化
a. 参数默认值
//在es6之前，我们无法给一个函数参数设置默认值，只能采用变通写法；
function add (a,b){
//判断b是否为空，为空就给默认值
b = b || 1;
return a+b;
}
console.log(add(10));
//es6后可以这么写,直接给参数写上默认值，没传就会自动使用默认值
function add6(a,b=1){
return a+b;
}
console.log(add6(20));
b. 不定参数
function fun(...values){
console.log(values);
}
fun(1,2);
fun(1,2,3,4);
c. 箭头函数
//以前声明一个方法
var print = function(obj){
console.log(obj);
}
//现在声明一个方法
var printNow = obj => console.log(obj);
console.log(print("old"),printNow("new"));
//多个参数，多行代码
var sum = function(a,b){
c = a+b;
return c+a;
}
var sumnew = (a,b) =>{
c=a+b;
return c+a;}
console.log(sum(1,2),sumnew(2,3));
//无参数
var wucan = function(){
console.log("我是无参函数");
}
var wucannew = () => console.log("我是无参函数");
wucannew();
//箭头函数加解构表达式
const person = {
name: "fangk",age: 18
};
var jiegou = ({name}) => console.log(name);
jiegou(person);
8. 对象优化
a. 扩展API
var person = {
name: "fangk",
age: 18,
language: ['java', 'js', 'python']
};
console.log(Object.keys(person));//获取对象的所有key形成的数组
console.log(Object.values(person));//获取对象的所有value形成的数组
console.log(Object.entries(person));//获取对象所有key和value形成的二维数组
var targer = {a:1};
var sources = {b:2};
var sources2 = {c:3};
Object.assign(targer,sources,sources2);//将sources和2合并到targer中
console.log(targer);
b. 声明对象简写
const age =23;
const name = "fangk";
//传统
const person1 = {age:age,name:name};
//当变量名与对象属性名一致时，可简写
const person2 = {age,name};
console.log(person1,person2);
c. 对象的函数属性简写
let person3 = {
name: "fangk",
//以前
eat: function(food){
console.log(this.name+"在吃"+food);
},
//箭头函数this不能使用，必须使用对象.属性
eat1: food => console.log(person3.name+"在吃"+food),
eat(food){
console.log(this.name+"在吃"+food);
}
}
d. 对象扩展运算符
(...)用于取出参数对象所有可遍历属性然后拷贝到当前对象
//深拷贝
let person4 = {name:"fangk",age:18};
let copyp4 = {...person4};
console.log(copyp4);
//合并对象
let age1 = {age:20,sex:"男"};
let name1 = {name:"ff",aihao:"学习"};
let he = {...age1,...name1};
console.log(he);
9.map和reduce
a. map():接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
let arr = ['1','5','-5'];
arr = arr.map((item)=>{
return item*2;
});
arr = arr.map(item => item*2);//简写
console.log(arr);
b. reduce():为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素。
//arr.reduce(callback,[initialValue])
let result = arr.reduce((a,b)=>{
console.log("上一次处理后"+a);
console.log("当前正在处理"+b);
return a+b;
});
console.log(result);
10.Promise
代码中有示例，后续项目中实践。
11.模块化
概念：模块化就是把代码进行拆分，方便重复利用。类似java中的导包，要使用一个包，必须先导包。而js中没有包的概念，换来的是模块。
模块功能主要由两个命令构成：export和import
export命令用于规定模块的对外接口。
import命令用于导入其他模块提供的功能。
网友评论