递归,简单Dom操作,数组
递归
自己调用自己 函数内部调用函数
三大问题因素
1.明确对应要解决的问题
2.明确临界点(终止) if else(没有规律的)
3.明确内部需要调用自己的函数
递归调用的方式:
-
首先去找临界值,即无需计算,获得的值(一般是返回该值)。 //一般是有结果返回的
-
找这一次和上一次的关系(一般从后往前找) //函数必须要有参 其次参数之间得到的结果会存再某种关系
-
假设当前函数已经可以使用,调用自身计算上一次的运行结果,再写出这次的运行结果 如果当前函数已经使用 那么对应的上一次函数我们会把他当值来进行计算
例题:
1 3 5 7 9 … 问第20位是什么 //fn(2) = fn(2-1)+2 fn(3) = fn(3-1) + 2
function fn(number){//这个里面的number表示的是当前传递的参数 为第几位
if(number==1){ //临界点 已知条件(没有规律)
return 1
}else{ //存在规律的
return fn(number-1)+2 //找到前者和后者的关系(从后往前找) 自己调用自己
}
}
//调用
console.log(fn(20));
1 3 6 10 15 21 问第10位为几
//1 1+2 3+3 6+4 10+5 15+6 上一次的结果+当前是第几位 fn1(10) = fn1(9)+10
function fn1(number){ //number
//找临界点
if(number==1){
return 1
}else{
//fn1(number-1) 上一位 number-1表示的是位数
return fn1(number-1)+number // fn1(number-1) 将他当做值来看
}
}
//调用
console.log(fn1(5));
简单Dom操作
搜索电影名 点击搜索后清除搜索框内容
<input type="text" id="input" placeholder="请输入电影名">
<!-- onclick是所有标签都有的 这个是对应的触发点击事件 里面的值为函数也就是意味着点击这个按钮 调用对应的函数 这个函数调用方式叫做函数的事件调用-->
<button onclick="showInputValue()">搜索</button>
<script>
function showInputValue(){
//先要获取这个input
//document 文档 get获取 element 元素 by通过 id
//通过id获取对应的元素
var inputElement = document.getElementById("input")
//打印对应的里面的value值 input里面显示的内容为value值
var val = inputElement.value;
//清空
inputElement.value = ""
console.log(val);
}
//showInputValue() //也是事件驱动 加载事件 所有的函数都需要通过事件驱动
// document.write("你好 世界")
//通过文档写入 通过输出流直接发送给浏览器 由浏览器自动渲染
//服务器渲染 加载快(首页渲染)
//document.write("hello")
</script>
简易计算器
<input type="text" placeholder="请输入第一个数" id="firstNumber">
<input type="text" placeholder="请输入运算符" id="sym">
<input type="text" placeholder="请输入第二个数" id="lastNumber">
<button onclick="computer()">计算</button>
<input type="text" id="result">
<script>
function computer(){
//获取输入的数值 .value属性获取到是字符串
var firstStr = document.getElementById("firstNumber").value
var lastStr = document.getElementById("lastNumber").value
var symbol= document.getElementById("sym").value
var resultNumber = 0
//先转换类型
var firstNumber = Number(firstStr)
var lastNumber = Number(lastStr)
switch(symbol){
case "+":
resultNumber=firstNumber+lastNumber
break
case "-":
resultNumber=firstNumber-lastNumber
break
case "*":
resultNumber=firstNumber*lastNumber
break
case "/":
resultNumber=firstNumber/lastNumber
break
case "%":
resultNumber=firstNumber%lastNumber
break
default:
}
//将结果赋值给对应的result的input框
result.value = resultNumber
}
</script>
数组
数组 一组数据(可以存放多个数据类型 但是一般建议存放一组数据类型)
数组 可以容纳多个数据 如果数组里面没有数据就是空数组
数组的定义以及使用
1.数组定义 其实也是一个对象(只是对应的数据结构不同)
使用new关键词 Array()
var arr1 = new Array();//声明空数组
// length属性 是表示数组的长度 也就是里面容纳的数据的个数
console.log(arr1.length);//0
var arr2 = new Array(3)//指定数组的长度 里面具备三个元素
console.log(arr2.length); //3
var arr3 = new Array(1,2,3) //指定数组的数据 这个里面包含1 2 3三个数据
console.log(arr3.length);
// 对于数组 除了具备length属性同时还具备下标 可以通过对应的下标来指定对应的元素(进行赋值以及获取)
//下标是从0开始到length-1结束
console.log(arr3[0]); //获取arr3的第一个元素 打印1
arr3[1] = 10; //给第二个元素进行赋值
console.log(arr3[1]);
console.log(arr3[3]);//数组下标超出了 undefined
2.数组定义 使用[]来直接赋值定义
var arr4 = [] //定义一个空数组
console.log(arr4.length);
arr4.length = 4
console.log(arr4.length);
console.log(arr4); // 而是empty 空实体 默认值 undefined
console.log(arr4[0]);
var arr5 = ['a','b','c'] //定义一个有数据的数组
arr5[2] = 'd' //赋值
//arr5的数据就是 ['a','b','d']
console.log(arr5);
console.log("['a','b','c']");
length属性 是可以进行设置的 也可以用来获取对应的数组长度
数组存在下标 下标从0开始到length-1结束 可以通过对应的下标来设置和获取对应的元素数据
一个班级有小红 小明 小绿 小蓝 几个同学 将他们使用一个变量进行存储 打印第二位的名字 修改小绿的名字为小黑
var classOne = new Array('小红','小明','小绿','小蓝');
console.log(classOne[1]);//打印第二位的名字
classOne[2] = '小黑' //修改小绿的名字为小黑
//变量是一个容器 数组也是一个容器 可以装数据的统称为容器
//存在增删改查的方法
数组遍历
遍历 逐个取出来
一般数组遍历使用循环遍历 一般使用for循环
var array = new Array(10,20,30,40,100);
//普通for
for(var i=0;i<array.length;i++){
console.log(array[i]);//取出里面的元素 进行打印
}
//var index 表示里面的下标 in表示在里面 array数组
//for in的形式 专门遍历数组的
for (var index in array) {
//利用下标取出对应的值进行打印
console.log(array[index]);
}
数组 增删改查的方法
unshift和push都会改变原来的数组 且返回的数据都是新的数组长度
增加的方法 :
1、push 追加到后面 插入一个新的数据到末尾位置
2、unshift添加到前面 插入一个新的数据到开始位置
数组里面最好是同类型的数据
var arr1 = ['a']
console.log(arr1);
//里面的类型为你当前里面存储的数据类型 返回值为新的数组长度
console.log(arr1.push('b'));
console.log(arr1.unshift('c'));
某个商品的分类里面有对应的商品 矿泉水。他是按照销量进行排名 有一天 红牛的销量大于矿泉水 旺仔牛奶的销量小于矿泉水。现在需要将他们放在一个数组中 并且打印排名最后的商品
var shopType = ['矿泉水']
shopType.push('旺仔牛奶')
shopType.unshift('红牛')
console.log(shopType[shopType.length-1]);
删除的方法:
pop是删除最后一个 返回这个被删除的元素
shift是删除第一个 返回这个被删除的元素
var arr = new Array(10,20,30);
console.log(arr.pop());//打印删除的元素
console.log(arr);//打印数组
console.log(arr.shift());//打印删除的元素
console.log(arr)//打印数组
定义一个数组 接收一个数据
如果对应的输入的是1的话 删除第一个元素 打印删除的元素 再打印对应的数组
如果输入的是2的话 就添加需要用户输入添加的元素 追加到后面
如果输入的是3的话 就删除最后一个元素 打印删除的元素 再打印对应的数组
如果输入的是4的话 就添加需要用户输入添加的元素 追加元素到第一个
function fn(){
var arr1 = ['hello','world','helloWorld']
var userInput = prompt() //接收一个string类型的值
switch(userInput){ //判断接收的数据为什么
case '1'://数据为1
var rmStr = arr1.shift()
console.log(rmStr);
break;
case '2'://数据为2
var inputAdd = prompt("请输入你要添加的内容")
arr1.push(inputAdd)
break
case '3'://数据为3
var rmStr = arr1.pop()
console.log(rmStr);
break
case '4'://数据为4
var inputAdd = prompt("请输入你要添加的内容")
arr1.unshift(inputAdd)
break
default://都不是 打印输出出错并且调用函数
console.log("输入出错");
fn()
}
console.log(arr1);
}
fn()