JavaScript中阶-CFANZ编程社区

JavaScript中阶

学习的时候找方法建议找API文档，以下是个Api链接

JavaScript 和 HTML DOM 参考手册 (w3school.com.cn)

JavaScript进阶

JavaScript中阶

对象（object）

创建对象
函数

call()和apply()

构造函数
垃圾回收

数组对象

数组遍历

Date对象
Math常用工具类
包装类
DOM

节点(Node)

事件

对象（object）

对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性

1.内建对象

由ES标准中定义的对象，在任何的ES的实现中都可以使用

比如：Math String Number Boolean Function object…

2.宿主对象

由JS的运行环境提供的对象，目前来讲主要指由浏览器对象提供的对象

比如BOM DOM

3.自定义对象

由开发人员自己创建的对象

创建对象

使用new关键字调用的函数，是构造函数constructor，构造函数是专门用来创建对象的函数

var obj = new Object();
obj.name = "刘志成";
obj.sex = "男";
obj.age = 18;
//删除对象的属性
delete obj.name;
console.log(obj.sex);

函数

函数也是一个对象，函数可以封装一些功能(代码)，在需要时可以执行功能

函数中可以保存一些代码在需要的时候调用

使用typeof检查一个函数对象时，会返回function

创建函数对象

//第一种
var fun = new Function("console.log('hello 这是我的第一个函数');");
fun ();
//第二种

function fun1(){
    console.log("第一个函数");
}
console.log(fun1);


function sum (a,b){
    var d = a+b+c;
    return d;
}
var a = sum(4,7,8);
console.log("最终的和"+a);

//立即传参
(function(a,b){
  console.log("a="+a);
  console.log("b="+b);
})(123.456);

call()和apply()

这两个方法都是函数对象的方法，需要通过函数来调用

当对函数call和cappy()都会调用函数执行

在调用call()和apply可以将一个对象指定为第一个参数

此时这个对象会成为函数执行this

call方法可以将实参在对象之后依次传递；apply方法需要将实参封装到一个数组中统一传递

this的情况

1.以函数形式调用时，this永远都是window

2、以方法形式调用，this永远都是调用方法的对象

3、构造函数的形式调用时，this时新创建的那个对象

4.使用call()和apply()调用时，this是指定的那个对象

构造函数

1.立刻创建一个新的对象

2。将新建的对象设置为函数中this

3.逐行执行代码

4.将新建的对象作为返回值

function Person(name,age,gender){
  this.name = name;
  this.age = age;
  this.gender = "男";
  this.sayName = function(){
    alert(this.name);
  };
}
var per = new Person("孙悟空","500","男");
console.log(per);

垃圾回收

当一个对象没有任何的变量或属性对它进行引用，此时我们将永远无法操作对象

此时这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢，

所以这种垃圾必须进行清理。

在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁

我们不需要也能进行垃圾回收的操作

我们只需可以要将不再使用的对象设置null即可

数组对象

数组(Array)也是一个对象，他和我们普通对象功能类似，也是用来存储一些值，不同的是普通对象

是使用字符串作为属性名的。而数组是使用数字来作为索引操作对象

索引：从零开始的整数就是索引。数组的存储性能比普通对象好，在开发中经常使用存储一些数值。

创建数组的三种方式

1、常规方法

var myArray = new Array;
myArray[0] = "北京现代";
myArray[1] = "雪佛兰";
console.log(myArray[0]);

2.简洁方法

var myArray = new Array("北京现代","雪佛兰");
console.log(myArray[0]);

3、字面方法

var myArray = ["北京现代","雪佛兰"];
console.log(myArray[0]);

获取数组的长度(元素个数)可以使用length属性来获取长度

语法：数组.length

var myArray = new Array("北京现代","雪佛兰");
console.log(myArray.length);

获取数组的索引值

语法：数组名.indexof();

var myArray = new Array("北京现代","雪佛兰");
console.log(myArray.indexof("雪佛兰"));

数组的排序

数组名.sort();将数组正常排序，如果是字符串都是按照字符串方式排序

reverse（）：将数组中的元素的顺序反转调换顺序

