谷粒商城四前端技术栈ES6

已于 2024-05-20 13:51:07 修改
阅读量304 收藏
点赞数
分类专栏： web 谷粒商城 文章标签： 前端 javascript vue.js
于 2021-12-22 18:25:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44431371/article/details/122091949
版权

ES6

介绍

ECMAScript 6.0（以下简称 ES6，ECMAScript 是一种由 Ecma 国际(前身为欧洲计算机制造商 协会,英文名称是 European Computer Manufacturers Association)通过 ECMA-262标准化的脚本 程序设计语言）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了，并且 从 ECMAScript 6 开始，开始采用年号来做版本。

即 ECMAScript 2015，就是 ECMAScript6。 它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 每年一个新版本。

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

let 与 var 的区别，const声明常量

现在常用 let 声明变量

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
    // var 声明的变量往往会越域
    // let 声明的变量有严格局部作用域

    {
      var a = 1;
      let b = 2;

    }

    // 1
    console.log(a)
    // 1let.html:24 Uncaught ReferenceError: b is not defined
    console.log(b)



	// var 可以声明多次
    // let 只能声明一次
    var m = 1
    var m = 2
    let n = 3
    let n = 4

    console.log(m)
    //  Uncaught SyntaxError: Identifier 'n' has already been declared
    console.log(n)





	// var 会提升变量
    // let 不存在变量提升
    // undefined
    console.log(x)
    var x = 10;

    // Uncaught ReferenceError: Cannot access 'y' before initialization
    console.log(y)
    let y = 5


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

解构表达式

简化代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  

  <script>

    // 数组解构
    let arr = [1,2,3]

      //  这么写没问题，就是太麻烦了
    // let a = arr[0]
    // let b = arr[1]
    // let c = arr[2]


    let [a,b,c] = arr;

    // 1,2,3
    console.log(a,b,c)


	// 对象解构
    const person = {
      name: "jack",
      age: 21,
      language:['java','js','css']
    }

      // 以前的写法
    // const name = person.name
    // const age = person.age
    // const language = person.language

    // 属性名相同时
    // const {name, age, language} = person;
    // console.log(name,age,language)

    // 属性名不同时
    const {name:abc, age, language} = person;
    console.log(abc,age,language)

  </script>
</body>
</html>

字符串扩展

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  

  <script>

    let str = "hello.vue";

    // 都是true
    console.log(str.startsWith("hello"))
    console.log(str.endsWith(".vue"))
    console.log(str.includes("e"))
    console.log(str.includes("hello"))
    

	// 字符串模板
    // 以前是双引号，很麻烦
    let ss = `<div>
      
      <span>hello world</span>
      </div>
      `
    // console.log(ss)



    // 字符串插入变量和表达式，变量名写在 ${} 中，${} 中可以放入 js 表达式
      function fun(){
        return "这是一个函数"
      }

    // 我是jack,今年31了，我想说：这是一个函数
    // 字符串插入变量和表达式。变量名写在${}中，${}中可以放入 javascript 表达式
    let info = `我是${abc},今年${age + 10}了，我想说：${fun()}`

    console.log(info)
  </script>
</body>
</html>

函数优化

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  

  <script>

    // 在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法
    function add(a,b){
      b = b || 1;
      return a + b;
    }

    // 11
    // console.log(add(10))

    // 现在可以这么写，方法声明的时候直接给参数写上默认值，没穿就会自动使用默认值
    function add2(a, b = 1){
      return a+ b;
    }
    // 11
    console.log(add2(10))


	// 不定参数
    function fun(...values){
      console.log(values.length)
    }

    // fun(1,2)
    // fun(1,2,3,4)



	// 箭头函数
    // 以前声明一个方法
    // var print = function(obj){

    //     console.log(obj)
    // }

    // 现在
    // 一个参数
    // var print = obj => console.log(obj)
    // print('hello')

    // 多参数
    // var sum = (a,b) => a + b;
    // console.log(sum(1,2))

	// 方法体代码较多
    // var sum2 = (a,b) => {
    //   c = a + b;
    //   return a + c;
    // }

    // console.log(sum2(10,20))



	// 解构 + 箭头函数
    const person = {
      name: "jack",
      age: 21,
      language:['java','js','css']
    }

    function hello(param){
      console.log('hello' + param.name)
    }

    var hello2 = (param) => console.log('hello' + param.name)
    
     var hello3 = ({name}) => console.log('hello' + name)


    hello3(person)
  </script>
</body>
</html>

