本系列基于阮一峰老师的《JavaScrip语言入门教程》或《JavaScript教程》记录整理,教程采用知识共享 署名-相同方式共享 3.0协议。这几乎是学习js最好的教程之一(去掉之一都不过分)

最好的教程而阮一峰老师又采用开源方式共享出来,之所以重新记录一遍,一是强迫自己重新认真读一遍学一遍;二是对其中知识点有个自己的记录,加深自己的理解;三是感谢这么好的教程,希望更多人阅读了解

入门篇

js介绍

  1. JavaScript 是一种轻量级的脚本语言和嵌入式(embedded)语言,其只能通过宿主环境(host,浏览器或node环境)提供I/O操作
  2. 语法角度,JS是一种"对象模型"语言。支持函数式编程、"面向对象"编程、过程式编程等
  3. js核心语法包括:基本的语法构造(比如操作符、控制结构、语句)和标准库(就是一系列具有各种功能的对象比如ArrayDateMath等)。然后就是宿主提供的API(比如浏览器提供的BOM、DOM和Web互联网相关的类;Node环境提供文件操作API、网络通信API等)
  4. JavaScript 的所有值都是对象
  5. js可以采用事件驱动(event-driven)和非阻塞式(non-blocking)设计,实现高并发、多任务处理

历史

  1. 1995年,Brendan Eich 只用了10天,完成了js的第一版,其设计借鉴了C、java、Scheme、Awk、Self、Perl、Python等多种语言,同时也留下了各种设计缺陷(导致常常需要学习各种解决问题的模式)
  2. JavaScript与Java是两种不同的语言,两者的关系仅仅是js的基本语法和对象体系最开始是想要模仿Java,而后又与当时Java的公司Sun有合作,也借助Java的声势,从而后来改名叫JavaScript
  3. ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现。ECMAScript 只用来标准化 JavaScript 的基本语法结构。但其他标准如 DOM 的标准就是由 W3C组织(World Wide Web Consortium)制定的
  4. 2007年,ECMAScript 4.0版草案发布,但是过于激进,导致后面中止了 ECMAScript 4.0 ,将其中一小部分功能发布为ECMAScript 3.1。之后又将其改名为 ECMAScript 5。
  5. 2015年6月,ECMAScript 6 正式发布,且更名为“ECMAScript 2015”。之后每年发布一个ECMAScript版本
  6. 周边大事记

基本语法

  1. js执行单位是行(line),一行一行地执行,一般,一行就是一个语句
  2. 语句(statement)执行某种操作、表达式(expression)用于得到返回值。凡是 JavaScript 语言中预期为值的地方,都可以使用表达式(这一点使js某些使用很灵活)
  3. 语句以分号结尾,一个分号表示一个语句结束。多个语句可以写在一行内。分号前无内容,表示空语句。表达式不需要分号结尾
  4. 变量是对“值”的具名引用,即为"值"取名。变量的名字就是变量名。如下使用var声明一个变量a,并赋值1
var a=1;
  1. 只声明变量而不赋值,则该变量的值是undefined,表示"无定义"。同时变量赋值时不写var也有效,但不建议。变量必须先声明再使用,否则会报错not defined
  2. 一条var命令可以声明多个变量。js是动态类型语言,变量类型可以随时更改。
var a = 1;
a = 'hello';
  1. 使用var重新声明一个已存在的变量,是无效的,重新声明时赋值,相当于重新赋值
  2. 变量提升:js的执行方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行,这样就会导致所有变量的声明语句,会被提升到代码的头部,这叫做变量提升(hoisting)
  3. 标识符(identifier)指的是识别各种值的合法名称。比如变量名、函数名。js标识符大小写敏感。标识符的命名规则是:只能以字母、下划线(_)和美元符号($)开头,从第二个字符开始还可以使用数字。
  4. js标识符中的字母指的是Unicode字母。因此中文标识符也可以使用
  5. js中的保留字不能用于标识符,保留字是指js中用来表示特定含义的字符,如return、class、true、false、function等
  6. 注释:注释用来对代码进行解释,js引擎执行时会忽略注释部分。//表示单行注释。/* */表示多行注释
  7. js使用大括号表示"区块"(block)。对于var命令,js的区块不构成单独的作用域(scope)
  8. 条件语句:
  • ifif...else...结构,根据条件的布尔值判断执行。

  • switch结构判断表达式的值是否与case相符并执行,如果都不符则执行最后的defaultcasebreak不能少,否则当前case代码块执行完会接着执行下一个case。switch语句部分和case语句部分,都可以使用表达式,这就是js中可以为值的地方,都可以使用表达式的体现,如下:

