ECMAScript6.0相当于JavaScript的标准,它规定了浏览器脚本语言的标准,发布于2015年,目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言

Node.js 就是运行在服务端的 JavaScript ,Node.js是脱离浏览器环境运行的JavaScript程序,基于Google的V8引擎,V8引擎执行Javascript的速度、非常快,性能非常好

1.服务器应用开发

  • 创建 node-server.js
  • 服务器启动成功后,在浏览器中输入:http://localhost:8888/ 查看webserver成功运行,并输出html页面
  • 停止服务:ctrl + c
  1. const http = require("http");//node中自带的require引入方法,http也是node中自带的服务对象
  2. http.createServer(function(request, response){
  3. // 发出http请求的头部信息
  4. // http的状态码:200;OK
  5. // 请求的内容类型:text/plain
  6. response.writeHead("200",{"Content-Type":"text/plain"});
  7.  
  8. //响应的数据 "hello,welcome!"
  9. response.end("hello,moto");
  10. }).listen(8888);
  11.  
  12. // 监听端口
  13. console.log("服务器已启动,请访问 http://127.0.0.1:8888");

2.npm

  • NPM全称Node Package Manager,是Node.js包管理工具,是全球最大的模块生态系统,开源免费的,也是Node.js的包管理工具,相当于前端的Maven
  • Node.js默认安装的npm包和工具的位置:Node.js目录\node_modules
  • 全新创建一个目录,作为项目目录,使用dos命令进入此目录,输入命令 npm init  生成package.json文件,这个是包的配置文件,相当于maven的pom.xml
  1. npm init
  2. # 接下来是一堆项目信息等待着你输入,如果使用默认值或你不知道怎么填写,则直接回车即可。
  3. # package name: 项目名字
  4. # version: 版本号
  5. # description: 对项目的描述
  6. # entry point: 项目的入口文件(一般你要用那个js文件作为node服务,就填写那个文件)
  7. # test command: 项目启动的时候要用什么命令来执行脚本文件(默认为node app.js)
  8. # git repository: 如果你要将项目上传到git中的话,那么就需要填写git的仓库地址
  9. # keywirds: 项目关键字
  10. # author: 作者名字
  11. # license: 发行项目需要的证书
  • 一次性初始化 npm init -y
  • NPM官方的管理的包都是从 http://npmjs.com下载的,推荐使用淘宝 NPM 镜像 http://npm.taobao.org/ ,淘宝 NPM 镜像是一个完整npmjs.com 镜像,同步频率目前为 10分钟一次,以保证尽量与官方服务同步。
  1. #经过下面的配置,以后所有的 npm install 都会经过淘宝的镜像地址下载
  2. npm config set registry https://registry.npm.taobao.org
  3. #设置npm下载包时保存在本地的地址(建议英文目录)
  4. npm config set prefix "E:\\repo_npm"
  5. #查看npm配置信息
  6. npm config list
  • 使用 npm install 安装依赖包的最新版
  • 模块安装的位置:项目目录\node_modules
  • 安装会自动在项目目录下添加 package-lock.json文件,这个文件帮助锁定安装包的版本
  • 同时package.json 文件中,依赖包会被添加到dependencies节点下,类似maven中的<dependencies>
  • 安装jQuery 
    npm install jquery@版本  
  1. {
  2. "name": "nodejs",
  3. "version": "1.0.0",
  4. "lockfileVersion": 1,
  5. "requires": true,
  6. "dependencies": {
  7. "jquery": {
  8. "version": "1.9.1",
  9. "resolved": "https://registry.npm.taobao.org/jquery/download/jquery-1.9.1.tgz?cache=0&sync_timestamp=1588633260500&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjquery%2Fdownload%2Fjquery-1.9.1.tgz",
  10. "integrity": "sha1-5M1INfqu+63lNYV2E8D8P/KtrzQ="
  11. }
  12. }
  13. }

