【JavaScript】 一万字 JavaScript 笔记（详细讲解 + 代码演示 + 图解）

文章目录

• • • • 变量
      • • • 变量声明的提升
          • 数据类型
          • Typeof运算符
          • 数据类型转换
      • 表达式与运算符
      • • • 隐式类型转换
          • toFixed(a)方法保留a位小数
          • 关系运算符
          • 短路求值
          • 流程控制语句
      • 数组
      • 函数
      • DOM
      • BOM
      • 面向对象

变量

• 一个变量只定义但没有赋初值，默认值是 undefined
• 定义变量时必须写var（不用var定义，而直接将值赋给它，随不引发报错，但会产生作用域问题）

变量声明的提升

• 你可以提前使用一个稍后才声明的变量，而不会引发异常

• 再执行所有代码前，js有预解析阶段，会预读所有变量的定义

• 注意：变量声明提升只提升定义不提升值

  console.log(a); // 先使用变量
  var a = 12; // 后定义变量

数据类型

• 基本数据类型

  • Number

    • 所有数字部分大小、不分整浮、不分正负，都是数字类型
    • 较大或较小数（绝对值较小）可以写成科学计数法3e8就是3^8
    • 二进制数值以0b开头，八进制以0开头，十六进制以0x开头
    • NaN，not a number，即“不是一个数”，但它是一个数字类型的值（数学运算中，若结果不能得到数字，结果往往都是NaN，NaN == NaN结果为false）
    • Infinity无穷大或无穷小

  • String

    • 字符串常用方法

    方法

    功能

    charAt()

    得到指定位置字符(越界为空串)

    substring()

    提取子串

    substr()

    提取字串

    slice()

    提取子串

    toUpperCase()

    将字符串变为大写

    toLowerCase()

    将字符串变为小写

    indexOf()

    检索字符串（模式匹配）

    • substring(a, b) 从a开始到b结束的子串，不包括b处；如果省略第二个参数，返回的子串会一直到字符串的结尾，若a > b，会自动调整为小数在前
    • substr(a, b) 从a开始长度为b的子串；如果省略第二个参数，返回的子串会一直到字符串的结尾；a可以是负数，表示倒数位置
    • slice(a, b) 从a开始到b结束的子串，不包括b处；两个参数都可以是负数；a必须小于b，否则没有结果（空串）

  • Boolean

  • Undefined

    • undefined既是值又是一种类型，这种类型只有它自己一个值

  • Null

    • 当我们需要将对象销毁、数组销毁或者删除事件监听时、通常将他们设置为null

• 复杂数据类型

  • Object
  • Array
  • Function
  • RegExp
  • Date
  • Map
  • Set
  • ……

Typeof运算符

可以用来检测值或变量的类型

typeof 5;          // number
typeof 'niubi';   // string

类型名

typeof 检测结果

值举例

数字类型

number

5

字符串类型

string

‘niubi’

布尔类型

boolean

true

undefined

undefined

undefined

null类型

object

null

数据类型转换

使用**Number()**函数

// 字符串 --> 数字
Number('123');        // 123
Number('123.4');      // 123.4
Number('123年');       // NaN
Number('2e3');         // 2000
Number('');            // 0
Number('1 + 1');       // NaN

// 布尔值 --> 数字
Number(true);         // 1
Number(false);        // 0

// undefined 和 null --> 数字
Number(undefined);    // NaN
Number(null);         // 0

**parseInt()**函数将字符串转为整数

将自动截掉第一个非数字字符之后的所有字符

parseInt('3.14');       // 3
parseInt('3.14是圆周率');   // 3
parseInt('圆周率是3.14');    // NaN
parseInt('3.99');           // 3

**parseFloat()**函数将字符串转为浮点数

自动截掉第一个非数字字符、非小数点之后的所有字符

parseFloat('3.14');         // 3.14
parseFloat('3.14是圆周率');   // 3.14
parseFloat('圆周率是3.14');   // NaN
parseFloat('3.99');          // 3.99
// 会自动将true和false转为字符串，结果为NaN

**String()**函数

变成“长得相同”的字符串。科学计数法和非10进制数字会转为10进制的值