switch (1 + 3) {
case 2 + 2:
f();
break;
default:
neverHappens();
}

switch语句的值和case语句的值,比较时采用的是严格相等运算符(===)

  • ?:三元运算符:如下,条件true,执行"表达式1",否则执行"表达式2",然后获取对应返回值
(条件) ? 表达式1 : 表达式2
  1. 循环语句:重复执行某个操作
  • while 循环:循环条件和代码块,条件为真,就循环执行代码块

  • for 循环:可以指定循环的起点、终点和终止条件。分为初始化表达式(initialize)、条件表达式(test)、递增表达式(increment)

for (初始化表达式; 条件; 递增表达式) {
语句
}

所有for循环,都可以改写成while循环

for语句的无线循环表示:

for ( ; ; ){
console.log('Hello World');
}
  • do...while 循环:先执行一次循环体,再判断条件
  • break语句用于跳出代码块或循环。continue语句用于立即终止本轮循环,并开始下一轮循环
  1. js语句的前面可以添加标签(label),相当于定位符,用于跳转到程序的任意位置
label:
语句

数据类型

概述

  1. JavaScript的数据类型有六种(ES6新增了 Symbol 类型)
  • 数值(number):整数和小数(比如1和3.14)
  • 字符串(strin):文本(比如"Hello World")。
  • 布尔值(boolean):表示真伪的两个特殊值,即true(真)和false(假)
  • undefined:表示“未定义”或不存在,即由于目前没有定义,所以此处暂时没有任何值
  • null:表示空值,即此处的值为空。
  • 对象(object):各种值组成的集合。

数值、字符串、布尔值称为原始类型(primitive type),是最基本的数据类型。对象称为合成类型(complex type)。undefinednull两个特殊值。

对象分为:狭义的对象(object)、数组(array)、函数(function)

  1. 类型判断

typeof运算符返回一个值的数据类型:

  • 数值、字符串、布尔值分别返回numberstringboolean
  • 函数返回functionundefined返回undefined(可以检测未声明的变量),对象返回objectnull返回object
// 检测未声明
if (typeof v === "undefined") {
// ...
} typeof window // "object"
typeof {} // "object"
typeof [] // "object" typeof null // "object"
  • instanceof可以区分数组和对象
[] instanceof Array // false
[] instanceof Array // true

null 和 undefined

  1. 两者含义"类似",if语句中自动转为false,相等于运算符(==)两者比较为true。null表示"空"对象,转为数值是0undefined表示"无定义"的原始值,转为数值是NaN
Number(null) // 0
Number(undefined) // NaN
  1. 函数没有返回值时,默认返回 undefined
  2. 布尔值表示truefalse两个真假状态。
  3. 如果 JavaScript 预期某个位置应该是布尔值,则会将该位置上现有的值自动转为布尔值。

下面六个值会被转为false,其他的值都是true

  • undefined
  • null
  • false
  • 0
  • NaN
  • ""或''(空字符串)

空数组([])和空对象({})对应的布尔值,都是true

数值

  1. js中所有数字都是以64位浮点数存储,整数也是如此。因此1===1.0,是同一个数
1 === 1.0 // true

JavaScript 语言的底层根本没有整数,所有数字都是小数(64位浮点数)

  1. 浮点数不是精确的值,因此小数的比较和运算要特别注意
0.1 + 0.2 === 0.3   // false

0.3 / 0.1           // 2.9999999999999996

(0.3 - 0.2) === (0.2 - 0.1)   // false
  1. js浮点数的64个二进制位,从最左边开始,由如下组成:
  • 第1位:符号位,0表示正数,1表示负数。数值正负
  • 第2位到第12位(共11位):指数部分。数值的大小
  • 第13位到第64位(共52位):小数部分(即有效数字)。数值的精度
  1. 绝对值小于2的53次方的整数,即$-253$到$253$,都可以精确表示
Math.pow(2, 53); // 9007199254740992

Math.pow(2, 53) + 1; // 9007199254740992

Math.pow(2, 53) + 2; // 9007199254740994

Math.pow(2, 53) + 3; // 9007199254740996

Math.pow(2, 53) + 4; // 9007199254740996
  1. 最大值和最小值:Number.MAX_VALUENumber.MIN_VALUE
