01 node.js，npm，es6入门

Node.js安装

1、下载对应你系统的Node.js版本:

https://nodejs.org/en/download/

命令提示符下输入命令

node -v

会显示当前node的版本

快速入门

1 控制台输出

如何在控制台输出，创建文本文件demo1.js,代码内容

var a=1;
var b=2;
console.log(a+b);

在命令提示符下输入命令

node demo1.js

2 使用函数

创建文本文件demo2.js

var c=add(100,200);
console.log(c);
function add(a,b){
    return a+b;
}

命令提示符输入命令

node demo2.js

运行后看到输出结果为300

3 模块化编程

创建文本文件demo3_1.js

exports.add=function(a,b){
    return a+b;
}

创建文本文件demo3_2.js

var demo= require('./demo3_1');
console.log(demo.add(400,600));

在命令提示符下输入命令

node demo3_2.js

结果为1000

4 创建web服务器

创建文本文件demo4.js
http为内置模块

var http = require('http');
http.createServer(function (request, response) {
    // 发送 HTTP 头部 
    // HTTP 状态值: 200 : OK
    // 内容类型: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain'});
    // 发送响应数据 "Hello World"
    response.end('Hello World\n');
}).listen(8888);
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

http为node内置的web模块

在命令提示符下输入命令

node demo4.js

服务启动后，我们打开浏览器，输入网址

http://localhost:8888/

即可看到网页输出结果Hello World
Ctrl+c 终止运行。

5 理解服务端渲染

创建demo5.js  ，将上边的例子写成循环的形式

var http = require('http');
http.createServer(function (request, response) {
    // 发送 HTTP 头部 
    // HTTP 状态值: 200 : OK
    // 内容类型: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain'});
    // 发送响应数据 "Hello World"
    for(var i=0;i<10;i++){
        response.write('Hello World\n');
    }  
    response.end('');   
}).listen(8888);
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

我们在命令提示符下输入命令启动服务

node demo5.js

浏览器地址栏输入http://127.0.0.1:8888即可看到查询结果。

右键“查看源代码”发现，并没有我们写的for循环语句，而是直接的10条Hello World ，这就说明这个循环是在服务端完成的，而非浏览器（客户端）来完成。这与我们原来的JSP很是相似。

6 接收参数

创建demo6.js

var http = require('http');
var url = require('url');
http.createServer(function(request, response){
    response.writeHead(200, {'Content-Type': 'text/plain'});
    // 解析 url 参数
    var params = url.parse(request.url, true).query;
    response.write("name:" + params.name);
    response.write("\n");
    response.end();
}).listen(8888);
console.log('Server running at http://127.0.0.1:8888/');

我们在命令提示符下输入命令

node demo6.js

在浏览器测试结果http://localhost:8888/?name=1

包资源管理器NPM

什么是NPM

npm全称Node Package Manager，他是node包管理和分发工具。其实我们可以把NPM理解为前端的Maven .

我们通过npm 可以很方便地下载js库，管理前端工程.

最近版本的node.js已经集成了npm工具，在命令提示符输入 npm -v 可查看当前npm版本

NPM命令

1 初始化工程

init命令是工程初始化命令。

建立一个空文件夹，在命令提示符进入该文件夹  执行命令初始化

npm init

按照提示输入相关信息，如果是用默认值则直接回车即可。

name: 项目名称

version: 项目版本号

description: 项目描述

keywords: {Array}关键词，便于用户搜索到我们的项目

最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml

我们之后也可以根据需要进行修改。

本地安装

install命令用于安装某个模块，如果我们想安装express模块（node的web框架），输出命令如下：

npm install express

出现黄色的是警告信息，可以忽略，请放心，你已经成功执行了该命令。

在该目录下已经出现了一个node_modules文件夹 和package-lock.json

node_modules文件夹用于存放下载的js库（相当于maven的本地仓库）

package-lock.json是当 node_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依赖，而忽略项目开发过程中有些依赖已经发生的更新。

我们再打开package.json文件，发现刚才下载的express已经添加到依赖列表中了.

关于版本号定义：

指定版本：比如1.2.2，遵循“大版本.次要版本.小版本”的格式规定，安装时只安装指定版本。

