前端开发的ES6新特性（学生党必看）
一：ES6新特性-let&const
1.常量const
const常量（声明之后不允许改变，一旦声明必须初始化， 否则报错）
2.let变量
let声明的变量有严格的作用域
var声明的变量往往会越域
var可以声明多次,let只可以声明一次
{
var a =1;
let b =2;
}
console.log(a);
console.log(b);
test.html:18
// Uncaught ReferenceError: b is not defined
// at test.html:18:22
二：ES6新特性-解构&字符串
1.数组解构
<script type="text/javascript">
let arr=[1,2,3];
// let d = arr[0]
// let b = arr[1]
// let c = arr[2]
let [d,b,c] = arr;
console.log(d,b,c);
</script>
2.对象解构
<script>
let person = {
name: "jack",
age: 21,
language: ['java','js','css'],
}
let {name,age,language} = person
console.log(name,age,language)
</script>
3.字符串扩展
<script>
let str = "hello.vue";
console.log(str.startsWith("hello")) //true
console.log(str.endsWith(".vue")) //true
console.log(str.includes("e")) //true
console.log(str.includes("hello")) // true
</script>
4.字符串模板
<script>
let ss = ``;
console.log(ss);
</script>
<script>
let person = {
name: 'jack',
age: 21,
language: ['java','js','css'],
}
let {name,age,language} = person
console.log(name,age,language)
// 字符串插入变量和表达式。变量名写在${},${}中可以放js表达式
function fun(){
return "这是一个函数";
}
let info = `我是${name},今年${age+10},我想说${fun()}`;
console.log(info);
</script>
三：ES6新特性-函数优化
<script>
// 给参数写上默认值
function add2(a,b = 1){
return a+b;
}
console.log(add2(20))
// 21
// 输入可变长度参数
function fun1(...values){
console.log(values.length)
}
fun1(5) // 1
fun1(5,6,4) // 3
// 简单的箭头函数
var sum=(a,b) => a + b;
console.log(sum(11,11))
const person = {
name: "jack",
age: 21,
language: ['java','js','css'],
}
function hello(person){
console.log(person.name)
}
let hellos=(obj)=> console.log(obj.name)
hellos(person) //jack
</script>
四：ES6新特性-对象优化
1.对象的内置函数和对象合并
// 对象的内置函数
<script>
const person = {
name: "jack",
age: 21,
language: ['java','js','css']
}
console.log(Object.keys(person)); //(3) ['name', 'age', 'language']
console.log(Object.values(person)); // (3) ['jack', 21, Array(3)]
console.log(Object.entries(person)) // (3) [Array(2), Array(2), Array(2)]
// 对象合并
const target = {a: 1};
const source1 = {b:2};
const source2 = {c:3}
Object.assign(target,source1,source2);
console.log(target)
</script>
2.声明对象简写和声明对象书写方式
<script>
const age = 23;
const name=""
const person1 = {age:age,name:name};
const person2 = {age,name}
console.log(person2) // 效果和person1一样
</script>
<script>
let person = {
name: "xushu",
eat: function(food){
console.log("我吃了"+food)
},
eat1: food => console.log("我吃了"+food),
eat3(food){
console.log("我吃了"+food)
},
}
person.eat("香蕉");
person.eat1("苹果");
person.eat3("非常");
</script>
3.对象的拷贝和合并
<script>
let p1 ={
name: "zlj",
age: 19
}
let someone = {...p1}
console.log(someone)
let name = {name: "12"}
let age= {age: 19}
console.log(someone)
</script>
五 ：ES6新特性-promise异步编排
<script>
// 1.promise可以封装异步操作
// 2.resolve 操作成功以后解析数据
// 3.reject操作失败来拒绝
let p =new Promise((resolve,reject) =>{
$.ajxt({
url: "/mock/user.json",
success: function(data){
console.log(data)
resolve(data)
},
// 操作失败来拒绝
failure: function(data) {
console.log("查询用户失败："+data)
reject(data)
}
});
});
p.then((obj) =>{
return new promise((resolve,reject) =>{
console.log("接收前面传来的信息:" +obj);
$.ajax({
url: "/mock",
// 操作成功以后解析数据
success: function(data) {
console.log("查询用户可成功"+data)
resolve(data)
},
failure: function(data) {
console.log("查询用户课程失败"+data)
reject(data)
}
})
})
}).then((data) =>{
console.log("上一步的结果"+data)
$.ajax({
url: "/mock",
success: function(data) {
console.log("查询用户课程分数成功"+data)
resolve(data);
},
// 操作失败来拒绝
failure: function(data) {
console.log("查询用户课程分数失败"+data)
reject(data)
}
})
})
</script>
更加简便的方法
<script>
function myAjax(url){
return new Promise(function(resolve, reject) {
$.ajax({
url: url,
success: function(result){
resolve(result);
},
error: function(err) {
reject(err);
}
})
})
}
//验证用户名不存在
myAjax("/local")
.then(result=>{
if(result.data){
alert("用户名不存在")
return myAjax("/local2")
}
else {
alert(result.message)
}
})
// 验证手机号是否存在
.then(result=>{
if(result.data){
alert(result.data)
}
})
.catch(err =>{
alert("服务器异常")
})
</script>