es6使用axios es6sort

转载

新新人类 2024-06-04 21:02:39

文章标签 es6使用axios es6 json ajax User 文章分类 iOS 移动开发

es6
兼容性：
IE10+ 、chrome、FireFox、移动端、NodeJS

解决办法（转移、变换）
1、在线转换
2、提前编译

ES6 改变
1、变量

var

1、可以重复声明
2、无法限制修改
3、没有块级作用域  { }

let、coust

1、let 	 不能重复声明 是变量 可以修改   有块级作用域
2、coust 不能重复声明 是常量 不可以修改  有块级作用域

2、箭头函数(参数的扩展)
1.普通函数

function 名字(){
		
	}

2.箭头函数

1.如果只有一个参数, ()可以省

例子：
	sort() 方法用于对数组的元素进行排序。
	let arr = [3,6,1,23,53]
一般写法
	arr.sort(function(n1,n2){
		return n1-n2;
	})
箭头函数
	arr.sort((n1,n2)=>{
		return n1-n2
	})
	alert(arr)

2.如果只有一个return, {}可以省
()=>{

}

例子：
	let show = function (a){
		return a*1
	}
	let show = a => a*1

3.函数的参数 (参数的扩展、数组的展开)

1.收集剩余的参数
	...args 剩余参数 必须放最后  args 自定义
	function show(a,b,...args){
		alert(a);
		alert(b);
		alert(args);
	}
	show(2,4,23,42,45,3)
2.数组展开
	展开后的效果，跟直接把数组的内容写在这一样
	let arr2 = [1,2,4]
	let arr1 = [2,5,8]
	let arr = [...arr2,...arr1]   等价于  let arr = [1,2,4,2,5,8] 
	alert(arr)
		
	例子
	
	function show(...arr){
		fn(...arr)  等价于 fn(3,23)
	}
	function fn(a+b){
		return(a+b)
	}
	show(3,23)

4、默认参数
默认值，传了听你的不传听我的

function fn(a,b=12,c=3){
	console.log(a,b,c)
}
fn(8)        8,12,3
fn(34,4)     34,4,3
fn(34,4,98)	 34,4,98

5、解构赋值
1.左右两边结构必须一样
2.右边必须是个东西
3.声明和赋值不能分开

let [a,b,c] = [1,3,5]
let{a,c,b} = {a:2,c:2,c:4}

粒度一样就行
let [{a,b},[n1,n2],num,str] = [{a:12,b:4},[23,3],5,'iii']
console.log(a,b,n1,n2,num,str)

let [json,[n1,n2],num,str] = [{a:12,b:4},[23,3],5,'iii']
console.log(json,n1,n2,num,str)

let [json,arr,num,str] = [{a:12,b:4},[23,3],5,'iii']
console.log(json,arr,num,str)

3、数组方法
4个新方法
1、map 映射一个对一个

[23,90,98]
[不及格，及格，及格]

let arr = [89,54,33]
let result = arr.map(item=>item>60?'及格'：'不及格')
alert(result)

let arr = [12,4,3]
let result = arr.map(function(item){
	returen item*2
})

或

let result = arr.map(item=>item*2)
alert(result)

2、reduce 汇总一堆出来一个

let arr = [12,4,3]
let result = arr.reduce(function(a,b,c){    a:中间结果 tmp  b:数值 item  c:索引 index
	return(a,b,c)
	return a + b
	if(c != arr.length - 1){
		return a + b
	}else{  //最后一次
		return (a + b) / arr.length
	}
})
alert(result)

3、filter 过滤器保留一部分，不保留一部分

let arr = [12,4,3,32,53,21]
let result = arr.filter(item => {
	if(item%3 == 0){
		return true
	}else{  
		return false
	}
	
	或者
	return item%3 == 0
})
或
let result = arr.filter(item => item%3 == 0)

4、forEach 循环（迭代）一个对一个

let arr = [12,4,3,32,53,21]
let result = arr.forEach((item,index) => item)

4、字符串
1.多了两个新方法
startsWith

let str = 'http://www.baidu.com'
if(str.startWith('http://')){
	alert('普通网址')
}else if(str.startWith('https://')){
	alert('加密网址')
}else{
	alert('其他网址')
}

endsWith

let str = '123.txt'
if(str.endsWith('.txt')){
	alert('txt文件')
}else if(str.endsWith('.pdf')){
	alert('pdf文件')
}else{
	alert('其他网址')
}

2.字符串模板

let str = `sdsdsdsdd`
let a = 12
let m = `ere${a}rer`

5、面向对象
1、多了class 关键字、构造器和类分开了
2、class里面直接加方法
原来的写法：

