js基础01

js的视图

js组成

ECMAScript（JS核心语法）

DOM文档对象模型

BOM浏览器对象模型

特点

脚本语言：基于对象和事件驱动，弱语言类型，不强制要求数据类型

不需要编译：依赖于浏览器运行解析，解释器解析

面向对象语言：可以创建和调用对象的操作

跨平台性：与操作环境无关，只依赖于浏览器进行解释执行

defer和async的区别

defer按照加载顺序执行脚本，async不一定按照指定顺序执行，脚本的加载和执行紧挨着（异步），只要加载完就立刻执行（页面不用重绘）。async对应用脚本用处不大，因为它不考虑依赖，但对于不考虑依赖的脚本适用

js的执行过程

1.语法检查

2.产生window对象

3.js预解析

a.将var声明的变量提升为window的属性，值为undefined

b.将function声明的函数提升为window属性，值为函数体

有无var关键字声明变量的区别

1.有var声明的会经过预解析，但无var声明，当代码执行到这一行时，才会自动将该变量变为window的属性（自动将该变量变为var声明的）

2.有var声明的变量delete操作符不能删除，无var的变量可被delete操作符删除

3.严格模式下，变量没有var关键字会报错

数据类型

基本数据类型：number，string，Boolean，null，undefined

引用数据类型：数组，对象，函数

数据检测

typeof：会将二进制前三位为0的，判定为object类型（误判null为object）

前三位的数字如下时：

000- 对象，数据是对象的应用

1- 整型

010- 双精度类型，数据都是双精度数字

100- 字符串，数据是字符串

110- 布尔类型，数据是布尔值

null和undefined的区别

null表示空，undefined为系统给定的默认值；

typeof结果null为object，undefined为undefined；

null==undefined，null===undefined

Boolean类型

为false的情况：+0、-0、NAN、“”（空字符串）、undefined、null

其余为true

Number类型

与NAN做算术运算符，结果全为NAN；

与NAN做关系运算符，结果全为false

科学计算法 ：e 1.235e6 表示1.235x10的6次方

toFixed()保留小数，传入几就表示保留几位小数，

不传就取整，不传或参数为0时与round效果一样

注意：toFixed()后会转为字符串类型，需要先转为number类型再做算术运算

var num = 9.98;
console.log(typeof num.toFixed(1));//string
console.log(num.toFixed(1));//'10.0'
console.log(num.toFixed(1) + 100);//'10.0100'

Math对象：

ceil向上取整、floor向下取整、round四舍五入取整、PI圆周率、

pow(x,y)为x的y次方、random为0-1的随机数、max最大、min最小

转字符串为Number类型：

1.空字符串、一个或多个空格字符串——0

2.除空格外都是纯数字字符、数字字符——对应的字面量值

3.含非以上字符，如@字符——NAN

转undefined和null：Number(undefined)为NAN;Number(null)为0

转引用数据类型为Number类型：

1.转数组或者对象：

先调用数组的valueOf()得到原始值，

若原始值不能转换，则通过toString()进行转换，

最后通过Number()

2.转对象：

通过toString()进行转换，再通过Number()

isNaN：判断是否为NAN，先将值转为数值Number()，再判断

String的查找

str.indexOf(searchStr,fromIndex)

返回某个指定的字符串值，在父字符串中首次出现的位置下标

searchStr：是要查找的子字符串(必选)

fromIndex：从哪个下标位置开始查找（可选）

返回值：下标，没有值返回-1

var str = 'html,css,js,css';
console.log(str.indexOf('css',5));//5
console.log(str.indexOf('css', 6)); // 12
举例：
var res = prompt('请输入你的评论');
var mingan = 'vue';
if (res.indexOf(mingan) != -1) {
alert('输入包含敏感词' + mingan);
} else {
alert('输入未包含敏感词' + mingan);
}

字符串的方法

toString()方法 如果是数字调用这个方法，可以传一个参数表示进制数 将当前数字以多少进制进行输出 输出为字符串

var num1 = 3;
console.log(num1.toString(2)); // 11

str.charAt()——> 返回指定位置的字符串

str.charCodeAt()——> 获取指定位置字符的ASCII编码

String.fromCharCode()——> 将指定的ASCII编码值转为对应字符

str.trim()——> 去除前后空格 （num没有length属性，str有length属性）

str.substring(start,end)——> 截取字符串

start（必需）要提取的子字符串的第一个字符的位置（非负整数），end（可选）

str.slice(start,end)——> 截取字符串

start（必需）要提取的子字符串的第一个字符的位置（可负数），end（可选）

str.substr(start,length) ——> 截取字符串

start（必需）要提取的子字符串的第一个字符的位置（可负数），

