递归，简单Dom操作，数组

递归，简单Dom操作，数组

递归

自己调用自己 函数内部调用函数

三大问题因素

1.明确对应要解决的问题

2.明确临界点（终止） if else(没有规律的)

3.明确内部需要调用自己的函数

递归调用的方式:

1. 首先去找临界值，即无需计算，获得的值(一般是返回该值)。 //一般是有结果返回的

2. 找这一次和上一次的关系(一般从后往前找) //函数必须要有参 其次参数之间得到的结果会存再某种关系

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()