ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准。
ES6 的目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
ECMAScript 是 JavaScript 的规格,JavaScript 是 ECMAScript 的一种实现
简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js 是脱离浏览器环境运行的 JavaScript 程序,基于 Google 的 V8 引擎,V8 引擎执行 Javascript 的速度非常快,性能非常好。
Node.js 可以部署一些高性能的服务。
在 dos 窗口中执行命令查看版本号
node -v
创建 hello.js
文件,写 js 代码
console.log("hello, nodejs");
打开命令行终端并输入命令
node hello.js
这样,没有使用浏览器也可以运行 js 程序了
node-server.js
// node 中自带的 require 引入方法,http 也是 node 中自带的服务对象
const http = require("http");
http.createServer(function(request,response){
// 发出 http 请求的头部信息
// http 的状态码:200 OK
// 请求的内容类型:text/plain
response.writeHead(200, {"Content-Type": "text/plain"});
// 响应的数据 "hello,welcome",此时并不支持中文
response.end("hello,welcome");
}).listen(8888);
console.log("服务器已启动,请访问 http://127.0.0.1:8888");
http://localhost:8888/
ctrl + c
NPM 全称 Node Package Manager,是 Node.js 包管理工具。
NPM 是全球最大的模块生态系统,里面所有的模块都是开源免费的,也是 Node.js 的包管理工具,相当于 Maven。
如果一个项目需要引用很多第三方的 js 文件,比如地图、报表等文件,那么可以把这些 js 文件统一放在一个仓库里,谁需要谁就去仓库中拿过来。NPM 就是这个仓库系统。如果需要某个 js 文件,那就去远程仓库中下载,放在本地磁盘中,进而引用到项目中。
Node 的环境在安装的过程中,npm 工具就已经安装好了。
Node.js 默认安装的 npm 包和工具的位置在 Node.js 目录下的 node_modules。在这个目录下可以看见 npm 目录,npm 本身就是被 NPM 包管理器管理的一个工具,这说明 Node.js 已经集成了 npm 工具。
# 在命令提示符查看当前 npm 版本
npm -v
项目初始化:全新创建一个目录,作为项目目录,使用 dos 命令进入此目录,输入命令 。
npm init
# 接下来是一堆项目信息等待输入
# 如果使用默认值或不知道怎么填写,则直接回车即可。
# package name: 项目名
# version: 版本号
# description: 项目的描述
# entry point: 项目的入口文件(作为 node 服务的 js 文件)
# test command: 项目启动时来执行脚本文件的命令(默认为 node app.js)
# git repository: git 的仓库地址(可以不写)
# keywirds:项目关键字(可以不写)
# author: 作者名字
# license: 发行项目需要的证书(可以不写)
最后会生成 package.json 文件,这个是包的配置文件,相当于 maven 的 pom.xml,之后可以根据需要进行修改。
如果按照默认值初始化可使用如下命令:
npm init -y
NPM 官方的管理的包都是从 http://npmjs.com
下载的,但是这个网站在国内速度很慢。推荐使用淘宝 NPM 镜像 http://npm.taobao.org/
,它是一个完整的 npmjs.com
镜像且尽量保持同步。
设置镜像和存储地址:
# 配置镜像地址
npm config set registry https://registry.npm.taobao.org
# 设置 npm 下载包的存储地址(建议英文目录)
npm config set prefix "E:\\repo_npm"
# 查看 npm 配置信息
npm config list
npm install jquery
使用 npm install 安装依赖包的最新版
模块安装的位置:项目目录\node_modules
安装会自动在项目目录下添加 package-lock.json 文件,这个文件帮助锁定安装包的版本
同时 package.json 文件中,依赖包会被添加到 dependencies
节点下,类似 maven 中的 <dependencies>
上述命令下载的是最新版的 jQuery。
如果项目使用 1.9.1 版本进行开发,通过 npm 安装的版本太新,就会导致项目失效,可以执行以下命令安装对应的版本:
npm install jquery@1.9.1
ES 标准中不包含 DOM 和 BOM的定义,只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。
let
声明变量let
声明变量与 JavaScript 中 var
声明变量有什么区别?
{
// var 声明的变量是全局变量
var a = 0;
// let 声明的变量是局部变量
let b = 0;
}
console.log(a);
// 错误:b 未定义
console.log(b);
// var 可以声明多次
var m = 1;
var m = 2;
// let 只能声明一次
let n = 3;
// 语法错误:n 已经声明过了
let n = 4;
console.log(m);
console.log(n);
// var 声明的变量会全局存储
// 没有报错,输出:undefined
console.log( x );
var x = "苹果";
// let 声明的变量只能在执行后才存储
// 错误:y 没有定义
console.log(y);
let y = "香蕉";
const
声明常量const
声明常量为只读变量
SyntaxError: Missing initializer in const declaration
const PI = 3.14;
// 错误:Assignment to constant variable
PI = 3.1415;
console.log( PI );
解构赋值是对赋值运算符的扩展,它是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。
解构,就是将集合型数据进行分解和拆分,把里面的值逐一遍历获取。这在代码书写上简洁且易读,语义更加清晰明了;也方便了复杂对象中数据字段获取。
var arr = [1,2,3];
// 传统的 js
let a = arr[0];
let b = arr[1];
let c = arr[2];
console.log(a,b,c);
// ES6 的解构
var [x,y,z] = arr;
console.log(x,y,z);
var user = {
username : "布莱尔",
weapon:"菜刀",
horse:"白马"
};
// 传统的 js
let name = user.username;
let weapon = user.weapon;
let horse = user.horse;
console.log("姓名:"+name+",武器:"+weapon+",坐骑:"+horse);
// ES6 的解构
// 注意:解构的变量名必须是对象中的属性
let {username,weapon,horse} = user;
console.log("姓名:"+username+",武器:"+weapon+",坐骑:"+horse);
模板字符串相当于加强版的字符串,用反引号来表示。除了作为普通字符串,还可以用来定义多行字符串,以及在字符串中加入变量和表达式。
let str = `hello,
where are you?
Let's go out for happy hour.`;
console.log(str);
let name = `布莱尔`;
let age = 20;
// 传统的拼接字符串
var info1 = "我叫:"+name+",今年"+age+"岁";
console.log(info1);
// ES6 的拼接字符串
var info2 = `我叫:${name},明年${age+1}岁`;
console.log(info2);
function test(){
return "布莱尔";
}
let str = `我的名字叫${test()},很高兴认识你。`;
console.log(str);
定义对象的时候,可以用变量名作为属性名
let name = `布莱尔`;
let age = 19;
// 传统
let user1 = {
name : name,
age : age
};
console.log(user1);
// ES6 新语法中的简写
let user2 = {name,age};
console.log(user2);
// 传统
let user1 = {
say : function(){
console.log("大家好");
}
};
user1.say();
// ES6
let user2 = {
say(){
console.log("大家好哦");
}
};
user2.say();
拓展运算符 {...}
将参数对象中所有可以遍历的属性拿出来,然后拷贝给新对象。
let user1 = {
name:"布莱尔",
age:20
};
let user2 = {...user1};
console.log(user1);
console.log(user2);
两个对象合并成一个对象。
let user1 = {
name:"布莱尔",
age:18
};
let user2 = {head:"诸葛亮"};
let user = {...user1, ...user2};
console.log(user);
function test(name , age = 18){
console.log(`我叫${name},我今年${age}岁`);
}
//我叫小明,我今年33岁
test("小明",33);
//我叫小红,我今年18岁
test("小红");
//我叫小赵,我今年null岁
test("小赵",null);
//我叫小马,我今年岁
test("小马","");
// 我叫小张,我今年18岁
test("小张",undefined);
function test( ...arg ){
console.log(`传入了${arg.length}个参数`);
for(var i = 0; i<arg.length; i++){
console.log(arg[i]);
}
}
test();
test(1);
test(1,2);
test(1,2,3,4,5,6);
test("布","莱","尔",17);
箭头函数提供了一种更加简洁的函数书写方式。基本语法是:参数 => 函数体
。
// 传统
var f1 = function(a){
return a*10;
}
console.log(f1(10));
// ES6
// 当箭头函数没有参数或者有多个参数,要用 "()" 括起来
// 当箭头函数的函数体有多行语句,用 "{}" 括起来,表示代码块
var f3 = (a,b) => {
let sum = a+b;
return sum;
}
console.log(f3(3,7));
// 当只有一条语句,并且需要返回时,可以省略 "{}",结果会自动返回
var f4 = (a,b) => a + b;
console.log(f4(11,22));
// 当箭头函数一个参数时,可以省略 "()"
var f2 = a=>a*10;
console.log(f2(20));
Promise 用来解决回调函数的嵌套问题。
setTimeout(()=>{
console.log(1);
setTimeout(()=>{
console.log(2);
setTimeout(()=>{
console.log(3);
setTimeout(()=>{
console.log(4);
},1000);
},1000);
},1000);
},1000);
// 使用 promise:
// Promise 的构造函数接收一个参数,是函数,
// 并且传入两个参数:
// resolve (异步操作执行成功后的回调函数),
// reject (异步操作执行失败后的回调函数)
next = n =>
new Promise(function(resolve, reject) {
setTimeout(function() {
resolve(n);
}, 1000);
});
next(1).then(res => { // 成功
console.log(res);
// 在 then 方法中调用的 next 方法,
// 一定要用 return ,
// 否则不会通过 resolve 把数据往下传递
return next(2);
}).then(res => {
console.log(res);
return next(3);
}).then(res => {
console.log(res);
}).catch(() => {
// 处理失败:catch 方法的第二个参数是失败的回调
console.log("出错");
});
Java 语言的模块化做法是 import 引入之后,就能使用了。ES6 的模块化,需要将一个 js 文件声明成一个模块导出之后,另一个 js 文件才能引入这个模块;每一个模块只加载一次(是单例的), 若再去加载同目录下同文件,直接从内存中读取。
创建 user.js
文件
function addUser(name){
return `保存${name}成功!`;
}
function removeUser(id){
return `删除${id}号用户!`;
}
// 声明模块并导出
/*
module.exports={
save:addUser,
delete:removeUser
}*/
// 声明模块导出的简写
module.exports={
addUser,
removeUser
}
test.js
// 引入 user 模块
let user = require("./user.js");
console.log( user );
let result1 = user.addUser("布莱尔");
let result2 = user.removeUser(15);
console.log(result1);
console.log(result2);
user.js
let name = "布莱尔";
let age = 20;
let fn = function(){
return `我是${name}!我今年${age}岁了!`;
}
// 声明模块并导出
export{
name,
age,
fn
}
test.js
import {name,age,fn} from "./user.js"
console.log(name);
console.log(age);
console.log(fn);
运行 test.js
出现错误,原因是 node.js 并不支持 ES6 的 import 语法,需要将 ES6 转换降级为 ES5。
babel
环境babel
是一个广泛使用的转码器,可以将 ES6 代码转为 ES5 代码,从而在现有的环境中执行。
这意味着可以用 ES6 编写程序,而不用担心现有环境是否支持。
babel
客户端环境运行命令:
npm install --global babel-cli
查看版本:
babel --version
npm init -y
babel
配置文件 .babelrc
,并输入代码配置:{
"presets": ["es2015"],
"plugins": []
}
npm install --save-dev babel-preset-es2015
babel user.js --out-file .\dist\user.js
# 或者
babel user.js -o .\dist\user.js
node .\dist\test.js
as
的用法user.js
:如果不想暴露模块当中的变量名字,可以通过 as
来进行操作:
let name = "布莱尔";
let age = 18;
let fn = function(){
return `我是${name}!我今年${age}岁了!`;
}
// 声明模块并导出
export{
name as a,
age as b,
fn as c
}
test.js
import {a,b,c} from "./user.js";
console.log(a);
console.log(b);
console.log(c());
也可以接收整个模块
test.js
// 通过 "*" 来批量接收,as 来指定接收的名字
import * as info from "./user.js";
console.log(info.a);
console.log(into.b);
console.log(into.c());
可以将所有需要导出的变量放入一个对象中,然后通过 default export 进行导出
/**** person.js 导出 ****/
export default{
name:"布莱尔",
eat(){
return "吃饭";
}
}
/**** test.js 导入 ****/
import p from "./person.js";
console.log(p.name, p.eat());
如果导入的多个文件中,变量名字相同,即会产生命名冲突的问题;为了解决该问题,ES6 提供了重命名的方法。在导入名称时可以这样做:
/**** student1.js ****/
export let name = "我来自 student1.js";
/**** student2.js ****/
export let name = "我来自 student2.js";
/**** test_student.js ****/
import {name as name1} from './student1.js';
import {name as name2} from './student2.js';
// 我来自 student1.js
console.log(name1);
// 我来自 student2.js
console.log(name2);