end（可选）要接收的子字符串的长度

原始与引用类型

1.原始值在做==比较时，比较值相等，引用类型判断引用空间的地址是否相同

2.原始数据类型调用方法之后，原来的值不会被改变；引用类型调用方法之后，原始值可以被改变

3.原始数据类型存储于栈内存，引用数据类型存储于堆内存

4.赋值为原始数据时，是赋值右边的值；赋值为引用数据时，是赋值右边的地址

var arr1 = [100, 200, 300];
var arr2 = [100, 200, 300];
console.log(arr1 == arr2); // false

var arr3 = arr2;
console.log(arr3 == arr2); // true
arr3[3] = 400;
console.log(arr2); // [100, 200, 300, 400]

arr3 = [1, 2, 3];
console.log(arr2); // [100, 200, 300, 400]
console.log(arr3 == arr2); // false

空间作用域

1.全局作用域

全局执行环境被认为是window对象；

所有全局变量和函数都作为window对象的属性和方法创建的；

直到应用程序退出，如关闭网页或浏览器时才会被销毁

2.局部作用域（函数作用域）

函数作用域中所有代码执行完毕后，该作用域被销毁，保存其中的变量和函数定义也销毁

在函数体内，局部变量的优先级高于同名的全局变量。如果在函数内声明的一个局部变量或者函数参数中带有的变量和全局变量重名，那么全局变量就被局部变量遮盖。

函数里边的能访问外边的，优先访问自己函数里边的

函数外边的不能访问函数里边的

函数执行

1.函数内部语法检查

2.产生AO对象

3.函数预编译

a.将形参和var声明的变量提升为AO对象的属性 值为undefined

b.形参赋值为实参

c.将function声明的函数提升为AO对象的属性 值为函数体

4.函数预编译结束 执行函数内部非var非function的代码

5.函数执行完毕AO销毁 保存在AO对象里面的变量以及方法销毁

算术表达式

+：数字相加 或 字符串连接；false+true

加法操作的行为表现：

如果其中一个操作数是引用类型，调用toString，再运算

如果其中一个操作数是字符串的话，则另一个也会转成字符串，然后进行字符串的拼接

如果两个操作数都是数字，则进行加法运算。

如果两个操作数都是非字符串的基础数据类型，则尝试将其他值转为数字（Number），再运算

console.log(new Date() + '--ok');
console.log(typeof new Date()); // 'object'
// 引用数据之事件对象：1. toString()--字符串 2. 进行计算
console.log(new Date().toString());
 // 'Mon Aug 08 2022 10:49:10 GMT+0800 (中国标准时间)'  是一个字符串
// 'Mon Aug 08 2022 10:49:10 GMT+0800 (中国标准时间)' + '--ok'
var time = new Date();
console.log(time.valueOf()); // 时间戳
console.log(typeof time.valueOf()); // 'number'
console.log(time - 1); //时间戳 - 1
console.log(time);
var obj = {};
console.log(obj);
console.log(NaN.toString());//'NaN'   是字符串


var str = '111';
var num = 999;
// 已经知道str是一个纯数字字符串（整数） 让str和另一个操作数做+运算 使其结果为一个数字
console.log(Number(str) + num);
console.log(parseInt(str) + num);
console.log(parseFloat(str) + num);
console.log(str * 1 + num);
console.log(str / 1 + num);
console.log(str - 0 + num);
console.log(str + num);
// if(str + num > ?) {
//     ...
// }

//加法
   console.log(1 + 5);
   console.log('1' + 5);
   console.log(new Date() + '--ok'); 
   var res = new Date(); // Sun Jan 16 2022 11:07:45 GMT+0800 (中国标准时间)
       typeof res; // 'object'
       res.toString(); // 'Sun Jan 16 2022 11:08:17 GMT+0800 (中国标准时间)'
   new Date() + '--ok'; // 'Sun Jan 16 2022 11:08:17 GMT+0800 (中国标准时间)--ok'
   console.log({} + 1); 
   console.log([] + 1); 
   console.log(12 + NaN);
   console.log(true + true);
   console.log(201 + null);
   console.log(203 + undefined);
   console.log(3 + 5 + '猜猜看'); 
/**
加法运算的结果要么是数字要么是字符串
1. 加法操作优先将操作数转为数字进行运算，转换不成功则为NaN,出现NaN则结果为NaN
2. 如果涉及到有操作数为字符串，则应将另一操作数转为字符串再进行拼接
3. 如果涉及到对象，调用toString() 转为字符串后再运算
4. Infinity相加为Infinity，-Infinity加上Infinity则为NaN，-Infinity相加为-Infinity
5. 如果存在多个操作数，字符串在前，则数字相加，在进行字符串拼接。字符串在后，则直接进行拼接。
**/

