大前端进阶(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的开发中更加贴近我们熟悉的后端方式,可以用类似导包的方式来让我们的代码提高移植性和复用性,十分有效

目录
相关文章
|
3月前
|
存储 前端开发 JavaScript
前端面试题整理 (ES6篇)
前端面试题整理 (ES6篇)
|
4月前
|
JavaScript 前端开发 Java
[前端学习]ES6小史
[前端学习]ES6小史
25 0
|
4月前
|
前端开发 API
[前端学习]ES6进阶学习
[前端学习]ES6进阶学习
28 1
|
8月前
|
前端开发
前端学习笔记202306学习笔记第四十二天-Es7-ES7新增特性
前端学习笔记202306学习笔记第四十二天-Es7-ES7新增特性
36 0
|
8月前
|
前端开发
前端学习笔记202306学习笔记第四十二天-Es8-ES8和ES9新增特性1
前端学习笔记202306学习笔记第四十二天-Es8-ES8和ES9新增特性1
39 0
|
8月前
|
前端开发
前端学习笔记202306学习笔记第四十二天-Es8-ES8和ES9新增特性2
前端学习笔记202306学习笔记第四十二天-Es8-ES8和ES9新增特性2
41 0
|
存储 监控 前端开发
|
JSON 前端开发 JavaScript
前端实战【ES6】你会ES6,但是你真的会用吗?
前端实战【ES6】你会ES6,但是你真的会用吗?
111 0
前端实战【ES6】你会ES6,但是你真的会用吗?
ES6 从入门到精通 # 23:ES6 的模块化实现(完结)
ES6 从入门到精通 # 23:ES6 的模块化实现(完结)
119 0
ES6 从入门到精通 # 23:ES6 的模块化实现(完结)
|
前端开发
es6常用知识点
es6常用知识点