nodejs简介和ES6新语法
01-nodejs入门
1.1-学习Node.JS的意义
- 了解客户端刘览器与服务端后台的交互过程，可以在以后的前端开发工作中与后人员之间的沟通更加容易理
解
。虽然以后工作中不-定用的上nodejs,但是通过对服务端开发的了解，能够让你在日常工作中与公司后台
人员之间的沟通变得更加轻松 - 了解服务端开发的一些特性,可以在以后的工作中，当我们前端与后台交互出现bug问题时，能够更快速的
定位bug是出现在自己的客户端还是别人的服务端。
。作为-名前端人员，如果对后台不了解，那么以后在与后台交互的开发中有可能明明是后台的问题，但是
由于自身对后台的不了解再加上前期的经验不足，导致解决问题的时间增加(加班)。 - 了解服务端开发的过程，可以为以后的职业发展打下一定的基础(全栈工程师)
1.2-什么是Node.js
-
Node.js官 网地址: https://nodejs.org/en/
中文:http://nodejs.cn/api/ -
Node是-个构建于Chrome V8引擎之上的一个avascript运行环境
- Node是-个运行环境，作用是让js拥有开发服务端的功能
-
Node使用事件驱动、非阻塞IO模型(异步读写)使得它非常的轻量级和高效
- Node中绝大多数AP|都是异步(类似于ajax)，目的是提高性能
-
Node中的 NPM是世界上最大的开源库生态系统(类似于github)
- NMP官网:https://www.npmjs.com
1.3-如何运行Node.js程序
-
使用终端命令node [js文件路径] 开始运行js文件
(1)其实当我们在终端执行Node命令时，并不是我们终端去编译解释js代码，而是电脑会自动打开Node安装包中Node.exe应用程序来打开js文件-
Node.exe是一个类似于终端的应用程序，没有界面(CL程序: command-line interface, 命令行界面)
-
Node.exe工作环境称之 为REPL环境，也就是交互式解释器。
(2) REPL才 是真正解释执行我们js代码的解释器
-
1.4-服务器端js和浏览器端js
-
js都是运行在浏览器端的
ECMAScript：js语法（变量、数据类型、表达式、代码结构（顺序、循环、分支）…）
BOM:浏览器对象模型，用js去操作浏览器的窗口
DOM：文档对象模型，用js去操作页面上的dom树
-
今天我们说，有了node.js，js也可以运行在服务器端的.
ECMAScript
-
意思是说在node.js中 不能写dom语法和bom语法
02-ES6新语法
2.1-let关键字
- var声明变量
1.有变量提升
2.没有块级作用域，是函数作用域
3.可以重复声明
4.可以重新赋值
-
let声明变量
1.没有变量提升
2.有块级作用域
3.不能重复声明
4.可以重复赋值
2.2-const关键字
- const关键字声明常量的（一旦声明就无法更改）
* 没有变量提升
* 有块级作用域
* 不能重复声明
* 不能重新赋值
* 声明必须初始化值
- 使用场景：
* 一些不会变化的值，比如圆周率PI
* 大事件项目中，保存及地址的就可以用常量，
-
代码
// 1.没有变量提升 console.log(num0); const num0 = 20; //报错 // 2.有块级作用域 { const num5 = 100; } console.log(num5); //报错 // 3.不能重复声明 const num1 = 100; const num1 = 200; console.log(num1); //报错 // 4.声明必须初始化值 const num2; console.log(num2); //报错 // 5.不能重新赋值 const num3 = 10; num3 = 20; console.log(num3); //报错
2.3-对象解构赋值
-
对象解构赋值
取对象中属性的值，赋值给变量.
-
六种写法（代码案例）
// 声明一个变量 let obj = { name: "雪花", age: 100, gender: "男", score: 200, }; // es5 // let name1 = obj.name; // let age1 = obj.age; // let gender1 = obj.gender; // let score1 = obj.score; // console.log(name1,age1,gender1,score1); // es6 // 第一种写法 // let {name:name1,age:age1,gender:gender1,score:score1} = obj; // console.log(name1,age1,gender1,score1); //雪花 100 男 200 // 第二种写法 // let {name:name,age:age,gender:gender,score:score} = obj; // console.log(name,age,gender,score); //雪花 100 男 200 // 第三种写法 // let {name,age,gender,score} = obj; // console.log(name,age,gender,score); //雪花 100 男 200 // 第四种写法 // let {name,age,gender,fenshu} = obj; // console.log(name,age,gender,fenshu); // 雪花 100 男 undefined // 第五种写法 // let {name,age,gender,score:fenshu} = obj; // console.log(name,age,gender,fenshu); //雪花 100 男 200 180 // 第六种写法 let {name,age = 18,gender,score:fenshu,height = 180} = obj; console.log(name,age,gender,fenshu,height); //雪花 100 男 200 180 // 作业题 // var {a,b,c} = {"c":10,"b":9,"a":8}; // console.log(a,b,c); // 8 9 10 var {a,b,c,a:d} = {"c":10,"b":9,"a":8}; console.log(a,b,c,d); // 8 9 10 undefined
2.4-数组的解构赋值
-
数组解构赋值
就是把数组中每一个元素的值依次赋值给对象变量
-
五种写法
let arr = [0,1,2,3]; //es5 // let num1 = arr[0]; // let num2 = arr[1]; // let num3 = arr[2]; // let num4 = arr[3]; // console.log(num1,num2,num3,num4); // es6 // 第一种写法 // let [num1,num2,num3,num4] = arr; // console.log(num1,num2,num3,num4); // 0 1 2 3 // 第二种写法 // let [num1,num2,num3,num4,num5] = arr; // console.log(num1,num2,num3,num4,num5); // 0 1 2 3 undefined // 第三种写法 // let [num1,num2,num3,num4,num5=50] = arr; // console.log(num1,num2,num3,num4,num5); // 0 1 2 3 50 // 第四种写法 // let [num1=100,num2,num3,num4,num5=50] = arr; // console.log(num1,num2,num3,num4,num5); // 0 1 2 3 50 // 第五种写法 let [num1,num2] = arr; console.log(num1,num2); console.log(arr[3]);
2.5-解构赋值结合函数声明
-
语法
// es5 //声明一个函数，形参有多个 // function test1(name,age,gender){ // console.log(name,age,gender); // } // test1("啵啵",12,"女"); // 如果形参有多个，最好把形参写成一个对象 // function test1(obj){ // console.log(obj.name,obj.age,obj.gender); // } // test1({ // name:"啵啵", // age:12, // gender:"女", // }); // 啵啵 12 女 // es6 // 声明一个函数，形参有多个 // function test2({name,age,gender,height=180}){ // console.log(name,age,gender,height); // } // test2({ // name:"啵啵", // age:38, // gender:"女", // height:160, // }); // 啵啵 38 女 160 // 作业题 function sum([a,b,c,d=5]){ console.log(a+b+c+d); } sum([10,20,30]); // 65 function sum2([a,b,c,d]){ console.log(a+b+c+d); } sum2([10,20,30]); // NaN
2.6-箭头函数
-
箭头函数
匿名函数的一个简写
-
简写规则
a.function 改成 => , =>可以读成goesto
b.如果只有一个参数，那就可以省略形参小括号
c.如果不是一个形参，0个或多个形参，那就不能省略这个形参小括号
d.如果只有一句话，那就可以省略函数题的大括号
e.如果函数体只有一句话，并且这句话是return返回值，那return也要省略
f.如果函数体不是一句话，那就不能省略这个大括号。
-
代码
普通的匿名函数 let fn = function(name){ console.log("我的名字"+name); } fn("微微"); 箭头函数 let fn = name => console.log("我的名字"+name); fn("微微"); let fn1 = function(name){ return name + 'hello'; } let fn1 = (name) =>{ return name + 'hello'; } let fn1 = name =>{ return name + 'hello'; } let fn1 = name => name + 'hello' console.log(fn1('smile')); let fn2 = function(nun1,num2){ console.log(num1+num2); return num1+num2+30; } let fn2 = (num1,num2) =>{ console.log(num1+num2); return num1+num2+30; } console.log(fn2(10,20)); setTimeout(function(){ },timeout) setTimeout(() =>{ },timeout); -
作业题
//作业题 // let fn1 = function(){ // console.log('hello'); // } let fn1 = () => console.log('hello'); fn1(); // let fn2 = function(name){ // console.log(name+'hello'); // } let fn2 = name => console.log(name+'hello');fn2("薇薇"); // let fn3 = function(name,age){ // console.log(name+"hello,world"+age); // } let fn3 = (name,age) => console.log(name+"hello,world"+age);fn3("薇薇","小小"); // let fn4 = function(age){ // return age+10; // } let fn4 = age => age+10;console.log(fn4(10)); // let fn5 = function(name,age){ // console.log(name+'hello'); // return age + 10; // } let fn5 = (name,age) =>{ console.log(name+'hello'); return age + 10; } console.log(fn5("薇薇",20));
2.7-对象成员简写
/*
对象成员简写
*/
// 声明一些变量
let name = '千里';
let age = '18';
let gender = '男';
let score = 100;
// 现在声明了一个对象
// 对象里面有name，age，gender，score属性
// 希望这些属性的值是上面对应变量的值
// es5
// var obj = {
// name:name,
// age :age,
// gender:gender,
// score:score,
// sayHi:function(){
// console.log('哈哈，smile');
// }
// }
// console.log(obj);
// obj.sayHi();
// es6
var obj = {
name, // 相当于 name:name,
age ,
gender,
score,
// sum, // 相当于sum:sum,报错了，因为外面没有sum这个变量.
fenshu:score, //这个不会报错，取外面score变量的值，复制个这个fenshu属性
sayHi(){
console.log('哈哈，smile');
}
}
console.log(obj);
obj.sayHi();
2.8-对象展开
-
对象展开
展开运算符 …
-
代码
// 声明一个对象 let chinese = { skin:"黄色皮肤", hair:"黑色头发", sayHi(){ console.log("你好，你吃力吗？"); } } // 声明一个对象 let zhuBo = { skill:"唱跳rap打篮球，老铁双击666", song:"长大碗宽面" } // 声明一个对象 let linge = { // skin:"黄色皮肤", // hair:"黑色头发", // sayHi(){ // console.log("你好，你吃力吗？"); // }, // song:"长大碗宽面" ...chinese, ...zhuBo, gender:"男", hair:"白发苍苍", } console.log(linge);2.9-数组展开
1. 数组展开
展开运算符 …
- 使用场景:
a.数组拼接
b.利用Math.max()/MAth.min()来求数组中的最大值/最小值.
-
代码
// eg01 // let arr1 = [10,20,30]; // let arr2 = [...arr1,40,50]; // console.log(arr1); // console.log(arr2); //eg02 // let arr1 = [10,20,30]; // let arr2 = [40,50,60]; // let arrNew = [...arr1,...arr2]; // console.log(arrNew); // eg03 // 求数组中最大值 let arr1 = [10,3,5,53,12,34,98]; // 以前做法 let max1 = Math.max.apply(Math,arr1); console.log(max1); // 数据展开语法 let max2 = Math.max(...arr1); console.log(max2);
2.10-数据类型Set
-
Set
作用和数组类似，和数组不同的是:他不能存放重复的元素
-
应用场景:数组去重.
-
代码
//eg01:基本使用 let set1 = new Set([10,20,30,40,10,20,30,50]); console.log(set1); // [10,20,30,40,10,20,30,50] //eg02:数组去重 let arr = [10,20,30,40,10,20,30,50]; let set = new Set(arr); let arrNew = [...set]; console.log(arrNew); // [10,20,30,40,10,20,30,50] //eg03:简写 let arr1 = [10,20,30,40,10,20,30,50]; let arrNew1 = [...new Set(arr1)]; // arr1去重，得到一个新的数组arrNew console.log(arrNew1); // [10,20,30,40,10,20,30,50]
2.11-模板字符串
-
模板字符串 ``
会保留原样字符串格式，以及可以占位。
-
代码
// es5 // 字符串没有格式，里面也不能写变量 // let author = '波波'; // let str1 = " // 静夜思 // author // 床前明月光， // 疑是地上霜， // 低头思故乡， // 举头望明月。 // "; // es6:模板字符串 // let author = '波波'; // let str1 = ` // 静夜思 // ${author} // 床前明月光， // 疑是地上霜， // 低头思故乡， // 举头望明月。 // `; // console.log(str1); // eg01: let name = '千里'; let age = 30; let score = 100; console.log(`我的名字${ name},我的年龄${ age},我的成绩是${ score}`); //eg02 function test(){ return '哈哈哈'; } console.log(`想听笑声吗:${ test()}`);
2.12-补充数组的方法
-
forEach();
遍历数组，把遍历出来的每一项交给回调函数.
没有返回值
let arr = [10,20,30,40]; arr.forEach(function(item,index){ // item 就是遍历出来的每一个项 // index 就是遍历出来每一个项对应的索引 // console.log(item,index); console.log(item+10); }); -
map()
遍历数组，有返回值
let arr = [10,20,30,40]; let arrNew = arr.map(function(item,index){ // item 就是遍历出来的每一个项 // index 就是遍历出来每一个项对应的索引 // console.log(item,index); return item * item; }); console.log(arrNew); // [ 100, 400, 900, 1600 ]-
filter();过滤器
filter()方法会创建一个新的数组，新的数组中元素是通过检查后符合条件的元素
let arr = [10,20,11,21,31,52,66,71]; let arrNew = arr.filter((item,index)=>{ // item 就是遍历出来的每一个项 // index 就是遍历出来每一个项对应的索引 console.log(item,index); return item % 2 == 0; }); console.log(arrNew);
-
2.13-Babel-es6转es5
https://www.babeljs.cn/