JS中使用ES6语法简化开发

结构表达式

ES6结构表达式

// 结构表达式：
let arr = [1,2,3];
// 将数组中的1,2,3赋值给a,b,c
const [a,b,c] = arr;
console.log(a,b,c);

let person = {name:"zs",age:23};
// 将对象中的值赋值给name和age
let {name,age} = person;
console.log(name,age);

// 将对象中的值赋值给变量属性
let {name:username,age:num} = person;
console.log(username,num);

给函数传参

给参数赋默认值，当b为空时给b添加默认值

// 原本写法：给参数赋默认值，当b为空时给b添加默认值
function getAddNum(a,b){
	b = b || 1;
	return a + b;
}
// ES6写法：当b为空时给b添加默认值
function getAddNumEs6(a,b=1){
	b = b || 1;
	return a + b;
}

不定参数

不定参数，可以给函数传入多个参数

// 不定参数，可以给函数传入多个参数
function fun(...values){
	console.log(values);
	console.log(values.length);
}

fun(1,"a",3);

箭头函数

箭头函数和结构表达式

// 箭头函数和结构表达式
let hello = ({name})=>console.log("hello,"+name);
// 调用该函数
hello(person);

声明对象优化

Object.keys(person)： 获取对象中的所有属性
Object.values(person)：获取对象中的所有属性值
Object.entries(person)：获取对象中的所有属性和属性值并生成数组返回
Object.assign(target,source1))：合并target和source1对象并返回target对象

• 对象的深拷贝
• 对象的合并

// 对象优化
let person = {name:"张三",age:23,sex:"男"};
console.log("获取对象中的所有属性：",Object.keys(person));
console.log("获取对象中的所有属性值：",Object.values(person));
console.log("获取对象中的所有属性和属性值并生成数组返回：",Object.entries(person));

// 将多个对象合并成一个对象
let target = {a:1},source1={b:2},source2={c:3};
// 将对象中的值合并成一个对象中
console.log("将对象中的值合并到target对象中",Object.assign(target,source1,source2));

// 对象声明的简化
let name = "张三",age=23;
// ES6中声明对象，表明属性时name(age)值时name(age)的值
let p = {name,age};
console.log(p);

// 对象的深拷贝
let pp = {name:"张三",age:23};
let someone = {...pp};
console.log(someone);

// 合并对象
let name1 = {name:"张三"},age1 = {age:23};
let ps = {...name1,...age1};
console.log(ps);

map方法

map：接收一个函数，使用此函数将原数组中的元素处理后返回新的数组

// map()方法和reduce(callback)方法
let array = ['1','-3','10','-1','3'];
// map：接收一个函数，使用此函数将原数组中的元素处理后返回新的数组
array = array.map(item=>item*2);
//array = array.map((item)=>item*2);
console.log(array);

reduce方法

reduce(callback)：为数组中的每个元素执行回调函数，不包括被删除或从未被赋值的元素

// reduce(callback)：为数组中的每个元素执行回调函数，不包括被删除或从未被赋值的元素
/** callback中的参数：
 *		previousVal：上次调用回调的返回值
 *		currentVal：数组中当前被处理的元素
 *		index：当前元素的索引
 *		array：调用reduce的数组
 */
let array = ['1','-3','10','-1','3'];
let result = array.reduce((a,b)=>{
	console.log("上次处理后：",a);
	console.log("当前在处理：",b);
	return a + b;
});
console.log(result);

Promise的使用

Promise可以封装异步操作。resolve：成功返回回调，reject失败返回回调

// Promise可以封装异步操作。resolve：成功返回回调，reject失败返回回调
let promise = new Promise((resolve,reject)=>{
	$.ajax({
		url:"",
		success:function(data){
			resolve(data);
		},
		error:function(error){
			reject(error);
		}
	})
});
// resolve(data)成功时返回的值
promise.then((data)=>{
	console.log(data);
})
.catch((err)=>{ // reject(error)失败时返回的值
	console.log(err);
})