独立开发者系列（36）——ES6的开发背景知识

大梁来了

于 2024-08-01 01:00:00 发布

阅读量617

点赞数 18

分类专栏：转型独立开发者文章标签： es6 前端 ecmascript

本文链接：https://blog.csdn.net/weixin_43435138/article/details/140784224

版权

转型独立开发者专栏收录该内容

34 篇文章 1 订阅

订阅专栏

1. 相关概念:Javasrcipt = ECMAScript的标准（简称ES） + DOM（文档对象模型） +BOM（浏览器对象模型）三部分组成。

注意的是十年前的JS基础要求是ES基础，基本是W3CSchool里面学习ES5的皮毛，那时候主要是做网页实现一些简单的判断。基本都是招聘要求里面经常写的要求是熟练掌握ES6语法主要是掌握最新的js语法写法，试图利用之前掌握的那点皮毛，是完全不能说是掌握了ES开发的。

要理解到WS语法规则版本已经到ES7 ，十几年前我大部分学习到的JS，觉得JS挺简单，但是到了ES6时代，使用范畴大范围扩充，甚至已经充实到了后端，这让很多老的程序员觉得前端简单的，纷纷沦陷，发现自己开始看不懂很多前端的代码。

ES6的代码是可以通过工具转化成ES5的，所以从理论上讲基本上不用学习ES5，ES6已经可以用来编写复杂的大型应用程序，成为企业级开发语言。

2.程序基础调试输出简单的直接弹框查看即可这个基本保持不变这个意味着调试代码方式不变

alert(“弹框”) //弹框看下到了页面没有写简单手机页面的时候，手机端打开，没有打印的时候，勉强用这个函数弹框看下强烈提示

window.document.write(“Hello, world!”); // 将页面打印出变量基本很少使用，一般使用更改HTML

console.log(1) 控制台正常 console.error(“错误”) //一般情况下第一个已经够用后面标准化才使用

3.理解原型链的概念原型链是 JavaScript 实现对象继承和属性委托的重要机制。通过原型链，JavaScript 实现了对象之间的属性和方法的共享和继承，使得代码更加高效和灵活

看下下面代码

调试台里面可以正常看到 10的输出，这里面意味着执行console.log(x)的时候，没有找到x变量，直接将函数的上一层变量读取使用出来。如果还没读取到，会继续往上读取，一直读到最外层，如果最外层还是没有找到该变量，就会返回undefined。这是ES独有的特性，其他语言不是这样定义的。所以这是一个JS里面比较新和基础的概念。

4.变量的声明变化 let

<script>
    function example() {
        if (true) {
            var varVariable = 'var can be accessed outside the block';
            let letVariable = 'let can only be accessed inside the block';
        }
        console.log(varVariable); // 'var can be accessed outside the block'
        console.log(letVariable); // Error: letVariable is not defined
    }
    example();
</script>

又是一个从 ES5 转入ES6时候的莫名其妙，都是赋值，但是let的作用只有块级这意味着let只有在{} 里面才能生效。这个是防止变量污染的大杀器，意味着你定义了一个let变量{}之外必然失效。而且这个转变，让我们写对象变得非常自信了。

比如写个 test = {} 这样的对象，里面可能存在方法和变量，只要让里面的变量使用let修饰，就可以确保里面的变量不会被外部使用，同时出了{} 就会不再被影响。而如果使用var 全局变量可能会受到影响。

围绕变量的作用域，延伸出了很多JS的经典考题，还有很多属性，也让理解这些特性变得很烧脑。为了保持良好的编程。基本都建议使用let/const 来定义相关变量。全局变量会让程序很容易变得晦涩难懂。包括可能存在的var 变量提升问题

在let和const之间，建议优先使用const，尤其是在全局环境，不应该设置变量，只应设置常量。这符合函数式编程思想，有利于将来的分布式运算。定义一个最常用的const变量，很多插件库的定义使用。都是下面这个格式

const atom = {

ref: ref,

value: 1,

addValue: function (value) { return atom.value + value; },

};

5.变量的结构用法（ES6的新语法）

结构语法可以让语句显得非常灵活，后端语言基本都支持结构分配值

let [ , , third] = [“foo”, “bar”, “baz”];

结构语法是很多库最常用的一种方法，传入参数进行解构，然后对应分解逻辑使用

6. 箭头函数形式 （该写法当前已经被广泛使用，最开始看到的时候，有点蒙圈）

(() => { console.log(‘hello.’); })();

这段代码一下子啊就让我们想起了我们大名鼎鼎的jquery的新版本写法。一个大括号包裹着一个很大的函数 function test( console.log(“hello”) ){} test() 可以看到箭头函数的写法大幅度简化了代码

简单说明就是：

// 多个参数的箭头函数
const func = (param1, param2) => {
    // 函数体
};

值得注意的是:

简单的、单行的、不会复用的函数，建议采用箭头函数。如果函数体较为复杂，行数较多，还是应该采用传统的函数写法

箭头函数的出现，是ES6开发和前面ES5开发标志性的不同，而且这种写法大幅度扩充到了小程序/VUE里面

7.模块的导入这个是做各种库和各种框架开发时候比较头痛，但是非常关键的

// commonJS的写法 
var React = require('react');
var Breadcrumbs = React.createClass({  render() {    return <nav />;  } }); module.exports = Breadcrumbs; 
// ES6的写法 
import React from 'react';
const Breadcrumbs = React.createClass({  render() {    return <nav />;  } }); export default Breadcrumbs