精华内容
下载资源
问答
  • 目录 入门篇 数据类型 运算符 语法专题 标准库 面向对象编程 异步操作 DOM 事件 浏览器模型 附录:网页元素接口 https://wangdoc.com/javascript/ 8. 现代 JavaScript 教程 以最新的 JavaScript 标准为基准。...

    大家好,我是你们的 猫哥,一个不喜欢吃鱼、又不喜欢喵 的超级猫 ~

    前言

    猫哥是一个常年混迹在 GitHub 上的猫星人,所以发现了不少好的前端开源项目、常用技巧,在此分享给大家。

    公众号:前端GitHub,专注于挖掘 GitHub 上优秀的前端开源项目,并以专题的形式推荐,每专题大概 10 个好项目,每周会有一到三篇精华文章推送。

    已经推荐了 面试项目css奇技淫巧项目代码规范项目数据结构与算法项目管理后台模板前端必备在线工具 等专题的近 100 个优秀项目了。

    平时如何发现好的开源项目,可以看看这篇文章:GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

    以下为【前端GitHub】的第 12 期精华内容。


    1. 30-seconds-of-code

    该项目讲的是满足你所有开发需求的简短代码段,里面都是些经常会用到而且是非常经典的代码,非常值得学习!

    比如 JavaScript 模块就分为了 All、Array、Browser、Date、Function、Math、Node、Object、String 方便学习的。

    比如:你必须知道的 4 种 JavaScript 数组方法

    Array.prototype.map()

    const arr = [1, 2, 3];
    const double = x => x * 2;
    arr.map(double); // [2, 4, 6]
    

    Array.prototype.filter()

    const arr = [1, 2, 3];
    const isOdd = x => x % 2 === 1;
    arr.filter(isOdd); // [1, 3]
    

    Array.prototype.reduce()

    const arr = [1, 2, 3];
    
    const sum = (x, y) => x + y;
    arr.reduce(sum, 0); // 6
    
    const increment = (x, y) => [...x, x[x.length - 1] + y];
    arr.reduce(increment, [0]); // [0, 1, 3, 6]
    

    Array.prototype.find()

    const arr = [1, 2, 3];
    const isOdd = x => x % 2 === 1;
    arr.find(isOdd); // 1
    

    又比如:如何在 JavaScript 中实现睡眠功能?

    同步版本

    const sleepSync = (ms) => {
      const end = new Date().getTime() + ms;
      while (new Date().getTime() < end) { /* do nothing */ }
    }
    
    const printNums = () => {
      console.log(1);
      sleepSync(500);
      console.log(2);
      console.log(3);
    };
    
    printNums(); // Logs: 1, 2, 3 (2 and 3 log after 500ms)
    

    异步版本

    const sleep = (ms) =>
      new Promise(resolve => setTimeout(resolve, ms));
    
    const printNums = async() => {
      console.log(1);
      await sleep(500);
      console.log(2);
      console.log(3);
    };
    
    printNums(); // Logs: 1, 2, 3 (2 and 3 log after 500ms)
    

    其实上面讲到的事例里面还提供 api 和方法的讲解的,方便读者能看懂的,这里就不写出来了。

    还想学更多的 经典 js 代码片段,请看下面的仓库

    https://github.com/30-seconds/30-seconds-of-code

    2. 33-js-concepts


    JavaScript开发者应懂的 33 个概念

    这个项目是为了帮助开发者掌握 JavaScript 概念而创立的。它不是必备,但在未来学习(JavaScript)中,可以作为一篇指南。

    目录

    调用堆栈
    原始类型
    值类型和引用类型
    隐式, 显式, 名义和鸭子类型
    == 与 ===, typeof 与 instanceof
    this, call, apply 和 bind
    函数作用域, 块级作用域和词法作用域
    闭包
    map, reduce, filter 等高阶函数
    表达式和语句
    变量提升
    Promise
    立即执行函数, 模块化, 命名空间
    递归
    算法
    数据结构
    消息队列和事件循环
    setTimeout, setInterval 和 requestAnimationFrame
    继承, 多态和代码复用
    按位操作符, 类数组对象和类型化数组
    DOM 树和渲染过程
    new 与构造函数, instanceof 与实例
    原型继承与原型链
    Object.create 和 Object.assign
    工厂函数和类
    设计模式
    Memoization
    纯函数, 函数副作用和状态变化
    耗性能操作和时间复杂度
    JavaScript 引擎
    二进制, 十进制, 十六进制, 科学记数法
    偏函数, 柯里化, Compose 和 Pipe
    代码整洁之道
    

    而且每个主题都包含了相关的精彩文章和视频,非常适合学习。

    https://github.com/leonardomso/33-js-concepts

    3. javascript-questions


    JavaScript 进阶问题列表。

    从基础到高级:测试您对 JavaScript 的了解程度,稍微刷新一下知识或为编写代码面试做准备!

    比如下面会输出是什么?

    let a = 3
    let b = new Number(3)
    let c = 3
    
    console.log(a == b)
    console.log(a === b)
    console.log(b === c)
    
    • A: true false true

    • B: false false true

    • C: true false false

    • D: false true true

    答案: C

    解释:

    new Number() 是一个内建的函数构造器。虽然它看着像是一个 number,但它实际上并不是一个真实的 number:它有一堆额外的功能并且它是一个对象。

    当我们使用 == 操作符时,它只会检查两者是否拥有相同的。因为它们的值都是 3,因此返回 true

    然后,当我们使用 === 操作符时,两者的值以及类型都应该是相同的。new Number() 是一个对象而不是 number,因此返回 false

    https://github.com/lydiahallie/javascript-questions

    4. JavaScript 30


    使用原生 JavaScript 在 30 天内完成 30 个项目。

    每天完成的 HTML, CSS 和 javascript 解决方案。

    https://github.com/wesbos/JavaScript30

    5. Codewars

    和 leetcode 有点类似,也是在平台上和其他人一起完成真实的代码挑战,提升你的技术。

    相比于其他平台,codewars 给出的问题更加贴合实际工作与生活,很多题都会给出题目背景,更有代入感。

    可以提升技能:在社区创建的 kata 上挑战自我,以增强各种技能。掌握您当前选择的语言,或扩展您对新语言的理解。

    要加入这个社区,您必须先答题证明自己的技能才可以的。

    https://www.codewars.com/

    6. ES6 入门教程

    入门的前端都应该都知道的 ES6 开源书籍,猫哥初入前端时就是学了 阮一峰 老师开源的 ES6 内容的,一直实用至今!

    《ECMAScript 6 入门教程》是一本开源的 JavaScript 语言教程,全面介绍 ECMAScript 6 新引入的语法特性。

    本书覆盖 ES6 与上一个版本 ES5 的所有不同之处,对涉及的语法知识给予详细介绍,并给出大量简洁易懂的示例代码。

    本书为中级难度,适合已经掌握 ES5 的读者,用来了解这门语言的最新发展;也可当作参考手册,查寻新增的语法点。

    如果你是 JavaScript 语言的初学者,建议先学完《JavaScript 语言入门教程》,再来看这本书。

    https://es6.ruanyifeng.com/

    7. JavaScript 教程

    本教程全面介绍 JavaScript 核心语法,覆盖了 ES5 和 DOM 规范的所有内容。

    也是 阮一峰 老师写的,真的非常通俗易懂,非常适合前端学习。

    不得不说,知识掌握通透的人写的技术文章,非常能让人容易明白。

    内容上从最简单的讲起,循序渐进、由浅入深,力求清晰易懂。

    所有章节都带有大量的代码实例,便于理解和模仿,可以用到实际项目中,即学即用。

    本教程适合初学者当作 JavaScript 语言入门教程,学完后就可以承担实际的网页开发工作,也适合当作日常使用的参考手册。

    目录

    入门篇
    数据类型 
    运算符 
    语法专题
    标准库
    面向对象编程
    异步操作 
    DOM
    事件
    浏览器模型
    附录:网页元素接口
    

    https://wangdoc.com/javascript/

    8. 现代 JavaScript 教程

    以最新的 JavaScript 标准为基准。通过简单但足够详细的内容,为你讲解从基础到高阶的 JavaScript 相关知识。

    课程的核心内容包含 2 部分,涵盖了 JavaScript 编程语言相关知识和浏览器行为。此外还有一系列的专题文章。

    JavaScript 编程语言

    在这儿我们将从头开始学习 JavaScript,也会学习 OOP 等相关高级概念。

    本教程专注于语言本身,我们默认使用最小环境。

    浏览器:文档,事件,接口

    学习如何管理浏览器页面:添加元素,操纵元素的大小和位置,动态创建接口并与访问者互动。

    其他文章

    教程的前两部分未涉及的其他主题的内容列表。此处没有明确的层次结构,你可以按你需要的顺序阅读文章。

    https://zh.javascript.info/

    9. MDN

    MDN Web Docs 网站提供开放网络(Open Web)技术有关的信息,包括用于网站和渐进式网络应用的 HTML、CSS 和 API。

    Mozilla, Microsoft, Google, Samsung 和 W3C 将合作把 MDN 打造成最好的 Web 文档。

    所以在这个平台学习 web 技术算是比较权威的了。

    源于开发者,服务开发者。

    https://developer.mozilla.org/zh-CN/

    10. clean-code-javascript

    优秀的 JS 代码规范。

    比如:对相同类型的变量使用相同的关键字

    Bad:

    getUserInfo(); 
    getClientData(); 
    getCustomerRecord();
    

    Good:

    getUser();
    

    再比如:使用可搜索的命名

    在开发过程中,我们阅读代码的时间会远远超过编写代码的时间,因此保证代码的可读性与可搜索会非常重要。切记,没事不要坑自己。

    Bad:

    //525600到底啥意思?
    for (var i = 0; i < 525600; i++) {
      runCronJob();
    }
    

    Good:

    // 声明为全局变量
    var MINUTES_IN_A_YEAR = 525600;
    for (var i = 0; i < MINUTES_IN_A_YEAR; i++) {
      runCronJob();
    }
    

    https://github.com/ryanmcdermott/clean-code-javascript

    11. TypeScript 入门教程

    从 JavaScript 程序员的角度总结思考,循序渐进的理解 TypeScript。

    这个教程真的是猫哥看过的最完整而简洁、并且通俗易懂的 TypeScript 教程!

    《TypeScript 入门教程》全面介绍了 TypeScript 强大的类型系统,完整而简洁,示例丰富,比官方文档更易读,非常适合作为初学者学习 TypeScript 的第一本书。—— 阮一峰

    比如 类型别名:类型别名用来给一个类型起个新名字。

    简单的例子:

    type Name = string;
    type NameResolver = () => string;
    type NameOrResolver = Name | NameResolver;
    function getName(n: NameOrResolver): Name {
        if (typeof n === 'string') {
            return n;
        } else {
            return n();
        }
    }
    
    

    上例中,我们使用 type 创建类型别名。

    类型别名常用于联合类型。

    https://ts.xcatliu.com

    12. w3school

    前端必须知道的 Web 技术教程平台,虽然很多前端都知道了,但是有必要提一下。

    领先的 Web 技术教程 - 全部免费。

    在 W3School,你可以找到你所需要的所有的网站建设教程。

    从基础的 HTML 到 CSS,乃至进阶的 XML、SQL、JS。

    在这里学习前端最好的地方就是有 demo 可能学习,可以验证你的效果或者输出。

    https://www.w3school.com.cn/js/index.asp

    最后

    不知不觉,已经写到第 12 期了呢,已经分享了接近 100 个好的前端项目了呢,往期精文请看下方宝藏仓库,点击很危险,请慎入!

    [前端GitHub]:https://github.com/FrontEndGitHub/FrontEndGitHub

    平时如何发现好的开源项目,可以看看这篇文章:如何在 GitHub 上发现优秀开源项目如何使用 GitHub 进行精准搜索的神仙技巧

    觉得有用 ?喜欢就收藏,顺便点个赞吧,你的支持是超级猫最大的鼓励!

    可以加超级猫的 wx:CB834301747 ,一起闲聊前端。

    微信搜 “前端GitHub”,回复 “电子书” 即可以获得 160 本前端精华书籍哦。

    往期精文

    展开全文
  • 前言 接触写博客有一段时间了,都是边学边学着写,但总感觉写的凌乱,想起啥写啥。这几天在刷红宝书,收获还是蛮多的,决定结合自己的学习,写一个系列,我...JavaScript的变量是松散型的,即可以保存任何类型的数据...

    前言

    接触写博客有一段时间了,都是边学边学着写,但总感觉写的凌乱,想起啥写啥。这几天在刷红宝书,收获还是蛮多的,决定结合自己的学习,写一个系列,我叫它 「前端料包」,旨在巩固前端基础,努力提升自己,同时也乐于做一个分享者。这个系列包括但不限于下面脑图中的内容,目录和发文顺序暂且如下:

    概述

    在讲数据类型之前,想先讲讲变量
    JavaScript的变量是松散型的,即可以保存任何类型的数据,在JavaScript中我们使用var关键字来声明一个变量(es6中新增了let 、 const 来声明变量)

    var message1 = 10;
    var message2 = true;
    var message3 = "hello world";
    

    当然,因为松散型,也可以改变同一变量的值的类型,虽然不推荐这么做,但是在JavaScript中完全有效。

    var message1 = 10;
        message1 = true;// 重新给变量message赋不同类型的值,数据类型也会随之改变,不推荐这样做
    

    而我们所有数据类型的值都是保存在自定义的某一个变量中。
    JavaScript从诞生到现在最新的正式版本,一共有7种数据类型,其中有6种基本数据类型:Undefined、Null、Boolean、Number、String和Symbol(es6新增);1种引用数据类型——ObjectObject本质上是由一组无序的名值对组成的)。JavaScript不支持任何创建自定义类型的机制,而所有值最终都将是上述 7 种数据类型之一。这里要特别说明一下,最新的基本数据类型的第7个兄弟——BigInt已经诞生,将在下一版本(es10)中作为新特性出现(V8引擎v6.7 默认启用对 BigInt 的支持)。

    BigInt是什么? BigIntJavaScript中一种可以用来表示任意精度整数的基本数据类型

    BigInt可以用来表示任意精度整数的特性为JavaScript解锁了更多的骚操作,使用BigInt可以告别过去因为整数运算导致溢出的痛苦。特别是金融方面因为涉及大量的数据运算,比如高精度时间戳,或者数值过大的ID,这些是无法安全的用Number类型去存储的,所以退而求其次使用String类型去存储,有了BigInt类型后就可以安全的将其存储为数值类型。

    另外BigInt的实现也为实现BigDecimal打下坚实基础,那将对于以十进制精度表示货币金额并对其进行精确运算(也就是0.10 + 0.20 !== 0.30问题)非常有帮助

    关于BigInt可以看看这篇文章:JavaScript基本类型之–BigInt

    1、 Undefined类型

    Undefined类型只有一个值,即特殊的undefined,一个变量在声明后未初始化时,这个变量的值就是undefined

    var message;
    alert(message);// undefined
    

    需要注意的是声明了但未初始化的变量与未声明的变量是不一样的

    var msg;
    alert(msg);// 声明了未初始化(即赋值),默认值为"undefined"
    alert(a);// 报错
    

    但使用typeof操作符来检测上面两个变量时,都会返回undefined

    var msg;
    // var a
    alert(typeof msg);// "undefined"
    alert( typeof a);// "undefined"
    

    这个结果有其逻辑上的合理性。因为虽然这两种变量从技术角度看有本质区别,但实际上无论对哪种变量也不可能执行真正的操作。

    未初始化的变量会自动被赋予 undefined 值,没有必要将变量显式的设置为undefined,但显式地初始化变量依然是明智的选择。如果能够做到这一点,那么当 typeof 操作符返回"undefined"值时,我们就知道被检测的变量还没有被声明,而不是尚未初始化。

    2、Null类型

    Null 类型是第二个只有一个值的数据类型,这个特殊的值是 nullnull 值表示一个空对象指针,使用 typeof 操作符检测 null 值时会返回"object"

    var jake = null; 
    alert(typeof jake ); // "object"
    

    虽然 typeof null 会输出 object,但这只是 JS 存在的一个悠久 Bug。在 JS 的最初版本中使用的是 32 位系统,为了性能考虑使用低位存储变量的类型信息,000 开头代表是对象然而 null 表示为全零,所以将它错误的判断为 object
    null值的主要作用是如果定义的变量在将来用于保存对象,那么最好将该变量初始化为null值。

    3、Boolean类型

    Boolean类型是JavaScript中使用最多的一种基本数据类型,只有两个值truefalse(全为小写)。

    var  a = true;
    var  b = false;
    

    虽然Boolean类型只有两个值,但JavaScript中所有类型的值都有与这两个Boolean值等价的值,可以调用转型函数Boolean()将其他类型的值转化为Boolean值。

    var  msg = "hello world";
    var  magBoolean = Boolean(msg);
    

    根据转换值的数据类型及其实际值,返回一个Boolean值。各种数据类型及其对应的转换规则如下表:

    数据类型转为true转为false
    Booleantruefalse
    String任何非空字符串" "(空字符串)
    Number任何非零数字(包括无穷大)0和NaN
    Object任何对象null
    Undefinednot applicable(不适用)undefined

    4、Number类型

    Number类型算是JavaScript中最复杂也最令人关注的基本数据类型了,Number可以同时表示整数和浮点数值,同时也支持各种进制和科学计数法。具体如下

    var intNum = 55; // 整数
    
    // 浮点数
    var floatNum1 = 1.1; 
    var floatNum2 = 0.1; 
    var floatNum3 = .1; // 有效,但不推荐
    
    // 科学计数法
    var floatNum = 3.125e7; // 等于 31250000 相当于 3.125*10的7次方
    
    // 八进制(以O开头),数字序列(0~7)
    var octalNum1 = 070; // 八进制的 56
    var octalNum2 = 079; // 无效的八进制数值——解析为 79
    var octalNum3 = 08; // 无效的八进制数值——解析为 8
    
    // 十六进制(以Ox开头),数字序列(0~9及A~F),字母大小写同等
    var hexNum1 = 0xA; // 十六进制的 10
    var hexNum2 = 0x1f; // 十六进制的 31
    
    

    JavaScript能够表示的最小数值保存在 Number.MIN_VALUE 中——在大多数浏览器中,这个值是 5e-324;能够表示的最大数值保存在Number.MAX_VALUE 中——在大多数浏览器中,这个值是 1.7976931348623157e+308。如果某次计算的结果得到了一个超出 JavaScript 数值范围的值,那么这个数值将被自动转换成特殊的 Infinity 值(有正负)。
    这里要特别说明一下,浮点数值的最高精度是 17 位小数,但在进行算术计算时其精确度远远不如整数。例如,0.1 + 0.2的结果不是 0.3,而是 0.30000000000000004。这是因为0.1和0.2在转换成二进制后会无限循环,由于标准位数的限制后面多余的位数会被截掉,此时就已经出现了精度的损失,相加后因浮点数小数位的限制而截断的二进制数字在转换为十进制就会变成0000000000000004。所以上面提到的BigInt就应运而生。

    关于浮点数值计算会产生舍入误差的问题,有一点需要明确:这是使用基于IEEE754 数值的浮点计算的通病,ECMAScript 并非独此一家;其他使用相同数值格式的语言也存在这个问题。

    NaN

    NaN(Not a Number),即非数值,用于表示一个本来要返回数值的操作数未返回数值的情况。
    NaN有两个非同寻常的特点:

    1. 任何涉及NaN的操作(例如NaN/10)都会返回NaN
    2. NaN与任何值都不相等,包括NaN本身。

    针对这两个特点,JavaScript定义了isNaN()函数。这个函数接受一个参数,该参数可以是任何类型。isNaN()在接收到一个值后,会尝试将这个值转换为数值,而任何不能被转换为数值的值都会导致函数返回true

    alert(isNaN(NaN)); //true 
    alert(isNaN(10)); //false(10 是一个数值)
    alert(isNaN("10")); //false(可以被转换成数值 10)
    alert(isNaN("blue")); //true(不能转换成数值)
    alert(isNaN(true)); //false(可以被转换成数值 1)
    

    数值转换

    JavaScript提供3个函数可以把非数值转换为数值:

    • Number()可以用于任何数据类型
    • parseInt()parseFloat()专门用于把字符串转换为数值

    Number()
    Number()函数的转换规则很多,这里直接引用红宝书里的描述:

     如果是 Boolean 值,true 和 false 将分别被转换为 1 和 0。
     如果是数字值,只是简单的传入和返回。  如果是 null 值,返回 0。  如果是 undefined,返回 NaN。
     如果是字符串,遵循下列规则:

    a、中只包含数字(包括前面带正号或负号的情况),则将其转换为十进制数值,即"1" 会变成 1,“123"会变成 123,而"011"会变成 11(注意:前导的零被忽略了);
    b、串中包含有效的浮点格式,如"1.1”,则将其转换为对应的浮点数值(同样,也会忽 略前导零);
    c、字符串中包含有效的十六进制格式,例如"0xf",则将其转换为相同大小的十进制整 数值;
    d、字符串是空的(不包含任何字符),则将其转换为 0;  如果字符串中包含除上述格式之外的字符,则将其转换为 NaN。

     如果是对象,则调用对象的 valueOf()方法,然后依照前面的规则转换返回的值。如果转换 的结果是 NaN,则调用对象的
    toString()方法,然后再次依照前面的规则转换返回的字符 串值。

    var num1 = Number("Hello world!"); //NaN 
    var num2 = Number(""); //0 
    var num3 = Number("000011"); //11 
    var num4 = Number(true); //1 
    NumberExample04.htm
    

    parseInt()
    parseInt()函数在转换字符串时,更多的是看其是否符合数值模式。它会忽略字
    符串前面的空格,直至找到第一个非空格字符。如果第一个字符不是数字字符或者负号,parseInt()
    就会返回 NaN;也就是说,用 parseInt()转换空字符串会返回 NaNNumber()对空字符返回 0)。如
    果第一个字符是数字字符,parseInt()会继续解析第二个字符,直到解析完所有后续字符或者遇到了
    一个非数字字符。

    var num1 = parseInt("1234blue"); // 1234 
    var num2 = parseInt(""); // NaN 
    var num3 = parseInt("0xA"); // 10(十六进制数)
    var num4 = parseInt(22.5); // 22 
    var num5 = parseInt("070"); // 56(八进制数)
    var num6 = parseInt("70"); // 70(十进制数)
    var num7 = parseInt("0xf"); // 15(十六进制数)
    

    在使用 parseInt()解析像八进制字面量的字符串时,ECMAScript 35 存在分歧。

    //ECMAScript 3 认为是 56(八进制),ECMAScript 5 认为是 70(十进制)
    var num = parseInt("070");
    

    因此parseInt()引入第二个参数:转换时使用的基数,以解决上述困惑。

    var num1 = parseInt("10", 2); //2 (按二进制解析)
    var num2 = parseInt("10", 8); //8 (按八进制解析)
    var num3 = parseInt("10", 10); //10 (按十进制解析)
    var num4 = parseInt("10", 16); //16 (按十六进制解析)
    

    parseFloat()
    parseInt()函数类似,parseFloat()也是从第一个字符(位置 0)开始解析每个字符。而且也是一直解析到字符串末尾,或者解析到遇见一个无效的浮点数字字符为止。

    var num1 = parseFloat("1234blue"); //1234 (整数)
    var num2 = parseFloat("0xA"); //0 
    var num3 = parseFloat("22.5"); //22.5 
    var num4 = parseFloat("22.34.5"); //22.34 第二个小数点无效
    var num5 = parseFloat("0908.5"); //908.5 
    var num6 = parseFloat("3.125e7"); //31250000
    

    5、String类型

    String,即字符串,由一对双引号或单引号表示(单双引号没有区别)

    
    var firstName = "Jake";
    var lastName = 'JakeZhang';
    

    JavaScript中的字符串是不可变的,也就是说,字符串一旦创建,它们的值就不能改变。要改变某个变量保存的字符串,首先要销毁原来的字符串,然后再用另一个包含新值的字符串填充该变量。

    var   name  = "Jake";
    name = name + "Zhang";
    

    实现这个操作的过程如下:首先创建一个能容纳 10 个字符的新字符串,然后在这个字符串中填充"Jake"和"Zhang",最后一步是销毁原来的字符串"Jake"和字符串"Zhang",因为这两个字符串已经没用了(这个过程是在后台发生的)。

    实际开发中经常为方便存储,经常需要将值转换为字符串。要把一个值转换为一个字符串有两种方式:

    1、toString()
    除了nullundefined值没有tostring()方法,其他值都有这个方法,该方法返回字符串的一个副本。

    var age = 11; 
    var ageAsString = age.toString(); // 字符串"11" 
    var found = true; 
    var foundAsString = found.toString(); // 字符串"true"
    

    toString()可以传入一个参数:输出数值的基数。可以输出以二进制、八进制、十六进制,乃至其他任意有效进制格式表示的字符串值。下面给出几个例子:

    var num = 10; 
    alert(num.toString()); // "10" 
    alert(num.toString(2)); // "1010" 
    alert(num.toString(8)); // "12" 
    alert(num.toString(10)); // "10" 
    alert(num.toString(16)); // "a"
    

    2、使用+" "
    即可以通过要转换的值 + 空字符串(" "),也可以实现转换。

    var num = 10;
    var numAsString = num + " ";// "10"
    var boolean = true;
    var booleanAsString = boolean + " ";// "true"
    
    var a ;
    var b = a + " ";// "undefined "
    
    var c = null;
    var d = c + " ";// "null "
    
    var o = {
       valueOf: function() {
               return -1;
                    }
    } 
     var m = o + " ";// "-1 "
    
    

    6、Symbol

    Symboles6新增的一种原始数据类型,表示独一无二的值,是一种唯一标识符。Symbol值通过Symbol()函数生成。

    let id = Symbol("jake");
    

    Symbol的主要特点是如上所说的唯一性,可用作对象的唯一属性名,即使是用同一个变量生成的值也不相等。

     let id1 = Symbol('jake');
     let id2 = Symbol('jake');
     console.log(id1 == id2);  //false
    

    但我们不排除希望能够多次使用同一个symbol值的情况。官方提供的Symbol.for()方法可以做到这一点。它接受一个字符串作为参数,然后搜索有没有以该参数作为名称的 Symbol 值。如果有,就返回这个 Symbol 值,否则就新建一个以该字符串为名称的 Symbol 值,并将其注册到全局。

     let name1 = Symbol.for('name'); //检测到未创建后新建
     let name2 = Symbol.for('name'); //检测到已创建后返回
     console.log(name1 === name2); // true
    
    

    Symbol的另一特点是隐藏性,Symbol 作为属性名,遍历对象的时候,该属性不会出现在for...in、for...of循环中,也不会被Object.keys()Object.getOwnPropertyNames()JSON.stringify()返回。

     let id = Symbol("id");
     let obj = {
      [id]:'symbol'
     };
     for(let option in obj){
         console.log(obj[option]); //空
     }
    
    

    但是也有能够访问的方法:Object.getOwnPropertySymbols
    该方法会返回一个数组,成员是当前对象的所有用作属性名的Symbol值。

     let id = Symbol("id");
     let obj = {
      [id]:'symbol'
     };
    let array = Object.getOwnPropertySymbols(obj);
     console.log(array); //[Symbol(id)]
     console.log(obj[array[0]]);  //'symbol'
    
    

    关于Symbol这个新的数据类型更多的知识点可以参考阮神的文章—>传送门

    7、引用数据类型——Object类型

    Object类型是JavaScript中最庞大而复杂的引用数据类型,本文只做简单介绍,后续的文章会做Object的详细介绍。
    Object,即对象,是一组数据和功能的集合。对象可以通过执行new操作符后跟要创建
    的对象类型的名称来创建。而创建 Object 类型的实例并为其添加属性和(或)方法,就可以创建自定
    义对象。

    var person1 = new Object(); 
    person.name = "Jake"; 
    person.age = 23;
    
    var person2 = {}; //与 new Object()相同
    person2.name = "Jake"; 
    perso2.age = 23;
    
    //字面量的创建方式
    var person3 = {
    	name:"jakezhang",//name如果是保留字、有连接符/空格,则要'name-p',即使用字符串
    	age:23,
    	action:function(){
    			console.log(this.name);
    			}
    					
    };
    

    以上任意一种方式都可以创建一个对象实例,当然更多的写法和设计思想以后的文章再做体现。在实际的开发中我们用的最多的是字面量的方式,因为这种语法要求的代码量少,而且能够给人封装数据的感觉。这里引用一个红宝书的例子:

    function displayInfo(args) { 
     var output = ""; 
     if (typeof args.name == "string"){
     output += "Name: " + args.name + "\n"; 
     } 
     if (typeof args.age == "number") { 
     output += "Age: " + args.age + "\n"; 
     } 
     alert(output); 
    } 
    displayInfo({ 
     name: "Nicholas", 
     age: 29 
    }); 
    displayInfo({ 
     name: "Greg" 
    });
    

    代码相信都看得懂~

    Object 的每个实例都具有下列属性和方法:

    • constructor:保存着用于创建当前对象的函数。对于前面的例子而言,构造函数(constructor)就是 Object()

    • hasOwnProperty(propertyName):用于检查给定的属性在当前对象实例中(而不是在实例的原型中)是否存在。其中,作为参数的属性名(propertyName)必须以字符串形式指定(例如:o.hasOwnProperty("name"))。

    • isPrototypeOf(object):用于检查传入的对象是否是传入对象的原型。

    • propertyIsEnumerable(propertyName):用于检查给定的属性是否能够使用 for-in 语句来枚举。与hasOwnProperty()方法一样,作为参数的属性名必须以字符串形式指定。

    • toLocaleString():返回对象的字符串表示,该字符串与执行环境的地区对应。

    • toString():返回对象的字符串表示。

    • valueOf():返回对象的字符串、数值或布尔值表示。通常与 toString()方法的返回值相同。

    由于在 ECMAScript 中 Object 是所有对象的基础,因此所有对象都具有这些基本的属性和方法。

    8、基本数据类型和引用类型值的比较

    基本数据类型

    1. 值是不可变的
    var name = "Jake Zhang";
    name.toUpperCase();//输出 JAKE ZHANG
    console.log(name);// 输出 Jake Zhang
    

    由以上代码可看出基本数据类型的值是不可变的。

    1. 存放在栈区
      基本类型值指的是简单的数据段,按值访问,可操作保存在变量中的实际的值,其占据空间小、大小固定,属于被频繁使用的数据,所以放入栈(stack)中存储。
    2. 值的比较
    var n = 1;
    var m = true;
    console.log(n == m);//true
    console.log(n === m);// false
    

    “= =”:只进行值的比较,会进行数据类型转换;
    “= = =”:不不仅进行值的比较,还会进行数据类型的比较。

    引用数据类型

    1. 值是可变的
    var person = {
      	  name:'jake',
            age:22,
            action:function () {
             console.log("do something!")
            }
          }
    person.age = 23;
    console.log(person.age)// 23
    

    有上面的代码可看出引用数据 类型可以拥有一个或多个属性和方法,而且是可以动态修改的。

    1. 同时存放在栈内存和堆内存
      引用数据类型是存放在堆(heap)中的对象,占据空间大、大小不固定,如果存放在栈中,会影响程序运行的性能;引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址,当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体。(有关js中栈和堆的详解可参考文章[(https://www.cnblogs.com/heioray/p/9487093.html))
    2. 值的比较
      当从一个变量向另一个变量赋引用类型的值时,同样也会将存储在变量中的对象的值复制一份到位新变量分配的空间中。
    	var person1 = {
    			  age:20
          }
          var person2 = person1;
    			person2.age = 23;
    			console.log(person1.age = person2.age)// true
    

    前面讲到基本数据类型和引用数据类型存储于内存中的位置不一样,引用数据类型存储在堆中的对象,与此同时,在栈中存储了指针,而这个指针的指向正是堆中实体的起始位置。变量person1初始化时,person1指针指向该对象{age:20}的地址,将person1赋给person2后,person2又指向该对象{age:20}的地址,这两个变量指向了同一个对象。因此改变其中任何一个变量,都会相互影响。
    ZJK此时,如果取消某一个变量对于原对象的引用,不会影响到另一个变量。

    	var a = {age:22}
    			var b = a;
    			a = 1;
    			console.log(b);//{age:22}
    

    上面代码中,a和b指向同一个对象,然后a的值变为1,这时不会对b产生影响,b还是指向原来的那个对象。

    展开全文
  • JavaScript - 学习/实践

    千次阅读 2020-01-10 11:15:23
    了解学习熟练掌握使用JavaScript进行前端项目的构建开发. 2.学习/操作 暂见:https://xueyuanjun.com/books/javascript-the-definitive-guide //JavaScript 权威指南 测试题:...

    1.应用场景

    了解学习熟练掌握使用JavaScript进行前端项目的构建开发.

    2.学习/操作

    1.介绍

    https://wangdoc.com/javascript/basic/introduction.html

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript  //重新介绍 JavaScript(JS 教程)

     

    2.历史

    https://wangdoc.com/javascript/basic/history.html

     

    3.学习  //推荐阅读

    https://wangdoc.com/javascript/index.html   // JavaScript 教程 - 网道

    https://www.bilibili.com/video/BV1N54y1i7dG?from=search&seid=2798623405671567262  //B站 - javascript

    https://www.bilibili.com/video/BV1Sy4y1C7ha  //B站 - 黑马程序员pink老师前端入门视频教程JavaScript基础语法-dom/bom-es6-jQury...

     

    额外:

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript  // MDN - JavaScript

    https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript  // MDN - JavaScript  学习web 开发

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide  // MDN - JavaScript 指南

     

    https://xueyuanjun.com/books/javascript-the-definitive-guide  // JavaScript 权威指南

    https://cread.jd.com/read/startRead.action?bookId=30335691&readType=1   // 司徒正美 JavaScript框架设计

     

    测试题: 

    https://juejin.im/post/5e1830c05188254c461313dc //2020年从基础到进阶,测试你有多了解 JavaScript,刷新你的知识!

     

     

     

    后续补充

    ...

    3.问题/补充

    TBD

    4.参考

    https://xueyuanjun.com/books/javascript-the-definitive-guide  //JavaScript 权威指南

    https://blog.csdn.net/william_n/article/details/103277642  //前端资源

    https://juejin.im/post/5e1830c05188254c461313dc //2020年从基础到进阶,测试你有多了解 JavaScript,刷新你的知识!

    后续补充

    ...

    展开全文
  • JAVASCRIPT发展历程

    2020-06-05 16:33:47
    JAVASCRIPT发展历程 诞生 JavaScript 因为互联网而生,紧跟着浏览器的出现而问世。回顾它的历史,就要从浏览器的历史讲起。 1990年底,欧洲核能研究组织(CERN)科学家 Tim Berners-Lee,在全世界最大的电脑网络——...

    JAVASCRIPT发展历程

    诞生

    JavaScript 因为互联网而生,紧跟着浏览器的出现而问世。回顾它的历史,就要从浏览器的历史讲起。

    1990年底,欧洲核能研究组织(CERN)科学家 Tim Berners-Lee,在全世界最大的电脑网络——互联网的基础上,发明了万维网(World Wide Web),从此可以在网上浏览网页文件。最早的网页只能在操作系统的终端里浏览,也就是说只能使用命令行操作,网页都是在字符窗口中显示,这当然非常不方便。

    1992年底,美国国家超级电脑应用中心(NCSA)开始开发一个独立的浏览器,叫做 Mosaic。这是人类历史上第一个浏览器,从此网页可以在图形界面的窗口浏览。

    1994年10月,NCSA 的一个主要程序员 Marc Andreessen 联合风险投资家 Jim Clark,成立了 Mosaic 通信公司(Mosaic Communications),不久后改名为 Netscape。这家公司的方向,就是在 Mosaic 的基础上,开发面向普通用户的新一代的浏览器 Netscape Navigator。

    1994年12月,Navigator 发布了1.0版,市场份额一举超过90%。

    Netscape 公司很快发现,Navigator 浏览器需要一种可以嵌入网页的脚本语言,用来控制浏览器行为。当时,网速很慢而且上网费很贵,有些操作不宜在服务器端完成。比如,如果用户忘记填写“用户名”,就点了“发送”按钮,到服务器再发现这一点就有点太晚了,最好能在用户发出数据之前,就告诉用户“请填写用户名”。这就需要在网页中嵌入小程序,让浏览器检查每一栏是否都填写了。

    管理层对这种浏览器脚本语言的设想是:功能不需要太强,语法较为简单,容易学习和部署。那一年,正逢 Sun 公司的 Java 语言问世,市场推广活动非常成功。Netscape 公司决定与 Sun 公司合作,浏览器支持嵌入 Java 小程序(后来称为 Java applet)。但是,浏览器脚本语言是否就选用 Java,则存在争论。后来,还是决定不使用 Java,因为网页小程序不需要 Java 这么“重”的语法。但是,同时也决定脚本语言的语法要接近 Java,并且可以支持 Java 程序。这些设想直接排除了使用现存语言,比如 Perl、Python 和 TCL。

    1995年,Netscape 公司雇佣了程序员 Brendan Eich 开发这种网页脚本语言。Brendan Eich 有很强的函数式编程背景,希望以 Scheme 语言(函数式语言鼻祖 LISP 语言的一种方言)为蓝本,实现这种新语言。

    1995年5月,Brendan Eich 只用了10天,就设计完成了这种语言的第一版。它是一个大杂烩,语法有多个来源。

    基本语法:借鉴 C 语言和 Java 语言。
    数据结构:借鉴 Java 语言,包括将值分成原始值和对象两大类。
    函数的用法:借鉴 Scheme 语言和 Awk 语言,将函数当作第一等公民,并引入闭包。
    原型继承模型:借鉴 Self 语言(Smalltalk 的一种变种)。
    正则表达式:借鉴 Perl 语言。
    字符串和数组处理:借鉴 Python 语言。
    为了保持简单,这种脚本语言缺少一些关键的功能,比如块级作用域、模块、子类型(subtyping)等等,但是可以利用现有功能找出解决办法。这种功能的不足,直接导致了后来 JavaScript 的一个显著特点:对于其他语言,你需要学习语言的各种功能,而对于 JavaScript,你常常需要学习各种解决问题的模式。而且由于来源多样,从一开始就注定,JavaScript 的编程风格是函数式编程和面向对象编程的一种混合体。

    Netscape 公司的这种浏览器脚本语言,最初名字叫做 Mocha,1995年9月改为 LiveScript。12月,Netscape 公司与 Sun 公司(Java 语言的发明者和所有者)达成协议,后者允许将这种语言叫做 JavaScript。这样一来,Netscape 公司可以借助 Java 语言的声势,而 Sun 公司则将自己的影响力扩展到了浏览器。

    之所以起这个名字,并不是因为 JavaScript 本身与 Java 语言有多么深的关系(事实上,两者关系并不深,详见下节),而是因为 Netscape 公司已经决定,使用 Java 语言开发网络应用程序,JavaScript 可以像胶水一样,将各个部分连接起来。当然,后来的历史是 Java 语言的浏览器插件失败了,JavaScript 反而发扬光大。

    1995年12月4日,Netscape 公司与 Sun 公司联合发布了 JavaScript 语言,对外宣传 JavaScript 是 Java 的补充,属于轻量级的 Java,专门用来操作网页。

    1996年3月,Navigator 2.0 浏览器正式内置了 JavaScript 脚本语言。

    JavaScript 与 Java 的关系
    这里专门说一下 JavaScript 和 Java 的关系。它们是两种不一样的语言,但是彼此存在联系。

    JavaScript 的基本语法和对象体系,是模仿 Java 而设计的。但是,JavaScript 没有采用 Java 的静态类型。正是因为 JavaScript 与 Java 有很大的相似性,所以这门语言才从一开始的 LiveScript 改名为 JavaScript。基本上,JavaScript 这个名字的原意是“很像Java的脚本语言”。

    JavaScript 语言的函数是一种独立的数据类型,以及采用基于原型对象(prototype)的继承链。这是它与 Java 语法最大的两点区别。JavaScript 语法要比 Java 自由得多。

    另外,Java 语言需要编译,而 JavaScript 语言则是运行时由解释器直接执行。

    总之,JavaScript 的原始设计目标是一种小型的、简单的动态语言,与 Java 有足够的相似性,使得使用者(尤其是 Java 程序员)可以快速上手。

    JavaScript 与 ECMAScript 的关系
    1996年8月,微软模仿 JavaScript 开发了一种相近的语言,取名为JScript(JavaScript 是 Netscape 的注册商标,微软不能用),首先内置于IE 3.0。Netscape 公司面临丧失浏览器脚本语言的主导权的局面。

    1996年11月,Netscape 公司决定将 JavaScript 提交给国际标准化组织 ECMA(European Computer Manufacturers Association),希望 JavaScript 能够成为国际标准,以此抵抗微软。ECMA 的39号技术委员会(Technical Committee 39)负责制定和审核这个标准,成员由业内的大公司派出的工程师组成,目前共25个人。该委员会定期开会,所有的邮件讨论和会议记录,都是公开的。

    1997年7月,ECMA 组织发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript。这个版本就是 ECMAScript 1.0 版。之所以不叫 JavaScript,一方面是由于商标的关系,Java 是 Sun 公司的商标,根据一份授权协议,只有 Netscape 公司可以合法地使用 JavaScript 这个名字,且 JavaScript 已经被 Netscape 公司注册为商标,另一方面也是想体现这门语言的制定者是 ECMA,不是 Netscape,这样有利于保证这门语言的开放性和中立性。因此,ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现。在日常场合,这两个词是可以互换的。

    ECMAScript 只用来标准化 JavaScript 这种语言的基本语法结构,与部署环境相关的标准都由其他标准规定,比如 DOM 的标准就是由 W3C组织(World Wide Web Consortium)制定的。

    ECMA-262 标准后来也被另一个国际标准化组织 ISO(International Organization for Standardization)批准,标准号是 ISO-16262。

    JavaScript 的版本
    1997年7月,ECMAScript 1.0发布。

    1998年6月,ECMAScript 2.0版发布。

    1999年12月,ECMAScript 3.0版发布,成为 JavaScript 的通行标准,得到了广泛支持。

    2007年10月,ECMAScript 4.0版草案发布,对3.0版做了大幅升级,预计次年8月发布正式版本。草案发布后,由于4.0版的目标过于激进,各方对于是否通过这个标准,发生了严重分歧。以 Yahoo、Microsoft、Google 为首的大公司,反对 JavaScript 的大幅升级,主张小幅改动;以 JavaScript 创造者 Brendan Eich 为首的 Mozilla 公司,则坚持当前的草案。

    2008年7月,由于对于下一个版本应该包括哪些功能,各方分歧太大,争论过于激进,ECMA 开会决定,中止 ECMAScript 4.0 的开发(即废除了这个版本),将其中涉及现有功能改善的一小部分,发布为 ECMAScript 3.1,而将其他激进的设想扩大范围,放入以后的版本,由于会议的气氛,该版本的项目代号起名为 Harmony(和谐)。会后不久,ECMAScript 3.1 就改名为 ECMAScript 5。

    2009年12月,ECMAScript 5.0版 正式发布。Harmony 项目则一分为二,一些较为可行的设想定名为 JavaScript.next 继续开发,后来演变成 ECMAScript 6;一些不是很成熟的设想,则被视为 JavaScript.next.next,在更远的将来再考虑推出。TC39 的总体考虑是,ECMAScript 5 与 ECMAScript 3 基本保持兼容,较大的语法修正和新功能加入,将由 JavaScript.next 完成。当时,JavaScript.next 指的是ECMAScript 6。第六版发布以后,将指 ECMAScript 7。TC39 预计,ECMAScript 5 会在2013年的年中成为 JavaScript 开发的主流标准,并在此后五年中一直保持这个位置。

    2011年6月,ECMAScript 5.1版发布,并且成为 ISO 国际标准(ISO/IEC 16262:2011)。到了2012年底,所有主要浏览器都支持 ECMAScript 5.1版的全部功能。

    2013年3月,ECMAScript 6 草案冻结,不再添加新功能。新的功能设想将被放到 ECMAScript 7。

    2013年12月,ECMAScript 6 草案发布。然后是12个月的讨论期,听取各方反馈。

    2015年6月,ECMAScript 6 正式发布,并且更名为“ECMAScript 2015”。这是因为 TC39 委员会计划,以后每年发布一个 ECMAScript 的版本,下一个版本在2016年发布,称为“ECMAScript 2016”,2017年发布“ECMAScript 2017”,以此类推。

    周边大事记
    JavaScript 伴随着互联网的发展一起发展。互联网周边技术的快速发展,刺激和推动了 JavaScript 语言的发展。下面,回顾一下 JavaScript 的周边应用发展。

    1996年,样式表标准 CSS 第一版发布。

    1997年,DHTML(Dynamic HTML,动态 HTML)发布,允许动态改变网页内容。这标志着 DOM 模式(Document Object Model,文档对象模型)正式应用。

    1998年,Netscape 公司开源了浏览器,这导致了 Mozilla 项目的诞生。几个月后,美国在线(AOL)宣布并购 Netscape。

    1999年,IE 5部署了 XMLHttpRequest 接口,允许 JavaScript 发出 HTTP 请求,为后来大行其道的 Ajax 应用创造了条件。

    2000年,KDE 项目重写了浏览器引擎 KHTML,为后来的 WebKit 和 Blink 引擎打下基础。这一年的10月23日,KDE 2.0发布,第一次将 KHTML 浏览器包括其中。

    2001年,微软公司时隔5年之后,发布了 IE 浏览器的下一个版本 Internet Explorer 6。这是当时最先进的浏览器,它后来统治了浏览器市场多年。

    2001年,Douglas Crockford 提出了 JSON 格式,用于取代 XML 格式,进行服务器和网页之间的数据交换。JavaScript 可以原生支持这种格式,不需要额外部署代码。

    2002年,Mozilla 项目发布了它的浏览器的第一版,后来起名为 Firefox。

    2003年,苹果公司发布了 Safari 浏览器的第一版。

    2004年,Google 公司发布了 Gmail,促成了互联网应用程序(Web Application)这个概念的诞生。由于 Gmail 是在4月1日发布的,很多人起初以为这只是一个玩笑。

    2004年,Dojo 框架诞生,为不同浏览器提供了同一接口,并为主要功能提供了便利的调用方法。这标志着 JavaScript 编程框架的时代开始来临。

    2004年,WHATWG 组织成立,致力于加速 HTML 语言的标准化进程。

    2005年,苹果公司在 KHTML 引擎基础上,建立了 WebKit 引擎。

    2005年,Ajax 方法(Asynchronous JavaScript and XML)正式诞生,Jesse James Garrett 发明了这个词汇。它开始流行的标志是,2月份发布的 Google Maps 项目大量采用该方法。它几乎成了新一代网站的标准做法,促成了 Web 2.0时代的来临。

    2005年,Apache 基金会发布了 CouchDB 数据库。这是一个基于 JSON 格式的数据库,可以用 JavaScript 函数定义视图和索引。它在本质上有别于传统的关系型数据库,标识着 NoSQL 类型的数据库诞生。

    2006年,jQuery 函数库诞生,作者为John Resig。jQuery 为操作网页 DOM 结构提供了非常强大易用的接口,成为了使用最广泛的函数库,并且让 JavaScript 语言的应用难度大大降低,推动了这种语言的流行。

    2006年,微软公司发布 IE 7,标志重新开始启动浏览器的开发。

    2006年,Google推出 Google Web Toolkit 项目(缩写为 GWT),提供 Java 编译成 JavaScript 的功能,开创了将其他语言转为 JavaScript 的先河。

    2007年,Webkit 引擎在 iPhone 手机中得到部署。它最初基于 KDE 项目,2003年苹果公司首先采用,2005年开源。这标志着 JavaScript 语言开始能在手机中使用了,意味着有可能写出在桌面电脑和手机中都能使用的程序。

    2007年,Douglas Crockford 发表了名为《JavaScript: The good parts》的演讲,次年由 O’Reilly 出版社出版。这标志着软件行业开始严肃对待 JavaScript 语言,对它的语法开始重新认识,

    2008年,V8 编译器诞生。这是 Google 公司为 Chrome 浏览器而开发的,它的特点是让 JavaScript 的运行变得非常快。它提高了 JavaScript 的性能,推动了语法的改进和标准化,改变外界对 JavaScript 的不佳印象。同时,V8 是开源的,任何人想要一种快速的嵌入式脚本语言,都可以采用 V8,这拓展了 JavaScript 的应用领域。

    2009年,Node.js 项目诞生,创始人为 Ryan Dahl,它标志着 JavaScript 可以用于服务器端编程,从此网站的前端和后端可以使用同一种语言开发。并且,Node.js 可以承受很大的并发流量,使得开发某些互联网大规模的实时应用变得容易。

    2009年,Jeremy Ashkenas 发布了 CoffeeScript 的最初版本。CoffeeScript 可以被转换为 JavaScript 运行,但是语法要比 JavaScript 简洁。这开启了其他语言转为 JavaScript 的风潮。

    2009年,PhoneGap 项目诞生,它将 HTML5 和 JavaScript 引入移动设备的应用程序开发,主要针对 iOS 和 Android 平台,使得 JavaScript 可以用于跨平台的应用程序开发。

    2009,Google 发布 Chrome OS,号称是以浏览器为基础发展成的操作系统,允许直接使用 JavaScript 编写应用程序。类似的项目还有 Mozilla 的 Firefox OS。

    2010年,三个重要的项目诞生,分别是 NPM、BackboneJS 和 RequireJS,标志着 JavaScript 进入模块化开发的时代。

    2011年,微软公司发布 Windows 8操作系统,将 JavaScript 作为应用程序的开发语言之一,直接提供系统支持。

    2011年,Google 发布了 Dart 语言,目的是为了结束 JavaScript 语言在浏览器中的垄断,提供更合理、更强大的语法和功能。Chromium浏览器有内置的 Dart 虚拟机,可以运行 Dart 程序,但 Dart 程序也可以被编译成 JavaScript 程序运行。

    2011年,微软工程师Scott Hanselman提出,JavaScript 将是互联网的汇编语言。因为它无所不在,而且正在变得越来越快。其他语言的程序可以被转成 JavaScript 语言,然后在浏览器中运行。

    2012年,单页面应用程序框架(single-page app framework)开始崛起,AngularJS 项目和 Ember 项目都发布了1.0版本。

    2012年,微软发布 TypeScript 语言。该语言被设计成 JavaScript 的超集,这意味着所有 JavaScript 程序,都可以不经修改地在 TypeScript 中运行。同时,TypeScript 添加了很多新的语法特性,主要目的是为了开发大型程序,然后还可以被编译成 JavaScript 运行。

    2012年,Mozilla 基金会提出 asm.js 规格。asm.js 是 JavaScript 的一个子集,所有符合 asm.js 的程序都可以在浏览器中运行,它的特殊之处在于语法有严格限定,可以被快速编译成性能良好的机器码。这样做的目的,是为了给其他语言提供一个编译规范,使其可以被编译成高效的 JavaScript 代码。同时,Mozilla 基金会还发起了 Emscripten 项目,目标就是提供一个跨语言的编译器,能够将 LLVM 的位代码(bitcode)转为 JavaScript 代码,在浏览器中运行。因为大部分 LLVM 位代码都是从 C / C++ 语言生成的,这意味着 C / C++ 将可以在浏览器中运行。此外,Mozilla 旗下还有 LLJS (将 JavaScript 转为 C 代码)项目和 River Trail (一个用于多核心处理器的 ECMAScript 扩展)项目。目前,可以被编译成 JavaScript 的语言列表,共有将近40种语言。

    2013年,Mozilla 基金会发布手机操作系统 Firefox OS,该操作系统的整个用户界面都使用 JavaScript。

    2013年,ECMA 正式推出 JSON 的国际标准,这意味着 JSON 格式已经变得与 XML 格式一样重要和正式了。

    2013年5月,Facebook 发布 UI 框架库 React,引入了新的 JSX 语法,使得 UI 层可以用组件开发,同时引入了网页应用是状态机的概念。

    2014年,微软推出 JavaScript 的 Windows 库 WinJS,标志微软公司全面支持 JavaScript 与 Windows 操作系统的融合。

    2014年11月,由于对 Joyent 公司垄断 Node 项目、以及该项目进展缓慢的不满,一部分核心开发者离开了 Node.js,创造了 io.js 项目,这是一个更开放、更新更频繁的 Node.js 版本,很短时间内就发布到了2.0版。三个月后,Joyent 公司宣布放弃对 Node 项目的控制,将其转交给新成立的开放性质的 Node 基金会。随后,io.js 项目宣布回归 Node,两个版本将合并。

    2015年3月,Facebook 公司发布了 React Native 项目,将 React 框架移植到了手机端,可以用来开发手机 App。它会将 JavaScript 代码转为 iOS 平台的 Objective-C 代码,或者 Android 平台的 Java 代码,从而为 JavaScript 语言开发高性能的原生 App 打开了一条道路。

    2015年4月,Angular 框架宣布,2.0 版将基于微软公司的TypeScript语言开发,这等于为 JavaScript 语言引入了强类型。

    2015年5月,Node 模块管理器 NPM 超越 CPAN,标志着 JavaScript 成为世界上软件模块最多的语言。

    2015年5月,Google 公司的 Polymer 框架发布1.0版。该项目的目标是生产环境可以使用 WebComponent 组件,如果能够达到目标,Web 开发将进入一个全新的以组件为开发基础的阶段。

    2015年6月,ECMA 标准化组织正式批准了 ECMAScript 6 语言标准,定名为《ECMAScript 2015 标准》。JavaScript 语言正式进入了下一个阶段,成为一种企业级的、开发大规模应用的语言。这个标准从提出到批准,历时10年,而 JavaScript 语言从诞生至今也已经20年了。

    2015年6月,Mozilla 在 asm.js 的基础上发布 WebAssembly 项目。这是一种 JavaScript 引擎的中间码格式,全部都是二进制,类似于 Java 的字节码,有利于移动设备加载 JavaScript 脚本,执行速度提高了 20+ 倍。这意味着将来的软件,会发布 JavaScript 二进制包。

    2016年6月,《ECMAScript 2016 标准》发布。与前一年发布的版本相比,它只增加了两个较小的特性。

    2017年6月,《ECMAScript 2017 标准》发布,正式引入了 async 函数,使得异步操作的写法出现了根本的变化。

    2017年11月,所有主流浏览器全部支持 WebAssembly,这意味着任何语言都可以编译成 JavaScript,在浏览器运行。

    参考
    [1]: https://wangdoc.com/javascript/basic/history.html

    展开全文
  • 目录 入门篇 数据类型 运算符 语法专题 标准库 面向对象编程 异步操作 DOM 事件 浏览器模型 附录:网页元素接口 https://wangdoc.com/javascript/ 8. 现代 JavaScript 教程 以最新的 JavaScript 标准为基准。...
  • JavaScript知识点

    2019-04-30 16:14:54
    https://wangdoc.com/javascript/basic/introduction.html JavaScript 是一种轻量级的脚本语言,用来编写控制其他大型应用程序(比如浏览器)的“脚本”。 JavaScript 也是一种嵌入式(embedded)语言。它本身...
  • JavaScript

    2019-08-16 09:27:12
    JavaScript 初识简单介绍 JavaScript 的发展历史。ES3、ES5、ES6 分别指什么?说几条写 JavaScript 的基本规范?JavaScript 代码中的 “use strict” 是什么意思?说说严格模式的限制?运算符、运算符优先级NaN 是...
  • 1.1 JavaScript语句 1.2 JavaScript变量 1.2.1 JavaScript变量的基本概念 1.2.2 JavaScript变量的提升 1.3 标识符 1.4 注释 1.5 语句块 1.6 条件语句 1.6.1 if语句 1.6.2 if…else语句 1.6.3switch语句 ...
  • 内容范围广,解释齐全。 https://wangdoc.com/javascript/index.html
  • JavaScript简介

    2020-02-12 20:50:36
    JavaScript是由Netscape公司开发的,最初的名字叫做Mocha,1995年9月改为LiveScript,当时的Java语言很流行,当年的12月,Netscape公司与Sun公司(Java语言的发明者和所有者)达成协议,允许Netscape将LiveScript...
  • JavaScript 语言的历史

    2019-01-11 14:10:24
    JavaScript 因为互联网而生,紧跟着浏览器的出现而问世。回顾它的历史,就要从浏览器的历史讲起。 1990年底,欧洲核能研究组织(CERN)科学家 Tim Berners-Lee,在全世界最大的电脑网络——互联网的基础上,发明了...
  • [阮一峰大神](https://wangdoc.com/javascript/index.html),深入浅出 文章来源 https://wangdoc.com/javascript/index.html 博客图片显示方法 https://crazyang.blog.csdn.net/article/details/87917772?
  • Javascript中,字符串默认只能写在一行内,分成多行将会报错。 'a b c' // SyntaxError: Unexpected token ILLEGAL 上面代码将一个字符串分成三行,JavaScript 就会报错。 ...
  • JavaScript 实验环境

    2019-05-16 10:33:13
    https://wangdoc.com/javascript/basic/introduction.html#%E5%AE%9E%E9%AA%8C%E7%8E%AF%E5%A2%83 本教程包含大量的示例代码,只要电脑安装了浏览器,就可以用来实验了。读者可以一边读一边运行示例,加深理解。 ...
  • JavaScript基础 JavaScript简介 JavaScript是前端开发工程师必须掌握的三种技能之一: HTML:描述网页内容 CSS:描述网页样式 JavaScript:描述网页行为 JavaScript是一种具有函数优先的轻量级解释型或即时编译型的...
  • JavaScript随记

    2021-01-17 07:54:57
    https://wangdoc.com/javascript/index.html 基本语法中所到的知识: 变量提升的理解: JavaScript 引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行。这造成的结果,就是所有的变量的...
  • 参考:https://wangdoc.com/javascript/stdlib/string.html 一、静态方法 String.fromCharCode():该方法的参数是一个或多个数值,代表Unicode码点,返回值是这些码点组成的字符串,若参数为空,则返回空字符串。 ...
  • JavaScript 语言的定义 JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”(script language),指的是它不具备开发操作系统的能力,而是只用来编写控制其他大型应用程序(比如浏览器)的“脚本”。目前,已经...
  • valueOf()和toString()是JavaScript对象的通用方法。 valueOf()表示对该对象求值。不同的对象的valueOf方法不尽一致,数组的valueOf方法返回数组的本身。 let array = [1, 2, 3] array.valueOf() // [1, 2, 3] let ...
  • 参考: https://wangdoc.com/javascript/oop/this.html 一、涵义 不管this用在什么场合,this都有一个共同点:它总是返回一个对象。简单说,this就是属性或方法“当前”所在的对象。总而言之,在JavaScript语言中...
  • https://wangdoc.com/javascript/basic/history.html JavaScript 简介 JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 ...
  • JavaScript类型 JavaScript有七种内置类型: null undefined boolean number string object(function、array、date、regexp) symbol(ES6新增) 除了object之外,其他统称为基本类型。 JavaScript有三种方法可...
  • JavaScript入门

    2019-09-17 16:12:16
    链接:https://wangdoc.com/javascript/index.html 变量 JavaScript是一种动态类型语言,一个 变量可以随时更改自己所属的类型 。 同一个变量只有第一次声明是有效的 ,之后再对其声明不会起作用。但 赋值...
  • 重学javascript

    2020-05-14 17:41:48
    javascript的历史 先从这门语言的历史谈起是有必要的。 在1995 年 Netscape 一位名为 Brendan Eich 的工程师创造了 JavaScript 随后在 1996 年初,JavaScript 首先被应用于 Netscape 2 浏览器上。最初的 ...
  • 阮一峰老师的JavaScript标准参考教程:https://wangdoc.com/javascript/ 1. 不推荐for····in来遍历数组 for…in不仅会遍历数组所有的数字键,还会遍历非数字键,所以不推荐使用。数组的遍历可以考虑使用for循环...
  • https://wangdoc.com/javascript/features/conversion.html (一). 类型转换 [1].转字符串 String() 参数类型 结果 Undefined “undefined” Null “null” Boolean true,返回“true”;false 返回“false” Number ...
  • JavaScript 学习笔记

    2021-01-13 11:30:57
    JavaScript 语言的标识符对大小写敏感 命名规则 第一个字符,可以是任意 Unicode 字母(包括英文字母和其他语言的字母),以及美元符号($)和下划线(_) 第二个字符及后面的字符,除了 Unicode 字母、美元符号...
  • JavaScript 语言的历史 网道(WangDoc.com),互联网文档计划 目录 [隐藏] 诞生 JavaScript 与 Java 的关系 JavaScript 与 ECMAScript 的关系 ...https://wangdoc.com/javascript/basic/history.html ...
  • JavaScript 中的JSON 对象

    2018-11-28 17:24:46
    参考: https://wangdoc.com/javascript/stdlib/json.html 一、JSON格式 JSON对值的类型和格式具有严格规定:1、复合类型的值只能是数组或对象,不能是函数、正则表达式对象、日期对象。2、原始类型的值:字符串...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 532
精华内容 212
热门标签
关键字:

javascriptwangdoc

java 订阅