ES6语法总结
目录
增强对象字面量
/**
* 增强对象字面量
* 解决问题:缩减代码
*/
//创建对象
//let val = new Object(); let val = { };
//let val = new Array(); let val = [];
function createdBootshop1(inventory) {
return {
inventory: inventory,
inventoryValue: function () {
// 0是total的初始值
return this.inventory.reduce((total, book) => total + book.price, 0)
},
priceForTitle: function (title) {
return this.inventory.find(book => book.title === title)
.price;
}
}
}
//增强对象字面量写法 优化代码
function createdBootshop(inventory) {
return {
inventory,
inventoryValue() {
// 0是total的初始值
return this.inventory.reduce((total, book) => total + book.price, 0)
},
priceForTitle(title) {
return this.inventory.find(book => book.title === title)
.price;
}
}
}
const inventory = [
{ "title": "Vue", "price": 10 },
{ "title": "Angular", "price": 15 }
];
const bookShop = createdBootshop(inventory);
console.log(bookShop);
console.log(bookShop.inventoryValue());
console.log(bookShop.priceForTitle("Angular"));
function saveFile(url, data) {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
try {
xhr.open("POST", url, true);
xhr.setRequestHeader('Content-type', "application/json;charset=utf-8")
xhr.onload = function (res) {
if (this.responseText.length == 2) {
reject("error");
} else {
resolve(this.responseText);
}
}
} catch (err) {
reject(err);
} finally {
xhr.send(JSON.stringify(data));
// xhr.send();
}
})
};
const url = "http://jsonplaceholder.typicode.com/users";
const data = { "color": "blue" };
saveFile(url, data)
.then(data => console.log("resolve : ", data))
.catch(err => console.log("reject : ", err));
function saveAjax(url, data) {
//增强字面量
//url:url
//data:data
$.ajax({
url,
data,
method: "POST",
timeout: 1000,
error: function () {
console.log("err");
},
success: function (res) {
console.log("ajax : ", res);
}
})
};
saveAjax(url, data);
箭头函数
/**
* 箭头函数
* 解决的问题
* 1.缩减代码
* 2.改变this指向
*/
let val;
const double1 = function (number) {
return number * 2;
}
// console.log(double(20));
//箭头函数
const double2 = (number) => {
return number * 2;
}
// console.log("箭头函数", double1(20));
const double3 = (number) => number * 2;
//一个参数可以不写括号
const double4 = number => number * 2;
const double5 = (number => number * 2);
//有两个参数需要用括号括起来
const double6 = (number, number2) => number + number2;
//如果有逻辑 和 返回值 需要给大括号
const double = (number, number2) => {
let num = number + number2;
return num;
}
val = double(20, 10);
console.log(val);
//map一个数组,让数组中的值以双倍的形式展现
const numbers = [1, 2, 3];
const newNumbers1 = numbers.map(function (number) {
return number * 2;
});
const newNumbers2 = numbers.map((number) => number * 2);
const newNumbers = numbers.map(number => number * 2);
console.log(newNumbers);
//改变this指向
/**
* ["Hery隶属于undefined小组", "Elyse隶属于undefined小组"]
*/
const team1 = {
"members": ["Hery", "Elyse"],
"teamName": "es6",
"teamSummary": function () {
//this进入下一个function中会不知道指向
return this.members.map(function (member) {
return `${member}隶属于${teamName}小组`;
})
}
};
const team2 = {
"members": ["Hery", "Elyse"],
"teamName": "es6",
"teamSummary": function () {
//es5解决办法1
let me = this;
return this.members.map(function (member) {
return `${member}隶属于${me.teamName}小组`;
})
}
};
const team3 = {
"members": ["Hery", "Elyse"],
"teamName": "es6",
"teamSummary": function () {
return this.members.map(function (member) {
return `${member}隶属于${this.teamName}小组`;
//es5解决办法2,将this绑定到当前对象
}.bind(this))
}
};
const team = {
"members": ["Hery", "Elyse"],
"teamName": "es6",
"teamSummary": function () {
//ES6 this指向最接近的一个对象
//或this指向当前函数之上的一个对象
return this.members.map((member) => {
return `${member}隶属于${this.teamName}小组`;
//es5解决办法2,将this绑定到当前对象
})
}
};
console.log(team.teamSummary());
展开运算符
/**
* spread operator 展开运算符
* 更快 更便捷的操作数组
*/
let val;
function addNumbers(numbers) {
return numbers.reduce((sum, number) => {
return sum + number;
}, 0);
};
const numbers = [1, 2, 3, 4];
val = addNumbers(numbers);
function addNumbers(a, b, c, d, e) {
let numbers = [a, b, c, d, e];
return numbers.reduce((sum, number) => {
return sum + number;
}, 0);
};
val = addNumbers(1, 2, 3, 4, 5);
//展开运算符 ...
function addNumbers(...numbers) {
return numbers.reduce((sum, number) => {
return sum + number;
}, 0);
};
val = addNumbers(1, 2, 3, 4, 5, 6);
//push
var defaultColors = ["red", "greed"];
var favoriteColors = ["orange", "yellow"];
//concat
val = defaultColors.concat(favoriteColors);
val = [...defaultColors, favoriteColors];
var fallCorols = ["fire red", "fall orange"];
val = [...defaultColors, ...fallCorols, ...favoriteColors];
val = ["black", ...defaultColors, ...fallCorols, ...favoriteColors];
function validateShopList(...items) {
if (items.indexOf('milk') < 0) {
return ["milk", ...items];
}
return items;
}
var shopList = ["banner", "foot"];
//...shopList 等同于 ("banner", "foot")
val = validateShopList(...shopList);
console.log(val);
解构_对象
/**
* 解构
* 更快,更便捷
*/
let val;
var expense = {
"type": "es6",
"amount": 45
};
/**
* var type = expense.type;
* var amount = expense.amount;
*/
//es6
const { type, amount } = expense;
console.log(type, amount);
//es5
var saveFiles = {
"extension": "jpg",
"name": "girl",
"size": 1024
};
function fileSammary(file) {
return `${file.name}.${file.extension}的总大小是${file.size}kb`;
};
//es6
function fileSammary2({ name, extension, size }) {
return `${name}.${extension}的总大小是${size}kb`;
};
val = fileSammary2(saveFiles);
console.log(val);
解构_数组_对象
/**
* 解构数组 对象
*/
const names = ["arery", "kangkang", "mariy"];
//解构
const [a, b, c] = names;
console.log(a, b, c);
//用对象接收返回个数
const { length } = names;
console.log(length);
//返回 arery kangkang
const [f, g] = names;
console.log(f, g);
//结合展开运算符
const [name, ...rest] = names;
//返回 arery kangkang mariy
console.log(name, ...rest);
//返回 arery [ 'kangkang', 'mariy' ]
console.log(name, rest);
var a1, b1;
[a1, b1] = [100, 200];
console.log(a1);
//对象数组
const pepole = [
{ "name": "kangkang", "age": 19 },
{ "name": "mariy", "age": 20 },
{ "name": "maike", "age": 21 },
];
//es5 拿到第一个人年龄
let val;
val = pepole[0].age;
console.log(val);
//es6 解构
//拿到第一个对象
// const [age] = pepole;
const [{ age }] = pepole;
console.log(age);
//使用场景 将数组转化为对象
const points = [
[4, 5],
[11, 13],
[433, 99]
];
//期望的数据格式 {x:4,y:5} es6
let newPoints1 = points.map(pair => {
const x = pair[0];
const y = pair[1];
return { x, y };
});
let newPoints2 = points.map(pair => {
const [x, y] = pair;
return { x, y };
});
let newPoints3 = points.map(([x, y]) => {
return { x: x, y: y };
});
let newPoints = points.map(([x, y]) => {
return { x, y };
});
console.log(newPoints);