浏览器靠什么执行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... 这些自带的、可直接(方便)使用的对象
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
数据值 存放在栈内存中
实参传给形参时，值传递，函数内改变形参的值时 不会影响实参
复杂数据类型
数据值 放在堆内存中
首先在栈里存放地址，该地址指向堆里的数据
实参传给形参时，(实参的)地址传递，函数内改变形参时 会影响实参
网友评论