ES6新增特性
1.let关键字
(1)基本用法:let关键字用来声明变量,它的用法类似于var,都是用来声明变量。
(2)块级作用域:let声明的变量,只在let关键字所在的代码块内有效。
(3)不存在变量提升:let声明的变量一定要在声明后使用,否则会报错
<script>
export default {
data() {
return {};
},
mounted() {
mounted() {
//基本用法:let关键字用来声明变量,它的用法类似于var,都是用来声明变量。
{
var a = 10;
let b = 10;
}
console.log(a); //10
console.log(b); //error: b is not defined
//块级作用域:let声明的变量,只在let关键字所在的代码块内有效。
var c = 10;
{
var c = 20;
}
console.log(c); //20
var d = 10;
{
let d = 20;
}
console.log(d); //10
//不存在变量提升:let声明的变量一定要在声明后使用,否则会报错
console.log(a); //undefined
console.log(b); //error: b is not defined
var a = 10;
let b = 10;
},
};
</script>
2. const关键字
const :声明常量,在程序运行中不能直接被修改,不然会报错。
const :声明的时候一定要赋值,不然会报错。
const :作用域和let一样。
const :如果声明了一个常量为json对象类型,那么这个常量里面的对象属性可以更改和添加
3. 箭头函数
mounted() {
/*ES5中定义一个函数变量*/
var fn1 = function (height) {
console.log(height);
};
fn1(100); //100
/*ES6中用箭头函数定义函数变量*/
var fn2 = (height) => {
console.log(height);
};
fn2(100); //100
},
4.变量的结构赋值
/*ES5初始化变量*/
var a = 10;
var b = 20;
/*ES6解构赋初值*/
var [a, b] = [10, 20];
/*ES5获取对象的key值*/
var obj1 = {
a1: 'jack',
b1: 123
}
var a1 = obj1.a1;
var b1 = obj1.b1;
console.log(a1, b1);
/*ES6通过解构拆包获取对象的key值*/
var obj2 = {
a2: 'jack',
b2: 123
}
var {a2,b2} = obj2;
console.log(a2, b2);
/*字符串的解构赋值*/
var [a, b, c, d, e] = "hello";
console.log(a, b, c, d, e); //h e l l o
/*数组的解构赋值*/
var [a, b, c] = ["hello", "world"];
console.log(a, b, c); //hello world undefined
6. …拓展操作符
mounted() {
//合并数组
var arry = [1, 2];
var arry1 = [...arry, 3]; //ES6...操作符拼接数组
//合成对象
var obj = { a: 1, b: 2 };
var obj1 = { ...obj, c: 3 };
/*拆分字符串*/
console.log([..."12345"]); // [ "1", "2", "3", "4", "5" ]
/*合并成数组*/
function mergeArr(...Arrys) {
console.log(arguments);
}
mergeArr("a", "b", "c"); //['a', 'b', 'c'];
/*拆分数组*/
console.log(...["a", "b", "c"]); //a b c
function fn1() {
var arry = Array.prototype.sort.call(arguments, function (a, b) {
return a - b;
});
console.log(arry);
}
fn1(3, 1, 5, 3, 8, 6); //1 3 3 5 6 8
/*...操作符将类数组转换为数组*/
function fn2() {
var arry = [...arguments].sort(function (a, b) {
return a - b;
});
console.log(arry);
}
fn2(3, 1, 5, 3, 8, 6); //1 3 3 5 6 8
},
7. promise对象
(1)定义:一种异步函数的解决方案,避免了异步函数层层嵌套,将原来异步函数转换 为便于理解和阅读的链式步骤关系
(2)三种状态:Pending(进行中)、Resoloved(已完成)、Rejected(已失败)。
(3)两种结果:Pending->Resoloved(成功); Pending->Rejected(失败)。
(4)then方法:第一个参数是成功时调用的函数,第二个参数是失败时调用的函数。
(5)通常形式。
var promise = new Promise((reslove, reject) => {
if(条件成立) {
/*Pending->Resoloved(成功*/
reslove();
}else {
/*Pending->Rejected(失败)*/
reject();
}
})
/*运用:隔1s打印‘hello’,隔2s打印‘world’*/
/*Promise实现方法*/
var arr = (str) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(str);
}, 1000)
})
}
arr('hello').then((data) => {
console.log(data);
return arr('world');
}, () => {
console.log('err');
}).then((data) => {
console.log(data);
})
以上为常用ES6用法
- 提供了定义类的语法糖(class)
- 新增了一种基本数据类型(Symbol)
- 函数参数允许设置默认值,引入了 rest 参数,新增了箭头函数
- 数组新增了一些 API,如 isArray / from / of 方法;数组实例新增了entries(),keys() 和 values() 等方法
- ES6 新增了模块化(import/export)
- ES6 新增了 Set 和 Map 数据结构
- ES6 原生提供 Proxy 构造函数,用来生成 Proxy 实例
- ES6 新增了生成器(Generator)和遍历器(Iterator)