对象优化

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  

  <script>
    const person = {
      name: "jack",
      age: 21,
      language:['java','js','css']
    }
    // 返回所有key
    console.log(Object.keys(person))
    // 返回所有value
    console.log(Object.values(person))
    // [["name","jack"],["age",21],["language",["java","js","css"]]]
    console.log(Object.entries(person))



	const target = {a:1};
    const source1 = {b:2};
    const source2 = {c:3};

    // Object.assign 方法的第一个参数是目标对象，后面的参数都是源对象
    Object.assign(target,source1,source2)
    // {a:1,b:2,c:3}
    console.log(target)



	// 声明对象简写
    const age = 23;
    const name = "张三";
    // 以前
    // const person = {age:age,name:name}

    // 如果对象的属性名和变量的属性名是一样的
    const person2 = {name,age}
    console.log(person2)



	// 对象的函数属性简写
    let person3 = {
      name:"jack",
      // 以前
      // eat: function(food){
      //   console.log(this.name + '在吃' + food)
      // }

      // 箭头函数this不能使用，对象.属性
      // eat: food => console.log(person3.name + '在吃' + food)
      
      eat(food){
        console.log(this.name + '在吃' + food)
      }
    }

    person3.eat("香蕉")



	// 对象拓展运算符
    // 拷贝对象(深拷贝)
    let p1 = {name:"Amy",age:15}
    // 把p1所有的属性、值赋值给someone
    let someone = {...p1}
    // console.log(someone)

    // 合并对象
    let age1 = {age:15}
    let name1 = {name:"Amy"}
    // {age: 15, name: "Amy"}
    // 如果字段有重复，后面的值会覆盖前面的值
    let person4 = {...age1,...name1}
    console.log(person4)
  </script>
</body>
</html>

数组的map()和reduce()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    let arr =  ['1','20','-5','3']

    // 数组.map():接收一个函数，将原数组中的所有元素用这个函数处理后返回一个新的数组

    // arr = arr.map((item)=>{
    //   return item*2
    // })

    // 简写
    arr = arr.map(item=>item*2)
    console.log(arr);


	// 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素
    // arr [2, 40, -10, 6]
    // arr.reduce(callback,[initialValue])
    // 参数可以有四个
    // previousValue (上一次调用调用返回的值，或者是提供的初始值(initialValue))
    // currentValue 数组中当前被处理的元素
    // index 当前元素在数组中的索引
    // array 调用reduce的数组
    let result = arr.reduce((a,b)=>{
      console.log("上一次处理后："+a)
      console.log("当前正在处理："+b)
      return a + b;
    });

    // 上一次处理后：2
    // 当前正在处理：40
    // 上一次处理后：42
    // 当前正在处理：-10
    // 上一次处理后：32
    // 当前正在处理：6
    // 38
    console.log(result)

    // 加上初始值就是，从100开始加，而不是从2开始加
    // 就是说第一个a是100
    let result = arr.reduce((a,b)=>{
      console.log("上一次处理后："+a)
      console.log("当前正在处理："+b)
      return a + b;
    },100);



  </script>
</body>
</html>

Promise异步编排

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <script type="text/javascript" src="/jquery.js"></script> -->
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>

  <script>

    // 1.查出当前用户信息
    // 2.按照当前用户的id查出
    // 3.按照当前课程id查出分数
    // 这样不断的嵌套还是太麻烦了
    // $.ajax({
    //   url:"mock/user.json",
    //   success(data){
    //     console.log("查询用户：", data);
    //     $.ajax({
    //       url: `mock/user_score_${data.id}.json`,
    //       success(data){
    //         console.log("查询到课程：",data)
    //         $.ajax({
    //           url: `mock/corse_score_${data.id}.json`,
    //           success(data){
    //             console.log("查询到分数：",data)
    //           },
    //           error(error){
    //             console.log("出现异常了：" + error)
    //           }
    //         });
    //       },
    //       error(error){
    //             console.log("出现异常了：" + error)
    //           }
    //     });
    //   },
    //   error(error){
    //             console.log("出现异常了：" + error)
    //           }
    // })




    // Promise 可以封装异步操作
    // resolve 成功并把结果往下传，reject 失败并把结果往下传
    // Promise在代码上来说并没有简化很多
    // 但是不会嵌套那么多层，符合人类的思考思路
   let p = new Promise((resolve, reject) => {
        // 异步操作
        $.ajax({
            url: "mock/user.json",
            dataType: "json",
            success: function (data) {
                console.log("查询用户成功：", data)
                resolve(data);
            },
            error: function (error) {
                reject(error)
            }
        });
    });


    p.then((obj) => {

        return new Promise((resolve, reject) => {
            $.ajax({
                url: `mock/user_corse_${obj.id}.json`,
                dataType: "json",
                success: function (data) {
                    console.log("查询用户课程成功：", data)
                    resolve(data);
                },
                error: function (error) {
                    reject(error)
                }
            });
        })

    }).catch((err)=>{

    })
    .then((data) => {

        $.ajax({
            url: `mock/corse_score_${data.id}.json`,
            dataType: "json",
            success: function (data) {
                console.log("查询课程得分成功：", data)
                // resolve(data);
            },
            error: function (error) {
                reject(error)
            }
        });

    }).catch((err)=>{
        
    })




    console.log("-------------------------------")

    // 把 Promise封装成方法
    function get(url, data) {

      return new Promise((resolve, reject) => {
        $.ajax({
          url: url,
          dataType: "json",
          success: function (data) {
            resolve(data);
          },
          error: function (error) {
            reject(error)
          }
        })
      })
    }


    get("mock/user.json")
      .then((data) => {
        console.log("用户查询成功", data)

        return get(`mock/user_corse_${data.id}.json`)
      })
      .then((data) => {
        console.log("课程查询成功", data)

        return get(`mock/corse_score_${data.id}.json`)
      })
      .then((data)=>{
        console.log("课程成绩查询成功：",data)
      })
      .catch((err) =>{
        console.log("出现异常",err)
      });
  </script>
