ECMAScript6.0
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
const http = require("http");//node中自带的require引入方法,http也是node中自带的服务对象
http.createServer(function(request, response){
// 发出http请求的头部信息
// http的状态码:200;OK
// 请求的内容类型:text/plain
response.writeHead("200",{"Content-Type":"text/plain"}); //响应的数据 "hello,welcome!"
response.end("hello,moto");
}).listen(8888); // 监听端口
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
npm init
# 接下来是一堆项目信息等待着你输入,如果使用默认值或你不知道怎么填写,则直接回车即可。
# package name: 项目名字
# version: 版本号
# description: 对项目的描述
# entry point: 项目的入口文件(一般你要用那个js文件作为node服务,就填写那个文件)
# test command: 项目启动的时候要用什么命令来执行脚本文件(默认为node app.js)
# git repository: 如果你要将项目上传到git中的话,那么就需要填写git的仓库地址
# keywirds: 项目关键字
# author: 作者名字
# license: 发行项目需要的证书
- 一次性初始化 npm init -y
- NPM官方的管理的包都是从 http://npmjs.com下载的,推荐使用淘宝 NPM 镜像 http://npm.taobao.org/ ,淘宝 NPM 镜像是一个完整npmjs.com 镜像,同步频率目前为 10分钟一次,以保证尽量与官方服务同步。
#经过下面的配置,以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org
#设置npm下载包时保存在本地的地址(建议英文目录)
npm config set prefix "E:\\repo_npm"
#查看npm配置信息
npm config list
- 使用 npm install 安装依赖包的最新版
- 模块安装的位置:项目目录\node_modules
- 安装会自动在项目目录下添加 package-lock.json文件,这个文件帮助锁定安装包的版本
- 同时package.json 文件中,依赖包会被添加到dependencies节点下,类似maven中的<dependencies>
- 安装jQuery
npm install jquery@版本
{
"name": "nodejs",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"jquery": {
"version": "1.9.1",
"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",
"integrity": "sha1-5M1INfqu+63lNYV2E8D8P/KtrzQ="
}
}
}
3. ES6基本语法
- ES标准中不包含 DOM 和 BOM的定义,只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。
- var 与let 声明变量的区别
- 作用域不同,var是全局变量,let是局部变量
- 声明次数不同,同一个变量let只能定义一次
- 声明与使用顺序不同,let必须先声明在使用,var声明的变量会全局存储
//作用域不同
{
var m=1;
let n=2;
}
console.log(m);//1
console.log(n);//n is not defined //声明次数不同
var num=1;
var num=2;
let num1=3;
let num1=4;
console.log(num);//2
console.log(num1);//Identifier 'num1' has already been declared 已经声明 //声明和使用顺序不同
console.log(x); //undefine,但是已经定义了
var x=1;
console.log(y); //y is not defined
let y=2;
- const 声明常量,为只读变量,一旦声明之后,其值是不允许改变的,声明必须初始化,否则会报错 SyntaxError: Missing initializer in const declaration(语法错误,声明常量丢失了初始化)
const PI=3.1415;// Missing initializer in const declaration
//不可以先声明后再初初始化
console.log(PI);
- 解构赋值是对赋值运算符的扩展,针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。
- 在代码书写上简洁且易读,语义更加清晰明了;也方便了复杂对象中数据字段获取。
- 对象解构中,解构的变量名必须与对象的属性名一致
- 数组结构中,按顺序注意获取
//数组
var arr=[1,2,3]
//传统js
var a=arr[0];
var b=arr[1];
var c=arr[2];
console.log(a,b,c);
//解构数组
var [x,y,z]=arr;
console.log(x,y,z); //对象
var user={
name:"吕布",
weapon:"方天画戟",
horse:"赤兔马"
}
//传统js
var str1=user.name;
var str2=user.weapon;
var str3=user.horse;
console.log(str1,str2,str3);
//解构数组
var {name,weapon,horse}=user;
console.log(name,weapon,horse);
- 模板字符串:用反引号 `,除了作为普通字符串,还可以用来定义多行字符串, 插入变量和表达式, 调用函数
//1.普通字符串
var str=`hello`;
console.log(str);
//2.定义多行字符串
var str1=`hello
hello
what's your name?
my name is rf`;
console.log(str1);
//3.插入变量和表达式
var user={
name:"吕布",
age:34,
say: function(){
return `我的名字叫${user.name}, 我今年${user.age}岁了`;
}
}
console.log(`我的名字叫${user.name}, 我今年${user.age}岁了`);
//4.调用函数
console.log(`${user.say()}`);
- 简写
var name=`吕布`;
var age=24;
//传统定义对象
var user={
name:name,
age: age,
say:function(){
return user1;
}
}
console.log(user);
//简写
var user1={name,age};
console.log(user1); //函数简写
console.log(user.say());
var user2={
say(){
return user1;
}
}
console.log(user2.say());
- 对象拓展运算符
- 深拷贝: 拓展运算符 {...} 将参数对象中所有可以遍历的属性拿出来,然后拷贝给新对象
- 合并多个对象: 用逗号连接不同对象
let user={
name:`吕布`,
weapon:`方天画戟`
}
let horse={
horser:`赤兔马`
}
//深拷贝
var user2={...user};
console.log(user2);
user.name='貂蝉'; //不会改变
console.log(user2); //多对象拷贝
var user3={...user,...horse};
console.log(user3);
- 函数
- 默认参数表现方式
- 不定参数定义
- 箭头函数简写
//默认参数表现形式
function test1(name,age=18){
return `my name is ${name}, age is ${age}`;
}
console.log(test1(`吕布`,33));//my name is 吕布, age is 33
console.log(test1(`吕布`));//my name is 吕布, age is 18
console.log(test1(`吕布`,undefined));//my name is 吕布, age is 18
console.log(test1(`吕布`,null));//my name is 吕布, age is null
console.log(test1(`吕布`,""));//my name is 吕布, age is
console.log(test1(`吕布`,"undefined"));//my name is 吕布, age is undefined
console.log(test1(`吕布`,"123"));//my name is 吕布, age is 123 //定义多参数
function test2(...arg){
console.log(arg.length);
for (var i=0;i<arg.length;i++){
console.log(arg[i]);
}
}
test2(); //0
test2(1);// 1 1
test2(1,2,3,4,5);// 5 1 2 3 4 5
test2(`guo`,`123`,null);//3 guo 123 null //箭头函数
var test3= (a,b)=>{
let sum=a*b+b;
return sum; //40
}
console.log(test3(3,10));// 40
//单个形参括号可省略
var test4= a=>{
let sum=a*a+a;
return sum;
}
console.log(test4(10));//110
//单个函数体语句{}可省略
var test5= a=>a*a+a;
console.log(test5(20));//420
- promise:解决回调函数嵌套问题,不会持续等待子问题解决,子问题出错导致全局错,用于异步机制函数嵌套
4. 模块化
- 传统模块化,module.exports={} ; let xxx=require("路径")
function add(name){
return `my name is ${name}`;
}
function del(name){
return `delete ${name}`;
} //导出
module.exports={
add,
del
}
let user= require("./user");
console.log(user.add("rf"));
console.log(user.del("123"));
- es6模块化 export{}; import{变量}from“路径” ,注意 node.js并不支持es6的import语法,需要转换es版本SyntaxError: Unexpected token
- 模块化可以用as 进行重命名, 可以用* 进行批量导入
var name="rf";
var age=12;
function add(name){
return `my name is ${name}`;
}
function del(name){
return `delete ${name}`;
} //导出
export{
name,age,add,del
}
import {name,age,add,del} from "./user";
console.log(name);
console.log(age);
console.log(add(name));
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 ,并输入代码配置:
{
"presets": ["es2015"],
"plugins": []
}
- 安装转码器 npm install --save-dev babel-preset-es2015
- 转码,创建dist目录,用来存放转码后的文件
babel user.js --out-file .\dist\user.js
或 babel user.js -o .\dist\user.js
- 运行转码后的文件 node xxx.js
- as重命名
- user.js
let name = "老孙";
let age = 66;
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());
- 也可以作为整体进行重命名
import * as info from "./user.js"; // 通过*来批量接收,用as来指定接收的对象名字
console.log(info.a);
console.log(info.b);
console.log(info.c());
- 默认导出: 将所有需要导出的变量放入一个对象中,然后通过export default 进行导出
/*****************导出****************************/
export default{
name:"老孙",
eat(){
return "吃点啥!";
}
} /
*****************导入****************************/
import p from "./person.js";
console.log( p.name, p.eat() );
- 重命名export 和import
/*******************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';
console.log( name1 ); // 我是来自student1.js
console.log( name2 ); // 我是来自student2.js
Node.js 就是运行在服务端的 JavaScript
ECMAScript6.0的更多相关文章
- 从零开始学习前端JAVASCRIPT — 10、JavaScript基础ES6(ECMAScript6.0)
ECMAScript 6.0(简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发 ...
- ECNAScript6简介
ECMAScript6.0(以下简称ES6)是JavaScript语言的下一代标砖,已经在2015年6月正式发布了,它的目标,是使得JavaScript语言可以用来编写负责的大型应用程序 ,成为企业级 ...
- 浅谈ES6
ECMAScript6.0(简称ES6)是javaScript语言的下一代标准,已经在2015年6月正式发布了.它的目标,使得javaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言 ...
- JavaScript: 2015 年回顾与展望
链接:http://www.sitepoint.com/javascript-2015-review/ JavaScript经历了一个不平凡的一年.尽管到5月份已经20年了,关于JS的新闻.项目和兴趣 ...
- 你不知道的JavaScript(一)数据类型
ECMAScript 规范地址: http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf 有过WEB前端开发 ...
- 使用vue-cli搭建spa项目
1. 什么是vue-cli? vue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,创建命令如下: vue init webpack xxx 注1:xxx 为自己创 ...
- ES6——入门学习指南
ES6的简介: ECMAScript6.0(以下简称ES6)是JavaScript语言的下一代标准,已在2015年6月正式发布了.它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序 ...
- ES6 常用知识点总结
ES6常用知识总结 之前总结了es5中js的一些知识点.这段时间看了石川blue老师讲解的es6课程,结合阮一峰老师的es6教程,随手做了一些笔记和总结分享给大家.内容还是es6主要的知识点,基本没有 ...
- 理解前端模块概念:CommonJs与ES6Module
前言 现代前端开发每时每刻都和模块打交道.例如,在项目中引入一个插件,或者实现一个供全局使用组件的JS文件.这些都可以称为模块. 在设计程序结构时,不可能把所有代码都放在一起.更为友好的组织方式时按照 ...
随机推荐
- 拉仇恨!webhook + 企业微信给同事做了个代码提交监听工具
本文案例收录在 https://github.com/chengxy-nds/Springboot-Notebook 大家好,我是小富~ 最近接个任务,用webhook做了个代码提交监听功能,就是有人 ...
- [leetcode] 875. 爱吃香蕉的珂珂(周赛)
875. 爱吃香蕉的珂珂 这题时间要求比较严格... 首先,将piles排序,然后二分查找. 总之,答案K肯定位于piles[?]piles[?+1]或者1piles[0]之间 所以我们先二分把?找到 ...
- python记录日志
import logging from logging import handlers# 日志记录 class Logger(object): level_relations = { 'debug': ...
- 书列荐书 |《至关重要的关系》 【美】里德·霍夫曼
本书的内容不算多,堪称精辟,有些东西甚至可以作为指导思想.括号内为书列君书评. 经典语录: 每个人都是企业家!(否则你无法最大化努力!) 创业和做人是相通的.我们要有计划,要执着,但是也要有弹性,懂得 ...
- 摄像头与毫米波雷达(Radar)融合
摄像头与毫米波雷达(Radar)融合 Input: (1)图像视频分辨率(整型int) (2)图像视频格式 (RGB,YUV,MP4等) (3)毫米波雷达点云信息(点云坐标位置x,y,浮点型float ...
- MindSpore图像分类模型支持(Lite)
MindSpore图像分类模型支持(Lite) 图像分类介绍 图像分类模型可以预测图片中出现哪些物体,识别出图片中出现物体列表及其概率. 比如下图经过模型推理的分类结果为下表: 类别 概率 plant ...
- 神经网络AI加速器技术
神经网络AI加速器技术 能够直接加速卷积神经网络,还能够直接运行常见的网络框架,如TensorFlow.Caffe.PyTorch,DarkNet等,支持用户定制化的网络和计算类型. 功能特点: ● ...
- 单点突破:Set
HashSet HashSet存放的是散列值,它是按照元素的散列值来存取元素的. 元素的散列值通过hashCode方法计算 HashSet通过判断两个元素的Hash值是否相等,如果相等就会用equal ...
- 基于webpack5封装的cli工具packx
安装 用 npm / yarn 安装: $ npm install -D packx $ yarn add -D packx 特性 基于 webpack5 支持 less,sass 支持 spa/mp ...
- csps考前的一些总结(然而可能并没有用)
记录考前的一些复习和总结,如果没有特殊情况不再写新的题解了 图论: 一.最短路: 1.spfa算法中的vis数组记录的是有没有入队,防止多次入队,通过松弛操作来达到最优解 2.dijkstra算法的v ...