第三章 JavaScript-元素和字符串
一、数组
1.数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
// 数组是有序元素的集合，使用数组可以表示若干个数据，并通过数组索引（下标）表示数组元素
// 数组里的数据被称作数组元素，是指存储在数组中并赋予唯一索引值的数据
// JS采用弱类型语言，数组元素可以是任意类型的数据
var arr = [1,'3',true]
console.log(arr)
</script>
</html>
2.数组的遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
// 遍历数组就是把数组中的每一个元素都输出出来
var arr = ['张三', '李四', '王五']
// 1.for循环遍历数组
for (var i = 0; i < arr.length; i++) {
console.log(arr[i])
}
// 2.for in 遍历数组
for (var i in arr) {
console.log(arr[i])
}
// 3.forEach遍历数组
arr.forEach(function (value) {
console.log(value)
})
// 练习
function Person(name, age) {
this.name = name
this.age = age
}
var per1 = new Person('小明', 16)
var per2 = new Person('小红', 17)
var per3 = new Person('小丽', 18)
var per4 = new Person('小王', 19)
var per5 = new Person('小五', 20)
var perArr = [per1, per2, per3, per4, per5]
console.log(perArr)
// 创建一个函数将perArr中年龄大于等于18岁的提取出来
// 然后封装到一个新的数组里面，输出新的数组
// 创建函数，由于我们要处理perArr数组里的数据，所以要传入一个参数，等到调用函数时，直接把perArr传里
function getAdult(arr) {
// 创建一个新的数组，用来接收处理后的数据
var newArr = []
// 遍历参数的数组
for (var i = 0; i < arr.length; i++) {
// 如果数组里的某个元素的age大于等于18
if (arr[i].age >= 18) {
// 就会把这个元素添加到新的数组里
newArr[newArr.length] = arr[i]
}
}
// 输出新数组
console.log(newArr)
}
// 调用函数，将要处理的数组传进去
getAdult(perArr)
// 数组元素求和
var array = [10,20,30,40]
var s = 0
for(var i = 0; i<array.length; i++){
// console.log(array[i])
s += array[i]
}
console.log(s)
</script>
</html>
3.数组的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
var arr = ['斗鱼', '虎牙', '抖音', '拼多多']
console.log(arr)
// 返回数组元素的下标，如果找不到，返回-1
console.log(arr.indexOf('抖音'))
// 返回字符串，由数组中所有元素拼接而成，默认用逗号分隔，可以改变
// var result = arr.join('|')
// console.log(result)
// 返回一个新数组，由原数组反转而成
// var result = arr.reverse()
// console.log(result)
// 向数组的末尾添加一个或多个数据，并返回数组的长度
var result = arr.push('快手', '微信')
console.log(result)
console.log(arr)
// 删除并返回数组中的最后一个元素
var result1 = arr.pop()
console.log(result1)
console.log(arr)
// 删除并返回数组中的第一个元素
var result2 = arr.shift()
console.log(result2)
console.log(arr)
var array = [22, 11, 88, 9]
// 返回一个排列后的新数组，数字只比较最高位，字母按照字母的字符编码进行排列
var result3 = array.sort()
console.log(result3)
// 排列方法
function sortNumber(a,b){
// 从小到大
// return a - b
// 从大到小
return b - a
}
console.log(array.sort(sortNumber))
// 把数组转换成字符串
var result4 = array.toString()
console.log(result4)
// 合并数组
var newArr = arr.concat(array)
console.log(newArr)
// 数组的裁剪，获取到原数组中的一段元素
// 第一个参数：开始截取时数组下标对应的位置
// 第二个参数：第n的元素
var result5 = newArr.slice(2,5)
console.log(result5)
</script>
</html>
4.字面量创建数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
// 使用字面量创建数组
// var arr = []
// console.log(arr)
// 使用字面量创建数组可以直接添加数组元素
var arr = [1, 2, 3, 4, 5, 6, 7]
console.log(arr)
// 使用构造函数创建数组也可以直接添加数组元素
var newArr = new Array(10, 20, 30, 40)
console.log(newArr)
// 字面量创建对象
var person = {
name: '小明',
age: 18
}
// 数组里添加对象
arr[arr.length] = person
console.log(arr)
console.log(person.name)
console.log(arr[7].name)
// 数组里添加函数
arr[arr.length] = function fun() {
alert('这是数组的函数')
}
console.log(arr)
console.log(arr[8])
// 调用数组里的函数
arr[8]()
</script>
</html>
5.构造函数创建数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
// 使用构造函数创建数组
var arr = new Array()
// 输出空数组
console.log(arr)
// 数组在JS里不是单独的数据类型，而是对象
console.log(typeof(arr))
// 添加数组元素
// 数组[索引值] = 数据
arr[0] = 10
arr[1] = 20
arr[2] = 30
arr[3] = 40
arr[4] = 50
console.log(arr)
// 对于连续型的数组来讲，数组长度会比数组下标的最大值多1
console.log(arr.length)
// 非连续性的数组，使用length会获得最大索引值+1
// arr[10] = 100
// console.log(arr.length)
// 手动修改数组的长度，如果大于原数组，多余的部分会空出来,如果小于原数组，会把多余的数据删掉
// arr.length = 3
// console.log(arr)
// 向数组的末尾添加数据
// 语法：数组[数组.length] = 值
arr[arr.length] = 100
console.log(arr)
</script>
</html>
二、字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
// 字符串是JS常用的一种数据类型，常用方法如下：
// charAt() //返回在指定位置的字符
// concat() //连接字符串
// indexOf() //检索字符串
// slice() //提取字符串的片段，并在新的字符串中返回被提取的部分
// split() //把字符串分割为字符串数组
// substr() //从起始索引号提取字符串中指定数目的字符
// subString() //提取字符串中两个指定的索引号之间的字符
// toLowerCase() //把字符串转换成小写
// toUpperCase() //把字符串转换成大写
// toString() //返回字符串
var str = 'Hello,World'
console.log(str.split(',',1))
</script>
</html>
三、查找元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
}
</style>
</head>
<body>
<div>学习DOM，首先要找到</div>
<span class="sp">这是通过类选择器查找到的元素</span>
<p id="article">用id选择器查找到</p>
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
<li>006</li>
<li>007</li>
</ul>
</body>
<script>
// 通过选择器查找元素
var div = document.querySelector('div')
console.log(div)
var span = document.querySelector('.sp')
console.log(span)
var p = document.querySelector('#article')
console.log(p)
// 找到一组元素，放到数组里，可以使用数组相关方法
var lis = document.querySelectorAll('li')[0]
console.log(lis)
</script>
</html>
总结
熟练掌握数组和字符串的使用，学会查找元素
1498
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