3. ES6基本语法

  • ES标准中不包含 DOM 和 BOM的定义,只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。
  • var 与let 声明变量的区别
    • 作用域不同,var是全局变量,let是局部变量
    • 声明次数不同,同一个变量let只能定义一次
    • 声明与使用顺序不同,let必须先声明在使用,var声明的变量会全局存储  
  1. //作用域不同
  2. {
  3. var m=1;
  4. let n=2;
  5. }
  6. console.log(m);//1
  7. console.log(n);//n is not defined
  8.  
  9. //声明次数不同
  10. var num=1;
  11. var num=2;
  12. let num1=3;
  13. let num1=4;
  14. console.log(num);//2
  15. console.log(num1);//Identifier 'num1' has already been declared 已经声明
  16.  
  17. //声明和使用顺序不同
  18. console.log(x); //undefine,但是已经定义了
  19. var x=1;
  20. console.log(y); //y is not defined
  21. let y=2;
  • const 声明常量,为只读变量,一旦声明之后,其值是不允许改变的,声明必须初始化,否则会报错 SyntaxError: Missing initializer in const declaration(语法错误,声明常量丢失了初始化)
  1. const PI=3.1415;// Missing initializer in const declaration
  2. //不可以先声明后再初初始化
  3. console.log(PI);
  • 解构赋值是对赋值运算符的扩展,针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。

    • 在代码书写上简洁且易读,语义更加清晰明了;也方便了复杂对象中数据字段获取。
    • 对象解构中,解构的变量名必须与对象的属性名一致
    • 数组结构中,按顺序注意获取 
  1. //数组
  2. var arr=[1,2,3]
  3. //传统js
  4. var a=arr[0];
  5. var b=arr[1];
  6. var c=arr[2];
  7. console.log(a,b,c);
  8. //解构数组
  9. var [x,y,z]=arr;
  10. console.log(x,y,z);
  11.  
  12. //对象
  13. var user={
  14. name:"吕布",
  15. weapon:"方天画戟",
  16. horse:"赤兔马"
  17. }
  18. //传统js
  19. var str1=user.name;
  20. var str2=user.weapon;
  21. var str3=user.horse;
  22. console.log(str1,str2,str3);
  23. //解构数组
  24. var {name,weapon,horse}=user;
  25. console.log(name,weapon,horse);
  • 模板字符串:用反引号 `,除了作为普通字符串,还可以用来定义多行字符串, 插入变量和表达式, 调用函数
  1. //1.普通字符串
  2. var str=`hello`;
  3. console.log(str);
  4. //2.定义多行字符串
  5. var str1=`hello
  6. hello
  7. what's your name?
  8. my name is rf`;
  9. console.log(str1);
  10. //3.插入变量和表达式
  11. var user={
  12. name:"吕布",
  13. age:34,
  14. say: function(){
  15. return `我的名字叫${user.name}, 我今年${user.age}岁了`;
  16. }
  17. }
  18. console.log(`我的名字叫${user.name}, 我今年${user.age}岁了`);
  19. //4.调用函数
  20. console.log(`${user.say()}`);
  • 简写   
  1. var name=`吕布`;
  2. var age=24;
  3. //传统定义对象
  4. var user={
  5. name:name,
  6. age: age,
  7. say:function(){
  8. return user1;
  9. }
  10. }
  11. console.log(user);
  12. //简写
  13. var user1={name,age};
  14. console.log(user1);
  15.  
  16. //函数简写
  17. console.log(user.say());
  18. var user2={
  19. say(){
  20. return user1;
  21. }
  22. }
  23. console.log(user2.say());
  • 对象拓展运算符

    • 深拷贝: 拓展运算符 {...} 将参数对象中所有可以遍历的属性拿出来,然后拷贝给新对象
    • 合并多个对象: 用逗号连接不同对象    
  1. let user={
  2. name:`吕布`,
  3. weapon:`方天画戟`
  4. }
  5. let horse={
  6. horser:`赤兔马`
  7. }
  8. //深拷贝
  9. var user2={...user};
  10. console.log(user2);
  11. user.name='貂蝉'; //不会改变
  12. console.log(user2);
  13.  
  14. //多对象拷贝
  15. var user3={...user,...horse};
  16. console.log(user3);
  • 函数

    • 默认参数表现方式
    • 不定参数定义
    • 箭头函数简写  
  1. //默认参数表现形式
  2. function test1(name,age=18){
  3. return `my name is ${name}, age is ${age}`;
  4. }
  5. console.log(test1(`吕布`,33));//my name is 吕布, age is 33
  6. console.log(test1(`吕布`));//my name is 吕布, age is 18
  7. console.log(test1(`吕布`,undefined));//my name is 吕布, age is 18
  8. console.log(test1(`吕布`,null));//my name is 吕布, age is null
  9. console.log(test1(`吕布`,""));//my name is 吕布, age is
  10. console.log(test1(`吕布`,"undefined"));//my name is 吕布, age is undefined
  11. console.log(test1(`吕布`,"123"));//my name is 吕布, age is 123
  12.  
  13. //定义多参数
  14. function test2(...arg){
  15. console.log(arg.length);
  16. for (var i=0;i<arg.length;i++){
  17. console.log(arg[i]);
  18. }
  19. }
  20. test2(); //0
  21. test2(1);// 1 1
  22. test2(1,2,3,4,5);// 5 1 2 3 4 5
  23. test2(`guo`,`123`,null);//3 guo 123 null
  24.  
  25. //箭头函数
  26. var test3= (a,b)=>{
  27. let sum=a*b+b;
  28. return sum; //40
  29. }
  30. console.log(test3(3,10));// 40
  31. //单个形参括号可省略
  32. var test4= a=>{
  33. let sum=a*a+a;
  34. return sum;
  35. }
  36. console.log(test4(10));//110
  37. //单个函数体语句{}可省略
  38. var test5= a=>a*a+a;
  39. console.log(test5(20));//420
  • promise:解决回调函数嵌套问题,不会持续等待子问题解决,子问题出错导致全局错,用于异步机制函数嵌套

4. 模块化

  • 传统模块化,module.exports={} ; let xxx=require("路径")
  1. function add(name){
  2. return `my name is ${name}`;
  3. }
  4. function del(name){
  5. return `delete ${name}`;
  6. }
  7.  
  8. //导出
  9. module.exports={
  10. add,
  11. del
  12. }
  1. let user= require("./user");
  2. console.log(user.add("rf"));
  3. console.log(user.del("123"));      
  • es6模块化 export{}; import{变量}from“路径”  ,注意 node.js并不支持es6的import语法,需要转换es版本SyntaxError: Unexpected token 
  • 模块化可以用as 进行重命名, 可以用* 进行批量导入 
  1. var name="rf";
  2. var age=12;
  3. function add(name){
  4. return `my name is ${name}`;
  5. }
  6. function del(name){
  7. return `delete ${name}`;
  8. }
  9.  
  10. //导出
  11. export{
  12. name,age,add,del
  13. }
  1. import {name,age,add,del} from "./user";
  2. console.log(name);
  3. console.log(age);
  4. console.log(add(name));
  5. console.log(del(name));

5.babel环境

  • babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有的环境中执行,万能兼容器
  • 安装babel环境
    • 创建新目录 ,在终端中打开,运行命令  npm install --global babel-cli
    • babel是通过npm安装,所以babel会默认安装到 D:\repo_npm ,babel --version  查看babel版本
    • 查看版本出错:'babel' 不是内部或外部命令,也不是可运行的程序
      • 配置环境变量:系统环境变量中 path中加入 ;D:\repo_npm;在任意位置进入dos窗口,babel --version可以了,说明环境变量配置成功
    • windows10默认禁止运行有危险的脚本 : 开始菜单-> Windows PowerShell (切记要以管理员身份运行),输入代码 set-ExecutionPolicy RemoteSigned
  • 安装转码器
    • 创建babel专属目录,在其中初始化项目  npm init -y
    • 创建babel配置文件 .babelrc ,并输入代码配置: 
  1. {
  2. "presets": ["es2015"],
  3. "plugins": []
  4. }
    • 安装转码器  npm install --save-dev babel-preset-es2015
    • 转码,创建dist目录,用来存放转码后的文件   
  1. babel user.js --out-file .\dist\user.js
  2. babel user.js -o .\dist\user.js
    • 运行转码后的文件  node xxx.js
  • as重命名
    • user.js   
  1. let name = "老孙";
  2. let age = 66;
  3. let fn = function(){
  4. return `我是${name}!我今年${age}岁了!`;
  5. } /
  6. / 声明模块并导出
  7. export{
  8. name as a, // 将属性重命名
  9. age as b,
  10. fn as c
  11. }
    • test.js  
  1. import {a,b,c} from "./user.js";
  2. console.log(a);
  3. console.log(b);
  4. console.log(c());
  • 也可以作为整体进行重命名
  1. import * as info from "./user.js"; // 通过*来批量接收,用as来指定接收的对象名字
  2. console.log(info.a);
  3. console.log(info.b);
  4. console.log(info.c());
  • 默认导出: 将所有需要导出的变量放入一个对象中,然后通过export default 进行导出              
  1. /*****************导出****************************/
  2. export default{
  3. name:"老孙",
  4. eat(){
  5. return "吃点啥!";
  6. }
  7. } /
  8. *****************导入****************************/
  9. import p from "./person.js";
  10. console.log( p.name, p.eat() );
  • 重命名export 和import 
  1. /*******************student1.js**************************/
  2. export let name = "我是来自student1.js";
  3. /*******************student2.js************************/
  4. export let name = "我是来自student2.js";
  5. /*******************test_student.js************************/
  6. import {name as name1} from './student1.js';
  7. import {name as name2} from './student2.js';
  8. console.log( name1 ); // 我是来自student1.js
  9. console.log( name2 ); // 我是来自student2.js

Node.js 就是运行在服务端的 JavaScript

ECMAScript6.0的更多相关文章

  1. 从零开始学习前端JAVASCRIPT — 10、JavaScript基础ES6(ECMAScript6.0)

    ECMAScript 6.0(简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发 ...

  2. ECNAScript6简介

    ECMAScript6.0(以下简称ES6)是JavaScript语言的下一代标砖,已经在2015年6月正式发布了,它的目标,是使得JavaScript语言可以用来编写负责的大型应用程序 ,成为企业级 ...

  3. 浅谈ES6

    ECMAScript6.0(简称ES6)是javaScript语言的下一代标准,已经在2015年6月正式发布了.它的目标,使得javaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言 ...

  4. JavaScript: 2015 年回顾与展望

    链接:http://www.sitepoint.com/javascript-2015-review/ JavaScript经历了一个不平凡的一年.尽管到5月份已经20年了,关于JS的新闻.项目和兴趣 ...

  5. 你不知道的JavaScript(一)数据类型

    ECMAScript 规范地址: http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf 有过WEB前端开发 ...

  6. 使用vue-cli搭建spa项目

    1. 什么是vue-cli? vue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,创建命令如下: vue init webpack xxx 注1:xxx 为自己创 ...

  7. ES6——入门学习指南

    ES6的简介: ECMAScript6.0(以下简称ES6)是JavaScript语言的下一代标准,已在2015年6月正式发布了.它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序 ...

  8. ES6 常用知识点总结

    ES6常用知识总结 之前总结了es5中js的一些知识点.这段时间看了石川blue老师讲解的es6课程,结合阮一峰老师的es6教程,随手做了一些笔记和总结分享给大家.内容还是es6主要的知识点,基本没有 ...

  9. 理解前端模块概念:CommonJs与ES6Module

    前言 现代前端开发每时每刻都和模块打交道.例如,在项目中引入一个插件,或者实现一个供全局使用组件的JS文件.这些都可以称为模块. 在设计程序结构时,不可能把所有代码都放在一起.更为友好的组织方式时按照 ...

随机推荐

  1. HTML中option的单页调用

    我们在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的 onchange方法里触发. ...

  2. openresty - nginx - 配置

    local function local_print(str) local dbg = io.open("conf/lua/logs/output.txt", "a+&q ...

  3. 在gitlab网页上合并分支

    在gitlab网页上合并分支 使用gitlab网页将代码合并分 下面将dev分支代码合并至master 1.点击request merge 2.源分支为当前分支,目标分支默认为master,确认无误, ...

  4. Ryzen 4000'Vermeer' CPU和Radeon RX'Big Navi'图形卡

    Ryzen 4000'Vermeer' CPU和Radeon RX'Big Navi'图形卡 来自中国媒体的多篇报道表明,AMD都准备在2020年第四季度初推出其下一代Ryzen 4000'Zen 3 ...

  5. 基于Linux的TCP网络聊天室

    1.实验项目名称:基于Linux的TCP网络聊天室 2.实验目的:通过TCP完成多用户群聊和私聊功能. 3.实验过程: 通过socket建立用户连接并传送用户输入的信息,分别来写客户端和服务器端,利用 ...

  6. 腾讯云 K8S 集群实战 Service Mesh—Linkerd2 & Traefik2 部署 emojivoto 应用

    Linkerd 是 Kubernetes 的服务网格. 它通过为您提供运行时调试(runtime debugging).可观察性(observability).可靠性(reliability)和安全性 ...

  7. MySQL泛泛而谈(3W字)

    下面对于MySQL进行相关介绍,文档的内容较为基础,仅仅设计操作,少量原理,大佬请绕道哦. 废话少说,开冲! 一.MySQL架构介绍 1-MySQL简介 概述 MySQL是一个关系型数据库管理系统,由 ...

  8. 太神奇了!GIF的合成与提取这么好玩

    今天辰哥教大家一个Python有趣好玩的小功能:将多张图片转为GIF,同时也可以将一个GIF动图提取出里面的图片 在开始之前,先来一个动图开头(预览) 01.图片转GIF动图 1.准备工作 在开始合并 ...

  9. kerberos安装配置

    目录 前言 服务端安装 组件安装 配置krb5.conf 配置kdc.conf 配置kadm5.acl 创建kdc数据库 在server端创建一个管理员账号,方便远程登录管理kerberos 正式启动 ...

  10. 一文带你了解 Redis 的发布与订阅的底层原理

    01.前言 发布订阅系统在我们日常的工作中经常会使用到,这种场景大部分情况我们都是使用消息队列的,常用的消息队列有 Kafka,RocketMQ,RabbitMQ,每一种消息队列都有其特性,关于 Ka ...