js基础（一）

一个完整的JavaScript实现包含以下三个部分：

  • ECMAScript
  • DOM（文档对象模型）
  • BOM（浏览器对象模型）

变量声明

定义

  1. JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头；
  2. 定义变量时使用var操作符

注意：

  1. 变量名区分大小写；
  2. 推荐使用驼峰式命名规则；
  3. 保留字不能做变量名。

数据类型

ECMAScript中有5种简单数据类型（基本数据类型）：Undefined、Null、Boolean、Number、String，还有一个复杂数据类型：Object

Null和Undefined

null 和 undefined 都可以表示“没有”，将变量赋值 undefined 或 null，语法上几乎没有区别

var a = undefined
var a = null

将 a 分别赋值时，效果几乎等价，在 if 语句中会被自动转为 false

if (!undefined) {
    console.log('undefined is false')
}
//  undefined is false

if (!null) {
    console.log('null is false')
}
//  null is false

undefined == null
//  true

两者的区别是：null 是一个表示“空”的对象，转为数值时为0；undefined是一个表示“此处无定义”的原始值，转为数值时为NaN

Boolean

布尔值表示“真”、“假”两种状态，“真”用true表示，“假”用false表示。

要将一个值转换为其对应的Boolean值，可以调用转型函数Boolean():

var a = "Hello World"
var b = Boolean(a)  // true

以下为各数据类型对应的转换规则：

数据类型 转换为true的值 转换为false的值
Boolean true false
String 任何非空字符串 （空字符串）
Number 任何非零数字值（包含无穷大） 0和NaN
Object 任何对象 null
Undefined n/a undefined

下列运算符也可返回布尔值：

  • 前置逻辑运算符：!
  • 相等运算符：=== == !== !=
  • 比较运算符：> < >= <=

Number

JavaScript 对整数提供四种进制的表示方法：

0xff    // 255
0o377   // 255
0b11    // 3
  • 十进制：没有前导0的数值
  • 八进制：有前缀 0o 或 0O 的数值，或者有前导0、且只用到了0-7的八个阿拉伯数字的数值
  • 十六进制：有前缀 0x 或 0X 的数值
  • 二进制：有前缀 0b 或 0B 的数值

浮点数的最高精度是17位小数，但在进行算术计算时其精度度远远不如整数。例如：0.1加0.2的结果不是0.3，而是0.30000000000000004，涉及小数的比较和运算需要小心。

数值范围：ECMAScript能够表示的最小数值保存在 Number.MIN_VALUE 中——在大多数浏览器中，这个值是5e-324，最大值存在 Number.MAX_VALUE 中——在大多数浏览器中，这个值是1.7976931348623157e+308。除了出现了超出JavaScript数值范围的值，这个值会自动转换成特殊的 Infinity 值。

NaN是JavaScript的特殊值，表示“非数字”（Not a Number），用于表示一个本来要返回数值的操作数未返回数值的情况。例如：任何数值除以0会返回NaN。

NaN具有的两个特点：

  1. 任何涉及 NaN 的操作都会返回 NaN；
  2. NaN 与任何值都不相等，包括 NaN 本身。

针对这两个特点，ECMAScript 定义了 isNaN() 函数，可判断是否不是数值。

与数值相关的全局方法：parseInt() 和 parseFloat()

parseInt()将字符串转为整数，第一个参数为要转换的值，第二个参数表示被解析的值的进制（在2-36之间）：

parseInt('123')  // 123
parseInt('  12')    // 12
parseInt('1.23')    // 1
parseInt('12**')    // 12
parseInt('12e2')    // 12
parseInt('abc') // NaN
parseInt('+1')  // 1
parseInt('0x10')    // 16
parseInt('1000', 2) // 8
parseInt('1000', 6) // 256
parseInt('1000', 8) // 512

parseFloat()将字符串转换为浮点数：

