JavaScript总结

前言

JavaScript是什么

JavaScript 在 1995 年由 Brendan Eich 发明,并于 1997 年成为一部 ECMA 标准。ECMA-262 是其官方名称。ECMAScript 6 (发布于 2015 年)是最新的 JavaScript 版本。ECMAScript 是JavaScript 的规格,JavaScript 是JavaScript 的一种实现。目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏览器也支持 ES6,不过只实现了 ES6 的部分特性和功能。

JavaScript 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。是跨平台、面向对象的脚本语言。JavaScript 和 Java 是完全不同的语言,不论是概念还是设计。虽然它是作为开发Web 页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,例如 Node.js、 Apache CouchDB 和 Adobe Acrobat。JavaScript 是一种基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。

目前JavaScript 使用 Unicode 字符集。JavaScript 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎,不需要编译,直接就可以被浏览器解析执行了

JavaScript是弱类型语言,在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据。变量的数据类型可以任意转换。

JavaScript 内置了一些对象的标准库,比如数组(Array),日期(Date),数学(Math)和一套核心语句,包括运算符、流程控制符以及声明方式等。JavaScript 的核心部分可以通过添加对象来扩展语言以适应不同用途;例如:

客户端的 JavaScript 通过提供对象,控制浏览器及其文档对象模型(DOM),来扩展语言核心。例如:客户端的拓展代码允许应用程序将元素放在某个 HTML 表单中,并且支持响应用户事件,比如鼠标点击、表单提交和页面导航。
服务端的 JavaScript 则通过提供有关在服务器上运行 JavaScript 的对象来可扩展语言核心。例如:服务端版本直接支持应用和数据库通信,提供应用不同调用间的信息连续性,或者在服务器上执行文件操作。
这意味着,在浏览器中,JavaScript 可以改变网页(DOM)的外观与样式。同样地,在服务器上,Node.js 中的 JavaScript 可以对浏览器上编写的代码发出的客户端请求做出响应。

JavaScript和Java

JavaScript 和 Java 有一些共性但是在另一些方面有着根本性区别。JavaScript语言类似 Java 但是并没有 Java 的静态类型和强类型检查特性。JavaScript 遵循了 Java 的表达式语法,命名规范以及基础流程控制,这也是 JavaScript 从 LiveScript 更名的原因。

与 Java 通过声明的方式构建类的编译时系统不同,JavaScript 采用基于少量的数据类型如数字、布尔、字符串值的运行时系统。JavaScript 拥有基于原型的对象模型提供的动态继承;也就是说,独立对象的继承是可以改变的。 JavaScript 支持匿名函数。 函数也可以作为对象的属性被当做宽松的类型方式执行。

与 Java 相比,Javascript 是一门形式自由的语言。你不必声明所有的变量,类和方法。你不必关心方法是否是公有、私有或者受保护的,也不需要实现接口。无需显式指定变量、参数、方法返回值的数据类型。

Java 是基于类的编程语言,设计的初衷就是为了确保快速执行和类型安全。类型安全,举个例子,你不能将一个 Java 整数变量转化为一个对象引用,或者由Java字节码访问专有存储器。Java基于类的模型,意味着程序包含专有的类及其方法。Java的类继承和强类型要求紧耦合的对象层级结构。这些要求使得Java编程比JavaScript要复杂的多。

相比之下,JavaScript 传承了 HyperTalk 和 dBASE 语句精简、动态类型等精髓,这些脚本语言为更多开发者提供了一种语法简单、内置功能强大以及用最小需求创建对象的编程工具。

JavaScript 和 Java 的对比

JavaScriptJava
面向对象。不区分对象类型。通过原型机制继承,任何对象的属性和方法均可以被动态添加。基于类系统。分为类和实例,通过类层级的定义实现继承。不能动态增加对象或类的属性或方法。
变量类型不需要提前声明(动态类型)。变量类型必须提前声明(静态类型)。
不能直接自动写入硬盘。可以直接自动写入硬盘。

Node.js

使用JS

<head> 中的 JavaScript

<body> 中的 JavaScript

外部文件中的 JavaScript

外部 url 中的 JavaScript

外部文件夹中的 JavaScript

浏览器中Javascript,用于与用户交互,以及实现页面中各种动态特效

在HTML文件中,任何JavaScript代码必须放到<script>标签中

注释

  • 单行注释://
  • 多行注释:/* */

JS对大小写敏感

JS输出

使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台

基本语法

数据类型