</body>

</html>

模块化

模块化就是把代码进行拆分，方便重复利用。类似 java 中的导包：要使用一个包，必须先 导包。

而 JS 中没有包的概念，换来的是 模块。 模块功能主要由两个命令构成：export和import。 export命令用于规定模块的对外接口。 import命令用于导入其他模块提供的功能。

export

// export const util = {
//   sum(a,b){
//     return a + b;
//   }
// }


// 方法名是默认的，在导入的时候，方法名可以自己定义
// import abc
export default{
  sum(a,b){
    return a + b;
  }
}

let name = "jack"
let age = 21

// export 不仅可以导出对象，一切js变量都可以导出。
// 比如：基本类型变量、函数、数组、对象
// export {
//   util,name,age
// }

import

import { util,name,age } from "./user";

全部转载自尚硅谷视频：
https://www.bilibili.com/video/BV1np4y1C7Yf?p=29&spm_id_from=pageDriver

那一瞬间，思琪的刘海往上飞蒸，就好像她从高处掉下来。长脖颈托住蛋形脸，整个的脸露出来，额头光饱饱地像一个小婴儿的奶嗝。

房思琪的初恋乐园
林奕含

阿无，
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
谷粒商城笔记
buglesxu的博客
09-09 983
谷粒商城网上商城系统简介Nacos：注册中心原理GateWay：6 SpringCloud Alibaba7 Nacos，作为注册中心和配置中心8 GateWay网关：路由转发，权限校验，限流控制9 三级分类 网上商城系统简介 微服务+分布式+全栈+集群+部署+自动化运维+可视化CICD 1.分布式基础 全栈开发 后端springboot + mybatis springcloud docker 前端vue.js + ElementUI ES6 Node.js:npm Babel Webpac
前端技术栈: css和ES6
06-19
在现代Web开发中，前端技术栈占据着至关重要的地位，其中CSS和ES6（ECMAScript 2015）是两大核心组成部分。本文将详细探讨这两个知识点，并结合提供的资源——"深入解析CSS.pdf"和"深入理解ES6.pdf"，帮助你深化对...
谷粒商城-前端技术栈
weixin_62485485的博客
05-18 758
"export" 不仅可以导出对象,一切js变量都可以导出,例如:基本类型变量,函数,数组,对象;export导出的名字不可以在需要导入的地方随意更改,如需更改,在导出前可以这样写。
谷粒商城 前端技术栈简介
sun1995sun的博客
03-28 1174
1、VScode使用 2、ES6 3、Node 4、Vue 5、Babel 6、Webpack 前端技术栈类比
谷粒商城实战笔记-28-前端基础-技术栈简介
epitomizelu的专栏
07-12 1053
本节的主要内容是介绍前端的技术栈。谷粒商城项目是一个全栈项目，侧重于后端，但也有一定量的前端开发工作量。好在只要具备JavaScript基础，学习这部分前端内容后，就能具备这个项目所需要的能力。
谷粒商城-前端基础
tian__c的博客
06-22 490
1、技术栈简介 前端技术栈类对比 一、VSCode使用 二、ES6 1、简介 ECMAScript6.0 (以下简称ES6，ECMAScript 是一种由Ecma国际(前身为欧洲计算机制造商协会，英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言)是JavaScript 语言的下一代标准，已经在2015 年6月正式发布了，并且从ECMAScript6 开始，开始采用年号来做版本。即ECMAScript 2015，就
谷粒商城学习-笔记大全
epitomizelu的专栏
07-04 476
1，谷粒商城-01-项目介绍 2，谷粒商城笔记-02-项目整体效果展示
ES6基础 VUE基础 谷粒商城前端部分 (2022.5.1 已经完结)
weixin_51751186的博客
04-29 1654
笔记哦
谷粒商城项目4——前端基础 Vue框架的属性 ES6前端编程规范学习
想去很远地方
06-19 265
前端基础 Vue框架的属性 ES6前端编程规范学习 ES6：let%const、解构表达式、字符串扩展、函数优化、对象优化、map和reduce方法、Promise、模块化 Vue：MVVM思想、双向绑定、指令、计算属性和监听器、过滤器、组件化、生命周期和钩子函数...
谷粒商城之ES6语法学习
weixin_56674682的博客
12-07 841
前端技术栈简介 使用vscode创建新的文件夹 快捷键：shift+！ -> 快速创建html标签 ES6之let、const关键字 作用：声明变量 1.var声明的变量会越域，let声明的变量不会越域 <script> { var a=1; let b=1; } console.log(a); // 1 console.l...
谷粒商城-分布式基础篇-环境搭建
AlaGeek的博客
11-21 1892
1、写在前面 既个人博客系统和Java虚拟机学习后，深感技术点过于零散，于是照着尚硅谷教程写了谷粒商城这个项目。项目分为基础篇和高级篇，其中基础篇… 2、虚拟机环境搭建 项目运行过程中需要用到MySQL、Redis等服务，为了安装方便，使用Docker来进行安装。首先需要安装Docker，可以安装在Windows上，也可以安装在linux上，这边我是在Win10的机器上装了VMware虚拟机，然后在虚拟机上安装了Ubuntu，然后在Ubuntu上安装了Docker，这一步不会的需要读者自行解决。 2.1 D
gulimallweb:谷粒商城前端
04-10
【标题】"谷粒商城前端"项目涉及到的是一个电商网站的前端开发，主要基于JavaScript技术栈，特别是ES6的新特性。这个项目旨在提供一个全面的购物体验，包括商品浏览、购物车管理、订单处理等功能。 【描述】...
前端面试-Es6相关问题
02-22
内功概要：前端面试-es6的相关面试题（问题+答案） 1、 ES6常用语法有哪些？ 【参考答案】 ① Let： a.let定义的变量，变量不可以再次定义，但可以改变其值 b.具有块级作用域，只作用于使用了 let命令的代码块 c....
Web前端 前端ES6教程 涵盖ES6-ES11
10-20
Web前端 前端ES6教程 涵盖ES6-ES11
前端js学习笔记+es6
最新发布
07-16
跟着李立超老师的课学习，感觉笔记不是很完美，没有充分发挥个人思想，学习进度慢，有待调整。
javaweb、http、tomcat、servlet
梦想是很难很难的，所以先勇敢一点
05-03 2120
web（World Wide Web）即全球广域网，也称万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。javabweb就是使用Java语言进行WEB的开发静态webhtml，css，提供给所有人看的数据，始终不会发生变化。动态web。
BootStrap入门
梦想是很难很难的，所以先勇敢一点
03-25 2061
介绍 Bootstrap，基于 HTML、CSS、JAVASCRIPT 的前端框架。 该框架已经预定义了一套CSS样式和与样式对应的JS代码。（对应的样式有对应的特效） 开发人员只需要编写HTML结构，添加bootstrap固定的class样式，就可以轻松完成指定效果的实现。 作用 Bootstrap 使得 Web 开发更加快捷，高效。 BootStrap支持响应式开发，解决了移动互联网前端开发问题 什么是响应式布局、响应式布局能够解决的问题 响应式布局：一个网站的展示能够兼容多个终端(手机
angular8入门
梦想是很难很难的，所以先勇敢一点
07-06 1922
声明：这篇文章绝大部分是参考https://blog.csdn.net/qq_39053584/article/details/93997318，感谢作者。 环境，工具 先确保安装了nodejs和npm 在开始之前，请确保你的开发环境中包括 Node.js和 npm 包管理器 Nodejs Angular 需要 Node.js 版本 10.9.0 或更高版本。要检查你的版本，请在终端/控制台窗口中运行 node -v 。 windows更新版本不能通过网上说的安装n模块更新,只能重新下载新版的nodejs重
ajax与json
梦想是很难很难的，所以先勇敢一点
04-19 1101
当json数据的value为null时，转换成对象，获取该对象的value，使用==与null（null是代表空，不是字符串）比较，结果为false;在Java对象转换JSON对象时，get开头的所有方法会被转换。它把对象转换成json串的方式，把所有的属性包括为null的全部输出；尤其是日期，你输入一个yyyy-MM-dd类型日期，它会输出，日历类型，一年中的哪个月，一个月的哪天等等，总之不是我想要的。
pig微服务框架 前端技术栈
07-03
Pig微服务框架并不是一个广为人知的标准开源项目或知名的前端技术栈。"Pig"这个名字可能是某个特定企业或项目的内部命名，并非公开的技术堆栈。通常所说的前端技术栈指的是用于构建Web应用的一系列技术和工具，例如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值