global
都是reference,global是绝对引用
没有全局函数：对变量的直接使用，实际是global的方法。
全局污染：非闭包环境的var和直接定义变量，闭包环境的直接定义变量。
this
this是相对引用,与定义位置无关。
非闭包this===global,闭包环境，在调用时动态绑定
技巧：默认指向“方法宿主”（全局函数是global的方法！）
特例：node在文件中执行的函数，仍然是this被绑定为global!!
三个绑定函数：apply,call,bind
name='global name';
this.name="this name"
function sayName() {
console.log(this.name)
}
let sn=()=>console.log(this.name)
let person={
name:'person name',
sayName:sayName,
sayName1:sn,
sayName2:function () {
sn()
}
}
sayName()
sn()
person.sayName()
person.sayName1()
person.sayName2()
结果
···
global name
this name
person name
this name
this name
···
回调函数
回调地狱
去回掉函数
promise()
.then
.catch
async 异步修饰符
const util=require('util')
function sum(a,b,callback) {
setTimeout(function () {
// if(a>=0)
callback(a+b);
// else
// callback("a must be great than 0")
},1000)
}
// let sum2=util.promisify(sum)
// sum2(1,2)
// .then((m)=>console.log(m))
// .catch(e=>console.log(e))
function multi(a,callback){
setTimeout(function () {
let m=a*2;
callback(m)
},1000)
}
function sum1(a,b) {
return new Promise(function (resolve,reject) {
setTimeout(function () {
if(a>=0){
resolve(a+b)
}
else{
reject("a must be great than 0")
}
},1000)
})
}
function multi1(a){
return new Promise((resolve,reject)=>{
if(a<=10){
resolve(a*2)
}
else {
reject("too diffcult")
}
})
}
async function test1(){
let m=await sum1(1,2);
let x=await multi1(m)
console.log(x)
}
test1();
//
// sum1(9,2)
// .then(m=>multi1(m))
// .then(m=>console.log(m))
// .catch(error=>console.log(error))
// sum(1,2,function (err,m) {
// if(!err)
// multi(m,function (x) {
// console.log(x)
// })
// })
console.log("end...")
数组的新玩法
array-like和iterable特征（for..in/for...of）
生成数组的新方法：
Array.from
Array.of(item...)
copyWithin(target, start, end)
let m=[2,1,3];
let m2 = m; 引用
let m1 = Array.of(...m); 浅克隆
let m3=m.slice(0); 浅克隆
几个数据的操作
push, pop, unshift, shift
slice(纯函数，不改变数组本身）, splice（不是纯函数，改变数组本身）
forEach, some, every, filter 里面的回调 函数都是三个参数item, index, ary
map, reduce ,flat多维数据变成, flatMap
let mm = [1,3,2,5,7]
let mmm=[4,6]
let x=mm.reduce(function(prev,cur){
return prev+cur
},0);
let x=[mm,mmm].flat(1)
indexOf, findIndexOf
sort
set map
set 可能去重
map 放k-v对。但是k可以是任何类型。也去重。
WeakSet() WeakMap()
模板语法和模板标签
let s= this is a test.
对象克隆
深度克隆使用lodash
函数参数
默认形参
function fn(a=0,b=0){}
副作用：此形参个数不会计入fn.length
rest形参(无需argumets)
function fn(...values){values为数组形式}
模块系统
传统的JS没有模块
ES6模块必须依赖工具。webpack
webpack.conf.js放到工程的主目录中。
npm install webpack-cli -g
类编程
static 可以被继承。java中static不可以继承。
function Person() {
}
class Animal {
constructor(age){
this.age=age;
}
sayAge(){
console.log(this.age)
}
static staticFn(){
console.log("static fn...")
}
}
class Human extends Animal{
constructor(name,age){
super(age)
this.name=name;
}
sayAge() {
super.sayAge();
console.log("attach....")
}
}
let a1=new Animal(100);
a1.sayAge()
Human.staticFn();
闭包
测试
Mocha
在项目目录下建 一个test
在目录下，建以test或spec结尾的文件。
describe(" ",function(){
it("",fn(){
});
})
运行mocha
在package.json中，把
"scripts": {
"test": "Mocha"
},
这样就可以通过npm run test进行测试了。
chai
VUE
vdom缺点： 浪费内存。
生成vdom时遇到自定义标签，如果是自定的模块，把这个标签作为一个VM，递归下去。
参值绑定，缺省会转义其中的Html标签。{{title}}
如果特别要展示富文本，可以使用如下。
属性绑定
pp!
引号中只能是表达式，不能是语句。
条件渲染
a=1
a=2
a=other
Show
循环渲染
- {{ fav.type}},{{fav.id}}, {{index}}
favs=[{id:3, type:"basketball"},{id:4,type:"football"}]
事件绑定
#加空括号，则没有了缺省的event参数。ok($event).没有括号，缺省是有event的。
@click.prevent 阻止缺省行为
@click.stop 防止冒泡
@click.once 只一次有效
methods:{
}
双向数据绑定
v-mode
v-mode.lazy 不是每一次都改变，鼠标移走后才改变。
单选radio
{{fav}}
多选checkbox
select
VUE的监听器
watch
例 子
Title
{{title|toUpper}},
{{new Date()|dateFormat}}
pp !
a=1
a=2
a=other
show
- {{fav.type}},{{fav.id}}
过滤器
比如格式化，可以使用管道
{{title|a|b}}
filters:{
toUpper(val){
return val.
}
}
{{title|toUpper}}
全局的
vue.filter("dataFormate",function(){})
vue.directive('johns',
)
//现金额大写转换函数
//ecDo.upDigit(168752632)
//result："人民币壹亿陆仟捌佰柒拾伍万贰仟陆佰叁拾贰元整"
//ecDo.upDigit(1682)
//result："人民币壹仟陆佰捌拾贰元整"
//ecDo.upDigit(-1693)
//result："欠人民币壹仟陆佰玖拾叁元整"
function upDigit(n) {
var fraction = ['角', '分', '厘'];
var digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
var unit = [
['元', '万', '亿'],
['', '拾', '佰', '仟']
];
var head = n < 0 ? '欠人民币' : '人民币';
n = Math.abs(n);
var s = '';
for (var i = 0; i < fraction.length; i++) {
s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
}
s = s || '整';
n = Math.floor(n);
for (var i = 0; i < unit[0].length && n > 0; i++) {
var p = '';
for (var j = 0; j < unit[1].length && n > 0; j++) {
p = digit[n % 10] + unit[1][j] + p;
n = Math.floor(n / 10);
}
s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
//s = p + unit[0][i] + s;
}
return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整');
}
晚上
多组件技术
子组件中的data必须使用函数
data(){
return{}
})
子组件向父组件发消息$emit
获取远端数据
可以在load或mount阶段来获取数据
在method中
created(){
window.fetch('url',{type:"GET"])
.then(res->res.json())
.then(da=>alert(da))
}
axios库代替fetch
Title
登录页面示例
···
···
测试数据
{
"users": [
{
"uname": "john",
"password": "123"
},
{
"uname": "tom",
"password": "234"
},
{
"uname": "mike",
"password": "345"
}
]
}