js基础(2)~array，object，function，math对象，DOM 节点

1.数组

(1)存储多个同类型的数据时，可以使用 数组(array) ，数组是引用类型。

• 创建数组的2种方式

//第1种创建方式.使用new关键字
var nameList = new Array();
//第2种创建方式，使用[]字面量。
var nameList = [];

(2)数据在数中以索引(序号)进行存储，数据在数组中是有序的。可以通过索引访问数组中的数据，索引是从0开始的。

var arr = [1,2,3];
console.log(arr[0])  //1

(3)数组也是一种对象。所以数组也有属性，其中length属性表示数组的长度，也就是数组中元素的个数。

 var arr = [1,2,3];
    console.log(arr.length)   //3

2.数组常用的方法

• arr[0]使用索引对数组里面的元素进行读与写。
• push方法用于向数组的最后追加一个元素。

 var arr = [1,2,3];
    console.log(arr[0])   //3
    arr.push(4);

• pop用于删除数组中最后一个元素，返回值是删除的这个元素。

var arr = [1,2,6];
    console.log(arr.pop())  //6

数组中的push和pop是一对栈(stack)。栈是一个线性数据结构，只有一个入口同时也是出口，先进后出，后进先出。

• unshift：将一个元素添加到数组的最前端。

var arr = [1,2,6];
    arr.unshift('a')
    console.log(arr)   //[ "a", 1, 2, 6 ]

• shift：从数组最前端删除一个元素，返回值也是删除的元素。

var arr = [1,2,6];
console.log(arr.shift()) //1

Shift和unshift也是一对栈操作。Push和shift是一对，队列(queue)操作。队列是一种线性的数据结构，先进先出，后进后出。

• Splice：有3个参数，用来向数组中添加或者是删除元素：

1参（第一个参数）：从哪个位置开始删(根据索引)，
2参：删除几个元素，
3参：删除之后替换新的元素
前两个参数是必须的，后面的都是可选的
var arr1 = ['a','b','c'];
    arr1.splice(2,1,99,88);
    console.log(arr1)   //[ "a", "b", 99, 88 ]

• Reverse：用于将数组中的元素顺序反转：：

var arr1 = ['a','b','c'];
    arr1.reverse()
    console.log(arr1)  //[ "c", "b", "a" ]

• Slice：用于数组截取，有2个参数。

1参：从哪个位置开始截取(包含)
2参：截取到哪个位置(不包含当前位置元素)，把截取的内容返回到新数组上，原数组不变。
如果不写第二个参数，则截取到最后。
如果第二个参数写-n ，则表示截取到倒数第n个。

var arr1 = ['a','b','c','d','e'];
    console.log(arr1.slice(1,3))   //[ "b", "c" ]

• Indexof：获取元素第一次在数组中出现的索引，如果不包含则返回-1。

var arr1 = ['a','b','c','d','e'];
   console.log(arr1.indexOf('c'))  //2
   console.log(arr1.indexOf('w'))  //-1

• Join：将数组的内容拼接成一个字符串。

var arr1 = ['a','b','c','d','e'];
    var str = arr1.join('')
    console.log(str)  //abcde

3.字符串对象

字符串.startsWith  ，用于判断本字符串是否以参数字符串开头，
	返回值是一个布尔值，如果是则返回true,不是返回false。
字符串.endsWith() ：判断本字符串是否以另一个字符串结尾。

• 字符串.length 表示本字符串中字符的个数(长度)。
• 字符串.substr() 方法，用于字符串截取，

1参：从第几个字开始截，
2参：截多少个字，
返回值就是截取到的新字符串。如果没有传递第二个参数，则截取到字符串末尾。

• 字符串.substring() 方法，字符串截取，

1参：从第几个字开始截(含)，
2参：截取到第几个字(不含)。

substr和substring的区别

相同点：只有一个参数时,两者都是截取字符串从当前下标以后，到字符串最后的字符串片段