JavaScript是一种动态类型语言(dynamically typed language)。这意味着你在声明变量时可以不必指定数据类型,而数据类型会在代码执行时会根据需要自动转换。

数据类型

最新的 ECMAScript 标准定义了8种数据类型:
原始数据类型(基本数据类型)
七种基本数据类型:

  • 布尔值(Boolean),有2个值分别是:true 和 false.
  • null , 一个表明 null 值的特殊关键字。 JavaScript 是大小写敏感的,因此 null 与 Null、NULL或变体完全不同。
  • undefined ,和 null 一样是一个特殊的关键字,undefined 表示变量未赋值时的属性。
    数字(Number),整数或浮点数。
  • 任意精度的整数 (BigInt) ,可以安全地存储和操作大整数,甚至可以超过数字的安全整数限制。
  • 字符串(String),字符串是一串表示文本值的字符序列。
  • Symbol ( 在 ECMAScript 6 中新添加的类型).。一种实例是唯一且不可改变的数据类型。
    引用数据类型:对象(Object)

字符串

parseInt()和parseFloat()方法可以将内存中表示一个数字的字符串转换为对应的数字。

通过在引号前加上反斜线’’,可以在字符串中插入引号,这就是引号转义。

JavaScript 特殊字符

字符意思
\0Null字节
\b退格符
\f换页符
\n换行符
\r回车符
\tTab (制表符)
\v垂直制表符
单引号
"双引号
\反斜杠字符(\)
\XXX由从0到377最多三位八进制数XXX表示的 Latin-1 字符。例如,\251是版权符号的八进制序列。
\xXX由从00和FF的两位十六进制数字XX表示的Latin-1字符。例如,\ xA9是版权符号的十六进制序列。
\uXXXX由四位十六进制数字XXXX表示的Unicode字符。例如,\ u00A9是版权符号的Unicode序列。见Unicode escape sequences (Unicode 转义字符).
\u{XXXXX}Unicode代码点 (code point) 转义字符。例如,\u{2F804} 相当于Unicode转义字符 \uD87E\uDC04的简写。

数组

数组字面值是一个封闭在方括号对[]中的包含有零个或多个表达式的列表,其中每个表达式代表数组的一个元素。当你使用数组字面值创建一个数组时,该数组将会以指定的值作为其元素进行初始化,而其长度被设定为元素的个数。

声明时不必列举数组字面值中的所有元素。若你在同一行中连写两个逗号(,),数组中就会产生一个没有被指定的元素,其初始值是undefined。

日期

表达式 变量、运算、赋值

变量

JavaScript 变量是存储数据值的容器。

声明变量

  • 使用关键词 var 。例如 var x = 1。这个语法可以用来声明局部变量和全局变量。var可以重写已经声明的变量,这可能会导致错误的输出。
  • 使用关键词 let 。例如 let y = 1。这个语法可以用来声明块作用域的局部变量。let在同一作用域声明已经声明过的变量会报错。
  • 使用关键词 const。例如const z=1。用 const定义的变量是只读的,也就是常量。试图重新赋值或者使用var重新声明都会报错。当遇到对象时,只读的 const 允许我们修改或重新赋值对象的属性,但变量本身的引用(内存中的引用地址)不可以修改,也就是不能对这个变量重新赋值。

注:用 var 或 let 语句声明的变量,如果没有赋初始值,则其值为 undefined 。

作用域
JavaScript 函数作用域
在 JavaScript 中有两种作用域类型:

局部作用域
全局作用域
JavaScript 拥有函数作用域:每个函数创建一个新的作用域。

作用域决定了这些变量的可访问性(可见性)。
函数内部定义的变量从函数外部是不可访问的(不可见的)。

局部 JavaScript 变量
在 JavaScript 函数中声明的变量,会成为函数的局部变量。
局部变量的作用域是局部的:只能在函数内部访问它们。

// 此处的代码不能使用 carName 变量
function myFunction() {
    var carName = "porsche";
    // 此处的代码能使用 carName 变量
}

由于只能在函数内部识别局部变量,因此能够在不同函数中使用同名变量。

在函数开始时会创建局部变量,在函数完成时会删除它们。

全局 JavaScript 变量
函数之外声明的变量,会成为全局变量。
全局变量的作用域是全局的:网页的所有脚本和函数都能够访问它。

var carName = " porsche";
// 此处的代码能够使用 carName 变量
function myFunction() {
    // 此处的代码也能够使用 carName 变量
}

运算

算术运算符

运算符描述
+加法
-减法
*乘法
/除法
%系数
++递加
--递减

