js知识回顾

目录

数据类型和类型转换

js数组和函数

js-dom

js点击事件

---

数据类型和类型转换

数据类型和变量
        let用于定义数据的类型，js中数据类型统一为let表示
        js中只有6中数据类型
        每句话最后面不推荐使用“;”
        分别是数值型、string、boolean、null 和 undefined

console对象用于 JavaScript 调试。

JavaScript 原生中默认是没有 console 对象,这是宿主对象（也就是游览器）提供的内置对象

log属性表示输出一个变量或者字符串

let a = 2
console.log(a)
a = 'sss'
console.log(a)
a = true
console.log(a)
a = null
console.log(a)
a = undefined
console.log(a)

四种基本类型转boolean

• number数据类型，转换成boolean时，如果值为0或者NaN，就为false；否则为true
• string数据类型，转换成boolean时，如果值为''空字符串时，就为false；否则为true
• null 和 undefined 都会转换成false

所以：这里在判断时建议直接使用值，不用进行比较，更加规范一点

let b = 18;
// 如果b不能0输入1，否则输入0
if(b!=0){
	console.log(1)
}else{
	console.log(0)
}
// 该if-else语句等效于
if(b){
	console.log(1)
}else{
	console.log(0)
}
		
let c = 'aaa'
if(c){
	console.log(1)
}else{
	console.log(0)
}

js数组和函数

数组

• js中数组的表示使用"[ ]"，而非"{ }"
• js中的数组可以存放任意的数据类型
• js中的null占用一个空间
• js中的数组可以存放函数

函数

• 函数有两种创建方式
• 第一种：function f1(){} 函数名为f1
• 第二种：let f2 = function(){} 函数为匿名函数，但是f2指向该函数

数组的遍历

• 数组的遍历有两种方式：
• 第一种：普通foreach循环，e表示其中的每一个元素，i表示元素的编号
• 第二种：箭头函数（foreach简化模式）

数组的筛选

• filter()属性表示数组的筛选
• 数组筛选之后原数组不会发生改变。而是将筛选之后的数组放入到一个新的数组中去进行输出

<script>
	//1、简单的数组
	let a = [11,2.3,'sd',true,null,undefined,null];
	console.log(a.length)
		
	//2、复杂的数组
	let b = [
		{id:1,name:"曹操",age:36},
		{id:2,name:"刘备",age:34},
		{id:3,name:"孙权",age:30},
	]
	console.log(b)
		
	//3、函数的两中定义方式
	function f1(){
		console.log("f1()函数")
	}
		
	let f2 = function(){
		console.log("f2()函数")
	}
		
	//4、数组的遍历
	b.forEach(function(e,i){
		console.log(e,i)
	})
		
		// foreach简化 箭头函数
	b.forEach((e,i)=>{
		console.log(e,i)
	})
		
	// 5、数组的筛选
	let c=b.filter((e)=>{
		return e.age < 35
	})
	console.log(c)
</script>

js-dom

什么是js的dom操作？

1. 和html进行交互
2. 获取html标签，返回一个元素对象
3. 设置值

获取值的时候使用document.getElementById()获取，getElementById()需要获取一个id值，所以我们要提前设置一个id属性

设置值有两种方式：

1. 获取到的值，可以选择用一个变量来接收通过对接收到的变量来对其中的值进行修改
2. 或者使用匿名对象 document.getElementById("inp1").属性 = 值，直接通过匿名对象进行修改，不需要创建新的对象，但是只能使用一次

当我们想通过设置遍历数组，为其他元素赋值，可以使用` `模板字符串来快速赋值

<script>
// 单个元素的设置
	// 1、获取
	let inp1 = document.getElementById("inp1")
	// 2、设置
	inp1.value="bb"
	// 匿名修改 document.getElementById("inp1").value="cc"
	
// 多个元素的设置	
	// 将ul里面的内容，改为数组中的内容
	let b = [
		{id:1,name:"曹操",age:36},
		{id:2,name:"刘备",age:34},
		{id:3,name:"孙权",age:30},
	]
	// 1、获取ul
	let ul1 = document.getElementById("ul1")
		
	// 2、设置
	let s = ''
	b.forEach((e)=>{
		return s+=`<li>${e.id}-${e.name}-${e.age}</li>`
	})
	ul1.innerHTML = s
</script>

js点击事件

要求：我们想设置一个按钮，只有当我们点击按钮时，才会用数组b中的值替换掉无序列表中的值。

分析：我们可以设置一个函数，因为函数在没有被调用时，其中的代码是不会被使用的。

           为按钮添加一个点击事件，和函数进行绑定。

onclick表示用户在单击时产生的事件

` `这里表示的是模板字符串

`<li>${e.id}-${e.name}-${e.age}</li>`  ${e.id}表示从数组中该属性依次取值

let s = ''

b.forEach((e)=>{
    return s+=`<li>${e.id}-${e.name}-${e.age}</li>`
})

ul1.innerHTML = s

这里声明一个变量s，通过遍历修改为数组中的三个值，最后将ul1的值改为s的值

innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

这里就是将<li></li>之间的内容设置为html代码

<button onclick="changeTest()">替换按钮</button>
<ul id="ul1">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>

<script>
	// 要求点击按钮之后才替换列表中的内容
	let b = [
		{id:1,name:"曹操",age:36},
		{id:2,name:"刘备",age:34},
		{id:3,name:"孙权",age:30},
	]
	// 1、获取ul
	let ul1 = document.getElementById("ul1")
		
	function changeTest(){
        // 2、设置
	    let s = ''
		b.forEach((e)=>{
			return s+=`<li>${e.id}-${e.name}-${e.age}</li>`
		})
		ul1.innerHTML = s
	}
</script>