//减法：
     console.log(true-false);//1
     console.log(new Date()-"3553");// 1659863810451
     var res = new Date(); 
       typeof res; // 'object'
    console.log(res.valueOf(res));//1659865986179
       console.log(res.toString(res));//Sun Aug 07 2022 17:53:06 GMT+0800 (中国标准时间)
     console.log({} - 1); //NaN
   console.log([] - 1); //-1
   console.log(12 - NaN);//NaN
   console.log(true - true);//0 
   console.log(undefined - undefined);  //NaN
   console.log(3 - 5 - '猜猜看');//NaN
   console.log(3 -'猜猜看'- 5  );//NaN
/**
1. 如果两个操作符都是数值,直接进行减法计算出现NaN则为NaN
2. 如果有一个操作数是字符串、布尔值、 null 或 undefined，调用 Number()函数将其转换为数值，然后再计算，
如果转换为NaN，则结果为NaN
3. 如果有一个操作数是对象,调用对象的 valueOf()方法以取得表示该对象的数值。如果得到的值是 NaN，
则减法的结果就是 NaN,如果对象没有 valueOf()方法，则调用其 toString()方法并将得到的字符串转换为数值
4. 如果是-0 减+0，则结果是-0；其余则为+0。Infinity相减为NaN，-Infinity相减为NaN，
-Infinity-Infinity，结果为Infinity
**/


//乘法（乘性运算）：
     console.log(true*false);//0
     console.log(new Date()*"3553");// 5897507105754990
     var res = new Date(); 
       typeof res; // 'object'
    console.log(Number(res));//1659867451254
     console.log({} * 1); //NaN
   console.log([] * 1); //0
   console.log(12 * NaN);//NaN
   console.log(true * true);//1 
   console.log(undefined * undefined);  //NaN
   console.log(3 * 5 * '猜猜看');//NaN
   console.log(3 *'猜猜看'* 5  );//NaN
   console.log(Infinity*Infinity);//Infinity
/**
1. 正正得正，负负得负，超出计量范围，则为Infinity
2. 与Infinity相乘看符号取定正负,Infinity乘0为NaN
3. 如果有一个操作数不是数值,则在后台调用 Number()将其转换为数值，然后再计算
**/

//除法运算：
     console.log(new Date()%"3553");// 363
     var res = new Date(); 
       typeof res; // 'object'
     console.log({}%1); //NaN
   console.log([]% 1); //0
   console.log(12 %NaN);//NaN
   console.log(true % true);//0 
   console.log(undefined % undefined);  //NaN
   console.log(3 % 5 % '猜猜看');//NaN
   console.log(3 %'猜猜看'% 5  );//NaN
/**
1. 如果操作数都是数值,直接进行除法运算，依据符号数量定正负，超出计量范围，则为Infinity或-Infinity
2. 非零数被零除或 Infinity被任何数值除，则结果是 Infinity 或-Infinity，取决于有符号操作数的符号
3. 有一个操作数是 NaN\ Infinity 被 Infinity 除\零被零除，则结果是 NaN
4. 如果有一个操作数不是数值,非数字基础数据类型,在后台调用 Number()将其转换为数值,引用数据类型,
先调用valueOf()得到的值无法计算再toString()，然后将toString()方法得到的结放Number()中转换
**/


//取余运算：
     console.log(new Date()%"3553");// 363
     var res = new Date(); 
       typeof res; // 'object'
     console.log({}%1); //NaN
   console.log([]% 1); //0
   console.log(12 %NaN);//NaN
   console.log(true % true);//0 
   console.log(undefined % undefined);  //NaN
   console.log(3 % 5 % '猜猜看');//NaN
   console.log(3 %'猜猜看'% 5  );//NaN

/**
1. 都为数值，两两相除取余
2. NaN与任何操作数结果都为nan，有限%无限，结果为nan，无限%有限，结果为nan，无限%无限，结果为nan，
有限%0，结果为nan，被除数为0，结果为0
3. 如果有一个操作数不是数值,非数字基础数据类型则在后台调用 Number()将其转换为数值，然后再计算，
引用数据类型,先调用valueOf()得到的值无法计算再toString()，然后将toString()方法得到的结果放
Number()中转换
**/

函数的声明式和表达式

//声明式：
function fn() {}
console.log(fn);
//函数的表达式： //匿名函数名不会被定义和公开
var fnn = function gn() ｛
console.log(11);
｝;
console.log(fnn);
fnn(); //只能通过fnn调用
gn();  //匿名函数名没有被存储，undefined
var obj = {
    sayhello:function () {}
};