js---发展和基础回顾

摸鱼emoji
191 阅读13分钟

js详解

js是什么

  • js是一种运行在客户端的脚本语言，是最早在HTML（标准通用标记语言的下一个应用）网页上使用的，用来给html增加网页动态功能。
  • 浏览器就是一种运行js脚本语言的客户端，js的解释器被称为js引擎，为浏览器的一部分。

JS简史 ==（JS历史，了解为主，感兴趣的可以多看看）==

  • 在WEB日益发展的同时，网页的大小和复杂性不断增加，受制于网速的限制，为完成简单的表单验证而频繁地与服务器交换数据只会加重用户的负担，当时走在技术革新最前沿的 Netscape（网景）公司，决定着手开发一种客户端语言，用来处理这种简单的验证
    • 简单概括：网页的功能越来越多，当时的网速又不行，一些常用的功能用当时的技术处理起来极其复杂，所以 网景 公司需要一个处理这些常用功能对性能影响更低的新语言
  • 1995 年，就职于 Netscape 公司的布兰登·艾奇（Brendan Eich），开始着手为即将于 1996 年 2 月发布的 Netscape Navigator 2 浏览器开发一种名为 LiveScript 的脚本语言。为了尽快完成 LiveScript 的开发，Netscape 与 Sun 公司建立了一个开发联盟。在 Netscape Navigator 2 正式发布前夕，Netscape 为了搭上媒体热炒 Java 的顺风车，临时把 LiveScript 改名为 JavaScript。
    • 简单概括：网景的布兰登·艾奇研发了一个新语言叫做 LiveScript （只用了10天）当时网景和 Sun 公司有合作关系，Sun 公司刚好新推出了一个叫做 Java 的语言很火，网景为了蹭热度就把 LiveScript 改名为了 JavaScript
    • 所以 Java 和 JavaScript 没有关系，完全是两门不同的语言，它们的区别就像：周杰与周杰伦的区别一样
  • 由于 JavaScript 1.0 获得的关注度越来越高，1996 年，微软就在其 Internet Explorer 3 中加入了名为 JScript 的 JavaScript 实现，这意味着有了两个不同的 JavaScript 版本，导致 JavaScript 没有一个标准化的语法和特性。
    • 简单概括：JavaScript 火了后，微软在自家的 IE 浏览器中弄一个和 JavaScript 一样的 JScript，所以就有了两个不同的 JavaScript，导致没有一个标准化的语法和特性了
  • 1997 年，以 JavaScript 1.1 为蓝本的建议被提交给了欧洲计算机制造商协会（ECMA，European Computer Manufacturers Association）。该协会指定 39 号技术委员会（TC39，Technical Committee #39）负责“ 标准化一种通用、跨平台、供应商中立的脚本语言的语法和语义”。TC39 由来自 Netscape、Sun、微软、Borland 及其他关注脚本语言发展的公司的程序员组成，他们经过数月的努力完成了 ECMA-262 标准，定义一种名为 ECMAScript 的新脚本语言。
    • 为了解决上述问题 欧洲计算机制造商协会 ECMA 制定了一个标准，定义了名为 ECMAScript 的新脚本语言，可以把 ECMAScript 是 JS 的一个规范

ECMAScript 发展过程

  • 1998 年 6 月，ECMAScript 2.0 版发布。
  • 1999 年 12 月，ECMAScript 3.0 版发布，成为 JavaScript 的通行标准，得到了广泛支持。
  • 2007 年 10 月，ECMAScript 4.0 版草案发布，对 3.0 版做了大幅升级。草案发布后，由于 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，在更远的将来再考虑推出。
  • 2011 年 6 月，ECMAscript 5.1 版发布，并且成为ISO国际标准（ISO/IEC 16262:2011）。
  • 2013 年 3 月，ECMAScript 6 草案冻结，不再添加新功能。新的功能设想将被放到 ECMAScript 7。
  • 2013 年 12 月，ECMAScript 6 草案发布。然后是 12 个月的讨论期，听取各方反馈。
  • 2015 年 6 月 17 日，ECMAScript 6 发布正式版本，即ECMAScript 2015。
  • 从 2015 年以后，ECMA 开始每年发布一个小规模增量更新的升级版本，新版本将按照ECMAScript+年份的形式发布，截止目前，已经发布的版本包含 ECMAScript 2016、ECMAScript 2017、ECMAScript 2018、ECMAScript 2019、ECMAScript 2020、ECMAScript 2021、ECMAScript 2022，后续将继续发布新的版本。