String(123);       // '123'
String(123.4);     // '123.4'
String(2e3);       // '2000'
String(NaN);       // 'NaN'
String(Infinity);  // 'Infinity'
String(0xf);       // '15'

String(true);      // 'true'
String(false);     // 'false'

String(undefined);   // 'undefined'
String(null);        // 'null'

**Boolean()**函数

// 数字 --> 布尔值    0和NaN转为false，其他转为true
Boolean(123);    // true
Boolean(0);      // false
Boolean(NaN);    // false
Boolean(Infinity);    // true
Boolean(-Infinity);    // true

// 布尔值 --> 布尔值     空串转为false，其他转为true;
Boolean('');     // false
Boolean('abc');    // true
Boolean('false');  // true

// undefined 和 null --> 布尔值      转为false
Boolean(undefined);      // false
Boolean(null);           // false

**prompt()**函数函数弹出输入框

var num = prompt('请输入第一个数字');    // 返回值为string

表达式与运算符

隐式类型转换

如果参与数学运算的某操作数不是数字型，那么JavaScript会自动将此操作数转换位数字型

隐式转换的本质是内部调用Number()函数

3 * '4' 	 // 12
true + true    // 2
false + 2     // 2
3 * '2天'     // NaN

toFixed(a)方法保留a位小数

Math.pow(2, 3)      // 2^3
Math.sqrt(81)      // 9
Math.ceil()        // 向上取整
Math.floor()       // 向下取整

关系运算符

===     // 全等于
!==     // 不全等于
// 两个等号 == 运算符不比较值的类型，它会进行隐式转换后比较值是否相等

1 == true      // true
1===true       // false

0 == false     // true
0 === false    // false

0 == undefined  // false
0 === undefined   // false

undefined == null  // true
undefined === null    // false

**isNaN()**函数判断变量值是否为NaN

但isNaN()也不好用，它的机理是：只要该变量传入Number()的执行结果是NaN，则isNaN()函数都会得到true

短路求值

a && b a真，值为b；a假，值为a

a||b a真，值为a，a假，值为b

逻辑运算优先级：非 --> 与 --> 或

综合运算运算顺序：非 --> 数学运算 --> 关系运算 --> 逻辑运算

流程控制语句

随机数函数Math.random()

得到[a, b]区间的整数，公式为 parseInt(Math.random() * (b - a + 1)) + a;

数组

var arr = ['A', 'B', 'C', 'D']; 
var arr = new Array('A', 'B', 'C', 'D');
var arr = new Array(4);     长度为4的数组，每一项都是undefined

下标访问越界时返回undefined

var arr = [2, 6, 7, 3];
arr[6] = 4;
console.log(arr);
此时下标越界，不会报错，而是会将数组扩展，下标6处为4，中间为empty

Array.isArray()方法可以用来检测数组

函数

函数定义

// 常规
function fun() {
    // 函数体语句
}

// 匿名函数
var fun = function () {
    // 函数体语句
}

函数声明的提升

fun();
function fun() {    // 在预解析阶段会被提升
    alert("函数被执行");
}

// 如果函数时用函数表达式的写法定义的，则没有提升特性
fun();     // 引发错误
var fun = function () {
    alert("函数被执行");
}

函数优先提升

// 函数优先提升
// 函数表达式后提升； 变量声明提升，无法覆盖提升的函数
fun();    // 弹出B

var fun = function () {
    alert('A');
}

function fun() {
    alert('B');
}

fun();     // 弹出A

实参与形参个数不同

1. 实参个数多于形参，没有形参接收它
2. 实参个数少于形参，没有接收到实参的形参值为undefined

arguments 类数组对象

1. 函数内arguments表示它接收到的实参列表，它是一个类数组对象
2. 类数组对象：所有属性均从0开始的自然数序列，并且有length属性，和数组类似可以用方括号书写下标访问对象的某个属性值，但不能调用数组的方法

var声明与省略

在函数外，用var声明的变量为全局变量，不用var声明的变量为全局变量

在函数中，用var声明的变量为局部变量，不用var声明的变量为全局变量

同为全局变量，同为window对象的其中一个属性，用var声明的变量不可以删除，不用var声明的变量可以删除！

返回值

function sum(a, b) {
    return a + b;
}
var result = sum(3, 5);    // 返回值可被变量接收

若函数没有返回值，则