常用的ES6新增
1、let和const
- let和var的作用差不多,不过let的作用域是块级作用域
- const定义的是常量,不能修改,以及重复定义,否则直接报错
2、变量解构
- 之前的变量赋值方法
let a = 1; let b = 2; let c = 3;
- ES6赋值可以允许写成如下
let [a, b, c] = [1, 2, 3];
- ES6赋值写法
let [foo, [[bar], baz]] = [1, [[2], 3]]; foo // 1 bar // 2 baz // 3 let [ , , third] = ["foo", "bar", "baz"]; third // "baz" let [x, , y] = [1, 2, 3]; x // 1 y // 3 let [head, ...tail] = [1, 2, 3, 4]; head // 1 tail // [2, 3, 4] let [x, y, ...z] = ['a']; x // "a" y // undefined z // []
3、字符串模板语法
-
字符串模板
var a = 'hello' var b = `${a} world!` console.log(b);
-
运行结果
4、对象的新增方法
-
Object.is()
判断对象是否相等,运行结果与===相同Object.is('obj','obj')//true Object.is({},{})//false +0===-0 //true NaN === NaN //false Object.is(+0,-0) Object.is(NaN,NaN )
5、Symbol
-
Symbol,表示独一无二的值。
-
Symbol函数前不能使用new命令,否则会报错。
let s1 = Symbol('foo'); let s2 = Symbol('bar'); console.log(s1); // Symbol(foo) console.log(s2); // Symbol(bar) console.log(s1.toString()); // "Symbol(foo)" console.log(s2.toString()); // "Symbol(bar)"
// 没有参数的情况 let s1 = Symbol(); let s2 = Symbol(); console.log(s1 === s2); // false
// 有参数的情况 let s1 = Symbol('foo'); let s2 = Symbol('foo'); console.log(s1 === s2); // false
6、Set和Map
- Set
-
Set本身是一个构造函数,用来生成 Set 数据结构。
-
Set的数据唯一,所以可以用于数组去重
-
size方法可以获取数组的长度
-
Set.prototype.add(value):添加某个值,返回 Set 结构本身。
-
Set.prototype.delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
-
Set.prototype.has(value):返回一个布尔值,表示该值是否为Set的成员。
-
Set.prototype.clear():清除所有成员,没有返回值。
const set = new Set([1, 2, 2, 3, 4, 4]); console.log([...set]); console.log(set.size); // 4
-
Set也可以用于字符串去重
console.log([...new Set('ababbc')].join('')); // abc
-
- Map
-
类似于对象,也是键值对的集合。
-
“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。
-
如果需要“键值对”的数据结构,Map 比 Object 更合适。
const m = new Map(); const o = {p: 'Hello World'}; m.set(o, 'content') m.get(o) // "content"
-
如果同时设置两个相同的值,那么后面的值会覆盖前面的值
const map = new Map(); map.set(1, 'aaa').set(1, 'bbb'); console.log(map.get(1)); // "bbb"
-
如果读取一个未知的键,则返回undefined。
-
实例的属性和操作方法
- size 属性:返回 Map 结构的成员总数。
- Map.prototype.set(key, value):set方法设置键名key对应的键值为value,然后返回整个 Map 结构。如果key已经有值,则键值会被更新,否则就新生成该键。
- Map.prototype.get(key):get方法读取key对应的键值,如果找不到key,返回undefined。
- Map.prototype.has(key):has方法返回一个布尔值,表示某个键是否在当前 Map 对象之中。
- Map.prototype.delete(key):delete方法删除某个键,返回true。如果删除失败,返回false。
- Map.prototype.clear():clear方法清除所有成员,没有返回值。
-
7、Promise对象
-
Promise的三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)
-
作用:解决异步回调问题
new Promise((resolve, reject) => { // resolve:成功回调 // reject:失败回调 })
-
基本使用
let a = 10 let pro = new Promise(function (resolve, reject) { if (a == 10) { resolve('成功') } else { reject('失败') } })
-
then方法返回成功以及失败的方法
-
Promise的方法
-
1、Resolve
Promise.resolve('成功'); // 等价于 new Promise(resolve => { resolve('成功') });
-
2、Reject
let p1 = Promise.reject('失败'); p1.catch(res => { console.log(res); });
-
3、all函数
all函数可以将成功或者失败的集合返回
let p1 = Promise.resolve('aaa'); let p2 = Promise.resolve('bbb'); let p3 = Promise.resolve('ccc'); Promise.all([p1, p2, p3]).then(res => { console.log(res); }) let p4 = Promise.reject('aaa'); let p5 = Promise.reject('bbb'); let p6 = Promise.reject('ccc'); Promise.all([p4, p5, p6]).then(res => { let [res1, res2, res3] = res; console.log(res1, res2, res3); })
- async和await
-
1、async函数
函数的返回值为promise对象 -
2、await表达式
- await右侧的表达式一般为promise对象,但也可能是其他值
- 如果表达式是promise对象,await返回的是promise成功的值
- 如果表达式是其他值,直接将此值作为await的返回值
-
注意:
-
await必须写在async函数中,但async函数中可以没有await
-
如果await的promise失败了,会抛出异常,需要通过try…catch捕获处理Await右侧为promise的情况,返回promise的结果
-
如果promise是失败的状态,必须通过try…catch处理
-
async function fun() { let p = new Promise((resolve, reject) => { reject('error') }) try { let res = await p; } catch (e) { console.log(e); } }
-
Promise理解和使用
1、Promise是js中异步编程的新的解决方案
2、从语法上说,promise是一个构造函数,从功能上来说,promise对象用来封装一个异步操作并可以获取成功或失败的结果 -
异步编程
1、fs文件操作
2、数据库操作
3、ajax网络请求
4、定时器(setInterval,setTimeout)
旧解决方案如上,使用全部是回调函数
Promise是异步编程的新的解决方案 -
为什么使用Promise
1、指定回调函数的方式更加灵活
2、支持链式调用,可以解决回调地狱问题
- (1)什么是回调地狱
回调函数嵌套调用,外部回调函数异步执行的结果中包含了又一个回调函数。 - (2)回调地狱的缺点
- 不便与阅读
- 不便于异步处理(如果某一个异步请求又错误,不便于处理)
- (1)什么是回调地狱
-
-
-
在js文件中使用Promise封装ajax
function sendAjax(url){ return new Promise((resolve,reject)=>{ $.ajax({ url:url, type:'get', success:function(res){ console.log(res); }, error:function(err){ console.log(err); } }) }) } sendAjax('http://....').then((value)=>{ console.log(value); },(reason)=>{ console.log(reason); })
8、for…of
var arr = ['red', 'green', 'blue'];
for (let i of arr) {
console.log(i); // red green blue
}
9、Class的简单使用
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
10、箭头函数
- 箭头函数主要是为了解决this的指向问题
11、模板语法
-
export命令显式指定输出的代码,再通过import命令输入。
-
在js文件中封装url地址
url = "https://meituan.thexxdd.cn/api/" const urls = class { constructor(args) { } static m() { getbanner = `${url}getbanner` return getbanner } } export default urls;
-
es6部分思维导图