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在设置内容的时候,会把内容中的标签解析为元素显示出来。