属性
function User(name,pass){
	this.name = 'qq'
	this.pass = '123'
}
方法
User.prototype.showName = function(){
	alert(this.name)
}
User.prototype.showPass = function(){
	alert(this.pass)
}

es6的写法：

class User {
	构造器
	constructor(name,pass){
		属性
		this.name = name;
		this.pass = pass;
	}
	方法
	showName(){
		alert(this.name);
	}
	showPass(){
		alert(this.pass);
	}
}

继承：super 超类

原来的写法：
	function User(name,pass){
		this.name = 'qq'
		this.pass = '123'
	}
	User.prototype.showName = function(){
		alert(this.name)
	}
	User.prototype.showPass = function(){
		alert(this.pass)
	}
	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)
	}
	var m = new VipUser('df','123',3)
	m.showName()
	m.showPass()
	m.showLevel()
		
es6的写法：  
	class User {
		构造器
		constructor(name,pass){
			属性
			this.name = name;
			this.pass = pass;
		}
		方法
		showName(){
			alert(this.name);
		}
		showPass(){
			alert(this.pass);
		}
	}
	
	class VipUser extends User{   //extends 扩展
		constructor(name,pass,level){
			super(name,pass)
			
			this.level = level
		}
		showLevel(){
			alert(this.level)
		}
	}
	var m1 = new VipUser('df','123',3)
	m1.showName()
	m1.showPass()
	m1.showLevel()

面向对象应用–React
React
1.模块化，组件化—class
2.JSX 是js的扩展版 JSXbabelbrowser.js

<script type="text/babel">
	class Text extends React.Component{
		constructor(...args){
			super(...args)
		}
		render(){
			return <span>345</span>;
		}
	}
		
	window.onload= function(){
		let oDiv = document.getElemetnById('div')
		ReactDOM.render(
			<Text>2323</Text>,
			oDiv
		)
	}
</script>

6、Promise 解决异步操作问题
1.JSON对象
JSON方法：JSON.stringify （）、JSON.parse（）

2.简写
名字跟值一样可以省略

var json = {a:a,b:b,c:23}  
省略 
var json = {a,b,c:23}

如果有方法 :function 省略

var json = {
	a:12,
	show:function(){
		
	}
}
省略
var json = {
	a:12,
	show(){
		
	}
}

Promise --承诺
异步: 操作直接没有关系，同时进行多个操作
同步: 同时只能做一件事

异步: 代码复杂可以ajax 嵌套
同步: 代码简单

Promise 消除异步操作
用同步一样的方式，来书写异步操作

Promise.all 用法：
1.一个ajax

let p = new Promise(function(resolve,reject){
//异步代码   resolve 成功  reject失败
	$.ajax({
		url:'XXXXX',
		dataType:'json'
		success(arr){
			resolve(arr)
		},
		error(err){
			reject(err)
		}
	})
})
p.then(function(arr){
	alert('成功')
},function(err){
	alert('失败')
})

2.多个ajax

let p1 = new Promise(function(resolve,reject){
//异步代码   resolve 成功  reject失败
	$.ajax({
		url:'XXXXX',
		dataType:'json'
		success(arr){
			resolve(arr)
		},
		error(err){
			reject(err)
		}
	})
})
let p2 = new Promise(function(resolve,reject){
	//异步代码   resolve 成功  reject失败
	$.ajax({
		url:'XXXXX',
		dataType:'json'
		success(arr){
			resolve(arr)
		},
		error(err){
			reject(err)
		}
	})
})
Promise.all([
	p1,p2
]).then(function(arr){
	let [res1,res2] = arr
	alert('成功')
},function(){
	alert('失败')
})

3.多个ajax 简洁版

function createPromise(url){
return new Promise(function(resolve,reject){
	//异步代码   resolve 成功  reject失败
	$.ajax({
		url,
		dataType:'json'
		success(arr){
			resolve(arr)
		},
		error(err){
			reject(err)
		}
	})
})
}
Promise.all([
	createPromise('data/arr.tex')
	createPromise('data/json.tex')
]).then(function(arr){
	let [res1,res2] = arr
	alert('成功')
},function(){
	alert('失败')
})

4.多个ajax 最终版常用

ajax 已经封装了Promise对象 
Promise.all([
	$.ajax({url:'data/arr.txt',dataType:'json'})
	$.ajax({url:'data/json.txt',dataType:'json'})
]).then(function(arr){
	let [res1,res2] = arr
	alert('成功')
},function(){
	alert('失败')
})

Promise.rece 用法：谁先来用哪个

Promise.rece([
	$.ajax({url:'data/arr.txt',dataType:'json'})
		$.ajax({url:'data/json.txt',dataType:'json'})
	]).then(function(arr){
		let [res1,res2] = arr
		alert('成功')
	},function(){
		alert('失败')
	})