波浪号（tilde）+指定版本：比如~1.2.2，表示安装1.2.x的最新版本（不低于1.2.2），但是不安装1.3.x，也就是说安装时不改变大版本号和次要版本号。

插入号（caret）+指定版本：比如ˆ1.2.2，表示安装1.x.x的最新版本（不低于1.2.2），但是不安装2.x.x，也就是说安装时不改变大版本号。需要注意的是，如果大版本号为0，则插入号的行为与波浪号相同，这是因为此时处于开发阶段，即使是次要版本号变动，也可能带来程序的不兼容。

latest：安装最新版本。

全局安装

全局目录在哪里，执行命令

npm root -g

全局安装jquery, 输入以下命令

npm install jquery -g

批量下载

进入目录（package.json所在的目录）输入命令

npm install

淘宝NPM镜像

输入命令，进行全局安装淘宝镜像。

npm install -g cnpm --registry=https://registry.npm.taobao.org

查看cnpm的版本

cnpm -v

使用cnpm

cnpm install 需要下载的js库

运行工程

使用run命令

如果package.json中定义的脚本如下

dev是开发阶段测试运行

build是构建编译工程

lint 是运行js代码检测

我们现在来试一下运行dev

npm run dev

编译工程

npm run build

会生成dist文件夹

Webpack

​ Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

Webpack安装

全局安装

npm install webpack -g
npm install webpack-cli -g

安装后查看版本号

webpack -v

JS打包

（1）创建src文件夹，创建bar.js

exports.info=function(str){
   document.write(str);
}

（2）src下创建logic.js

exports.add=function(a,b){
    return a+b;
}

（3）src下创建main.js

var bar= require('./bar');
var logic= require('./logic');
bar.info( 'Hello world!'+ logic.add(100,200));

（4）创建配置文件webpack.config.js ，该文件与src处于同级目录

var path = require("path");
module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    }
};

以上代码的意思是：读取当前目录下src文件夹中的main.js（入口文件）内容，把对应的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

（5）执行编译命令

webpack

执行后查看bundle.js 会发现里面包含了上面两个js文件的内容

（7）创建index.html ,引用bundle.js

<!doctype html>
<html>
  <head>  
  </head>
  <body>   
    <script src="dist/bundle.js"></script>
  </body>
</html>

测试调用index.html，会发现有内容输出

CSS打包

（1）安装style-loader和 css-loader

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如 CoffeeScript、 JSX、 LESS 或图片。首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css

cnpm install style-loader css-loader --save-dev

--save-dev开发时依赖
（2）修改webpack.config.js

