ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。也就是说,ES6就是ES2015。虽然目前并不是所有浏览器都能兼容ES6全部特性,但越来越多的程序员在实际项目当中已经开始使用ES6了。今天就来总结一下在工作中es6常用的属性方法
1、let
ES6新增了let命令,用来生命变量。它的用法类似于var,但是所声明的变量,只在let
命令所在的代码块内有效。
for (let i = 0; i < 10; i++) { } console.log(i) //ReferenceError: i is not defined<br><br>for(var i=0;i<10;i++){<br><br>}<br>console.log(i) //10<br>
上面代码中,计数器i
只在for
循环体内有效,在循环体外引用就会报错。let具有块级作用域的。var不存在块级作用域问题,具有全局变量提示的问题存在
2、const
const a = 10; a = 20; console.log(a) //TypeError: Assignment to constant variable. 上面代码表明改变常量的值会报错。
const
声明的变量不得改变值,这意味着,const
一旦声明变量,就必须立即初始化,不能留到以后赋值。
const a;
console.log(a)
上面代码表示,对于const
来说,只声明不赋值,就会报错。
let与const
1.都不能重复声明
2.都存在块级作用域问题
3.只在声明所在的块级作用域内有效。
3、模板字符串(反引号 ``)
模板字符串就是一种字符串的新的表现形式
(1)基本用法
let s1 = ` hello `
let s2 = ' hello '
(2) 字符串换行
var box =`<div>
<p>
<span>123</span>
</p>
<p>${a1}</p>
</div>`;
(3)模板中传变量 ${变量}
let obj = { name: 'jack', age: 20 }; console.log(`名称:${obj.name},年龄:${obj.age}`); //名称:jack,年龄:20
4、for循环遍历
let str = "hello";
//1.for遍历 for (let i = 0; i < str.length; i++) { console.log(i, str[i]); //i 索引 数值类型 } //2.数组->for->for in let arr = [1, 2, 3]; for (let i in arr) { console.log(i, arr[i]); //i 索引 字符串类型 } //3.for... of for(let i of str){ console.log(i); //数据 }
5、箭头函数
基本用法:
//匿名函数 div.onclick=function(){ console.log("你好") } //箭头函数 div.onclick=()=>{ console.log("你好") }
有一个参数的箭头函数
var fn=(a)=>{ console.log("abc"); } //等价于: var fn=a=>{ console.log("abc"); }
有2个及更多参数的箭头函数
var f=(a,b,c)=>{ console.log("abc") }
6、Promise
Promise是异步编程一种解决方案(回调地狱)
在没有promise都是这样写的回调,一层一层的写,$.get("/getUser",function(res){ $.get("/getUserDetail",function(){ $.get("/getCart",function(){ $.get("/getBooks",function(){ //... }) }) }) })
promise的基本用法
new Promise((resolve,reject) => { setTimeout(() => { resolve() },1000) }).then(() => { console.log("hellow world"); })
promise实现多层回调
new Promise((resolve,reject)=>{ $.get("/getUser",res=>{ resolve(res) }) }).then(res=>{ //用户基本信息 return new Promise(resolve=>{ $.get("/getUserDetail",res=>{ resolve(res) }) }) }).then(res=>{ //用户详情 return new Promise(resolve=>{ $.get("/getCart",res=>{ resolve(res) }) }) }).then(res=>{ //购物车信息 })
promise实现错误处理
new Promise((resolve,reject)=>{ $.ajax({ url:"/getUser", type:"GET", success:res=>{ resolve(res); }, error:res=>{ reject(res) } }) }).then(resSuccess=>{ //成功的返回值 }.resError=>{ //失败的返回值 })
待续。。。