扩展：将数组先用sort（）方法进行正序排序，在利用reverse（）方法反转，即可达成降序的目的

数组遍历

//创建唐家三少书籍的数组
var arr = ["光之子","酒神","神印王座","善良的死神","琴帝"];
//遍历循环输出元素
for(var i = 0; i<=4;i++){
  console.log(arr[i]);
}

Date对象

在JS中使用Date对象来表示时间

//如果直接使用构造函数创建一个Date对象，则会封装代码为当前时间
var d = new Date();
console.log(d);

//创建指定的时间对象
//需要在构造函数中传递一个表示时间的字符串作为参数
var a = new Date("07/09/2021 08:30:11");
console.log(a);
//注意下日期的格式 月份/日/年  时：分：秒

//获取指定日期对象是几日
var date = a.getDate();
console.log(date);
//获取指定日期是周几
var day = a.getDay();
console.log(day);

Math常用工具类

Math.ceil(x);
//返回x向上取整后的整数值.
Math.floor(x);
//返回x向下取整后的整数值.。
Math.round(x);
//返回四舍五入后的整数.
Math.abs(x)
//返回x的绝对值.
Math.log(x)
//返回0个到多个数值中最大值。
Math.min([x[,y[,…]]])
//返回0个到多个数值中最小值。
Math.pow(x,y)
//返回x的y次幂.
Math.random()
//返回0到1之间的伪随机数（大于等于0，小于1），以当前时间为随机数种子
Math.floor(Math.random() * (max - min + 1) + min); 
// 返回一个介于min和max之间的整型随机数

包装类

在JS中提供了三个包装类，通过这三个包装类可以将基本数据类型转换为对象

String()//将数据基本类型字符串转换为String对象
Number()//将数据基本类型的数字转换为Number对象
Boolean()//将基本数据类型的布尔值转换为Boolean

var num = new Number(3);
var str = new String("志成")；
var bool = new Boolean(true);
console.log(num);
console.log(str);
console.log(bool);

DOM

DOM,全称Document Object Model文档对象模型、

在JS中通过DOM来对HTML文档进行操作，只要了解DOM就可以操作WEB页面

文档表示就是整个的HTML网页文档

对象表示网页中的每一个部分都转换为了对象

模型：使用模型来表示对象之间的关系，方便获取对象

一个最简单的模型
<html>
    <head>
        <title>神印王座title>
    head>
    <body>
        <a href="ttps://www.tianxiabachang.cn/6_6398/">转载a>
    body>
html>

JavaScript中阶_html

节点(Node)

是构成我们网页版最基本的组成部分，网页中的每一个部分都是可以是一个节点。

比如：html标签、属性、文本、注释、整个文档都是一个一个节点

虽然这些都是节点，但是实际上他们的具体类型是不同的。

比如：标签我们称为元素节点，属性是属性节点，文本是文本节点，文档为文档节点

节点的类型不同，属性和方法也都尽不相同。

文档节点：整个HTML文档

元素节点：HTML文档中的HTML标签

属性节点：元素的属性

文本节点：HTML标签中的文本内容

//获取文档属性标签
var   btn = documnet，getElmentById("属性中引号包括的");
//修改按钮的文字
btn.innerHTML = "I'm button";

事件

时间就是文档或浏览器窗口中发生的一些特定的交互瞬间

JavaScript与Html之间的交互是通过事件实现的。主要有代表性事件：点击某个元素，将鼠标移动

移动至某个元素上方，按下键盘上某个键等等。

<script type = "text/JavaScript">
    window.onload = function(){
        var btn = document.getElmentById("btn");
        btn.onclick = function(){
            alert("hello");
        };
    };
script>
<body>
    <button id = "btn">
        单击我
    button>
body>

事件实现的。主要有代表性事件：点击某个元素，将鼠标移动

移动至某个元素上方，按下键盘上某个键等等。

<script type = "text/JavaScript">
    window.onload = function(){
        var btn = document.getElmentById("btn");
        btn.onclick = function(){
            alert("hello");
        };
    };
script>
<body>
    <button id = "btn">
        单击我
    button>
body>