大前端进阶(ES6)

简介: 大前端进阶(ES6)

ECMAScript 和 JavaScript 的关系

一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系?

要讲清楚这个问题,需要回顾历史。1996 年 11 月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给标准化组织 ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布 262 号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是 1.0 版。

该标准从一开始就是针对 JavaScript 语言制定的,但是之所以不叫 JavaScript,有两个原因。一是商标,Java 是 Sun 公司的商标,根据授权协议,只有 Netscape 公司可以合法地使用 JavaScript 这个名字,且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA,不是 Netscape,这样有利于保证这门语言的开放性和中立性。

因此,ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMAScript 方言还有 JScript 和 ActionScript)。日常场合,这两个词是可以互换的。

var和let和const的区别

学习新事物之前我们要先做一些了解,为什么es6会出现let和const

  1. 为了解决var的变量穿透
  2. 常量可以修改的问题

示例:

// 传统的定义变量和常量的方式
        var name = "广东学相伴";
        var link = "https://www.hyc.com";
        var PI = Math.PI;
        console.log(name);
        console.log(link);
        console.log(PI);
        // ES6定义的方式
        let name2 = "老子太棒了";
        let link2 ="www.lapzi.com";
        console.log(name2);
        console.log(link2);

输出结果是一致的

为什么出现这两个关键字

let

首先是let

// let 和const解决 
        // 1:var的变量穿透问题
        // 2:常量修改问题
        for (var index = 0; index < 5; index++) {
            console.log(index);
        }
        // 在这里就造成了变量穿透 编译问题
        console.log(index);

执行结果

按理来说本来因该是输出 0-4,可是却输出了五个,这就是变量穿透问题
用let就可以解决

// let 和const解决 
        // 1:var的变量穿透问题
        // 2:常量修改问题
        for (let index = 0; index < 5; index++) {
            console.log(index);
        }
        // 在这里就造成了变量穿透 编译问题
        console.log(index);

执行结果

如果使用let,不会变量提升,声明的变量仅在块级作用域内有效,在循环外调用就会就会报错,解决了变量穿透问题

const

按理来说常量是无法改变的,但是使用var却是可以改变的

const PI = Math.PI
        PI = 100;
        console.log(PI);

发生了改变,按理来说圆周率来说应该是不能改变的,所有使用const来声明常量

大前端进阶

新的一天继续努力ya!!!!
##对象简写

传统的js对象写法

var info ={
        title:"快乐学习",
         link:"123",
        go:function(){
            console.log("我骑小黄车")
        }
        }

es6简写

应为对象k,v存在

  1. 如果key和变量名字一致,可以省略括号指定一次即可
  2. 如果value 是一个函数,可以将function去掉
var title="快乐学习";
        var link="123";
            let info2 ={
               title,
                link,
                go(){
            console.log("我骑小黄车")
        }
        }

es6简写可以让我们的对象的属性赋值为变量,是对象内部的值可以发生改变,操作起来更加方便。

对象操作符 ...

...操作符:
可以将一个对象的值赋值给另一个对象,也可以选择性的赋值
可以通过括号选中出不想传输给其他对象的属性,之后通过 ...操作符 把对象剩下的属性或者函数给另一个对象

// 对象传播操作符...
        var person = {
            name: "学相伴",
            address: "广东",
            link: "httpcom",
            phone: 1234567,
            go() {
                console.log("开始上班了")
            }
        };
        var {name,address,...person2} = person;

小结

es6的新语法,让我们在开发中,相比之前传统的js简便不少,新的规则也让编码变得越来越规范,相当值得学习  !加油小伙伴!

const PI = Math.PI
        PI = 100;
        console.log(PI);

就会报错,修改常量的异常

const 其实就是变量指向的那个内存地址所保存的数据不得改动且不会变量提升

小结:

在实际开发和生产中,如果是小程序,unipp或者脚手架中,可以大胆放心的去使用
但是如果是web开发,浏览器版本过低是无法使用let和const的
let和const其实就是改变了一些声明规则,来让变量区分更加清晰,不像var声明的相对紊乱

大前端进阶

新的一天,冲冲冲

关键字:export

我们先来认识一下什么是:export,
es6中js支持module,一个js文件代表一个模块,我们可以用export来导出
用require和import引入

export的特性

  1. 每一个模块内声明的变量都是局部变量
  2. 模块内部的变量或者函数可以通过export导出
  3. 一个模块可以导入别的模块

commonjs的模块化~

