JS ECMAScript

拼搏现实的明天。 2023-10-05 18:29 34阅读 0赞

JS组成  
ECMAScript JavaScript语法  
DOM 页面文档对象模型  
BOM 浏览器对象模型

1.行内式的js，直接写到元素内部  
`<input type="button" value="Button" onclick="alert('Break')">`  
2.内嵌式js  
`<script> alert('Break'); </script>`  
3.外部js script 双标签  
`<script src="js.js"> </script>`  
引用外部 JS文件的 script 标签中间不可以写代码

为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ_size_16_color_FFFFFF_t_70]

在JS中八进制前面加0，十六进制前面加 0x  
最大值:Number.MAX\_VALUE，这个值为: 1.7976931348623157e+308  
最小值:Number.MIN\_VALUE，这个值为:5e-32  
Infinity ，代表无穷大，大于任何数值  
\-Infinity ，代表无穷小，小于任何数值  
NaN ，Not a number，代表一个非数值

isNaN()  
用来判断一个变量是否为非数字的类型，返回 true 或者 false

var usrAge = 21;
    var isOk = isNaN(userAge);
    console.log(isNum); // false ，21 不是一个非数字 var usrName = "andy";
    console.log(isNaN(userName)); // true ，"andy"是一个非数字

typeof 可用来获取检测变量的数据类型

var num = 18;
    console.log(typeof num) // 结果 number

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

转换为字符串  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ_size_16_color_FFFFFF_t_70 1]  
转换为数字型(重点)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ_size_16_color_FFFFFF_t_70 2]

转换为布尔型  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ_size_16_color_FFFFFF_t_70 3]  
代表空、否定的值会被转换为 false ，如 ‘’、0、NaN、null、undefined

创建数组  
1.利用new创建数组  
var 数组名 = new Array();  
var arr = new Array();

2.利用字面量创建数组  
var 数组名 = \[\];  
var 数组名 = \[‘A’,‘B’,‘C’\];

声明函数

// 声明函数 function 函数名() {
    //函数体代码 }

function 是声明函数的关键字,必须小写  
由于函数一般是为了实现某个功能才定义的， 所以通常我们将函数名命名为动词，比如 getSum

调用函数

// 调用函数
    函数名(); // 通过调用函数名来执行函数体代码

形参和实参  
在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数时， 同样也需要传递相应的参数，这些参数被称为实参

注意:在JavaScript中，形参的默认值是undefined。

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

arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点:  
 具有 length 属性  
 按索引方式储存数据  
 不具有数组的 push , pop 等方法

利用函数求任意个数的最大值

JS没有块级作用域

JS解释器分为两步，预解析和代码执行  
预解析 会把js里的所有var 还有function 提升到当前作用域的最前面  
代码执行 按照代码书写的顺序从上到下

预解析分为 变量预解析（变量提升）和函数预解析（函数提升）  
1.变量提升 就是把所有的变量声明提升到作用域之前，不提升赋值操作  
2.函数提升 就是把所有的函数声明提升到当前作用域的最前面， 不调用函数

在 JavaScript 中，现阶段我们可以采用三种方式创建对象(object):  
 利用字面量创建对象  
 利用 new Object 创建对象  
 利用构造函数创建对象

1.利用字面量创建对象

var star = {
        
    name : 'pink',
    age : 18,
    sex : '男',
    sayHi : function(){
        
    alert('大家好啊~'); }
    };

对象的调用

对象里面的属性调用 : 对象.属性名 ，这个小点 . 就理解为“ 的 ”  
 对象里面属性的另一种调用方式 : 对象\[‘属性名’\]，注意方括号里面的属性必须加引号，我们后面会用  
 对象里面的方法调用:对象.方法名() ，注意这个方法名字后面一定加括号

console.log(star.name) // 调用名字属性
    console.log(star['name']) // 调用名字属性
    star.sayHi(); // 调用 sayHi 方法,注意，一定不要忘记带后面的括号

2.利用new Object创建对象

var andy = new Obect();
    andy.name = 'pink'; 
    andy.age = 18;
    andy.sex = '男'; 
    andy.sayHi = function(){
        
    alert('大家好啊~'); }

3.利用构造函数创建对象

function Person(name, age, sex) {
         this.name = name;
    this.age = age;
    this.sex = sex; 
    this.sayHi = function() {
        
    alert('我的名字叫:' + this.name + '，年龄:' + this.age + '，性别:' + this.sex); }
    }
    var bigbai = new Person('大白', 100, '男'); 
    var smallbai = new Person('小白', 21, '男'); 
    console.log(bigbai.name); 
    console.log(smallbai.name);

遍历对象属性  
for…in 语句用于对数组或者对象的属性进行循环操作。

for (变量 in 对象名字) { // 在此执行代码
    }