比较运算符

运算符描述
==等于
===等值等型
!=不相等
!==不等值或不等型
>大于
<小于
>=大于或等于
<=小于或等于
?三元运算符

逻辑运算符

运算符描述
&&逻辑与
||逻辑或
!逻辑非

类型运算符

运算符描述
typeof返回变量的类型。
instanceof返回 true,如果对象是对象类型的实例。

位运算符

运算符描述例子等同于结果十进制
&5 & 10101 & 000100011
|5 | 10101 | 000101015
~~ 5~0101101010
^异或5 ^ 10101 ^ 000101004
<<零填充左位移5 << 10101 << 1101010
>>有符号右位移5 >> 10101 >> 100102
>>>零填充右位移5 >>> 10101 >>> 100102

赋值

运算符例子等同于
=x = yx = y
+=x += yx = x + y
-=x -= yx = x - y
*=x *= yx = x * y
/=x /= yx = x / y
%=x %= yx = x % y
<<=x <<= yx = x << y
>>=x >>= yx = x >> y
>>>=x >>>= yx = x >>> y
&=x &= yx = x & y
^=x ^= yx = x ^ y
|=x |= yx = x | y
**=x **= yx = x ** y

语句 逻辑

JavaScript 的控制结构与 C 和 Java 里的类似。条件语句支持 if…else 和 switch。循环支持 while、do…while 和 for。

最基本的语句是用于组合语句的语句块。该块由一对大括号界定,分号;字符被用来分割语句。

条件判断语句
条件判断语句指的是根据指定的条件所返回的结果(真或假或其它预定义的),来执行特定的语句。JavaScript 支持两种条件判断语句:if...elseswitch

当一个逻辑条件为真,用if语句执行一个语句。当这个条件为假,使用可选择的 else 从句来执行这个语句。

if (condition_1) {
  statement_1;
}else if (condition_2) {
  statement_2;
}else if (condition_n_1) {
  statement_n;
}else {
  statement_last;
} //推荐使用严格的语句块模式,语句else可选

注:不建议在条件表达式中使用赋值语句,因为在快速查阅代码时容易把它看成等值比较,如果需要在条件表达式中使用赋值,通常在赋值语句前后额外添加一对括号。

false,undefined,null,0,NaN,空字符串("")这些值将被计算出 false ,其它值将被认为是true

switch 语句允许一个程序求一个表达式的值并且尝试去匹配表达式的值到一个 case 标签。如果匹配成功,这个程序执行相关的语句。switch 语句如下所示:

switch (expression) {
   case label_1:
      statements_1
      [break;]
   case label_2:
      statements_2
      [break;]
   ...
   default:
      statements_def
      [break;]
}

程序首先查找一个与 expression 匹配的 case 语句,然后将控制权转移到该子句,执行相关的语句。如果没有匹配值, 程序会去找 default 语句,如果找到了,控制权转移到该子句,执行相关的语句。如果没有找到 default,程序会继续执行 switch 语句后面的语句。default 语句通常出现在switch语句里的最后面,当然这不是必须的。

可选的 break 语句与每个 case 语句相关联, 保证在匹配的语句被执行后程序可以跳出 switch 并且继续执行 switch 后面的语句。如果break被忽略,则程序将继续执行switch语句中的下一条语句。

异常处理语句
你可以用 throw 语句抛出一个异常并且用 try…catch 语句捕获处理它。
throw 语句
try...catch 语句

循环语句
循环有很多种类,但本质上它们都做的是同一件事:它们把一个动作重复了很多次(实际上重复的次数有可能为 0)。各种循环机制提供了不同的方法去确定循环的开始和结束。不同情况下,某一种类型循环会比其它的循环用起来更简单。
JavaScript中提供了这些循环语句:
for 语句
do...while 语句
while 语句
labeled 语句
break 语句
continue 语句
for...in 语句
for...of 语句

一个 label 提供了一个让你在程序中其他位置引用它的标识符。例如,你可以用 label 标识一个循环, 然后使用 break 或者 continue 来指出程序是否该停止循环还是继续循环。

label :
   statement

label 的值可以是任何的非保留字的 JavaScript 标识符, statement 可以是任意你想要标识的语句(块)。

for…in 语句循环一个指定的变量来循环一个对象所有可枚举的属性。JavaScript 会为每一个不同的属性执行指定的语句。

for (variable in object) {
  statements
}

