前端开发的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>