common.js中模块化是这样的

var sum =(a,b) => a+b
var sub =(a,b) => a-b
var mul =(a,b) => a*b
var di =(a,b) => a/b
module.exports={
    sum,
    sub,
    mul,
    di
}

引入使用是这样的

const m = require("./四则运算.js")
console.log(m.sub(2,2))
console.log(m.sum(2,2))
console.log(m.mul(2,2))
console.log(m.di(2,2))

es6的模块化

默认是不支持import引入的,我们在使用之前需要用babel把es6降级到es5才可以正常使用
码来!

export default{
    geylist(){
        // 真是业务中,用异步获取数据
        console.log("获取数据列表")
    },
    save(){
        // 真是业务中,用异步获取数据
        console.log("保存数据")
    }
}

引入使用

import user from './userApi'
user.geylist()
user.save()

开始提问啦久违的问答环节

commonjs和es6,require和import

  1. 语法差异,不过基本都是定义一个对象去接受导入的文件(十分类似java的导包)
  2. 运行方式:require/exports 是运行时动态加载,import/export 是静态编译
  • require是对值的拷贝,改了文件,引入不会发生改变
  • import是对值的应用,会随着文件更改而改变

小结

模块化让我们可以在js的开发中更加贴近我们熟悉的后端方式,可以用类似导包的方式来让我们的代码提高移植性和复用性,十分有效

目录
相关文章
|
2月前
|
JavaScript 前端开发 Java
VUE学习四:前端模块化,ES6和ES5如何实现模块化
这篇文章介绍了前端模块化的概念,以及如何在ES6和ES5中实现模块化,包括ES6模块化的基本用法、默认导出与混合导出、重命名export和import,以及ES6之前如何通过函数闭包和CommonJS规范实现模块化。
110 0
VUE学习四:前端模块化,ES6和ES5如何实现模块化
|
3月前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
3月前
|
存储 前端开发 API
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
该文章详细介绍了ES6中Set和Map数据结构的特性和使用方法,并探讨了它们在前端开发中的具体应用,包括如何利用这些数据结构来解决常见的编程问题。
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
|
4月前
|
JavaScript 前端开发 API
揭秘现代前端开发秘籍:Vue.js与ES6如何联手打造惊艳应用?
【8月更文挑战第30天】本文介绍如何从零开始使用Vue.js与ES6创建现代前端应用。首先,通过简要介绍Vue.js和ES6的新特性,使读者了解这两者为何能有效提升开发效率。接着,指导读者使用Vue CLI初始化项目,并展示如何运用ES6语法编写Vue组件。最后,通过运行项目验证组件功能,为后续开发打下基础。适用于希望快速入门Vue.js与ES6的前端开发者。
80 3
|
5月前
|
JavaScript 前端开发 NoSQL
前端node如何学习进阶知识
【7月更文挑战第8天】 深化JavaScript基础,精通Node.js核心模块(如fs、http)与事件循环机制,学习Express框架及异步编程(回调、Promise、async/await),掌握数据库交互,参与实战项目,关注Node.js最新技术和最佳实践,以此提升进阶技能。
54 8
|
6月前
|
前端开发 JavaScript Java
【前端技术】 ES6 介绍及常用语法说明
【前端技术】 ES6 介绍及常用语法说明
54 4
|
7月前
|
前端开发 JavaScript
【Web 前端】ES6新增的内容有哪些?
【5月更文挑战第1天】【Web 前端】ES6新增的内容有哪些?
【Web 前端】ES6新增的内容有哪些?
|
7月前
|
缓存 自然语言处理 JavaScript
【前端开发---Vue2】史上最详细的Vue2入门教程,从基础到进阶带你彻底掌握Vue(四)
【前端开发---Vue2】史上最详细的Vue2入门教程,从基础到进阶带你彻底掌握Vue(四)
|
7月前
|
前端开发 JavaScript 程序员
【前端开发---Vue2】史上最详细的Vue2入门教程,从基础到进阶带你彻底掌握Vue(三)
【前端开发---Vue2】史上最详细的Vue2入门教程,从基础到进阶带你彻底掌握Vue(三)
|
7月前
|
Web App开发 JavaScript 前端开发
【前端开发---Vue2】史上最详细的Vue2入门教程,从基础到进阶带你彻底掌握Vue(一)
【前端开发---Vue2】史上最详细的Vue2入门教程,从基础到进阶带你彻底掌握Vue(一)
下一篇
DataWorks