var path = require("path");
module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [  
            {  
                test: /\.css$/,  
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
};

（3）在src文件夹创建css文件夹,css文件夹下创建css1

body{
 background:red;
}

（4）修改main.js ，引入css1.css

require('./css/css1.css');

（5）重新运行webpack

（6）运行index.html背景变成红色

ES6

ECMAScript 6.0是JavaScript语言的下一代标准

Node.js中使用ES6

ES6+ 很多高级功能node是不支持的,就需要使用babel转换成ES5

（1）babel转换配置,项目根目录添加.babelrc 文件

{
  "presets" : ['es2015']
}

（2）安装es6转换模块

cnpm install babel-preset-es2015 --save-dev

（3）全局安装命令行工具

cnpm install  babel-cli -g

（4）使用

babel-node js文件名

语法新特性

变量声明let

ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如

  function aa() {
    if(bool) {
        var test = 'hello man'
    } else {
        console.log(test)
    }
  }

以上的代码实际上是:

function aa() {
    var test // 变量提升
    if(bool) {
        test = 'hello man'
    } else {
        //此处访问test 值为undefined
        console.log(test)
    }
    //此处访问test 值为undefined
  }

所以不用关心bool是否为true or false。实际上，无论如何test都会被创建声明。
ES6：
通常用let和const来声明，let表示变量、const表示常量。let和const都是块级作用域。怎么理解这个块级作用域？在一个函数内部 ，在一个代码块内部。看以下代码

 function aa() {
    if(bool) {
       let test = 'hello man'
    } else {
        //test 在此处访问不到
        console.log(test)
    }
  }

常量声明

const 用于声明常量，看以下代码

const name = 'lux'
name = 'joe' //再次赋值此时会报错

模板字符串

第一个用途，基本的字符串格式化

    //es5 
    var name = 'lux'
    console.log('hello' + name)
    //es6
    const name = 'lux'
    console.log(`hello ${name}`) //hello lux

第二个用途，多行字符串或者字符串一行行拼接

    // es5
    var msg = "Hi \
    man!"
    // es6
    const template = `<div>
        <span>hello world</span>
    </div>`

函数默认参数

在定义函数时便初始化了这个参数

    function action(num = 200) {
        console.log(num)
    }
    action() //200
    action(300) //300

箭头函数

箭头函数最直观的三个特点:

1不需要function关键字来创建函数

2省略return关键字

3继承当前上下文的 this 关键字

看下面代码（ES6）

 add=(response,message) => {
    return a+b;
 }
或
 add = (a,b)=>a+b;

相当于ES5代码

add=function(response,message){
     return a+b;
}

    //函数优化
    //例子1
    eat1=function(foot){
        console.log(foot);
    };
    eat=foot=>console.log(foot);
    eat1("鱼");
    eat("鱼");
    //例子2
    eat1=function(f1,f2){
        console.log(f1+":"+f2);
    };
    eat=(f1,f2)=>console.log(f1+":"+f2);
    eat("鱼","虾");
    eat1("鱼","虾");
    //例子3
    const p = {
        name:"xiaoming",
        age:12
    };
    function hello(p) {
        console.log("hello,"+p.name)
    }
    hello(p);
    //简化
    const hi = ({name}) => console.log("hi,"+name);
    hi(p);

对象初始化简写

ES5我们对于对象都是以键值对的形式书写，是有可能出现键值对重名的。例如

function people(name, age) {
        return {
            name: name,
            age: age
        };
    }
console.log(JSON.stringify(people('aa',11)));

以上代码可以简写为

  function people(name, age) {
        return {
            name,
            age
        };
    }
console.log(JSON.stringify(people('aa',11)));

{"name":"aa","age":11}

解构

将一个数据结构分解为更小的部分的过程

ES5提取对象中的信息形式如下

    const people = {
        name: 'lux',
        age: 20
    }
    const name = people.name
    const age = people.age
    console.log(name + ' --- ' + age)

ES6，例如

//对象
    const people = {
        name: 'lux',
        age: 20
    }
    const { name, age } = people
    console.log(`${name} --- ${age}`)
    //数组
    const color = ['red', 'blue']
    const [first, second] = color
    console.log(first) //'red'
    console.log(second) //'blue'

    //其他例子
    //取数组
    let arr = [2,3,4,5];
    let [,...rest] =  arr;
    console.log(rest); // [ 3, 4, 5 ]
    let [a,,b] =  arr;
    console.log(a,b);//2 4
    //取对象
    p = {name:"a",age:1,other:{name:"b",age:2}};
    let {other:{name}} = p;
    console.log(name);//b
    
    let{...o} = p;
    console.log(o);//{ name: 'a', age: 1, other: { name: 'b', age: 2 } }
    console.log(0==p);//false

Spread Operator

Spread Operator是三个点儿...
组装对象或者数组

    //数组
    const color = ['red', 'yellow']
    const colorful = [...color, 'green', 'pink']
    console.log(colorful) //[red, yellow, green, pink]
    
    //对象
    const alp = { fist: 'a', second: 'b'}
    const alphabets = { ...alp, third: 'c' }
    console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"

map和reduce

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

    
    // 例子
    let arr = ['1','2','3','4'];
    let arr2 = arr.map(i=>parseInt(i)+1);
    console.log(arr2);//[ 2, 3, 4, 5 ]

reduce()：接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：

• 第一个参数是上一次reduce处理的结果
• 第二个参数是数组中要处理的下一个元素
• 参数三相当于上一次reduce处理的结果的初始值

    //例子
    let arr3 = [0,1,2,3];
    let arr4 = arr3.reduce((a,b)=>{console.log(a+b);return a+b},1);
    console.log(arr4);
    // 1
    // 2
    // 4
    // 7
    // 7

import 和 export

import导入模块、export导出模块

lib.js

let fn0=function(){
    console.log('fn0...');
}
export {fn0}

demo9.js

import {fn0} from './lib'
fn0();

注意：node(v8.x)本身并不支持import关键字，所以我们需要使用babel的命令行工具来执行

babel-node demo9

Promise 是异步编程：略