１：兼容性：IE10+, chrome, firefox, node.js, 移动端
处理：ａ：在线编译
<script src="browser.js"></script>
<script type="text/babel">
let a = 5;
let b = 6;
alert(a+b);
</script>
ｂ：用webpack打包
２：变量：
var : 可以重复声明, 无法限制修改, 没有块级作用域
let : 不能重复声明，变量，可以修改（如：循环里面用）
const : 不能重复声明，常量，不可以修改
３：箭头函数：相当于把function去掉，在（）后面加一个＝>
如果只有一个参数时候，（）可以省略
如果只有一个return时候，｛｝可以省略
４：函数的参数：
ａ：参数扩展／展开
剩余参数...args (args可以根据自己的习惯更改)
必须放在最后一个
var show = function(a, b, ...args){
console.log(args); // [3,4,5] 收集参数
console.log(...args); //3,4,5 展开数组
}
show(1,2,3,4,5);
var arr1 = [1,2,3]; var arr2 = [3,4,5]; var arr3 = [...arr1,...arr2]; // [1,2,3,3,4,5] 展开数组
ｂ：默认参数 : 函数的形参可以直接赋值，调用的时候如果重新赋值，则采用新的，没赋值就直接默认参数
５：解构赋值：左右两边结构必须一样，右边必须是个复合规则的实参，声明和赋值不能分开
let [{a,b}, [n1,n2,n3], num, str] = [{a:1,b:2}, [3,4,5], 6, "解构赋值"];
６：数组：
let arr=[19,72,83];
// map: 映射,一个对一个
let result = arr.map(item=>item>=60?"及格":"不及格");
//reduce：汇总，一堆出来一个
let result1 = arr.reduce(function(tmp,item,index){
// console.log(tmp,item,index);index是执行的第几次
if(index < arr.length-1){
return tmp+item;//求和
}else{
return (tmp+item)/arr.length;//求平均数
}
});
// filter：过滤器
let arr2 = [
{name: "小明",sore: 60},
{name: "小赵",sore: 30},
{name: "小张",sore: 90},
{name: "小李",sore: 70}
]
let result2 = arr2.filter(item=>item.sore >= 60);
// forEach：循环（迭代）
let result3 = arr.forEach((item,index)=>{
console.log(item,index);
})
７：字符串
字符串模板：可以把变量塞到${}里面去；还可以换行
let title = "标题";
let content = "内容";
let str2 = `
<div>${title}</div>
<div>${content}</div>
`;
console.log(str2);
// <div>标题</div>
// <div>内容</div>
startsWidth+endsWidth(可以用来分辨文件类型)
let str = "ashneksmms";
console.log(str.startsWith("a"));//true
console.log(str.endsWith("s"));//true
８：面向对象：使用class，extend, super关键字，构造器和类区分开了，class里面可以直接加方法
// 以前
// function User(name,age){
// this.name = name;
// this.age = age;
// }
// User.prototype.sayName = function(){
// alert(this.name);
// }
// function VipUser(name,age,level){
// User.call(this,name,age);
// this.level = level;
// }
// VipUser.prototype = new User();
// VipUser.prototype.constructor = VipUser;
// VipUser.prototype.sayLevel = function(){
// alert(this.level);
// }
// var user1 = new User("zhangfei",20);
// var user2 = new VipUser("zhangfei",20,12);
// user1.sayName();
// user2.sayLevel();
// ES6
class User{
constructor(name,age){
this.name = name;
this.age = age;
}
sayAge(){
alert(this.age);
}
}
class VipUser extends User{
constructor(name,age,level){
super(name,age);
this.level = level;
}
sayLevel(){
alert(this.level + "---" +this.name);
}
}
var user1 = new User("zhangfei",20);
var user2 = new VipUser("zhangfei",20,12);
user1.sayAge();
user2.sayLevel();
实例：面向对象的应用－React组件化
babel=browser.js
９：json: 如果值是字符串，所有名字必须用引号包起来，只能用双引号
变字符串：JSON.stringify();
解析字符串的json: JSON.parse();
let json = {
a:3,
b:4
};
alert(encodeURIComponent(JSON.stringify(json))); //转换成字符串
var str = '{"a":12,"b":"zhangsan"}';
var json2 = JSON.parse(str); //字符串转换成json
简写：
如果key之前定义过，和以前定义的一样，则只需要写key就行，可以省略value
方法里面的：function可以省略；
let a = 3;
let b = 4;
let json = {
a,
b,
// show:function(){
// },
show(){
alert(this.a);
}
};
１０：Promise:(基于jquery进行了封装)使用同步的方法写异步的ajax；适合一次读一堆
Promise.all([$.ajax(url:"./arr.txt",dataType:"json"),$.ajax(url:"./json.txt",dataType:"json")],then(results=>{
// 所有的情况都成功
let [arr,json] = results;
consloe.log(arr,json);
},err=>{
// 有错误的情况下
}));
Promise.race([$.ajax(url:"./arr1.txt",dataType:"json"),$.ajax(url:"./arr2.txtt",dataType:"json")],then(results=>{
// 竞速，哪个快用哪个
},err=>{
// 有错误的情况下
}));
１１：generator函数（*）：生成器,可以让函数暂停执行，请求数据的时候，通过暂停，等数据成功之后，执行以后的代码，本质相当于通过yield把函数分割成两个函数，第一次next，执行的是第一次的函数，第二次next，执行的是第二次的函数，适合有逻辑性的，封装异步操作,不能写成箭头函数，async可以
yield: 传参，返回
function *show(num1,num2){
alert(`${num1},${num2}`);
alert("a");
let c = yield alert("b"); //
alert(c);
yield;
alert("d");
}
let oGen = show(11,22);
// console.log(oGen);
oGen.next(1);//a,b, yield前面的结果，参数没有用到
oGen.next(2);//2 yield后面的结果，参数是2
oGen.next();//d
runner(function *(){
let userDate = yield $.ajax({url:"getUserData",dataType:"json"});
if(userDate.type == "VIP"){
let data2 = yield $.ajax({url:"getVipUser",dataType:"json"});
}else{
let data2 = yield $.ajax({url:"getUsers",dataType:"json"});
}
});
function runner(_gen){
return new Promise((resolve,reject)=>{
var gen = _gen();
_next();
function _next(_last_res){
var res = gen.next(_last_res);
if(!res.done){
var obj = res.value;
if(obj.then){
obj.then((res)=>{
_next(res);
},(err)=>{
reject(err);
});
} else if(typeof obj == "function"){
if(obj.constructor.toString().startsWith("function GeneratorFunction()")){
runner(obj).then(res=>_next(res),reject);
}else{
_next(obj());
}
}else{
resolve(res.value);
}
}
}
});
}
１２：ES7＆８：
ａ：数组
includes 检查数组里面是否有某个值，返回true / false;
key,value,entries
var arr = ["a","b","c","d"];
var json = {
a:1,
b:"ssss",
c:"dddff"
};
for(let i in arr){
alert(i); //出来的是key;
}
for(let i in json){
alert(i); //出来的是key;
}
for(let i of arr){
alert(i); //出来的是value
}
for(let i of json){
alert(i); // for of 不能用于json
}
keys:把所有的key拿出来,
values:把所有的values拿出来,
entries:把所有的key-value对拿出来,
for(let value of arr.values()){
alert(value);
}
for(let key of arr.keys()){
alert(key);
}
for(let entry of arr.entries()){
alert(entry);
}，
ｂ：async + await : 相当于generator,但是不用runner函数来处理数据，可以使用箭头函数
let getData = async () => {
let data1 = await $.ajax({url:"data1.txt", dataType:"json"});
let data2 = await $.ajax({url:"data2.txt", dataType:"json"});
let data3 = await $.ajax({url:"data3.txt", dataType:"json"});
}