将a数组 与b数组进行合并
a=[1,2,3]
b=[4,5,6]
c = a.concat(b);//c=[1,2,3,4,5,6]
this.listArr.forEach((el, i) => {
el.is_dafault = (el.id === obj.id) ? 0 : 1;
})
ECMA ≈ js
ECMAScript = ECMA = ES
兼容性
ES5 很少不兼容
ES6（ES2015）：
IE10+ 、 Google 、FireFox 、 移动端 、 NodeJs
解决：编译 、转换
转换：
1.在线转换
2.提前编译（！提倡，在线转换费时间）
在线转换：
babel == browser.js
使用方式：引入browser.js+script标签（代码范围）定义type=“text/babel”
编译需要时间
ES6
1. 变量
let（变量，可以不断修改） / const（常量，不能修改） 不能重复声明
块级作用域 { ... }
div > input*3 click=function alert(i)
解决1 for里面垫了一层作用域(function(i)){a.onclik=fn})(i);
解决2 for(let i=0 ...)
2. 函数
箭头函数
function name(){} ()=>{} function去掉加=>
1.如果只有一个参数 ()可以省 a=>{...}
2.如果只有一个return {}可以省 a=>a*2;
函数的参数
1.参数扩展+数组展开（剩余参数）
function(a,b,...args){ //args 可以随便取名字
// a,b,...args,c [X]
alert(a);
alert(b);
alert(args);
}
show(12,15,8,9,20);
+收集剩余参数
*Rest Parameter必须是最后一个
+展开一个数组
let arr = [1,2,3];
...arr 相当于 1,2,3
展开后的效果，跟直接把数组的内容写出来一样
let arr = [...arr1,...arr2]
不符合语法情况(以下赋值)
let a;
let arr = [1,2,3]
a = ...arr; [X] // a = 1,2,3;
alert(a);
2.默认参数
如：animation 里面的时间
function show(a,b=5,c=12){
console.log(a,b,c)
}
show(99,19) --- 99,19,12
3. 数组
+ map 映射 => 一个对一个
[12,58,86,45,91] => [不及格，不及格，及格，不及格，及格]
[12,58,86,45,91] => [{...},{...},{...},{...},{...}]
let arr=[12,5,8]
arr.map(function(item){
alert(item*2)
})
arr.map(item=>item*2)
+ reduce 汇总 => 一堆出来一个
算个总数 平均数 ...
[1,2,3] => 6
let arr =[12,69,180,8763]
arr.reduce(function(tmp他是中间结果 临时结果用于下一次,item,index){
return tmp+item
})
中间结果 return 0+12 -> return 12+69 -> return 81+180 ...
平均数
求和+最后一次单独处理if（index != arr.length-1）
+ filter 过滤器 留一部分删一部分
let arr = [12,5,8,99,27,36,75] 能被3整除的留下
let res = arr.filter(item=>item%3==0)
+ forEach 循环（迭代）
arr.forEach(el=>{...})
arr.forEach((el,index)=>{...})
4. 字符串
1.多两个新方法
startsWith
str.startsWith('a') 字符串是否以a开头
https://
endsWith
str.endsWith('.com')
163.com
2.字符串模板
反单引号 1边上
let a = 12;
`uuu${a}` ==> uuu12 把变量放到字符串
拼接html
普通字符串不能折行，模板字符串能折行
let str='<div>\
<h3>'+h3+'</h3>\
<p>'+p+'</p>\
</div>';
5. 面向对象
+ 面向对象
function User(name,pass){
this.name=name;
this.pass=pass;
}
User.prototype.showName=function(){alert(this.name);}
User.prototype.showPass=function(){alert(this.pass);}
var u1 = new User('n1','123456');
alert(u1.showName);
alert(u1.showPass);
类和构造函数一样+散开
新版面向对象
class User{
constructor(name,pass){
this.name=name;
this.pass=pass;
}
showName(){alert(this.name);}
showPass(){alert(this.pass);}
}
1.class关键字、构造器和类分开
2.class里面直接加方法
+ 继承：
function VipUser(name,pass,level){
User.call(this,name,pass);
this.level = level;
}
VipUser.prototype=new User();
VipUser.prototype.constructor=VipUser;
VipUser.prototype.showLevel=function(){alert(this.level);}
新版本继承
class VipUser extends User{ 继承自User
constructor(name,pass,level){
super(name,pass); ------ super 超类=父类 call
this.level = level;
}
showLevel(){alert(this.level);}
}
+ 面向对象实例 （应用--react）
react：组件化-class + JSX（JSX==babel==browser.js react依赖于JSX JSX是js扩展版）
react.js + react-dom.js + browser.js
script type='text/babel'
class 新组件Name extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <span>{this.props.str}</span>;
也可以return 组件 <新组件Name str='我想传参'></新组件Name>
}
}
window.onload=function(){
ReactDom.render(
<新组件Name str='我想传参'></新组件Name>,
......
)
}
6. Promise -- 承诺
异步：操作和操作之间没有关系 可以同时进行多个操作
缺：代码更复杂
ajax('/banners',function(){
继续往下ajax 请求别的 一层层往下走
},function(){
alert('get Error')
})
同步：同时只能做一件事
代码简单
顺序往下写ajx代码即可
Promise -- 清除异步操作
* 用同步一样的方法 来书写异步代码
需要Promise 需要new
let p = new Promise(function(resolve解决,reject拒绝){
// 异步代码
// resolve -- 成功了
// reject -- 失败了
$.ajax({
url:'arr.txt',
dataType:'json',
sucess(arr){
// 成功的时候调用 resolve
resolve(arr);
},
error(err){
// 失败的时候调用 reject
reject(err);
}
})
})
应用
p.then(function(arr){
// 成功调用的方法
},function(err){
// 失败调用方法
})
// 应用到点
let p1 = ...... arr
let p2 = ...... json
Promise.all([p1,p2]).then(function(arr){
alert('全都成功')
cosnole.log --- arr = [ arr , json ]
分解
let [res1,res2] = arr
},function(){
alert('至少有一个失败了')
})
写两个Promise 麻烦 => 封装
function createPromise(url){
return new Promise(function(resolve,reject){
$.ajax({
url,
dataType:'json',
sucess(arr){resolve(arr);},
error(err){reject(err);}
})
})
}
Promise.all([createPromise(url1),createPromise(url2)]).then(........)
高版本jq 自带 Promise 不用自己封装
Promise.all([
$.ajax({url:'url1',dataType:'json'}),
$.ajax({url:'url2',dataType:'json'})
]).then(res=>{
let [arr,json] = res;
},err=>{})
*其他用法
Promise.race 竞速 用的少
all 一个个都要成功 一个不能缺一个不能少
race 需求 谁先来执行谁
Promise.race([
$.ajax({url:'url1',dataType:'json'}),
$.ajax({url:'url2',dataType:'json'})
])
7. generator - 生成器
generat - 生成
普通函数 -- 一条路走到底
+ generator函数 -- 中间能暂停
function *show(){ *爱贴着谁贴着谁 但是不能一起贴
alert('a');
和*配 yield; 暂时放弃执行
alert('b');
}
不能直接show(); 创建出了generator对象 踹一脚走一步
- let genObj=show();
- genObj.next(); a
- genObj.next(); b
为什么要停？
function 函数(){
代码...
ajax(xxx,function(){
代码...
});
}
相当于 不用回调
function *函数(){
代码...
yield ajax(xxx);// 这里配置
代码...
}
+ yield 既可以传参 又可以返回
++ 传参
function *show(){
alert('a');
yield; let a = yield;
alert('b');
alert(a) a=5
}
let genObj=show();
genObj.next(12);
genObj.next(5);
next里面可以传参 传参的参数会到yield里面
yield 里面接参数 let a = yield;
a=5 解释：
第一个next 执行开始到yeild let a = 不包括
第二个next 从 let a = 开始 5从这时候进去
第一个next 传参是废的
++ 返回 中间结果 （每一步都有一个中间结果） + 最后结果（return）
yield后面可以跟东西
function *show(){
alert('a');
yield 12;
alert('b');
}
let gen=show();
let res1 = gen.next();
console.log(res1);
--- {value:12,done:false}
done 还未完成
let res2 = gen.next();
console.log(res2)
--- {value:undefined,done:true}
执行最后一个了undefined = return的东西
function *炒菜(菜市场买回来的菜){
洗菜 --> 洗好的菜
let 干净的菜 = yield 洗好的菜;
干净的菜 --> 切 --> 丝
let 切好的菜 = yield 丝;
切好的菜 --> 炒 --> 熟的菜
return 熟的菜;
}
开始到 yield 右边 --- 一个程序
+ generator 实例 Runner
需要组件支持 cnpm i yield-runner-blue 主要要js index.js
runner.js + runner.js
runner(function *(){
let data1 = yield $.ajax({url:'url1',dataType:'json'});
let data2 = yield $.ajax({url:'url2',dataType:'json'});
let data3 = yield $.ajax({url:'url3',dataType:'json'});
console.log(data1,data2,data3)
})
可以像写同步一样写异步
$.ajax({url:'url1',dataType:'json'});-Promise对象 yield出去 给runner
异步操作：
1.回调
$.ajax(.....sucess($.ajax(.....sucess(......))))
2.Promise
Promise.all([$.ajax,$.ajax]).then(......)
3.generator
runner(function *(){
let d1 = yield $.ajax(....); * n
})
++ 带逻辑处理 用户-vip------
Promise.all([$.ajax]).then(res=>{
if(xxx == 'vip'){
Promise.all......
}else{
........
}
},......)
比普通回调还麻烦
generator （generator函数不能写成箭头函数）
runner(function *(){
let u = yield $.ajax(....);
if(u=='vip'){
let u2 = yield $.ajax(....);
}else{
let u2 = yield $.ajax(....);
}
})
Promise - 适合 一次读一堆 没有什么逻辑
generator - 逻辑性比较强 （他的本质就是Promise）
+ generator 实例 KOA(NodeJs框架)
KOA里面如何用generator
cnpm i koa
cnpm i koa-mygsql
const koa = require(koa)
const koa = require(koa-mygsql)
let db = mygsql.createPool...........
let server = new koa();
server.user(function *(){
这里就是generator
let data = yield db.query(....................)
db 就是个异步
this.body = data;
})
server.listen(8080)
8. 模块化
变量：
var 可以重复声明 作用域为函数级
无法限制修改 常量π PI
没有块级作用域
解构赋值：
1.左右两边的解构必须一样
2.右边 必须是个东西
3.声明和赋值不能分开（必须在一句话中完成）
+
let [a,b,c] = [1,2,3]
相当于 let a = 1; .......
let {a,b,c} = {a:1,b:2,c:3}
+
注意
[...] = {...} [X]
{a,b} = {12,5} [X]
let [a,b]; [a,b]=[2,5] [X]
JSON
1.json对象
let json={a:12,b:5};
let str='http://apiUrl........?data='+encodeURLComponent(JSON.stringify(json))
JSON.stringify
let str="{a:12,b:5}"
let json = JSON.parse(str);
标准写法：
1.只能用双引号 不能用单引号
2.所有名字都必须用双引号包起来
{"a":12,"b":56}
2.简写
名字一样
let a = 5;
let json = {a:a,b:15} ==> json = {a,b:15}
名字和值一样 key = value
方法
let json = {
a: 12,
// show:function(){
// alert(this.a);
// }
show(){......}
}
:function 一块删
ES7预览
Google 59+
1.数组
includes 数组里面是否包含某个东西
arr.includes(99);
keys/values/entries
for...of
循环迭代器
for(let i in arr) i为值=value
for(let i in json) i 报错
json对象是一个可迭代的对象，不是一个迭代器
for...of不能用于json
for...in
循环json
for(let i in arr) i为下标=key
for(let i in json) i=key
for...of
keys=>所有的key拿出来 0,1,2,3
values=>所有的value拿出来 12,5,99
entries=>所有的key-value对拿出来 {key:0,value:12},{key:1,value:5}......
* entry实体
for(let key of arr.keys()){......}
for(let val of arr.values()){......} ！！！ES7
for(let entry of arr.entries()){......}
= for(let [key,value] of arr.entries()){......}
2.幂
求幂 之前：Math.pow(3,8)
3**8
3.字符串padStart/padEnd
console.log('abc'.padStart(10)) 从起始位置补10个
end 往后补
第二个参数console.log('abc'.padStart(10,'0')) 不补空格 补0 时钟09
4.语法容忍度
+ 数组容忍度
[1,2,3] => [1,2,3,]
ie---- [1,2,3,] 直接不认
+ 参数容忍度
function aa(1,2,3,) {}
5.async await ！！！要求浏览器版本59+++
async await => generator yield 的取代
generator 需要runner
async function show(){alert('a');await;alert('b');}
async function readData(){
let d1 = await $.ajax(......)
............
}
1.async可以写成箭头函数 let read = async ()=>{......}
2.不依赖于外部的runner 统一+性能高
