JS基础

浏览器靠什么执行JS

渲染引擎：俗称内核，用于解析HTML、CSS，如google浏览器chrome的blink
JS引擎：也叫 JS解释器，用于读取网页中JS代码并处理后运行，如chrome的V8
JS引擎是对JS代码逐行解释执行，所以JS也归为脚本语言。
若某句代码报错，下面部分不再执行。

JS组成

ECMAScript
由ECMA国际标准化(将网景JavaScript、微软Jscript统一标准化)，规定了JS的基础语法。
DOM(Document Object Model)
是W3C组织推荐的处理可扩展标记语音的标准编程接口，通过DOM提供的接口，对页面上各种元素的操作(大小、位置、颜色等)
BOM(Browser Object Model)
提供了独立于内容的、可与浏览器窗口进行交互的对象结构，通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

数据类型

JS是动态语言，变量的类型可以动态变化

字面量

8 代表了 数字类型
'8' 代表了 字符串类型
[] [1,'2'] 代表了 数组类型

逻辑运算

==会把字符串型转为数字类型，'==='则不会

(18 == '18') true 
(18 === '18') false
switch case里用的是===(全等), 判断的变量 可以是 字符串

短路运算：左边的表达式可以确定结果后，就不用计算右边的表达式了

逻辑与 &&
语法：表达式1 && 表达式2
- 如果表达式1为真，则返回表达式2
- 如果表达式1为假，则返回表达式1（短路）（表达式2中断，不执行）
逻辑或 ||
- 如果表达式1为真，则返回表达式1（短路）（表达式2中断，不执行）
- 如果表达式1为假，则返回表达式2

数组

arr[index]

索引号从0开始
索引号超出的取出为undefined
数组长度：arr.length

修改数组

var arr = [1, 3, 5];
//追加一个元素
arr[3] = 7;
arr[arr.length] = 8;
//修改数组长度
arr.length = 7;
arr[4] 为 undefined

函数

函数：封装的一段可重复调用执行的的代码块

function dosth() {
  //do...
}

函数的封装：把一个或多个功能用函数的方式封装起来，对外只提供一个简单的函数接口。

带参数的函数

// 声明
function dosth(形参1，形参2...) {
}
//形参：形式上的参数，不用声明的变量

// 调用
dosth(实参1，实参2...)
//实际的参数

形参的默认值是 `undefined`

形参数与实参数不一致，结果难以预计

function getSum(num1, num2) {  
  console.log(num1 + num2);
}

形参数量 > 实参数量

getSum(1);
实际执行：1 + undefined，结果：NaN

形参数量 < 实参数量

getSum(1, 2, 3);
实际执行：1 + 2，结果：3

函数返回值

function getMax(num1, num2) {  
  return num1 > num2 ? num1 : num2;
}

只返回一个值

function getMax(num1, num2) {  
  return num1, num2; // 实际返回的最后一个值(num2), 若想返回多个 可以使用 数组
}

没有return返回值的函数，调用时返回值为undefined

arguments

arguments 存储了所有传递过来的实参

函数表达式（匿名函数）

// 函数表达式 声明
var func = function() {  
  //do...
}
func(); // 变量func，

作用域

为了减少命名冲突

全局作用域：整个script标签或一个单独的js文件
全局变量，浏览器关闭才销毁，占内存
局部作用域：函数作用域，在函数内部起效果
局部变量，代码块执行结束后会被销毁，省内存
作用域链, 内部函数访问外部函数的变量，就近原则往外层查找。

预解析

Q1

console.log(num);
var num = 10;

结果为 undefined

Q2

fn();
function fn() {
  console.log(11);
}

结果为：11

Q3

func();
var func = function() {  
  console.log(22);
}

结果为：报错

JS解析器在运行js代码时，分两步：预解析、代码执行。
(1)预解析：js引擎会把js代码中的var、function提升到当前作用域的最前面
变量提升(变量预解析)：把所有的变量声明提升到当前作用域的最前面(不提升赋值操作)
函数提升(函数预解析)：把所有的函数声明提升到当前作用域的最前面(不调用函数)
(2)代码执行：按照预解析后的代码顺序，顺序执行

JS对象

对象，是由属性、方法组成。