let str = 'abcdefgh'
    console.log(str.substr(3))  //defgh
    console.log(str.substring(3))  //defgh

不同点：有2个参数时：
substr（satrt,end）： 第二个参数是截取字符串的长度（从起始点截取end长度的字符串）；
substring（satrt,end）： 第二个参数是截取字符串最终的下标 （截取2个位置之间的字符串,‘含头不含尾’）。

let str = 'abcdefgh'
    console.log(str.substr(2,5))    //cdefg
    console.log(str.substring(2,5))  //cde

• 字符串.split(分隔符)：

用于字符串分隔，参数是分隔符，返回值是一个数组，数组中包含了分隔之后的所有字符串。
a.如果分隔符是空字符串，则会将字符串的每个字符分开。

let str = 'abcde'
    console.log(str.split(''))  //Array(5) [ "a", "b", "c", "d", "e" ]

b.如果不填写分隔符参数，则返回数组中是原字符串.

let str = 'abcde'
    console.log(str.split()) //Array [ "abcde" ]

• 检测当前字符串是否包含有目标字符串，返回bool值，true代表包含

let str = "abc123qwertyu"
    ind =str.includes("23q");
    console.log(ind);  //true

• Valueof是字符串的方法，作用是取出来传递进去的字符串值。本方法对数字类型，布尔类型也能用。

var strObj =new String("123");
var str2 =strObj.valueOf();
console.log(str2);   //123

4.函数

(1)Funtion：声明一个函数，
(2)函数格式：Funtion 函数名（参数列表）{函数体}，

function people(name, age, sex) {}

(3)函数调用格式为:(函数名(实参列表),实参:实际的参数)，

 people("小明", 30, true);

(4)调用函数时,函数的函数体内代码会被执行,函数中的参数值就是本次调用所传递进去的，
(5)参数值,函数调用本身也是一个表达式,表达式的值就是函数的返回值，
(6)函数的作用域：

作用域：每一个参数都有一个作用范围，超过范围就失效，这个范围就叫作用域。

5.Js中数据类型

js中数据类型分为2种：
1.基本数据类型；字符串类型，数字类型，布尔类型
2.引用数据类型：凡是对象都是引用类型，

基本数据类型与引用数据类型的区别：
基本数据类型保存的是值，引用类型保存的是内存地址。

6.对象

(1)对象：把变量，函数整合到一起的一个复杂的数据类型。
对象的三大特征：封装，继承，多态。

对象也有2种创建方式：
1.new：开辟内存，Object()构造对象的函数。对象的声明和实现可以写在一起。

let obj = new Object();

2.对象也可以使用字面量创建法来创建

var obj3 = {
        // 字面量创建的时候属性与属性之间要用,分割
        name: "大哥",
        major: "学生",}
}

(2)属性赋值和常规变量赋值一样，调用的时候只需要对象.属性名。

obj.age = 20;
obj.sex = "男";
//调用时
console.log(obj.age);  //20

(3)当对象的属性后面的赋值变成了函数的时候，那么这个属性叫做对象的方法。调用：对象.方法名。

let obj = new Object();
 obj.eat = function () {
        console.log("今早吃了五个肉包子");
    }   
    //调用时
    obj.eat();

(4)对象就是一个容器，数据在对象中以键值对的形式出现。在下面对象man中：name就是键，大哥就是值。通过键来取值。
(5)删除对象的属性

格式：delete 对象.属性

(6)对象的另一种访问方式：根据键来取值，[]内部要用双引号来包裹键名称。

 var man = new Object();
    man.name = "大哥";
	man.age = 1;
	//取值时
	 console.log(man["name"]);  //大哥 

(7)对象的属性还可以是一个对象。

//对象属性的快递遍历
Forin循环：专门用来做对象属性的遍历，key代表一个空属性。
把obj上面的属性赋值给key
for (var key in obj) {
	//其他的逻辑
}

7.封箱(装箱)操作