总结：	
	Promise.all([
		$.ajax({url:'data/arr.txt',dataType:'json'})
		$.ajax({url:'data/json.txt',dataType:'json'})
	]).then(results=>{
		let [res1,res2] = arr
		alert('成功')
	},err=>{
		alert('失败')
	})

7、generator 生成器
generat 生成解决异步操作问题
普通函数---------一路到底
generator函数----中间可以停顿

function *show(){  
	//  * 的写法 
	//  1. function *show  
	//	2.function * show  
	//	3.function* show
	alert('a')
	yield;   //放弃
	alert('b')
}

function show_1(){
	alert('a')
}
function show_2(){
	alert('a')
}
let genObj = show();
console.log(genObj)
genObj.next()   走show_1
genObj.next()	走show_2

generator–yield 可以传参也可以返回

function *show(num){
	alert('a')
	
	let a = yield;   
	
	alert('b')
	alert('b')
	return 
}
let genObj = show(8);
genObj.next()   走是yield之前  第一个next 传参没有用 需要在函数里面传参
genObj.next(9)	走let a 之后

runner 使用

runner(function *(){   //runner.js  引入
	let data1 = yield $.ajax({url:'...data1',dataType:'json'})
	let data2 = yield $.ajax({url:'...data2',dataType:'json'})
	let data3 = yield $.ajax({url:'...data3',dataType:'json'})
	
	console.log(data1,data2,data3)
})
带逻辑  回调、 Promise复杂 推荐用 runner
runner(function *(){   //runner.js  引入
	let data1 = yield $.ajax({url:'...data1',dataType:'json'})
	
	if(data1.type == 'vip'){
		let item = yield $.ajax({url:'...item',dataType:'json'})
	}else{
		let item1 = yield $.ajax({url:'...item1',dataType:'json'})
	}
	
	//...
})

generator–KOA 使用
noed.js

cnpm i koy  下载
cnpm i koy-mysql  下载
const koa = require('koa')  引入
const mysql = require('koa-mysql')  引入

mysql.createPool ({
	host:'localhost',
	user:'root',
	password:'12345',
	database:'xxx'   库名
})

let serve = new koa();   

serve.use(function *(){
	let data = yield db.query(`SELECT * FROM user_table`)
	this.body = data  输出东西
})
serve.listen(8080)   监听

异步操作：
1、回调  ajax 嵌套
2、Promise
3、generator  
4、

es7 & es8 预览
1、数组 includes
数组是否包含某个东西

2、数组 keys/values/entries

keys   		所有的key			0，1，2，3
values		所有的value			12，31，42，53
entries		多有的key-value对	{key:0,value:3},{key:1,value:32},...
entry 实体
for(let i in arr){
	alert(i)
}
for(let i of arr){
	alert(i)
}

let arr = [2,334,124,3]
for(let [key,value] of arr.entries()){
	alert(`${key}=${value}`)
}
			数组			Json
for...of  值(value)		X (出错)
for...in  下标(key)		key

幂

之前：Math.pow(3,8)

现在：alert(3**8)

padStart / padEnd

es6 多了
	endsWith / startsWith
es7 多了
	padStart / padEnd
	console.log('abc'.padStart(3))   从开始位置取3位，不足补零；
	console.log('abc'.padEnd(3))   用于尾部补全，不足补零；
	
	console.log('abc'.padStart(3,'000'))

语法容忍度 es6支持
数组： [1,34,23] ---- [21,4,3,12,]
函数参数： function(23,12,){

}
async await 跟generator yield 基本差不多
generator yield 标志加 * 需要runner辅助不可以用箭头函数

function *show(){
	alert(213)
	
	yield;
	
	alert(98)
}

runner(function *(){   //runner.js  引入
	let data1 = yield $.ajax({url:'...data1',dataType:'json'})
	let data2 = yield $.ajax({url:'...data2',dataType:'json'})
	let data3 = yield $.ajax({url:'...data3',dataType:'json'})
	
	console.log(data1,data2,data3)
})

async await 标志加 async 不需要runner 可以用箭头函数

async function show(){
	alert(213)
	
	await;
	
	alert(98)
}

async function show(){  
	let data1 = await $.ajax({url:'...data1',dataType:'json'})
	let data2 = await $.ajax({url:'...data2',dataType:'json'})
	let data3 = await $.ajax({url:'...data3',dataType:'json'})
	
	console.log(data1,data2,data3)
}

let reader = async() =>{
	let data1 = await $.ajax({url:'...data1',dataType:'json'})
	let data2 = await $.ajax({url:'...data2',dataType:'json'})
	let data3 = await $.ajax({url:'...data3',dataType:'json'})
	
	console.log(data1,data2,data3)
}

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。