语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key。

for (var k in obj) {
        
    console.log(k); // 这里的 k 是属性名 console.log(obj[k]); // 这里的 obj[k] 是属性值

JavaScript 中的对象分为3种:自定义对象 、内置对象、 浏览器对象  
前面两种对象是JS 基础 内容，属于 ECMAScript; 第三个浏览器对象属于我们JS 独有的  
JavaScript 提供了多个内置对象:Math、 Date 、Array、String等

查文档  
MDN: [https://developer.mozilla.org/zh-CN/][https_developer.mozilla.org_zh-CN]

Math 对象  
Math.PI  
Math.floor() //向下求整  
Math.ceil() // 向上取整  
Math.round()// 四舍五入版 就近取整 注意 -3.5 结果是 -3  
Math.abs() // 绝对值  
Math.max()/Math.min()// 求最大和最小值

Math.random() 方法可以随机返回一个小数，其取值范围是 \[0，1)，左闭右开 0 <= x < 1  
`function getRandom(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }`

日期对象  
Date 对象和 Math 对象不一样，他是一个构造函数，所以我们需要实例化后才能使用

Date()方法的使用

1.  获取当前时间必须实例化  
    `var now = new Date(); console.log(now);`
2.  Date() 构造函数的参数  
    如果括号里面有时间，就返回参数里面的时间。例如日期格式字符串为‘2019-5-1’，可以写成new Date(‘2019-5-1’) 或 者 new Date(‘2019/5/1’)  
    如果Date()不写参数，就返回当前时间  
    如果Date()里面写参数，就返回括号里面输入的时间

日期格式化  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ_size_16_color_FFFFFF_t_70 4]  
获取日期的总的毫秒形式  
Date 对象是基于1970年1月1日(世界标准时间)起的毫秒数

// 实例化Date对象
    var now = new Date();
    // 1. 用于获取对象的原始值 
    console.log(date.valueOf()) ;
    console.log(date.getTime());
    // 2. 简单写可以这么做
    var now = + new Date();
    // 3. HTML5中提供的方法，有兼容性问题 var now = Date.now();
    var now = Date.now();

倒计时  
案例分析：  
1 核心算法:输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒 相减，比如 05 分减去25分，结果会是负数的。  
2 用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时 间的毫秒数。  
3 把剩余时间总的毫秒数转换为天、时、分、秒 (时间戳转换为时分秒)  
转换公式如下:  
 d = parseInt(总秒数/ 60/60 /24);  
 h = parseInt(总秒数/ 60/60 %24)  
 m = parseInt(总秒数 /60 %60 );  
 s = parseInt(总秒数%60);

数组对象  
数组对象的创建  
创建数组对象的两种方式  
字面量方式  
new Array()

检测是否为数组  
instanceof 运算符，可以判断一个对象是否属于某种类型  
Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法

var arr = [1, 23];
    var obj = {
        };
    console.log(arr instanceof Array); // true 
    console.log(obj instanceof Array); // false 
    console.log(Array.isArray(arr)); // true 
    console.log(Array.isArray(obj)); // false

添加删除数组元素的方法  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ_size_16_color_FFFFFF_t_70 5]  
数组排序  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ_size_16_color_FFFFFF_t_70 6]  
数组索引方法  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ_size_16_color_FFFFFF_t_70 7]  
数组转换为字符串  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ_size_16_color_FFFFFF_t_70 8]  
else  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ_size_16_color_FFFFFF_t_70 9]  
字符串对象  
基本包装类型  
为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型:String、Number和 Boolean。 基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。

字符串的不可变  
指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。

根据字符返回位置  
字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ_size_16_color_FFFFFF_t_70 10]

根据位置返回字符(重点)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ_size_16_color_FFFFFF_t_70 11]  
字符串操作方法(重点)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ_size_16_color_FFFFFF_t_70 12]  
replace()方法  
replace() 方法用于在字符串中用一些字符替换另一些字符。 其使用格式如下:  
`replace(被替换的字符串， 要替换为的字符串);`

split()方法  
split()方法用于切分字符串，它可以将字符串切分为数组。  
在切分完毕之后，返回的是一个新数组。 例如下面代码:  
`var str = 'a,b,c,d';`  
`console.log(str.split(',')); // 返回的是一个数组 [a, b, c, d]`

toUpperCase() //转换大写  
toLowerCase() //转换小写

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210127130946876.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210127132833270.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210127132924667.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2021012713313648.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ==,size_16,color_FFFFFF,t_70
[https_developer.mozilla.org_zh-CN]: https://developer.mozilla.org/zh-CN/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210127185741543.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210127191342527.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210127191424556.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20210127191442336.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20210127191512914.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20210127191547676.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20210127191800799.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20210127191836418.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20210127191917420.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ==,size_16,color_FFFFFF,t_70