Vue.js------扩展学习-- Es6 从入门到跑路

最新推荐文章于 2024-05-01 21:02:39 发布

原创最新推荐文章于 2024-05-01 21:02:39 发布 · 242 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了ES6的新特性，包括let和const声明变量、for...of循环、字符串模板、Promises处理异步操作、Generator函数、新字符串与数组方法等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是Es6

Es6是JavaScript的第六个版本
是对比Es5升级后的版本完善了 Es5的不足
新增很多特性也新增很多属性
就比如下面这些

语言语法 – 语法解析规则、关键字、语句、声明、运算符等。
类型 number，string，null，undefined，bool（5种基本数据类型）
原型和继承
内建对象和函数的标准库 –
JSON、Math、数组方法、对象自省方法等

我们先看看这些新增的属性
var let / const

除了 var 以外，我们现在多了两个新的标识符来声明变量的存储，它们就是 let 和 const。不同于 var ，let 和 const
语句不会造成声明提升。

//使用var定义
if(1){
     var i=2;
 }
    alert(i)  //2,因为没有块级作用域
 //使用let定义
 if(1){
     let i=2;  
 }
    alert(i)   //报错，原因是i只在条件语句中声明过，全局中没有该变量

注意：let 和 const 是块级作用域语句。所以在语句块以外引用这些变量时，会造成引用错误

for of遍历

我们都知道for in 循环用于遍历数组，类数组或对象，ES6中新引入的for of循环功能相似，不同的是每次循环它提供的不是序号而是值。

var Wxy = [ "a", "b", "c" ];
 
for (v of Wxy) {
    console.log(v);   //输出 a,b,c

字符串模板
字符串模板相对简单易懂些。ES6中允许使用反引号 ` 来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${}。

//产生一个随机数
var num=Math.random();
//将这个数字输出到console
console.log(`your num is ${num}`);

Promises
Promises是处理异步操作的一种模式，之前在很多三方库中有实现，比如jQuery的deferred 对象。当你发起一个异步请求，并绑定了.when(), .done()等事件处理程序时，其实就是在应用promise模式。
总结后理解 Promises
实际用法

//创建promise
var promise = new Promise(function(resolve, reject) {
    // 进行一些异步或耗时操作
    if ( /*如果成功 */ ) {
        resolve("Stuff worked!");
    } else {
        reject(Error("It broke"));
    }
});
//绑定处理程序
promise.then(function(result) {
	//promise成功的话会执行这里
    console.log(result); // "Stuff worked!"
}, function(err) {
	//promise失败会执行这里
    console.log(err); // Error: "It broke"
});

Generator函数
执行Generator函数会返回一个遍历器对象，每一次Generator函数里面的yield都相当一次遍历器对象的next()方法，并且可以通过next(value)方法传入自定义的value，来改变Generator函数的行为。

function * test(){
	let n = 0;
	n++;
	console.log(n);
	yield n;//产出
	n++;
	console.log(n);
	yield n;//产出
	return n;
}		
let test = test();
test.next();
text.next();

当然Es6
增加了一些字符串与数组的方法，比如：模版字符串，includes方法，startsWith方法,endsWith方法，还是其他等等，数组方法有map方法，filter方法，foreach方法，find方法，findindex()方法
如果要有了解数组方法的话可以浏览这波博客
数组方法
includes方法
includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

startsWith方法
返回布尔值，表示参数字符串是否在查找字符串的头部

let s = 'Hello world!';
 
s.startsWith('Hello') // true

endsWith方法
返回布尔值，表示参数字符串是否在查找字符串的尾部

let s = 'Hello world!';
 
s.startsWith('Hello') // true
s.endsWith('!') // true

拓展运算符
扩展运算符主要是应用于快速赋值跟数组

// 拓展运算符
       let str = 'asdfghjkl'
       // es5方法
       let arr = str.split('')
       // es6方法
       let arr1 = [...str]
       console.log(arr==arr1)//true

解构赋值
解构赋值在Es6中的定义就是快速帮助我们取到想要的值
解构赋值分为对象解构赋值跟数组解构赋值
如果有想要了解解构赋值的方法跟理论可以了解这个
解构赋值

let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3

函数默认值
es5中函数有用到形参，但是调用时没有传实参就会报错。而es6给函数设置默认值后，不需要传参也会自动补充一个默认值

function fun(name='Wxy')=>{
console.log(name)
}
fun()//控制台输出Wxy

当然Es6的语法肯定是有很多的肯定不止我简简单单介绍这一点
如果有想要学习的同学
可以去菜鸟教程里面观摩
菜鸟教程