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

刺骨的言语ヽ痛彻心扉 2022-12-20 05:38 122阅读 0赞

## 什么是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()方法**  
如果要有了解数组方法的话可以浏览这波博客  
[数组方法][Link 1]  
**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中的定义就是快速帮助我们取到想要的值  
解构赋值 分为 对象解构赋值跟数组解构赋值  
如果有想要了解解构赋值的方法跟理论可以了解这个  
[解构赋值][Link 2]

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的语法肯定是有很多的肯定不止我简简单单介绍这一点  
如果有想要学习的同学  
可以去菜鸟教程里面观摩  
[菜鸟教程][Link 3]

[Promises]: https://blog.csdn.net/Rick_and_mode/article/details/108644394
[Link 1]: https://blog.csdn.net/Rick_and_mode/article/details/108415284
[Link 2]: https://blog.csdn.net/Rick_and_mode/article/details/108615776
[Link 3]: https://www.runoob.com/w3cnote/es6-tutorial.html