Number.MAX_VALUE // 1.7976931348623157e+308
Number.MIN_VALUE // 5e-324
  1. 数值表示法:50(十进制)、0xFF(十六进制)、123e3123e-3(科学计数法)
  2. 当小数点前面的数字多于21位时,或者小数点后的零多于5个时,js会自动将数值转为科学计数法表示
  3. 使用字面量(literal)表示数值时:
  • 十进制:没有前导0的数值
  • 八进制:有前缀0o0O的数值,或者有前导0、且只用到0-7的八个阿拉伯数字的数值。
  • 十六进制:有前缀0x0X的数值。
  • 二进制:有前缀0b0B的数值。

js会自动将八进制、十六进制、二进制转为十进制

  1. js存在2个0:+0-0,两者是等价的。唯一区别是+0-0当作分母时表达式的返回值不相等。
  2. NaN表示“非数字”(Not a Number),比如字符串解析为数字报错时会返回NaN。0除以0得到NaN。NaN只是一个特殊值,类型依旧是Number
  3. NaN不等于任何值,包括它本身
NaN === NaN // false

NaN的布尔值为false,NaN与任何数(包括它自己)的运算,得到的都是NaN

  1. Infinity表示“无穷”,表示无法表示正无穷(Infinity)和负无穷(-Infinity);非0数除以0,得到Infinity

    Infinity大于一切数值(除了NaN),-Infinity小于一切数值(除了NaN)

NaN的比较运算会返回false

  1. parseInt()方法将字符串转为整数。字符串转为整数时,会一个个字符依次转换,如果遇到不能转为数字的字符,就不再进行下去,返回已经转好的部分。转换失败返回NaN

解析科学计数法的数字时会出现奇怪的结果

第二个参数表示解析的值的进制

parseInt('1000', 2) // 8
parseInt('1000', 6) // 216
parseInt('1000', 8) // 512
  1. parseFloat():将一个字符串转为浮点数,可以对科学计数法字符串正确转换
  2. isNaN()判断一个值是否是NaNisNaN()只对数值有效,其他类型值会先转为数值,再判断。对于空数组和只有一个数值成员的数组,isNaN()返回false
isNaN('Hello') // true
// 相当于
isNaN(Number('Hello')) // true
  1. 判断NaN最好的方法是:NaN是唯一不等于自身的值
function myIsNaN(value) {
return value !== value;
}

如果使用isNaN()判断,要同时判断类型:

function myIsNaN(value) {
return typeof value === 'number' && isNaN(value);
}
  1. isFinite()判断是否为正常的数值,判断是参数也会进行类型转换

字符串

  1. 字符串是放在单引号或双引号中的零个或多个排在一起的字符。字符串中使用相同的引号要用\反斜杠转义
  2. 每行的尾部使用反斜杠,可以实现多行字符串(\后面只能有换行符,否则报错)
var longString = 'Long \
long \
long \
string'; longString // "Long long long string"

也可使用+可以将多个字符串行连接

  1. 反斜杠(\)用来表示一些特殊字符,称为转义。如\n换行符;\r:回车键;\t:制表符。如果在字符串中需要包含反斜杠,需要\转义自身。
"你好,反斜杠\\";  // "你好,反斜杠\"
  1. 字符串可以看做字符数组,但仅能使用数组的方括号运算符获取字符,而不能进行其他操作
  2. length属性返回字符串长度
'hello'.length  // 5
  1. js使用Unicode字符集。不仅以Unicode存储字符,而且可以只用Unicode码点,如'\u00A9'表示版权符号
var s = '\u00A9';
s // ""

每个字符在 JavaScript 内部都是以16位(2个字节)的 UTF-16 格式储存。js单位字符长度固定为16位长度

js 对 UTF-16 的支持不完整,只支持两字节的字符,无法识别四字节的字符。比如四字节字符

