变量
Javascript使用var定义变量存在以下问题:
- 可以重复声明变量:
var a=2; var a=5; alert(a);
- 无法限制修改(js里面没有常量的定义)
- 没有块级作用域(var定义的变量都是全局变量)
ES6新增了let和const定义内容。let和const定义的内容都不允许重复定义,其中let定义变量,const定义常量。
函数
ES6中可以使用箭头函数:()=>{}
- 如果只有一个参数,()可以省略。
- 如果只有一个return值,{}可以省略。
let show = (a)=>{ return a*2; } //与上方函数等价 let show = a=>a*2;
ES6中允许使用可变参数(可变参数必须放在其他参数的最后),其具有以下功能:
- 收集参数
let show = (a,b,...args)=>{ alert(a); alert(b); alert(args); } show(1,3,7,5,2,4,6);
- 展开数组:数组展开后的效果就与直接将数组内容放在该位置一样。
let arr = [1,2,3]; let show = (a,b,c)=>{ console.log(a,b,c); } /** * 相当于show(1,2,3); * ...arr等价于1,2,3 ** / show(...arr);
默认参数(默认参数为参数赋予初始值):
let show=(a,b=5,c=12)=>{
console.log(a,b,c);
}
show(3);//a=3,b=5,c=12
show(3,4,5);//a=3,b=4,c=5
解构赋值:
- 左右两边结构必须一样。
- 右边必须是个合法的数据结构(变量、数组、json)。
- 声明和赋值不能分开(必须在一句话里)。
//数组解构赋值 let [a,b,c] = [1,2,3]; console.log(a,b,c);
//json解构赋值 let {a,b,c} = {a:5,b:6,c:3}; console.log(a,b,c);
//混合解构赋值 let [{a,b,c},[n1,n2],num,str] = [{a:3,b:4,c:5},[6,7],8,'hello']; console.log(a,b,c,n1,n2,num,str);
数组
map:集合映射(一对一映射)
let arr = [1,2,3];
//let result=arr.map(item=>item*2);
let result = arr.map((item)=>{
return item*2;
});
alert(result);
let score = [19,85,99,25,63];
let result = score.map(item=>item>=60?"及格":"不及格");
console.log(score);
console.log(result);
reduce:汇总
//计算总数
let arr = [12,69,180,2365];
let result = arr.reduce((temp,item,index)=>{
return temp+item;
});
console.log(result);
temp:中间结果,item:数据,index:迭代索引
//计算平均值
let arr = [16,4,18,2];
let result = arr.reduce((temp,item,index)=>{
return index<arr.length-1?temp+item:(temp+item)/arr.length;
});
console.log(result);
filter:过滤器
//取得能被3整除的数
let arr = [16,4,18,2,12,3];
// let result = arr.filter(item=>item%3==0);
let result = arr.filter((item)=>{
//return true的item将被留下
return item%3==0;
});
console.log(result);
forEach:迭代
let arr = [16,4,18,2,12,3];
arr.forEach((item,index)=>{
alert("第"+index+"个数据:"+item);
});
字符串
- 字符串中新增了2个新方法
方法名 | 参数 | 返回值类型 | 功能 |
---|---|---|---|
startsWith | str | boolean | 判断字符串是否已指定字符串开头 |
endsWith | str | boolean | 判断字符串是否已指定字符串结尾 |
let str = "hello world";
alert(str.startsWith("hello"));
alert(str.endsWith("world"));
- 字符串魔板:反单引号``定义字符串模板,美元符${变量}将变量塞进模板,可以隔行使用。
let a = 'world';
let str = `hello ${a} !!!`;
alert(str);
ES6的面向对象
javascript老版面向对象:
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('admin','123456');
u1.showName();
u1.showPass();
ES6新版面向对象:
- 增加了class关键字,构造器和类分开了
- class里直接加方法
class User{
constructor(name,pass){
this.name = name;
this.pass = pass;
}
showName(){
alert(this.name);
}
showPass(){
alert(this.pass);
}
}
//继承
class VipUser extends User{
constructor(name,pass,level){
super(name,pass);//执行父类构造函数
this.level = level;
}
showLevel(){
alert(this.level);
}
}
let u1 = new VipUser('admin','123456','up');
u1.showName();
u1.showPass();
u1.showLevel();
面向对象应用–React–两个重要特性:组件化(class)、JSX(JSXbablebrowser.js)
JSON
方法名 | 参数 | 返回值类型 | 功能 |
---|---|---|---|
JSON.stringify | JSON对象 | 字符串 | 将JSON对象变为字符串 |
JSON.parse | 字符串 | JSON对象 | 将字符串解析为JSON对象 |
JSON对象:
let json = {a:12,b:5};
let str = "json:"+JSON.stringify(json);
console.log(str);
JSON解析(JSON的标准写法):
- 只能用双引号
- 所有名字必须用双引号包裹起来
let str = "{\"a\":12,\"b\":5}";
let json = JSON.parse(str);
console.log(json);
JSON简写
- key与value的名字一样时可以简写
let a = 5; let b = 12; //正常书写 let jsonA = {a:a,b:b}; console.log(jsonA); //简写 let jsonB = {a,b}; console.log(jsonB);
- 方法可以简写
let a = 5; let b = 12; //正常书写 let jsonA = {a:a,show:()=>{ console.log(b); }}; //简写 let jsonB = {a:a,show(){ console.log(b); }}; jsonA.show(); jsonB.show();
Promise(消除异步操作-用同步方式书写异步代码)
异步操作:操作之间没有关系,同时进行多个操作,代码更复杂
同步操作:同时只能做一件事,代码简单
Promise对象有以下两个特点:
- 对象的状态不受外界影响。Promise对象代表异步操作,有三种状态:Pending(进行中)、Resolved(已完成)、Rejected(已失败),只有异步操作的结果可以决定当前处于那种状态
- 一旦状态改变,就不会再变,任何时候都可以得到这个结果。
let promise = new Promise((resolve,reject)=>{
$.ajax({
url:'data/data.txt',
dataType:'json',
success(arr){
resolve(arr);
},
error(err){
reject(err);
}
})
});
promise.then((arr)=>{
console.log(arr);
},(err)=>{
console.log(err);
});
两个Promise异步执行:
let promiseA = new Promise((resolve,reject)=>{
$.ajax({
url:'data/data.txt',
dataType:'json',
success(arr){
resolve(arr);
},
error(err){
reject(err);
}
})
});
let promiseB = new Promise((resolve,reject)=>{
$.ajax({
url:'data/json.txt',
dataType:'json',
success(arr){
resolve(arr);
},
error(err){
reject(err);
}
})
});
Promise.all([promiseA,promiseB]).then((arr)=>{
let [resA,resB] = arr;//解构赋值
//全部成功
console.log(arr);
},(err)=>{
//只要有一个失败则执行此函数
console.log(err);
});
封装Promise生成方法:
let createPromise = (url)=>{
return new Promise((resolve,reject)=>{
$.ajax({
url,
dataType:'json',
success(arr){
resolve(arr);
},
error(err){
reject(err);
}
})
});
}
Promise.all([
createPromise("data/data.txt"),
createPromise("data/json.txt")
]).then((arr)=>{
let [resA,resB] = arr;//解构赋值
//全部成功
console.log(arr);
},(err)=>{
//只要有一个失败则执行此函数
console.log(err);
});
高版本jquery自动封装了Promise:
Promise.all([
$.ajax(),$.ajax()
]).then(arr=>{
let [resA,resB] = arr;//解构赋值
//全部成功
console.log(arr);
},err=>{
//只要有一个失败则执行此函数
console.log(err);
});
Promise.race的用法与all相同,但是只要数组中的一个Promise成功,则表示成功,全部失败才会失败。
Generator-生成器
普通函数—>程序开始顺序执行到结束
generator函数—>函数可以暂停
function *show(){
alert('a');
yield;//暂停
alert('b');
}
let genObj = show();
genObj.next();//执行到yield之前
genObj.next();
yield:暂停执行,既可以传参,又可以返回
//yield传参
function *show(){
alert('a');
let a = yield;//接受next()传来的参数
alert(a);
}
let genObj = show();
genObj.next(12);//执行到yield之前,第一个next()无法传参
genObj.next(5);//执行yield之后的代码
//yield返回中间结果
function *show(){
alert('a');
let a = yield 12;//接受next()传来的参数
alert(a);
}
let genObj = show();
let res1 = genObj.next();//执行到yield之前
console.log(res1);
genObj.next(5);//执行yield之后的代码