parseFloat('3.14')  // 3.14
parseFloat('314e-2)    // 3.14
parseFloat('3.14more')  // 3.14
parseFloat('\t\r3.14\n')    // 3.14
parseFloat([])  // NaN
parseFloat('FF2')   // NaN
parseFloat('')  // NaN

parseFloat()会将空字符串转为NaN

String

字符串是由零或多个16位Unicode字符组成的字符序列，可用双引号（""）或单引号（''）表示。

转义：反斜杠（\）在字符串中可表示一些特殊字符，又称转义符：

  • \0 ：null（\u0000）
  • \b ：后退键（\u0008）
  • \f ：换页符（\u000C）
  • \n ：换行符（\u000A）
  • \r ：回车键（\u000D）
  • \t ：制表符（\u0009）
  • \v ：垂直制表符（\u000B）
  • ' ：单引号（\u0027）
  • " ：双引号（\u0022）
  • \ ：反斜杠（\u005C）

将值转换为字符串的两种方式：几乎每个值都有的toString()方法和String()转型函数。

var a = 11
var b = a.toString()    // "11"
var c = true
var d = c.toString()    // "true"

但 null undefined没有toString()()，因此，在未确定需要转换的值是不是null或undefined的情况下，可以用String()方法。其转换规则为：

  • 如果值有 toString() 方法，则调用该方法；
  • 如果值是 null，则返回 "null"
  • 如果值是 undefined，则返回 "undefined"

Object

ECMAScript 中的对象是一组数据和功能的集合，对象可通过执行 new 操作符后跟要创建的对象类型的名称来创建。如：

var o = new Object()

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

  • Constructor：保存用于创建当前对象的函数；
  • hasOwnProperty(propertyName)：用于检查给定的属性在当前对象实例中（而不是在实例的原型中）是否存在。其中，作为参数的属性名（propertyName）必须以字符串形式指定；
  • propertyIsEnumerable(propertyName)：用于检查给定的属性是否能够使用 for-in 语句来枚举；
  • toLocaleString()：返回对象的字符串表示，该字符串与执行环境的地区对应；
  • toString()：返回对象的字符串表示；
  • valueOf()：返回对象的字符串、数值或布尔值表示。通常与 toString() 方法的返回值相同。

typeof操作符——用来检测给定变量的数据类型

对给定值使用typeof操作符可能返回下列字符串：

  • "undefined"——如果该值未定义
  • "boolean"——如果该值为布尔值
  • "string"——如果该值是字符串
  • "number"——如果该值是数值
  • "object"——如果该值是对象或null
  • "function"——如果该值是函数

操作符

一元操作符：只能操作一个值的操作符

  • 递增（++）和递减（--）操作符

    前置操作符会先对值进行操作；后置操作符会先取值再进行操作：

    var a = 1
var b = ++a +3   // 5
var c = 1
var d = c-- +3   // 4

  • 位操作符

    1. 按位非（NOT）
      按位非操作符由一个波浪线（~）表示，返回数值的反码。

    2. 按位与（AND）
      按位与操作符由一个和字符号（&）表示，将每个数值的每一位对齐，进行 AND 操作。

    3. 按位或（OR）
      按位与操作符由一个竖线符合（|）表示。

    4. 按位异或（XOR）
      按位异或操作符由一个插入符号（^）表示。

布尔操作符

  • 逻辑非
    由一个叹号（!）表示，逻辑非会先将操作数转换为一个布尔值，然后求反。

  • 逻辑与
    由两个和号（&&）组成，有两个操作数，当且仅当两个操作数均为 true 时返回 true。

  • 逻辑或
    由两个竖线（||）表示，有两个操作数，当且仅当两个操作数均为 false 时返回 false。

语句

if 语句

if (condition) {
    statement1
} else {
    statement2
}

condition 可以是任意表达式，且会自动调用 Boolean() 转换表达式的结果为一个布尔值。

do-while 语句

do-while 语句是一种后测试循环语句，即先执行循环体中的代码，再测试出口条件。

do {
    statement
} while (expression)

while 语句

while 语句属于前测试循环语句，先判断出口条件是否满足，再执行循环体代码。

while (expression) {
    statement
}

for 语句

for (initialization; expression; post-loop-expression) {
    statement
}

for-in 语句

for-in 语句是一种精准的迭代语句，可用来枚举对象的属性

for (property in expression) {
    statement
}

label 语句

使用 label 语句可以在代码中添加标签

label: statement

break 和 continue 语句

break 和 continue 语句用于在循环体中精确控制代码的执行。break 语句会立即退出循环，执行循环体外的代码；continue 语句则是退出当前循环，继续执行下一次循环。

with 语句

with 语句的作用是将代码的作用域设置到一个特定的对象中。如

var qs = locatin.search.substring(1)
var hostName = location.hostName
var url = location.href

上面的代码均用到了 location 对象。可用 with 语句改写：

with (location) {
    var qs = search.substring(1)
    var hostName = hostName
    var url = href
}

switch 语句

switch 语句是一种流控制语句

switch (expression) {
    case value: statement
        break;
    case value: statement
        break;
    ...
    default: statements
}

函数

通过函数可以封装任意多条语句，可在任何地方调用，使用 function 关键字声明，后跟参数以及函数体：

function functionName (arg0, arg1, ... , argN) {
    statement
}

ECMAScript 函数无法实现重载

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 219,539评论 6赞 508
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,594评论 3赞 396
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 165,871评论 0赞 356
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,963评论 1赞 295
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,984评论 6赞 393
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,763评论 1赞 307
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,468评论 3赞 420
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,357评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,850评论 1赞 317
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,002评论 3赞 338
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,144评论 1赞 351
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,823评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,483评论 3赞 331
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,026评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,150评论 1赞 272
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,415评论 3赞 373
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,092评论 2赞 355