《JavaScript语言入门教程》记录整理:入门和数据类型的更多相关文章

  1. 观看杨老师(杨旭)Asp.Net Core MVC入门教程记录

    观看杨老师(杨旭)Asp.Net Core MVC入门教程记录 ASP.NET Core MVC入门 Asp.Net Core启动和配置 Program类,Main方法 Startup类 依赖注入,I ...

  2. 《Redis5.x入门教程》之准备工作、数据类型

    关注公众号:CoderBuff,回复"redis"获取<Redis5.x入门教程>完整版PDF. 第一章 · 准备工作 Redis安装 Redis5.0.7下载地址:h ...

  3. ECMAScript6 入门教程记录 变量的解构赋值

    (1)变量的解构赋值 基本用法:ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). let a = 1; let b = 2; let c = ...

  4. go语言入门教程:基本语法之数据类型

    出处:千锋教育go语言教研部 作者:茹姐 一.基本数据类型 以下是go中可用的基本数据类型 1.1 布尔型bool 布尔型的值只可以是常量 true 或者 false.一个简单的例子:var b bo ...

  5. Golang入门教程(八)复合数据类型使用案例一

    目录 数组 指针 结构体(struct) 一.数组 Go 语言提供了数组类型的数据结构. 数组是具有相同唯一类型的一组已编号且长度固定的数据项序列,这种类型可以是任意的原始类型例如整形.字符串或者自定 ...

  6. 《TypeScript 中文入门教程》 1、基础数据类型

    转载:https://github.com/MyErpSoft/TypeScript-Handbook/blob/master/pages/zh-CHS/Basic%20Types.md 概述 为了让 ...

  7. Python基础入门教程(4)(数据类型)

    人生苦短,我学Pyhton Python(英语发音:/ˈpaɪθən/), 是一种面向对象.解释型计算机程序设计语言,由Guido van Rossum于1989年底发明,第一个公开发行版发行于199 ...

  8. Golang入门教程(九)复合数据类型使用案例二

    参考:http://www.runoob.com/go/go-slice.html 目录 切片 字典(map) 函数(func) 接口(interface) 通道(chan) 四.切片(Slice) ...

  9. 前端组件化Polymer入门教程(3)——快速入门

    本系列主要翻译官方的教程,因为国内目前这方面的资料太少了,但也不一定和官网的一样,反正就是自己想到哪就写到哪. 如果我没有说明,默认情况下index.html始终包含这段代码,后面将不会再贴上来. & ...

  10. Netty学习_Netty框架入门教程:Netty入门之HelloWorld实现

    我们可能都学过Socket通信/io/nio/aio等的编程.如果想把Socket真正的用于实际工作中去,那么还需要不断的完善.扩展和优化.比如很经典的Tcp读包写包问题,或者是数据接收的大小,实际的 ...

随机推荐

  1. web兼容学习分析笔记-margin 和padding浏览器解析差异

    二.margin 和padding浏览器解析差异 只有默认margin的元素 <body>margin:8px  margin:15px 10px 15px 10px(IE7) <b ...

  2. css之水平居中设置

    行内元素:     div,p{text-align:center;} 定宽块状元素:  第一宽度固定,第二margin-left和margin-right均是auto.div{border:1px ...

  3. Web前端开发基础 第四课(CSS文字和段落排版)

    文字排版--字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体. body{font-family:" ...

  4. 解决Linux下Tomcat日志目录下的catalina.log日志文件过大的问题

    本文摘自:(http://blog.csdn.net/stevencn76/article/details/6246162) 分类: Java技术专区2011-03-13 12:25 5017人阅读  ...

  5. Appcan跨域交互

    案例1,sina微博登录,没有插件,因此采用web方式,我首先打开https://api.weibo.com/oauth2/authorize--,然后我想增加 一个取消按钮: 1 首先打开sina ...

  6. Spring4 MVC文件下载实例

    这篇文章将向您展示如何使用Spring MVC4执行文件下载,我们将看到应用程序从文件系统内部以及外部文件下载文件. 本教程的主要亮点: 下载文件是相当简单的,涉及以下步骤. 创建一个InputStr ...

  7. 3.django Model

    django ORM基本配置 django中遵循 Code Frist 的原则,即:根据代码中定义的类来自动生成数据库表 1.修改project数据库配置 (1)settigs.py里面 默认 DAT ...

  8. configparser_配置解析器

    configparser:配置解析器 import configparser config = configparser.ConfigParser() #配置文件 config[', 'Compres ...

  9. 【SW4STM32生成 hex文件的设置方法】

    SW4STM32生成 hex文件的设置方法 开发环境:WIN7_64 + SW4STM32  联系方式:yexiaopeng1992@126.com 修改: 2018年1月21日 在这周,有一个热心的 ...

  10. 阿里云centos7.4下tomcat8.5配置ssl证书

    环境 阿里云centos7.4 域名也是阿里申请的 jdk1.8 tomcat8.5 1.申请证书 登录到阿里云的域名管理,可以看到已经申请过得域名,我这里第一个已经配置了ssl,第二个未配置,点击更 ...