『JavaScript』基础笔记

1. JavaScript 初识

1.1 书写位置

• 行内式

  <input type="button" value="提交" onclick="alert('Hello World')">
  

• 内嵌式

  <script>
  	alert("hello world!");
  </script>
  

• 外部式

  <script src="my.js"></script>  <!-- 引入外部 js 文件 -->
  

1.2 注释

// 单行注释
/*
 * 多行注释
 */

1.3 输入输出语句

// 输入框
prompt('请输入您的年龄：')
// 警示框
alert('红灯停')
// 控制台输出
console.log('控制台输出...')

2. JavaScript 变量

2.1 声明变量

var age;
age = 10;
var sex = '男';
console.log(age);

var age = 18,
    address = '木叶忍者村',
    salary = 2000;

声明变量的特殊情况

var sex;
console.log(sex);   // undefined

console.log(tel);   // 报错，变量未定义

qq = 110;
console.log(qq);    // 110，但是不推荐这么写

2.2 变量命名规范

• 由字母、数字、下划线和 $ 组成
• 大小写敏感
• 不能以数字开头
• 不能是关键字、保留字
• 变量名要有意义
• 遵守驼峰命名法

3. 数据类型

3.1 基本数据类型

• Number

  数字型，包含整型值和浮点型值，默认值为0

• Boolean

  布尔值类型，如 true、false，等价于 1、0，默认值 false

• String

  字符串类型，需要用引号包裹

• Undefined

  声明了变量但是没赋值

• Null

  空值

3.2 数字型 Number

3.2.1 数字型进制

最常见的有二进制、八进制、十进制、十六进制

var a = 010;     // 8，八进制
var b = 0xa;     // 10，十六进制

3.2.2 数字型范围

alert(Number.MAX_VALUE);   // 1.7976931348623157e+308
alert(Number.MIN_VALUE);   // 5e-324

3.2.3 三个特殊值

alert(Infinity);   // Infinity，正无穷
alert(-Infinity);  // -Infinity，负无穷
alert(NaN);        // NaN，非数值

3.2.4 isNaN()

该方法用来判断非数字，如果是数字返回 false，如果不是数字返回 true

console.log(isNan(12));        // false
console.log(isNan("pink"));    // true

3.3 字符串型 String

引号中的任意文本，单引号和双引号皆可，推荐单引号，因为 HTML 标签属性用的双引号

3.3.1 字符串长度

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度

var str = 'I love u';
var len = str.length;

3.3.2 字符串拼接

console.log('沙漠' + '骆驼');   // 沙漠骆驼
console.log('12' + 12);        // 1212

3.4 获取数据类型

typeof 变量
// 有一个例外
typeof Null  // object

3.5 转换为字符串类型

变量.toString()
String(变量)

3.6 转换为数字型

parseInt(变量)      // 返回整数，遇到浮点数就是取整
parseInt(120px)    // 120
parseFloat(变量)    // 返回浮点数
Number(变量)
'12' - 0            // 12
'123' - '120'       // 3
'123' * 1           // 123

3.7 转换为布尔型

Boolean(变量)

• 代表空、否定的值会被转换为 false，如 ‘’、0、Nan、Null、undefined
• 其余值都会被转换成true

4. 运算符

4.1 算数运算符

+、-、*、/、%

加、减、乘、除、取余

4.2 递增/递减运算符

++a;
--a;

b++;
b--;

4.3 比较运算符

• <：小于
• >：大于
• >=：大于等于
• <=：小于等于
• ==：判断相等（会转型）
• !=：不等号
• ===：全等，要求值和数据类型都一致
• !==：不全等

4.4 逻辑运算符

• &&：

  逻辑与

• ||：

  逻辑或

• !：

  逻辑非

4.5 复合运算符

+=、-=、*=、/=、%=

5. 流程控制

5.1 分支结构

if (条件表达式) {
    // 执行语句1
} else if (){
    // 执行语句2 
} else {
    // 执行语句3
}

三元表达式：条件表达式 ? 表达式1 : 表达式2

switch(表达式){
    case value1:
        执行语句1;
        break;
    case value2:
        执行语句2;
        break;
    ...
    default:
    	执行最后的语句;
}

• case 匹配值是是全等

5.2 循环结构

5.2.1 for 循环

for (初始化变量; 条件表达式; 操作表达式) {
    // 循环体
}
for (var i = 1; i < 100; i++) {
    // 循环体
}

5.2.2 while 循环

while (条件表达式) {
    // 循环体
}

5.2.3 do while 循环

do {
    // 循环体
} while (条件表达式)

5.2.4 continue

跳过最近一层的本次循环

5.2.5 break

跳出当前最近一层循环

6. 数组

6.1 数组的创建

var ary = new Array();   // 创建一个空数组