属性
事物的特征，在对象中用属性表示。
方法
事物的行为，在对象中用方法表示。

创建方式

1. 字面量 `{}`

var obj = {}; //创建一个空对象

var obj = {
  name: '张三疯',
  age: 18,
  sayHi: function() {
    console.log('Hi~');
  }
}

调用属性

obj.name
obj['name']

2. new Object

var obj = new Object();
obj.uname = 'zhangsan';
obj.age = '18';
obj.sayHi = function() {
  console.log('Hi~');
}

3. 构造函数

定义：把对象里面一些相同的属性、方法抽象出来封装到函数里。

function Star(uname, age, sex) {
  this.name = uname;
  this.age = age;
  this.sex = sex;
  this.sing = function(song) {
    console.log(song);
  }
} // 不需要 return..
var ldh = new Star('刘德华', 18, ‘男’);
ldh.sing('冰雨');

new 关键字执行时做了四步处理：

在内存中创建一个空对象
将this 指向该对象
执行构造函数里的方法，添加属性、方法，赋值操作
返回该对象

for (var k in obj) {
  k; //属性名 key，也包括方法名
  obj[k]; //属性值
}

内置对象

JS中的对象分3种：自定义对象、内置对象、浏览器对象
前2种属于ECMAScript，第3个属于JS独有的

如：Math、Array、Date... 这些自带的、可直接(方便)使用的对象

可查阅 MDN中文文档。eg: 搜到了max()

Math

Math 不是一个构造器。Math 的所有属性与方法都是静态的。

Math.abs(-1); Math.floor(1.6); Math.ceil(1.3); 
Math.round(1.4);  // 四舍五入
Math.random(); // 返回随机小数, [0, 1)区间
//两个数[min, max]之间的 随机整数
return Math.floor(Math.random() * (max - min + 1)) + min;

Date

是构造函数

// 不传参数时，当前时间
var date = new Date(); //Sun Jul 19 2020 20:56:49 GMT+0800 (中国标准时间)
// 传参时
var date = new Date(2019, 3, 26); // Fri Apr 26 2019 00:00:00 GMT+0800 (中国标准时间)

常用的

date.getFullYear(); //年
date.getMonth(); //月； 返回当前月份0~11，需要做 +1 处理
date.getDate(); //日
date.getHours(); //时
date.getMinutes(); //分
date.getSeconds(); //秒

时间戳

Date的总毫秒数，是距离1970年1月1日多了多少毫秒数

date.valueOf();
date.getTime();
// 第3种写法，最常用的
var date1 = +new Date(); // 返回的就是 总的毫秒数
// 第4种 (H5 新增的方法)
Date.now();

数组对象

字面量方式创建

var arr = [1, 2, 3]

new Array() 方式

var arr = new Array(); // 创建了1个空数组
var arr = new Array(2); // 只有一个形参，表示数组长度是2
var arr1 = new Array(1, 2); // 有超过1个形参，表示数组元素是 1、2

检测是否为数组

console.log(arr instanceof Array);
Array.isArray(arr); // H5新增的 IE9以上才支持

添加元素

// 数组末尾添加元素
arr.push(4, 'pink'); //返回结果为 数组长度
// 数组开头添加元素
arr.unshift(1, 'hah');  //返回结果为 数组长度

删元素

// 删除数组最后一个元素
arr.pop(); // 返回 删除的那个元素
// 删除数组的第一个元素
arr.shift();

字符串对象

str.indexOf('春');
str.indexOf('春', 3); //从指定的位置3处开始查找

str.charAt(3); //①
str.length;
str.charCodeAt(3); // ②返回该index下的字符 所对应的ASCII值
str[3]; //③H5新增的方法

str.substr(2, 3); //从索引2开始取长度为3的substr
str.replace('a', 'b'); //用'b'替换'a'，但只能替换一次

'a,b,c'.split(','); //输出 [a, b, c] // 与join相反

简单、复杂数据类型

简单数据类型

string, number, boolean, undefined, null
数据值存放在栈内存中

实参传给形参时，值传递，函数内改变形参的值时不会影响实参

复杂数据类型

数据值放在堆内存中
首先在栈里存放地址，该地址指向堆里的数据

实参传给形参时，(实参的)地址传递，函数内改变形参时会影响实参