js的组成

  • JavaScript 是由ECMAScript，DOM，BOM三者组成
  1. ECMAScript：定义了JavaScript的语法规范描述了语言的基本语法和数据类型
  2. DOM（Document Object Model）:文档对象模型
    • 有一套成熟的可以操作==页面元素的 API==，通过 DOM 可以操作页面中的元素。比如： 增加个 div，减少个 div，给 div 换个位置等
    • API:
      • application programming interface 的简写;
      • 翻译：应用程序编程接口；大白话：别人写好的代码，或者编译好的程序，提供给你使用，就叫作api
  3. BOM（Browser Object Model）浏览器对象模型
  • 有一套成熟的可以操作的 浏览器的API ，通过BOM可以操作浏览器弹出框、跳转、获取分辨率等等。

js的三种写法

  • 行内式 
    <input type="button" value="按钮" onclick="alert('hello world')" />
  • 内部式 
    <body>
    <script>
        alert('hello world')
    </script>
</body>
  • 外部式 
    <script src="main.js"></script>

js定义变量

什么是变量

  • 变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据；
  • 变量其实就相当于一个容器，内部可以存储任意类型的数据，使用变量时，用的是内部存储的数据。

为什么定义变量

使用变量可以方便获取或修改内存中的数据

如何定义变量

使用一个 var 的关键字进行定义，后面必须加一个空格，空格后面自定义变量名

var a;
var b;
var c;

变量赋值

  • 变量定义之后，初始时没有进行赋值，内部有一个默认存储的值叫 undefined(未定义) 表示内部未赋值，但可以存储数据了
  • 变量赋值的方式：通过等号 = 赋值，等号右边的值赋值给左边的变量 ==（等号在 JS 中叫做 赋值号；书写时，等号 = 两侧习惯书写一个空格）==
// 变量定义
var a;
// 变量赋值
a = 1;
// 变量定义并赋值
var b = 2;

变量命名规则

  • 字母 数字 下划线 $ 组成，不能以数字开头
  • 字母区分大小写
  • 不能是关键字和保留字
    • 关键字是指js中有特殊功能的小词语 （for var）
    • 保留字是指现在没有特殊功能，将来可能作为关键字使用

变量命名规范

  • 变量名必须有意义
  • 使用驼峰命名法

严格模式

JS 是一个相对不是很严谨的语言, 在开发的时候一些代码也不是很严格, 严格模式就是对开发的时候写的代码做了一些要求

如何开启严格模式

要开启严格模式, 直接在代码最开始的位置写上字符串 'use strict'

严格模式的规则

  1. 声明变量必须有 关键字
  2. 函数的形参不可以重复

ASCII 字符集(了解)

  • 计算机只能存储二进制数据 0101010
  • 我们的 大写字母; 小写字母; 符号 之类的内容也是由二进制数字组成的
  • 或者说 我们的字母符号这些东西写都有一个对应的编号, 然后计算机存储的时候是存储的这些编号,不过我们看到的时候, 是通过这些编号解析成我们看到的内容
  • 所以我们计算机存储的字母符号之类的并不是存储了这个字母, 而是存储了这个字母对应的编号, 然后给我们看到的时候是通过这个编号找到了对应的字母给我们看

unicode 编码

  • ASCII 只有 128 个字符的编码结构, 这是因为他出现的比较早, 而且是美国发明的, 所以在早期这些内容完全足够
  • 但是这个世界要存储的东西就不够, 比如我们的汉字, 所以就出现了 unicode 编码, 也叫(万国码, 统一码)
  • unicode 和 ASCII 一样的对照表, 只不过存的东西特别多, 基本包含了世界上大部分国家的文字, 所以我们的文字在存储的时候 都是按照 unicode 编码转换成了数字进行存储
  • 我们的 UTF-8 就是一种 8 位的 unicode 字符集

数据类型

基本数据类型（简单数据类型）

  1. 数字类型(number)： 所有整数和浮点数
  2. 字符串类型(string)： 在js中只要被引号包裹的内容，统称字符串
  3. 布尔类型(boolean)： 表明对或错（真或假）
  4. undefined：表明未定义，变量定义 不赋值就是undefined
  5. null：表明为空对象指针（空）

引用数据类型（复杂数据类型）

  • 对象(object)：存储了一些基本数据类型的集合
  • 数组(array): 存放数字的一个集合，或者是存放数据的集合
  • 函数(function)：内部书写了一些代码，需要调用