var ary = [];
var list = [1, 2, 3, 4, 5, 6];
var colors = ['red', 'blue', 'green'];
var complex = [1, 'pink', true];      // 可以元素类型不同

6.2 获取数组元素

索引：用来访问数组的序号，从 0 开始

var colors = ['red', 'blue', 'green'];
console.log(colors[0]);     // red
console.log(colors[1]);     // blue
console.log(colors[2]);     // green

6.3 遍历数组

var ary = [1, 2, 3, 4, 5, 6, 7, 8];
for (var i = 0; i < ary.length; i++) {
    console.log(ary[i]);
}

6.4 新增数组元素

• 修改 length 长度扩容，再给新元素位置赋值
• 直接赋值：ary[ary.length + 1] = value;

7. 函数

7.1 函数的声明与调用

function 函数名(参数列表){
    函数体
}

函数名(参数列表);

7.2 函数形参和实参的匹配

• 形参和实参数量一致

  function getSum(num1, num2){
      return num1 + num2;
  }
  getSum(1, 2);  // 3
  

• 实参个数多于形参个数

  function getSum(num1, num2){
      return num1 + num2;
  }
  getSum(1, 2, 3);  // 3
  

  此时超出部分被无视掉

• 形参个数多于实参个数

  function getSum(num1, num2){
      return num1 + num2;
  }
  getSum(1);  // NaN
  

7.3 return 返回值

• return 后面的语句不会被执行
• return 只能返回一个值，如果返回了多个值，以最后一个值为准
• 如果函数没有 return，则返回 undefined

7.4 arguments 的使用

当我们不确定有多少参数与参数传递的时候，可以用 arguments 来获取。在 JavaScript 中，arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。

arguments 展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：

• 具有 length 属性
• 按索引方式存储数据
• 不具有数组的 push，pop 方法

7.5 函数的两种声明方式

• 常规声明

  function func(){
      
  }
  

• 函数表达式

  var 变量名 = function(){};
  

8. 作用域

8.1 全局变量与全局作用域

• 全局变量在代码的任何位置都可以使用
• 在全局作用域下 var 声明的变量是全局变量
• 特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）

8.2 局部变量与局部有作用域

• 只能在函数内部使用
• 在函数内部 var 声明的变量是局部变量
• 函数的形参实际上就是局部变量

8.3 块级作用域

对于 var 定义的变量来说，JavaScript 没有块级作用域！！！

9. 预解析

JavaScript 引擎运行 js 分为两步： 预解析和代码执行

1. 预解析

   js 引擎会把 js 里所有的 var 还有 function 提升到当前作用域的最前面

2. 代码执行

   按照代码书写的顺序从上往下执行

预解析分为变量预解析（变量提升）和函数预解析（函数提升）

• 变量提升就是把所有的变量声明提升到当前作用域最前，不提升赋值操作
• 函数提升就是把所有的函数声明提升到当前用域最前面，不调用函数

【例】

var num = 10;
function fn(){
    console.log(num);
    var num = 20;
    console.log(num);
}
fn();

相当于以下代码：

var num;
function fn(){
    var num;
    console.log(num);     // undefined
    num = 20;
    console.log(num);     // 20
}
num = 10;
fn();

10. 对象

10.1 什么是对象

在 JavaScript 中，对象时一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等

10.2 创建对象的三种方式

• 利用字面量创建对象

  var obj = {};         // 创建空对象
  var obj = {
      username: '瑞雯',
      age: 18,
      sex: '女',
      sayHi: function(){
          console.log('Hi~');
      }
  }
  

  调用对象的属性：对象名.属性名 或 对象名[‘属性名’]

  调用对象的方法：对象名.方法名()

• 利用 new 创建对象

  var obj = new Object();   // 创建一个空对象
  obj.username = '瑞雯';
  obj.age = 18;
  obj.sex = '女';
  obj.sayHi = function(){
          console.log('Hi~');
      }
  

• 利用构造函数创建对象

  function 构造函数名(){
      this.属性 = 值;
      this.方法 = function(){}
  }
  var obj = new 构造函数名();
  

  【例】

  function Hero(username, age, sex){
      this.username = username;
      this.age = age;
      this.sex = sex;
      this.sayHi = function(){
          console.log('Hi~'); 
      }
  }
  var obj = new Hero('瑞雯', 18, '女');
  

10.3 new 关键字执行过程

1. new 构造函数可以在内存中创建一个空对象
2. this 就会指向刚刚创建的新对象
3. 执行构造函数里的代码，给这个空对象添加属性和方法
4. 返回这个对象

10.4 遍历对象

for (变量 in 对象){
    
}

for (k in obj){
    console.log(k);        // 属性名
    console.log(obj[k]);   // 属性值
}

10.5 内置对象

