Vue.js 3.0 学习笔记（一）ES6语法补充

一、ES6简介

全名：ESMAScript

二、块作用域构造let和const

1. var：通过关键字var声明的变量，无论在哪里声明，都会被当成在当前作用域顶部声明的变量（函数作用域或全局作用域）
2. let：用let限制块级作用域，而let和var定义的变量后定义的会覆盖之前定义的
3. const：const声明的是常量，只能赋值一次，即后续无法修改

//const常量
const PI=3.1415926
PI=3.14  //报错，不能修改//对象常量
const obj={name:"keet”};
obj.name="tom"  //对象的属性可以修改，但是对象的引用不能修改//冻结对象
const obj=Object.freeze({name:"keer"});
obj.name="tomm"  //报错，提示冻结对象不能再重新定义赋值

三、模板字面量

1. Multi-line Strings（多行字符串）

//多行字符串
var roadPoem ="江南好，风景旧曾谙。"
+"日出江花红胜火，"
+"春来江水绿如蓝。"
+"能不忆江南？";//支持多行文本的字符串，在ES6中只需要反引号即可
var roadPoem='江南好，风景旧曾谙
日出江花红似火
春来江水绿如蓝
能不忆江南？

2. 字符串占位符

// ES6之前方式只能使用组合字符串方式
var name = " Your name is " + first + " " + last + ".";
var url = " http://localhost:3000/api/messages/" + id;//在ES6中，占位符是使用语法$ {NAME}的，并将包含的NAME变量或者表达式放在反引号中
var name = `Your name is ${first} ${last}. `;
var url = `http://localhost:3000/api/messages/${id}`;

四、默认参数和rest参数

1. 定义默认参数

//以前的JavaScript原先定义方式
var link = function (height, color, url) {var height = height || 50;var color = color | | " red";var url = url || 'http:// baidu.com';
}//新的JavaScript定义方式
var link = function (height=50, color=" red ", url='http: //baidu. com ')

2. rest参数

//ES5获取函数的实参
function data(){console.log(arguments);
}
data('苹果','香蕉','橘子');//ES6中引入rest参数，用于获取函数的实参，rest就是为解决传入的参数数量不一定引入的
function fn(a,b,...args){console.log(a);console.log(b);console.log(args);
}

五、解构赋值

解构赋值，个人理解就是把需要赋的值按照一定的规则进行分解并赋值给对应的变量

//在Node.js中使用ES5代码：
var data = $ ( 'body ' ) . data () ;	// data 拥有两个属性 house 和 mouse
house = data.house; mouse = data.mouse;
var jsonMiddleware = require('body-parser').jsonMiddleware ;
var body = req.body;	// body 两个属性 username 和 password
username = body.username; password = body.password;//ES6
var { house, mouse) = $('body') .data();
var (jsonMiddleware} = require('body-parser');
var (username, password) = req.body;
//这个同样也适用于数组，是非常好的用法：
var [coll, col2] = $(' . column '), [linelz line2,line3z, line5]=file.split ('n');

六、展开运算符

1. 函数调用中使用展开运算符

//下面的代码把args数组展开成多个参数，并当做实参传递给了a、b、c
function test(a,b,c){ }
var args=[100,200,300];
test(...args);  //类似于解构赋值

2. 数组字面量中使用展开运算符

var arr1=['a','b','c'];
var arr2=['d','e'];
var arr3=[...arr1,'f'];  //['a','b','c','f']
arr1.push(...arr2);		 //['a','b','c','d','e']

3. 用于解构赋值

let [arg1,arg2,...arg3]=[1,2,3,4];  //arg3=[3,4]
//注意解构赋值中展开运算符只能用在最后，不然会报错

4. 类数组对象变成数组

var list=document.getElementsByTagName('div');
var arr=[...list];  //将list类数组对象变成数组

七、增强的对象文本

1. 通过变量进行对象初始化

const 
a=1,b-2,c=3;
obj={abc
};

2. 简化定义对象方法

var lib={sum(a,b){return a+b;}mult(a,b){return a*b;}
};
console.log(lib.sum(100,200));  //300
console.log(lib.mult(100,200)); //20000
//也可以使用箭头函数

3. 动态属性键

const key1='one',obj={[key1]:100,  //obj.one=100two:200,	 //obj.two=200	three:300	 //obj.three=300}

4. 解构对象属性中的变量

const myObject={one:1two:2three:3
};
const {one,two,three}=myObject; //通过解构可以穿件与等效对象属性同名的变量

八、箭头函数

//ES5使用function函数
var logUpperCase = function() {var this = this;this.string = this.string.toUpperCase();return function () {return console.log(_this.string);}
}
logUpperCase.call({ string: ' ES 6 rocks ' })();
//而在ES6中并不需要用_this浪费时间
var logUpperCase = function () {this.string = this.string.toUpperCase();return () => console.log(this.string);
} logUpperCase.call({string: ' ES 6 rocks ' })();

PS：在ES6中，“=>”可以混合和匹配老的函数一起使用。当在一行代码中用了箭头函数后，它就变成了一个表达式，其将暗中返回单个语句的结果。如果结果超过一行，则需要明确使用return。

//ES5
var ids = ['5632953c4e345el45fdf2df8', '563295464e345el45fdf2df9'];
var messages = ids.map(function (value, index, list) {return ' ID of ' + index + ' element is ' + value + ' ';
})；//ES6
var ids = ['5632953c4e345el45fdf2df8', '563295464e345el45fdf2df9'];
var messages = ids.map((value, index, list) => 'ID of ${index} element is $ {value} ') ;// 隐式返回

九、Promise实现

Promise 构造函数包含一个参数和一个带有 resolve（解析）和 reject（拒绝）两个参数的回调。在回调中执行一些操作（例如异步），如果一切都正常，则调用 resolve，否则调用 reject。
回调函数：回调函数就是一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数。这个过程就叫做回调

//Promise 对象代表一个异步操作
var waitlOOO = new Promise((resolve, reject)=> ( setTimeout(resolve, 1000);
}).then(()=> (    //上述的resolve就表示会让.then函数先执行，然后回调console.log('Yay!');
})；

十、Classes类

//ES6构造类
class baseModel {constructor (options, data) { // class constructor, Node.js 5.6 暂时不支持 options = {}, data =[]这样传参this.name = 'Base';this.url = 'https://baidu.com';this.data = data;this.options = options;
}getName () {	//类的方法console.log('Class name: $(this.name}');}
}

十一、Modules模块

在ES6中，将用export和import进行一个模块的抛出和引入

//module.js
export var port = 3000;
export function getAccounts(url) {
}//将modele.js导入到文件main.js中
import {port,getAccounts} from 'module';
console.log(port); //3000//或者可以在main.js中导入整个模块
import * as service from 'module';
console.log(service.port); //3000

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！