此处是拉钩教育java学习自己整理的课堂笔记
我也不知道是否全面 但对于java开发应该是够了 如果有大佬看到更详细的内容可以下方留言 你的文章地址 谢谢啦
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。
它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言
node -v
console.log("hello,nodejs");
node hello.js
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,welcome!");
} ).listen(8888); // 监听端口
console.log("服务器已启动,请访问 http://127.0.0.1:8888");
NPM全称Node Package Manager,是Node.js包管理工具
是全球最大的模块生态系统,里面所有的模块都是开源免费的,也是Node.js的包管理工具,相当于前端的Maven
如果一个项目需要引用很多第三方的js文件,比如地图,报表等,文件杂而乱,自己去网上下载,到处是广告和病毒
那么,我们就想办法,把这些js文件统一放在一个仓库里,大家谁需要,谁就去仓库中拿过来,方便多了
npm就是这个仓库系统,如果你需要某个js文件,那就去远程仓库中下载,放在本地磁盘中,进而引用到我们的项目中
管理前端工程 so easy!
#在命令提示符输入 npm -v 可查看当前npm版本
npm -v
全新创建一个目录,作为项目目录,使用dos命令进入此目录,输入命令
npm init
# 接下来是一堆项目信息等待着你输入,如果使用默认值或你不知道怎么填写,则直接回车即可。
# package name: 你的项目名字叫啥
# version: 版本号
# description: 对项目的描述
# entry point: 项目的入口文件(一般你要用那个js文件作为node服务,就填写那个文件)
# test command: 项目启动的时候要用什么命令来执行脚本文件(默认为node app.js)
# git repository: 如果你要将项目上传到git中的话,那么就需要填写git的仓库地址(这里就不写地址了)
# keywirds: 项目关键字(我也不知道有啥用,所以我就不写了)
# author: 作者的名字(也就是你叫啥名字)
# license: 发行项目需要的证书(这里也就自己玩玩,就不写了)
最后会生成package.json文件,这个是包的配置文件,相当于maven的pom.xml
我们之后也可以根据需要进行修改。
上述初始化一个项目也太麻烦了,要那么多输入和回车。想简单点,一切都按照默认值初始化即可,ok,安排
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 jquery
使用 npm install 安装依赖包的最新版
模块安装的位置:项目目录\node_modules
安装会自动在项目目录下添加 package-lock.json文件,这个文件帮助锁定安装包的版本
jQuery版本有很多,上述命令下载的什么版本的? 最新版
如果我的项目使用1.9.1版本进行开发的,通过npm安装的3.5.1版本太新,会导致项目失效,如何安装指定版本库?
npm install [email protected]
1、作用域不同
{
var a = 0; // var声明的变量是全局变量
let b = 0; // let声明的变量是局部变量
}
console.log(a);
console.log(b); //b is not defined:b没有定义
2、声明次数不同
// var可以声明多次
// let只能声明一次
var m = 1;
var m = 2;
let n = 3;
let n = 4; //SyntaxError: Identifier 'n' has already been declared(语法错误:n已经声明过了)
console.log(m);
console.log(n);
3、声明与使用顺序不同
// var 声明的变量会全局存储
// let 声明的变量只能在执行后才存储
console.log( x ); //没有报错,输出:undefined
var x = "苹果";
console.log(y); //y is not defined(y没有定义)
let y = "香蕉";
const 声明常量,为只读变量
const PI = 3.14;
PI = 3.1415; //Assignment to constant variable.(声明的是常量)
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 mingzi = user.username;
let wuqi = user.weapon;
let zuoji = user.horse;
console.log("姓名:"+mingzi+",武器:"+wuqi+",坐骑:"+zuoji);
//es6的解构
let {username,weapon,horse} = user; // 注意:解构的变量名必须是对象中的属性
console.log("姓名:"+username+",武器:"+weapon+",坐骑:"+horse);
再见了,\n
let str = `hello,
你俩在哪呢?
心情不好,出来喝点啊!`;
console.log(str);
再见了,字符串的拼接用 +
let name = `吕布`;
let age = 24;
// 传统的拼接字符串
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 = 28;
//传统
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:34
};
let user2 = {...user1}; // 深拷贝(克隆)
console.log(user1);
console.log(user2);
吞噬合并(两个对象合并成一个对象)
let user1 = {
name:"项羽",
age:34
};
let user2 = {head:"诸葛亮"};
let user = {...user1,...user2};
console.log( user );
形参处已声明,但不传入实参会怎样?
function test(name , age = 18){
console.log(`我叫${name},我今年${age}岁`);
}
test("吕布",33); //我叫吕布,我今年33岁
test("貂蝉"); //我叫貂蝉,我今年18岁
test("关羽",null); //我叫关羽,我今年null岁
test("马超",""); //我叫马超,我今年岁
test("张飞",undefined); //我叫张飞,我今年18岁
定义方法时,不确定有几个参数?
function test( ...arg ){
console.log(`传入了${arg.length}个参数`);
for(var i = 0 ;i<arg.length;i++){
console.log(arg[i]);
}
}
test(1);
test(1,2);
test(1,2,3,4,5,6);
test();
test("郭","嘉",28);
箭头函数提供了一种更加简洁的函数书写方式。基本语法是:参数 => 函数体
// 传统
var f1 = function(a){
return a*10;
}
console.log( f1(10) );
// es6
var f2 = a=>a*10;
console.log( f2(20) );
// 当箭头函数一个参数时,()可以省略
// 当箭头函数没有参数或者有多个参数,要用()括起来
// 当箭头函数的函数体有多行语句,用{}括起来,表示代码块
// 当只有一条语句,并且需要返回时,可以省略{},结果会自动返回
var f3 = (a,b) => {
let sum = a+b;
return sum;
}
console.log( f3(3,7) );
// 可以将f3进行简化
var f4 = (a,b) => a + b;
console.log( f3(11,22) );
用来解决回调函数的嵌套噩梦 (后面学习ajax才能更好的理解)
我们回顾一下嵌套噩梦:
使用promise解决掐架找人的噩梦
找到一个人成功后,再继续找下一个人。逐渐形成了“队伍”
组建队伍的过程中,如果找某个人失败了,则“队伍”失败
其实有点类似“击鼓传花”的游戏,一个成功拿到花之后,才能传递给下一个人。依次类推!
setTimeout(()=>{
console.log(1);
setTimeout(()=>{
console.log(2);
setTimeout(()=>{
console.log(3);
setTimeout(()=>{
console.log(4);
},1000);
},1000);
},1000);
},1000);
使用promise
next = n =>
//Promise的构造函数接收一个参数,是函数,
//并且传入两个参数:resolve(异步操作执行成功后的回调函数),reject(异步操作执行失败后的回调函数)
new Promise(function(resolve, reject) {
setTimeout(function() {
resolve(n);
}, 1000);
});
next(1)
.then(res => { // 成功
console.log(res);
return next(2); //在then方法中调用的next方法,一定要用return ,否则不会通过resolve把数据往下传递
})
.then(res => {
console.log(res);
return next(3);
})
.then(res => {
console.log(res);
})
.catch(() => { //处理失败:catch方法的第二个参数是失败的回调
console.log("出错啦!");
});
创建user.js文件
function addUser(name){
return `保存${name}成功!`;
}
function removeUser(id){
return `删除${id}号用户!`;
}
// 声明模块并导出
// module.exports={
// save:addUser,
// delete:removeUser
// }
// 声明模块导出的简写
module.exports={
addUser,
removeUser
}
test.js
let user = require("./user.js"); //引入user模块
console.log( user );
let result1 = user.addUser("吕布");
let result2 = user.removeUser(101);
console.log(result1);
console.log(result2);
user.js
let name = "老孙";
let age = 66;
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,报错:SyntaxError: Unexpected token { (语法错误,在标记{的位置 )
原因是node.js并不支持es6的import语法,我们需要将es6转换降级为es5!
babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有的环境中执行。
这意味着,你可以现在就用 ES6 编写程序,而不用担心现有环境是否支持
创建新目录 lagou-babel,在终端中打开,运行命令:
npm install --global babel-cli
查看版本
babel --version
如果报错1:(win7系统中)
‘babel’ 不是内部或外部命令,也不是可运行的程序或批处理文件。(babel命令在当前系统中不被认可)
windows10默认禁止运行有危险的脚本,修改一下系统策略就好了
开始菜单-> Windows PowerShell (切记要以管理员身份运行),输入代码
set-ExecutionPolicy RemoteSigned
现在,就可以看版本号了。
创建lagou-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 .\dist\test.js
user.js:如果你不想暴露模块当中的变量名字,可以通过as来进行操作:
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() );
也可以接收整个模块
test.js
import * as info from "./user.js"; // 通过*来批量接收,as来指定接收的名字
console.log(info.a);
console.log(into.b);
console.log( into.c() );
可以将所有需要导出的变量放入一个对象中,然后通过default export进行导出
/*****************导出****************************/
export default{
name:"老孙",
eat(){
return "吃点啥!";
}
}
/*****************导入****************************/
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';
console.log( name1 ); // 我是来自student1.js
console.log( name2 ); // 我是来自student2.js