JavaScript 中的对象分为 3 种：自定义对象、内置对象、浏览器对象

前两种对象时 JavaScript 的基础内容，属于 ECMAScript，第三个对象是 JavaScript 独有的

内置对象就是指 JavaScript 语言自带的一些对象，供开发者调用，并提供了一些常用的或是最基本而必要的功能

内置对象最大的优点就是帮助我们快速开发

10.6 Math 对象

Math 对象不是毅哥构造函数，不需要 new 来调用，而是直接使用里面的属性和方法

Math.PI
Math.max()
...

需要用到时查询 MDN 文档

10.7 日期对象

只能通过构造函数调用日期对象

var date = new Date();                            // 当前时间
var date = new Date(2019, 10, 1);                 // 2019-11-01 00:00:00
var date = new Date('2019-10-01 08:08:08');       // 2019-10-01 08:08:08
var date = +new Date();                           // 返回时间戳
var date = Date.now();                            // 返回时间戳

方法名	说明	代码
getFullYear()	获取当年	dObj.getFullYear()
getMonth()	获取当月（0-11）	dObj.getMonth()
getDate()	获取当天日期	dObj.getDate()
getDay()	获取星期几（周日0, 到周六 6）	dObj.getDay()
getHours()	获取当前小时	dObj.getHours()
getMinutes()	获取当前分钟	dObj.getMinutes()
getSeconds()	获取当前秒钟	dObj.getSeconds()

【倒计时】

function countDown(time) {
    var nowTime = +new Date();
    var inputTime = +new Date(time);
    var times = (inputTime - nowTime) / 1000;
    var d = parseInt(times / 60 / 60 / 24); // 天
    d = d < 10 ? '0' + d : d;
    var h = parseInt(times / 60 / 60 % 24); //时
    h = h < 10 ? '0' + h : h;
    var m = parseInt(times / 60 % 60); //分
    m = m < 10 ? '0' + m : m;
    var s = parseInt(times % 60); //秒
    s = s < 10 ? '0' + s : s;
    return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown('2020-11-23 00:00:00'));

10.8 数组对象

var ary = new Array();  // 创建一个空数组
var ary = new Array(2);  // 创建一个长度为2的数组，每个元素为空
var ary = new Array(2， 3);  // 创建一个数组 [2, 3]

【检测是否为数组】

var ary = [];
var isArray = ary instanceof Array;    // instanceof 运算符

var isArray = Array.isArray(ary);       // Array 的静态方法

【添加数组元素】

// push() 在数组末尾添加一个或多个元素
var ary = [1, 2, 3];
var len = ary.push(4, 5, 6);      // [1, 2, 3, 4, 5, 6]，返回的结果是数组新的长度

// unshift() 在数组开头添加一个或多个元素
var ary = [1, 2, 3];
var len = ary.unshift(4, 5, 6);      // [4, 5, 6, 1, 2, 3]，返回的结果是数组新的长度

【删除数组元素】

var ary = [1, 2, 3];
var deleted = ary.pop();       // 删除数组最后一个元素，并将其返回
var deleted = ary.shift();     // 删除数组第一个元素，并将其返回

【数组排序】

var ary = [1, 2, 3, 4, 5, 6];
ary.reverse();    // 翻转数组，原位操作
ary.sort();       // 排序，原位操作，但是是字符串的排序方式，如：[14 , 3, 7, 1] 排序后为 [1, 14, 3, 7]
ary.sort(function(a, b){
    return a - b;  // 返回值 > 0， b 会排列到 a 之前，返回值 < 0，a 会排列在 b 之前，返回值 = 0，相对位置不变
});

【数组索引方法】

var ary = ['red', 'blue', 'green', 'blue', 'yellow'];
var index = ary.indexOf('blue'); // 1
var index = ary.indexOf('black'); // -1
var index = ary.lastIndexOf('blue'); // 3
var index = ary.lastIndexOf('black'); // -1

【数组转换为字符串】

var ary = [1, 2, 3];
var ary1 = ary.toString();  // 1,2,3
var ary2 = ary.join();  // 1,2,3
var ary3 = ary.join('-');  // 1-2-3
var ary3 = ary.join('&');  // 1&2&3

10.9 字符串

字符串不可变，别过分拼接字符串

【字符串查找】

indexOf()、lastIndexOf()

【字符串索引】

charAt()、charCodeAt()、str[index]

【字符串拼接/截取】

【字符串转数组】

11. 简单&复杂数据类型

11.1 分类

简单数据类型又称为基本数据类型或值类型，复杂类型又称为引用类型

• 值类型：存储时存储的是值本身

  string、number、boolean、undefined、null

• 引用类型：存储时存储的时地址

  通过 new 关键字创建的对象（系统对象、自定义对象）

11.2 传参调用

基本类型是值传递，复杂类型是址传递