1.变量
- var 可以重复定义,不能限制修改,函数级作用域,无块级作用域
重复定义不会报任何错误,之前定义的被覆盖let aVar = [1,2,3]; for(var i = 0; i < aVar.length; i++){ console.info(aVar[i]); // 输出都为3 } 变量预解析(变量提升) js解析器将变量声明提升。 var a = 12; function show(){ alert(a); // 输出为undefined var a = 5; } show(); 编译后如下: var a; a = 12; function show(){ var a; alert(a); a = 5; } show();
- let 不可重复定义、变量
重复定义会报语法错误 SyntaxErrorlet aVar = [1,2,3]; for(let i = 0; i < aVar.length; i++){ console.info(aVar[i]); // 输出为1,2,3 }
- const 不可重复定义、常量
不可重新进行赋值,若重新赋值会报类型错误 TypeError
2.解构赋值
-
左右两边结构必须一样,右边的值必须合法
-
必须定义和赋值同步完成,解构赋值不可声明
原来的定义如下:
let a = 12; let b = 5; let c = 99;
解构赋值如下:
let arr = [1,2,3]; let [a,b,c] = arr; 等同于 let [a,b,c] = [1,2,3]; 也可对json进行操作 let {a, b,c} = {a:12,b:8,c:2}; // 正确写法 let {a,b,c}; {a,b,c} = {a:12,b:8,c:2}; // 该写法会报语法错误
3.函数
-
箭头函数
function(参数, 参数){ 函数体 } (参数, 参数) =>{ 函数体 } 1.如果有且仅有1个参数,()可以省略 2.如果函数体只有一句话,而且是return,{}也可以省略
-
默认参数
(a=1,b=3)=>{ console.info(a,b); // 1,3 }
-
参数展开(剩余参数 …)
-
“三个点”的第1个用途:接收剩余参数
let show =(a,b,...args){ console.log(a,b,args); } show(12,3,45,67,23); // a为12,b为3,args为[45,67,23] 剩余参数必须在参数列表的最后 let show =(a,b,...args,c){ console.log(a,b,args,c); } show(12,3,45,67,23); // 报语法错误SyntaxError
-
“三个点”的第2个用途:用来展开一个数组
let a = [1,2,3]; let b = [2,4,...a,6]; console.log(b); // 输出 2,4,1,2,3,6
4.数组/json
-
数组(5种)
-
map 映射:一个对一个
let arr = [79,34,65,57,90]; let arr2 = arr.map(item=>return item>60); console.log(arr2); // 输出 [true,false,true,false,true]
-
filter 过滤
let arr = [12,34,65,45,21]; let arr2 = arr.filter(item=>item%2); console.log(arr2); // 输出 [65,45,21]
-
forEach 遍历
let arr = [12,34,65,45,21]; let sum = 0; arr.forEach(item=>{ sum += item; })
-
reduce 汇总
let arr = [12,34,65,45,21]; // 求和 let sum = arr.reduce((tmp,item,index)=>{ console.log(tmp,item,index); // tmp表示临时值,item表示从第二个值开始,index表示从1开始 // 输出为 12, 34, 1 undefind, 65, 2 ... // return tmp+item; 输出为 12,34,1 36, 65,2 ... }); // 求平均值 let ave = arr.reduce((tmp,item,index)=>{ if(index<arr.length-1){ return tmp+item; }else{ // 最后一次迭代 return (tmp+item)/arr.length; } });
-
from
Array.from([array-like])=>[x,x,x] 将一个类似数组的集合转化为数组。 let aDiv = document.getElementByTagName("div"); aDiv 是一个HTMLConnect数组集合,并不是一个真正的数组,不可用forEach去循环遍历。 可以用 Array.from(aDiv)将aDiv转化成数组,再去用forEach去遍历。
- json
有两处改变
1.简写:名字和值一样的,可以省
2.function可以不写
5.字符串
字符串模板:植入变量,任意折行。用``(反单引号)。
startsWith() : 用来判断某个字符串是否以"13"开头。
endsWith():用来判断某个字符串是否以".txt"结尾。
6.面向对象
class/constructor
extends/super
普通函数:this根据调用者发生变化,this经常会变
箭头函数:this跟其所在范围内有关,this恒定不变
bind:给函数定死一个this,其优先级低于箭头函数
7.promise
解决异步操作
同步:串行,简单方便。
异步:并发,性能高,体验好。
promise的用法
let p = new Promise((resolve,reject)=>{
resolve(); // 成功时调用
reject(); //失败时调用
})
p.then(()=>{},()=>{});
// Promise.race(); 所有请求是或的关系,所有请求有一个成功就可以。(不常用)
// Promise.all(); 所有请求是与的关系,所有的都成功才算请求完成。
Promise.all([
多个请求
]).then(
(arr)=>{
接收多个请求返回的数据
}
(err)=>{
失败
}
)
promise对解除异步操作有用,但有局限性,对有逻辑性的异步操作麻烦。
generator — 生成器 (可暂停,*是generator函数的标志)
yield 可以传参数,但只可以传一个
function *show(){
alert("aaa");
let a = yield;
alert("bbb"+a);
}
let gen = show();
gen.next(12); // 输出aaa
gen.next(); // 输出bbb undefined
gen.next(); //输出aaa
gen.next(12); //输出bbb12
yield 可以返回值。
function *show(){
alert("aaa");
yield 55;
alert("bbb");
}
let gen = show();
let res1 = gen.next();
console.info(res1); // 输出{value:55,done:false}
let res2 = gen.next();
console.info(res2); //输出{value:undefined,done:true}
generator和promise的配合使用:
1.需要外来js的辅助执行,缺点是不统一、不标准、性能低
2.generator函数不能写成=>(箭头函数)
async/await(处理异步操作)
async () => {
// let 结果 = await 异步操作(可以是promise,generator,或者另一个async函数)
let data1 = await $.ajax({ url :"",dataType:"json"});
// 可根据data1所获取的值直接进行判断来确定之后的操作
if( data1的判断条件){
// 满足条件操作
}else{
// 其他操作
}
}