es5:
ecmascript
1.es6:
升级了一些属性和方法
2015年6月发布第一版本es6:
（EcmaScript 2015）
兼容性比较差：
浏览器的兼容性更差
编写：
es6：效率更高
--》转换为es5
2.包管理机制
node：
模块化概念
myscript.js:包/模块
funciton Student(){}
<script src=''></script>
框架（大）-〉包-》模块
npm：node package manager:
官网部署在国外
检测仓库地址：npm config list
国内仓库：
淘宝镜像：
http://registry.npm.taobao.org
1.修改npm仓库地址
npm config set registry http://registry.npm.taobao.org
npm install jquery
npm uninstall jquery
2.下载cnpm:
1.通过npm下载cnpm,指定cnpm的仓库地址
npm install cnpm -g --registry http://registry.npm.taobao.org
cnpm config list:
cnpm install jquery
cnpm uninstall jquery
3.yarn
(Yet Another Resource Negotiator，另一种资源协调者)
优点：
加载更快
加载包时可以指定版本号
缓存机制
1.安装yarn
npm install yarn -g
yarn add jquery/yarn add jquery-3.5.0
yarn remove jquery
npm install http
cnpm install http
yarn add http
3.安装转码工具babel
1.全局安装/在线使用
1.下载
cnpm install babel-cli -g
2.安装预设(转换规则)
es6->es5
babel-preset-latest
babel-preset-es2015
babel-preset-react
....
$ cnpm install babel-preset-es2015
3.创建配置文件
创建在项目的根目录下
.babelrc
{
"presets":["es2015"]
}
4.使用babel进行转码
babel index.js:将转换结果打印在控制台上
babel index.js --out-file index-out.js:将转换结果输出到index-out文件中
babel src --out-dir dist: 将src文件中的所有文件转吗后输出到dist文件中
src：存放原文件es6文件
dist：存放转码后文件es5文件
2.本地安装/离线使用
http://www.baidu.com:
-->jquery.js
myjs.js:es6:babel:配置文件
images
下载到本地
1.卸载全局babel
cnpm uninstall babel-cli -g
2.初始化项目
cnpm init:
cnpm init -y
:package.json文件
3.安装babel-cli，并保存到配置文件中
cnpm install babel-cli --save-dev
4.安装预设
cnpm install babel-preset-es2015 --save-dev
5.编写.babelrc配置文件
index.js:
let a=10;
-->es5
.babelrc:->preset:
{
"presets":["es2015"]
}
6.简化转换操作
在paceage.json文件中，创建一个命令：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"babel src --out-dir dist"
},
$ cnpm run build
app1:
package.json:
devDe:{
"babel-cli":''
}
node_modules:
xxx:babel-cli
xxx
xxx
app2:
package.json:
$ npm install
4.模块化机制
es5：
get.js
function getdate(url handler){
window.a=10;
//1.
//2.
//3.
//4.
//5.
//6.data
}
ajax.html:
<script src='get.js'>
function getdate(url handler){
//1.
//2.
//3.
//4.
//5.
//6.data
}
getdata();
getdata();
getdata();
test.html:
//学生数据
<script src='src'>
function getdata(){
}
getdata();
getdata();
node:
Commentjs
导出模块：
index.js
module.exports={
a:10
}
导入模块:
require("./index.js");
1.模块化机制
index.js:
导出：
window.getdata
function getdata(){
//1.
//2.
//3.
....
}
getdata(url,)
getdata(url,);
outer.js:
导入：
<script src="index.js"></script>
<script src='jqeruy.js'></script>
getdata();
框架(jquery大) 包 模块(小)
1.node:
commentjs:本身就是一个模块
需要下载安装
js-》模块
导出：
每一个模块中都有一个module对象
module.exports.a=a;
module.exports={
a:a,
b:b
}
module可以省略
exports.a=10;
导入：尽量将导入代码写在当前模块第一行
var module=require("./node.js")
require("./node")
引入第三方模块：
require("mysql")
require("jquery")
node_modules:
操作：
node.js
module.exports.a
module.exports.say=say;
module.js
var module=require("./node.js");
module-->module.exports(node.js)
导出：
module1.js:
导入
2.es6:
模块化语法知识es6中的一种语法，兼容性不好
es6->es5
导出：
export 不能直接加属性值
var a=10;
//export a;->export 10
export var a=10;
export function say(){}
var a=10;
export {a}
var a=10;
export {a as aa}
export default {}/function say(){}
每个模块只能导出一次
不能导出var let const声明的变量
导入
import {a,b,c} from './app1.js'
import {aa as ab} from './app1.js'
import str from '';
str只能获取default导出的变量
import * as person from ''
2.let const
var
let
const
3.解构
将一个比较复杂的元素差分成简单的变量
等号左侧的格式和解构对象的格式相同，即可拿到内部属性
es5:
var obj={
name:'lisi',
age:20,
gender:'men'
}
var nn=obj.name;
var aa=obj.age;
var gg=obj.gender;
1.对象解构
var obj={
name:'lisi',
age:20,
oo:{
key:'hello'
}
}
let {name,age}=obj;//同名解构
let {name:nn,age:aa}=obj;//更名解构
let {name,age,oo:{key}}//嵌套解构
let {age,name="lisi"}={age:10};//赋予解构变量默认值，当前默认值必须为undeifned才能赋值成功
2.数组解构
var arr=[1,2,3,4,5];
var a=arr[0];
var b=arr[1];
...
var arr1=[1,2,[3,4],5];
let [a,b,c,d,e]=arr;//完全解构
let [,a,b,,]=arr;//对不想赋值的变量直接省略
let [a,b,c=10]=[1,2];//赋予默认值
let [a,b,[c],d];//不完全解构
let [a,...b]=arr;//剩余项解构
3.字符串解构
var str="hello";
str.length
let [a,b,c]=str;
//a->h
//b->e
//c->l
let {length:len}=str;
//解构包装器函数中的原型对象中的属性和方法
len:5
4.number/boolean
var num=10;
Numnber.prototype.tpString()
new Number(num).toString()
var bool=true;
let {
toString:ts
}=num/bool;
包装器函数的原型对象中的属性和方法
4.扩展运算符 …
var arr=[1,2,3,4,5];
var arr1=[6,7];
var result=[...arr,6,7];
var result=[...arr,...arr1];
类数组对象：
[...arguments]=[1,2,3]
5.对象扩展
静态方法：
Object.is(a,b):
比较a和b是否为同一个值
返回值为boolean类型
NaN NaN:true
+0 -0:false
"10" 10:false
....
Object.assign()
Object.setPrototypeOf()
Object.getPrototypeOf()
Object.keys()
Object.values()
Object.entries():获取所有属性名和属性值组成的数组
对象简写L：
es5:
var name="lisi";
var say=function(){}
var obj={
name:name,
say:say
}
es6:
var name="lisi";
var say=function(){}
var obj={
name,//name:name
say,//say:say
age:20
}
6.数组扩展
new Array(10)
静态方法：
Array.from()
Array.of(10)
非静态方法：
Array.prototype.find(function(){},this):
查找满足条件的第一个元素
默认没有返回值
当写了return时，有返回值
Array.prototype.findIndex()
Array.prototype.includes(key):
判断数组中是否包含key
返回值为boolean
包含-》true
Array.prototype.fill(key,beginIndex,endIndex)：
填充数组元素
修改原数组
默认begin:0;end:length
如果begin/end为负数，
begin :-3+length
end:-2+length
Array.prototype.keys():
node:
keys.next().value
Array.prototype.values()：
Array.prototype.entries()：
review
1.模块化机制
页面：功能/文件/文件夹
模块 包 框架
1.node(commentjs)
conmentjs本身就是一个包，需下载引入
导出：
module.exports对象
exports对象
exports.a=10;
exports={
a:10
}
导入
var result=require("./my.js");
result.a
实例：
demo：
jquery：
index.js
test.js
jquery.js
test.js:
require("./jquery");
1.如果当前文件夹下只有一个jquery.js文件，相当于引入jquery.js
2.如果当前文件中只有jquery文件夹。相当于引入jquery文件夹下的index.js
3.如果当前文件夹中同时存在同名的文件以及文件夹，默认引入文件；
require("./jquery/")
第三方框架：
require("mysql");
node_modules
../node_modules
../../node_modeles
....
es6:
导出：
export a=10;
var a=10;
export {a}
var a=10;
export {a as b}
export default {}:
一个页面只能有一个default、
导入：
import
import {a} from ''
import {a as b} from ''
import * as p from ''
import a from '':
a->default{}
2.解构
将比较复杂的元素拆分称单个变量
var obj={
name:'lisi',
age:10,
oo:{
gender:'men'
}
}
var gender=obj.oo.gender
data:{
data:[],
data:{
list:[]
}
}
data.data.list
var user=data.data.list;
es6:
let {name,age,oo:{gender}}=obj;
let {name:n}=obj;
let {name,age=10,gender='men'}={name:'lisi',age=20}
console.log(age);//20
consoel.log(gender);//men
数组：
var arr=[1,2,3,4];
let [a,b,c,d]=arr;
let [,a,,]=arr;
let [,,,,d=10]=arr;
var arr=[1,2,[3,4],5];
let [a,b,[c,d],e]=arr;
let [a,...b]=arr;
字符串：
类数组对象：
1.数组
let [a,b,c]="hello"
2.对象
let {length:len}="hello";
String.prototype.
boolean/number：
var a=10/true;
对象：
let {}=a;
Number().prototype
Boolean().prototype
3.扩展运算符
...
var arr=[1,2,3,4,5];
let [...b]=arr;
[...arr]=[1,2,3,4,5]
[...arguments]=将类数组转换为数组
[...arr,...arr2,8,9]
for(){}
4.对象扩展
is(a,b)
5.数组扩展
285
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