当使用基本数据类型调用方法的时候，js执行器就会根据这个类型临时的创建出一个对应的对象，用于封装这个基本数据类型。当使用这个基本数据类型调用方法时，实际上是系统预先设置的对象所提供的方法，用完之后会把这个对象自动释放掉，变成最初的值，这个过程叫封箱操作，作用是减轻程序员的负担。

8.Math对象：

Math对象，js内置对象的一个对象，内置对象的出现主要就是为了解决某种单一的功能。
(1)math对象常用的方法

• 数字比较。

math.max比大
console.log(Math.max(5,3));
math.min比小

四舍五入取整
console.log(Math.round(3.5));
向下取整
console.log(Math.floor(3.5));
向上取整
console.log(Math.ceil(3.5));
随机数
console.log(Math.random());

(2)math对象的其他方法

• 圆周率(做圆周动画的时候需要使用)：Math.PI。

console.log(Math.PI);

自然对数：Math.E
console.log(Math.E);
计算一个数的绝对值
onsole.log(Math.abs(-4));
幂运算，计算x的y次方
console.log(Math.pow(x,y));
开平方
console.log(Math.sqrt(25));
开多次方
console.log(Math.pow(27,1/3));
三角函数，正弦函数。30代表角度(编程语言中只能识别弧度，所以传入角度得到弧度)
console.log(Math.sin(30*Math.PI/180));
// Math.cos余弦 Math.tan 正切 Math.cot余切

9.非布尔值当做布尔值使用

If判断，判断的条件需要写布尔值或者是布尔表达式才可以。

• 如果把非布尔值写入if条件中，程序执行的时候这个值会强制转换为布尔值使用。
• 如果把数字类型作为布尔值使用，那么0为flase，其余都是true。
• 如果把字符串类型作为布尔值使用，空字符串为flase，非空为true。
• 如果把对象作为判断条件来判断，只要是对象有内存，结果就是true。
• Null：代表当前要读取的内容读不到，也是flase。
• 如果参数的值为NAN，或者是字符串，对象，undefined等非数字值读不出来，则使用专门的函数进行判断。

isNAN函数：进行变量判断，满足返回true。用来检测变量是否，是，非数字值。

if (Number.isNaN(v2)==true) {
        console.log("读不出来");
    }

对非布尔值使用逻辑运算符，会把非布尔值先转成布尔值在计算。

let s1 = 45
    console.log(!!s1);   //true

10.DOM节点

DOM(document object model)文档对象模型。
Dom结构(dom树)：浏览器在打开一个html页面之后，会针对当前打开的html页面中的所有标签进行渲染，把每一个标签都解析成一个对象，这些对象以树形的结构关联在一起，这种结构就是dom结构，也就是所谓的dom树。这些标签在解析之后会被存入到document中，document是页面主体标签的一个对象集合，叫做文档对象模型。

一切关于页面对象的操作，都需要经过document来访问，把标签以及样式通过dom转换成了对象或者是方法，js中不能直接操作html标签。

• document代表当前页面的对象。getElementById：根据id来查找元素。查找到之后会以对象的形式返回。

 var obj =document.getElementById("title");
    console.log(obj)

• getElementsByTagName：根据标签名查找符合的所有元素。返回一个列表。

列表不是真正的数组，但是可以像数组一样使用索引对元素进行访问，也可以使用长度。

var p1 =document.getElementsByTagName("p");

• getElementsByClassName：根据class样式查找符合的元素，返回一个列表。

var lines =document.getElementsByClassName("line");

• querySelector：根据样式选择器来查找某个元素。返回的是查询到的页面元素对象。

var hello =document.querySelector("#title");

• querySelectorAll：根据样式选择器来查找所有满足条件的元素，返回列表。

var linqwe=document.querySelectorAll(".line")

== textContent与innerHTML的区别==

textContent单一的显示文本，不去管文本内容，innerHTML在设置内容的时候，会把内容中的标签解析为元素显示出来。