谷粒商城基础篇——Day04

前端开发基础知识&快速入门

一、 VSCode 使用

Get

	"http-get请求": {
		"prefix": "httpget",
		"body": [
		"this.\\$http({",
		"url: this.\\$http.adornUrl(''),",
		"method: 'get',",
		"params: this.\\$http.adornParams({})",
		"}).then(({ data }) => {",
		"})"],
		"description": "httpGET请求"
	},

POST

	"http-post请求": {
		"prefix": "httppost",
		"body": [
		"this.\\$http({",
		"url: this.\\$http.adornUrl(''),",
		"method: 'post',",
		"data: this.\\$http.adornData(data, false)",
		"}).then(({ data }) => { });" ],
		"description": "httpPOST请求"
	}

二、ES6

2.1 简介

ECMAScript 6.0(以下简称ES6) 是 JavaScript 语言的下一代标准，已经在2015年6月正式发布了，并且从ECMAScript 6开始，采用年号作为版本。即 ECMAScript 2015，就是 ECMAScript 6。它的目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业其开发语言。每年一个新版本。

2.2 什么是 ECMAScript

所以，ECMAScript 是浏览器脚本语言的规范，而各种我们熟知的js语言，如JavaScript 则是规范的具体实现。

2.3 ES6新特性

快捷键：shift+!

2.3.1 let声明变量

var	let
越域	有严格局部作用域
可以声明多次	只能声明一次
会变量提升	不存在变量提升

• 变量提升（Hoisting）：简单理解为变量在页面加载时提前声明（变量和函数的声明在编译阶段被放入内存中）https://developer.mozilla.org/zh-CN/docs/Glossary/Hoisting

    // 一、
    // var 声明的变量往往会越域
    // let 声明的变量有严格局部作用域
    {
   
      var a = 1;
      let b = 2;
    }
    console.log(a); // 1
    console.log(b); //运行报错: ReferenceError: b is not defined

    // 二、
    // var 可以声明多次
    // let 只能声明一次
    var m = 1;
    var m = 2;
    let n = 3;
    // let n = 4 //编译报错：Cannot redeclare block-scoped variable 'n'   
    console.log(m); // 2
    console.log(n); // 运行报错：Identifier 'n' has already been declared

    // 三、
    // var 会变量提升
    // let 不存在变量提升
    console.log(x); // underfined  
    var x = 10;
    console.log(y); // 运行报错: ReferenceError: y is not defined 
    var y = 20;     

2.3.2 const声明常量（只读变量，相当于final）

    // 1. 声明之后不允许改变
    // 2. 一旦声明必须初始化，否则会报错
    const a = 1;
    a = 3; // Uncaught TypeError: Assignment to constant variable.

2.3.3 解构表达式

1） 数组解构

    let arr = [1, 2, 3];
    // 以前我们想要获取其中的值，只能通过脚标
    // let a = arr[0];
    // let b = arr[1];
    // let c = arr[2];
    // console.log(a, b, c);

    const[x,y,z] = arr;// x, y, z将与arr中的每个位置对应来取值
    console.log(x, y, z);

2） 对象解构

 const person = {
   
      name: "jack",
      age: 21,
      language: ['java', 'js', 'css']