数据类型的区别

  1. 存储区别：
    • 基本数据类型：存储在 栈内存中, 比如: string; number; undefined; null; boolean;
    • 引用数据类型：将数据本体存放在 堆内存中, 比如对象或者数组, 然后将指向该堆内存的地址, 存放在数组名或者对象名中；数组名或者对象名存放在栈内存中
  2. 赋值区别
    • 基本数据类型: 将变量中的数据赋值给另一个变量
    • 杂数据类型: 将变量中的地址赋值给另一个变量，每一个地址对应堆内存中的一个引用数据类型
  3. 比较区别
    • 基本数据类型是 值 的比较
    • 引用数据类型是 地址 的比较
  4. 传参区别
    • 基本数据类型: 将变量内部的数据复制一份, 传递给对应的形参, 所以函数内对这个形参的修改不会影响外界
    • 引用数据类型: 将变量内部的地址复制一份, 传给对应的形参, 所以此时函数内形参和变量的内部存储的是同一个地址，所以在函数内部对这个形参的一些修改, 会影响外界

检测数据类型 关键字--typeof

  • 语法：
    • typeof（box）
    • typeof box
  • typeof（null）识别的结果为object (一点小瑕疵)

数据类型转换

转数字类型

  1. Number(数据)方法
    • 转型函数Number()可以用于任何数据类型，将其他数据类型转为数字
    • 字符串：纯数字字符串转为对应数字，空字符串和空白字符串转为0，非空非纯数字字符串转为NaN
    • 布尔值：true转为1，false转为0
    • undefined：转为NaN
    • null：转为0
  2. parseInt()方法：字符串转整数方法
    • 对浮点数进行取整操作
      • 对数字取整直接舍弃小数部分，只保留整数
    • 将字符串转为整数数字
      • 将字符串转为整数数字，也包含取整功能
    • 字符串中，必须是纯数字字符串或者数字字符开头的字符串，才能转换为正常数字，且只取整数部分
    • 如果不是数字打头的字符串，会转换为NaN
  3. parseFloat()方法：字符串转浮点数方法
    • 将字符串转为浮点数数字
    • 满足浮点数数字字符必须在字符串开始，如果不在开始返回值都是NaN

转字符串类型

  1. 变量/数据.toString()————undefined和null不能用；
  2. String(变量/数据)————任何类型都能转换成字符串；
  3. 变量/数据 + ''————隐式转换

转布尔

  1. Boolean(变量)方法
    • 转型函数Boolean()可以用于任何数据类型，将其他数据类型转为布尔类型的值
    • 转为false：NaN、0、“”空字符串、null、undefined
    • 转为true：非0 非NaN数字、非空字符串

运算符

基础运算符

  • '+'当有字符串和数字类型参与运算时，会将数字类型抓换成字符串进行拼接
  • '-'当有字符串和数字类型参与运算时，会进行隐式转换将字符串转换成数字类型在进行运算
  • '*'当有字符串和数字类型参与运算时，会进行隐式转换将字符串转换成数字类型在进行运算
  • '/'当有字符串和数字类型参与运算时，会进行隐式转换将字符串转换成数字类型在进行
  • '%'当有字符串和数字类型参与运算时，会进行隐式转换将字符串转换成数字类型在进行

赋值运算符

  1. +=
    • a+=100 等价于 a=a+100;以下同理
  2. -=
  3. *=
  4. /=
  5. %=

比较运算符

  1. 大于>
  2. 小于<
  3. 大于等于>=
  4. 小于等于<=
  5. 等于：
    • == 不区分数据类型
    • === 区分数据类型 （推荐）
  6. 不等于：
    • != 不区分数据类型
    • !== 区分数据类型 （推荐）

自增自减运算符(++ ， --)

  • 符号在变量/数据前，先参与周围运算，然后在进行自增自减
  • 符号在变量/数据后，先进行自增自减，然后在参与周围运算
        var a = 1;
        //符号在变量/数据前，先参与周围运算，然后在进行自增自减
        console.log(a++);       //1
        //符号在变量/数据后，先进行自增自减，然后在参与周围运算
        console.log(++a);       //3

逻辑运算符(重点)

  1. &&————逻辑与（且）
    • 如果运算符左边的布尔值为true，那么运算符右边的代码会被运行或返回
    • 如果运算符左边的布尔值为false，那么运算符左边的代码会被运行或返回
  2. ||————逻辑或
    • 如果运算符左边的布尔值为true，那么运算符左边的代码会被运行或返回
    • 如果运算符左边的布尔值为false，那么运算符右边的代码会被运行或返回
  3. !————取反
    • 得到数据取反后的布尔值————!undefined 的布尔值为 true

运算符的优先级

  1. ()的优先级最高
  2. 自增自减 ++ --
  3. 算数运算符 ：先 * / % 后 + -
  4. 关系运算符： > < >= <=
  5. 等运算符: == != === !==
  6. 逻辑运算符： 先&& 后|| !优先级最高
  7. 赋值运算符
avatar
文章
阅读
粉丝