虽然使用 for…in 来迭代数组 Array 元素听起来很诱人,但是它返回的东西除了数字索引外,还有可能是你自定义的属性名字。因此还是用带有数字索引的传统的 for 循环来迭代一个数组比较好,因为,如果你想改变数组对象,比如添加属性或者方法,for…in 语句迭代的是自定义的属性,而不是数组的元素。

关键字

JavaScript 保留关键字

Javascript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Javascript 以后扩展使用。

abstractargumentsbooleanbreakbyte
casecatchcharclass*const
continuedebuggerdefaultdeletedo
doubleelseenum*evalexport*
extends*falsefinalfinallyfloat
forfunctiongotoifimplements
import*ininstanceofintinterface
letlongnativenewnull
packageprivateprotectedpublicreturn
shortstaticsuper*switchsynchronized
thisthrowthrowstransienttrue
trytypeofvarvoidvolatile
whilewithyield

注:标记的关键字是 ECMAScript5 中新添加的。

JavaScript 对象、属性和方法名

您也应该避免使用 JavaScript 内置的对象、属性和方法的名称作为 Javascript 的变量或函数名

ArrayDateevalfunctionhasOwnProperty
InfinityisFiniteisNaNisPrototypeOflength
MathNaNnameNumberObject
prototypeStringtoStringundefinedvalueOf

Java 保留关键字

JavaScript 经常与 Java 一起使用。您应该避免使用一些 Java 对象和属性作为 JavaScript 标识符。

getClassjavaJavaArrayjavaClassJavaObjectJavaPackage

其他保留词

JavaScript 能够在很多应用程序中被用作编程语言。还应该避免使用 HTML 和 Window 对象和属性的名称。在 HTML 中,必须(为了可移植性,您也应该这么做)避免使用 HTML 和 Windows 对象和属性的名称作为 Javascript 的变量及函数名。

alertallanchoranchorsarea
assignblurbuttoncheckboxclearInterval
clearTimeoutclientInformationcloseclosedconfirm
constructorcryptodecodeURIdecodeURIComponentdefaultStatus
documentelementelementsembedembeds
encodeURIencodeURIComponentescapeeventfileUpload
focusformformsframeinnerHeight
innerWidthlayerlayerslinklocation
mimeTypesnavigatenavigatorframesframeRate
hiddenhistoryimageimagesoffscreenBuffering
openopeneroptionouterHeightouterWidth
packagespageXOffsetpageYOffsetparentparseFloat
parseIntpasswordpkcs11pluginprompt
propertyIsEnumradioresetscreenXscreenY
scrollsecureselectselfsetInterval
setTimeoutstatussubmittainttext
textareatopunescapeuntaintwindow

HTML 事件处理程序(句柄)

此外应该避免使用所有 HTML 事件处理程序的名称。

onbluronclickonerroronfocus
onkeydownonkeypressonkeyuponmouseover
onloadonmouseuponmousedownonsubmit

对象

对象是对个数据的封装体;用来保存多个数据的容器;一个对象代表现实中的一个事物

对象统一管理多个数据

对象的组成

  1. 属性 属性名(字符串)和属性值组成
  2. 方法 :一种特别的属性(属性值是函数)

如何访问内部数据

  1. 属性名(简单类型)
  2. [‘属性名’](属性名包含特殊符号,属性名不确定)

JavaScript 里的对象就是普通名值对的集合。创建一个普通对象有两种方式。
第一种方式是:

var obj = new Object(); 

第二种方式是:

var obj = {}; 
也可以这样创建一个完整的对象:
obj = { 
 name: { 
 first: 'Gandalf', 
 last: 'the Grey' 
 }, 
 address: 'Middle Earth' 
};

可以看到,声明 JavaScript 对象时,键值对中的键就是对象的属性,值就是对应属性的值。
在本书中,我们创建的所有的类,如 Stack、Set、LinkedList、Dictionary、Tree、Graph
等,都是 JavaScript 对象。
在面向对象编程(OOP)中,对象是类的实例。一个类定义了对象的特征。我们会创建很多
类来表示算法和数据结构。

函数

一个函数定义(也称为函数声明,或函数语句)由一系列的function关键字组成,依次为:

  • 函数的名称。
  • 函数参数列表,包围在括号中并由逗号分隔。
  • 定义函数的 JavaScript 语句,用大括号{}括起来。

在ES2015 中有箭头函数,可以省去 function 关键字,只用=>。

算法与数据结构

36 个 JS 手写题

BOM&DOM


参考
JavaScript 指南

阮一峰 ES6

菜鸟 ES6教程

JavaScript 教程

JavaScript 参考

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

孤影墨客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值