JS基础学习主要内容

一、JS数组

简单数组的定义：

//1.简单数组
		let arr1=[1,2,3,'a',null,undefined]
		console.log(arr1,length)

复杂数组的定义：

//2.复杂数组
		let arr2=[
			{id:1,name:'刘备',age:36},
			{id:2,name:'孙权',age:30},
			{id:3,name:'曹操',age:32},
		]

两者区别：复杂数组拥有key值和value值。

数组的遍历：

//3.数组的遍历
		arr2.forEach(function(e,i){//e遍历每一个元素
			console.log(e,i)
		})
		//简化表达
		arr2.forEach((e,i)=>{//e遍历每一个元素
			console.log(e,i)
		})

数组的筛选：

//4.数组的筛选，原数组不会被改变，筛选的结果返回到新数组中
		let arr3=arr2.filter((e,i)=>{
			return e.age<35
		})

二、DOM操作

    DOM操作是指通过JavaScript与HTML文档中的元素进行交互的过程。主要包括获取HTML标签、设置值等操作。下面分为单个元素设置和批量元素设置两个方面来进行讲解：

第一、单个元素设置

1.获取。通过getElementById（）来获取body里面的id

2.设置值。通过idname.value来进行值的设置

第二、多个元素的设置

1.获取。获取的方法与单个元素设置相同。

2.设置值。设置一个空字符串s，然后通过forEach函数遍历数组每一个元素，使用模板字符串将其id、name和age属性值拼接成一个li元素的字符串，并将其添加到变量s中。最后，使用innerHTML属性将变量s的值赋给ul1的innerHTML属性，实现了将拼接好的li元素字符串插入到ul元素中。如下代码：

//二、批量设置
		let arr2=[
			{id:1,name:'cc',age:36},
			{id:2,name:'lb',age:34},
			{id:3,name:'sq',age:30},
		]
		//1、获取 ul
		let ul1=document.getElementById('ul1')
		//2.替换
		let s =''
		arr2.forEach(e=>{
			//模板字符串，用``模板字符串引号+${}可以表示在字符串内取字符串外相同模板的字符串
			s+=`<li> ${e.id}-${e.name}-${e.age} </li>`
		})
		ul1.innerHTML=s