本系列基于阮一峰老师的《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. Bootstrap 3.3

    https://jeesite.gitee.io/front/bootstrap/3.3/v3.bootcss.com/index.htm

  2. 大厂程序员因厌恶编程,辞去月薪2w+的工作去当司机?

    世界好小啊,刚在一个 UP 主的群里看到一个视频,标题叫做:"失业了工作没找到,却稀里糊涂上了知乎热搜,2000 多万人围观,我--" 说实话,看到视频的封面,我的下巴当时就掉到了 ...

  3. 每日一题 - 剑指 Offer 53 - I. 在排序数组中查找数字 I

    题目信息 时间: 2019-07-04 题目链接:Leetcode tag:二分查找 哈希表 难易程度:简单 题目描述: 统计一个数字在排序数组中出现的次数. 示例1: 输入: nums = [5,7 ...

  4. 前端开发,页面加载速度性能优化,如何提高web页面加载速度

    一个网页访问速度的快慢,  不仅看它服务器的配置,这里除去你空间主机配置很烂的情况以外,我们从网站开发方面来探讨,前端技术需要从哪些方面提高访问的速度,需要用到哪些技术手段. 文件的加载 图标的加载: ...

  5. CF1292C Xenon's Attack on the Gangs 题解

    传送门 题目描述 输入格式 输出格式 题意翻译 给n个结点,n-1条无向边.即一棵树.我们需要给这n-1条边赋上0~ n-2不重复的值.mex(u,v)表示从结点u到结点v经过的边权值中没有出现的最小 ...

  6. Linux上运行安卓应用:安装使用Anbox

    文章目录 #0x0 简介 #0x1 安装教程 #0x11 第一步,安装需要的内核模块 #0x12 安装Anbox #0x2 使用Anbox #0x21 一些简单的设置 #0x22 安装APK #0x3 ...

  7. (四)pandas的拼接操作

    pandas的拼接操作 #重点 pandas的拼接分为两种: 级联:pd.concat, pd.append 合并:pd.merge, pd.join 0. 回顾numpy的级联 import num ...

  8. 那些非cmake生成的VTK工程存在的让人崩溃的坑

    由于cmake和IDE的一些编译选项不同,所以导致我们使用者需要多做一些事情.而且vtk官方也表示: If you are not using CMake to compile your code, ...

  9. easyUI时间控件

    ##=============================JSP======================================<div class="labelw l ...

  10. [C++面向对象]-C++成员函数和非成员函数

    大纲: 1.成员函数和非成员函数 2.详细解释 3.总结 4.参考   1.成员函数和非成员函数   其实简单来说成员函数是在类中定义的函数,而非成员函数就是普通函数,即不在类中定义的函数,其中非成员 ...