JavaScript day7
事件处理函数的问题
// 代码并不永远是从上而下执行的
console.log(111);
// 事件处理函数是后面才执行的，也就是点击的时候才会执行
document.onclick = function () {
console.log(666);
}
console.log(222);
function fn() {
fn2()
function fn2() {
return 2
}
return 3
}
var res = fn() ;
console.log(res);
知识点回顾
函数：
形参和实参，不对等的
短路赋值
字符串拼接(返回很多个值的时候，使用字符串拼接)
作用域 !!!!!!
全局，局部，作用域是相对的(子函数可以访问到父函数的变量)
形参：本质就是一个局部变量
预编译
提升var和具名函数
函数：一种数据类型
系统函数 prompt() confirm() eval()
递归：传递与回归，自己调用自己
欧几里得求最大公约数
// 8 12
// 8 / 12 8
// 12 / 8 4
// 8 / 4 0
// 4 / 0
// 3 7
// 3 / 7 3
// 7 / 3 1
// 3 / 1 0
// 1 / 0
// a % b === 0 b就是最大公约数
function gcd(a , b) {
// if(a % b === 0) {
// return b
// }
// return gcd(b , a % b)
return a % b === 0 ? b : gcd(b , a % b)
}
// b为0的时候，a就是他们的最大公约数
// function gcd(a,b){
// return b===0?a:gcd(b,a%b);
// }
var res = gcd(28,18)
console.log(res);
作业产生0
随机产生0-100之间的数，多少次才会抓到0 -- 递归？
var count = 0 ;
for(var i = 0 ; ; i++) {
var a = parseInt(Math.random() * 100) ;
count++
if(a === 0) {
break ;
}
}
console.log(count);
var count = 0;
function randZero() {
var a = parseInt(Math.random() * 100) ;
count++ ;
if(a == 0) {
return count
}
return randZero()
}
console.log(randZero());
arguments
// console.log(1);
// console.log(1,2);
// console.log(1,2,3);
// function sum(a,b) {
// return a + b
// }
// console.log(sum(1,2,3,4));
// 一般情况下，使用形参来接受实参的值
// 话可以使用arguments来接受实
function log() {
// 伪数组 / 类数组
console.log(arguments);
console.log(arguments[0]);
console.log(arguments[1]);
// console.log(arguments[2]);
console.log(arguments.length);
}
log(1,2)
数组
// var a = 1 ;
// var b = 3 ;
// var c = 5 ;
// var d = 2 ;
// 数组：存储一组相同数据类型的数据
var arr = [1,3,5,,2] ;
console.log(arr);
// 数组下标 访问数组的值的方法：arr[index]
console.log(arr[0]);
// 数组的长度
console.log(arr.length);
console.log(arr[3]);
// var arr = ['a' , 'b' , 'c'] ;
// var arr = [1,2,'a','b',true] ; // 不太规范
数组的长度
var arr = [1,2,3] ;
console.log(arr[10]); // undefined
// [1,2,3,,,,,,,20]
// 实际上变相的加长了数组的长度
arr[10] = 20 ;
console.log(arr[10]);
console.log(arr.length); // 11
console.log(arr);
数组的声明
var arr = [1,2,3] // 字面量声明
// 数组是一个对象
var arr = new Array(1,2,3) ; // 实例化一个对象 Array构造函数(用于创建对象的)
console.log(arr.length);
console.log(arr);
var a = 1 ; // 字面量声明
var b = new Number(2) ; // 实例化一个对象
console.log(a);
console.log(b);
var c = 'hello' ;
var d = new String('hello') ;
// 当Array只有一个参数的时候，表示数组的长度
var arr2 = new Array(10) ;
console.log(arr2);
声明一个空数组，向数组中追加值
var arr = [] ;
arr[0] = 'a' ;
arr[1] = 'b' ;
arr[2] = 'c' ;
arr[10] = 'f' ;
生成10个随机数存入数组
// 生成10个数，存入数组
// 生一个，存一个
// 创建一个空数组
var arr = [] ;
for(var i = 0 ; i < 10 ; i++) {
// arr[i] = rand(0,100) ;
arr[arr.length] = rand(0,100);
}
console.log(arr);
数组的遍历
// 遍历：读取数组中的每一个值
var arr = [1,2,3,4,,,,5] ;
// console.log(arr[0]);
// console.log(arr[1]);
// console.log(arr[2]);
// 循环遍历
// for(var i = 0 ; i < arr.length ; i++) {
// console.log(arr[i]);
// }
// for in 用于遍历对象的角标 -- bug(自动过滤掉空值)
// for(var i in arr) {
// console.log(arr[i]);
// }
// for of 遍历对象 的值
for(var v of arr) {
console.log(v);
}
存入10个数，求平均数
// 抓10个数字，放进数组
// var n1 = rand(0,100) ;
// arr[0] = n1 ;
// var n2 = rand(0,100) ;
// arr[1] = n2 ;
// var n1 = rand(0,100) ;
// arr[2] = n1 ;
// var n1 = rand(0,100) ;
// arr[3] = n1 ;
// for(var i = 0 ; i < 10 ; i++) {
// // var n = rand(0,100) ;
// // arr[i] = n ;
// arr[i] = rand(0,100);
// }
// console.log(arr);
// 1-100存入数组
// var arr = [1,2,3,4,5,6,7.....]
var arr = [] ;
// arr[0] = 1 ;
// arr[1] = 2 ;
// ...
for(var i = 0 ; i < 100 ; i++) {
arr[i] = i + 1 ;
}
console.log(arr);
// 把数组中所有的数求和
var sum = 0 ；
// 遍历数组
for(var i in arr) {
sum += arr[i]
}
var res = sum / arr.length ;
console.log(res);
数组随机取值
封装函数：求数组中的平均数
参数，返回值
function averageArr(arr) {
// 数组中的所有数求和
var sum = 0 ;
// 遍历数组
for(var v of arr) {
sum += v
}
// 求平均数
return sum / arr.length
}
var arr = [] ;
for(var i = 0 ; i < 10 ; i++) {
// var n = rand(0,100) ;
// arr[i] = n;
// 每次赋值之后，数组的长度都会发生改变
arr[arr.length] = rand(0,100) ;
}
console.log(arr);
var res = averageArr(arr) ;
console.log(res);
// 从数组中随机取一个值
function randOneArr(arr) {
// 取值是通过下角标取的
// 随机取值 -> 随机下标 -> 0-length
var i = rand(0,arr.length) ;
return arr[i]
}
var res = randOneArr([1,2,3,4,5,11,7,8,8,9])
console.log(res);
随机验证码
var arr = ['a','b','c','d','e','f','A','B','C','E','1','2','3','4'];
var res = '' ;
for(var i = 0 ; i < 4 ; i++) {
// var j = rand(0,arr.length) ;
// var v = arr[j] ;
// res += v;
res += arr[rand(0,arr.length)] ;
}
console.log(res);
找到数组中的最大值
找到数组中的最大值
一一比较
假设第一个值最大
9 8 6 3 1
假设第一个值最大 max = 9 ;
9 8 比较 9
var arr = [6,3,2,11 , 34,8] ;
// 假设第一个值最大
var max = arr[0] ;
// 拿他和后面的所有数比较
for(var i = 1 ; i < arr.length ; i++) {
// 如果这个数比后面的数要小
if(max < arr[i]) {
// max 只存储最大的那个数
max = arr[i]
}
}
console.log(max);
function maxArr(arr) {
// var arr = [6,3,2,11 , 34,8] ;
// 假设第一个值最大
var max = arr[0] ;
// 拿他和后面的所有数比较
for(var i = 1 ; i < arr.length ; i++) {
// 如果这个数比后面的数要小
if(max < arr[i]) {
// max 只存储最大的那个数
max = arr[i]
}
}
console.log(max);
return max
}
// 找到数组中是否存在某个值 [1,2,3,4,56] 3
// 把数组中的值拼接成字符串 [1,2,3,4] '1,2,3,4'
找到数组中是否存在某个值
找到数组中是否存在某个值
把要找的这个值与数组中的每一个值作比较
var arr = [1,2,3,4,5] ;
// 因为找到他存在的证据很容易
var flag = false ;
// 遍历数组
for(var v of arr) {
if(22 === v) {
// alert('存在')
flag = true ;
}
}
// 比较结束以后，才能说找不到
alert(flag)
function includes(arr , n) {
// 因为找到他存在的证据很容易
// var flag = false ;
// 遍历数组
for(var v of arr) {
if(n === v) {
// alert('存在')
// flag = true ;
// 如果已经找到了就不需要继续找
// break ;
return true
}
}
// 比较结束以后，才能说找不到
// return flag
return false
}
var res = includes([1,2,3,4] , 12)
console.log(res);
数组拼接成字符串
// 把数组中的值拼接成字符串 [1,2,3,4] -> 1,2,3,4
// 思路：把数组中的每一个值拼接到字符串中
var arr = [1,2,3,4];
var res = '' ;
for(var i in arr) {
// 最后一个不加逗号
console.log(i); // for in 一般用于遍历对象，字符串
if(i == arr.length - 1) {
res += arr[i]
} else {
res += arr[i] + ','
}
}
一般，数组的遍历直接使用for循环
for(var i = 0 ; i < arr.length ; i++) {
// 最后一个不加逗号
console.log(i); // 字符串
res += i < arr.length - 1 ? arr[i] + ',' : arr[i]
}
console.log(res);
function join(arr , f) {
for(var i = 0 ; i < arr.length ; i++) {
// 最后一个不加逗号
// console.log(i); // 字符串
res += i < arr.length - 1 ? arr[i] + f : arr[i]
}
console.log(res);
return res
}
join([1,2,3,4] , '')
冒泡排序
// 数组中的值从小到大排序
var arr = [8,5,3,2,1] ;
// 思路
// 第一轮 拿到最大值放在最后面
// 8 5 5 8 3 2 1
// 8 3 5 3 8 2 1
// 8 2 5 3 2 8 1
// 8 1 5 3 2 1 8
// 第二轮 拿到第二大的值放在倒数第二个
// 5 3 3 5 2 1 8
// 5 2 3 2 5 1 8
// 5 1 3 2 1 5 8
// 5 8 3 2 1 5 8 多余的一次
// 第三轮
// 3 2 2 3 1 5 8
// 3 1 2 1 3 5 8
// 3 5 多余两次
// 5 8
// 第四轮
// 2 1 1 2 3 5 8
// 2 3 多余三次
// 3 5
// 5 8
// 比较的轮数
for(var j = 0 ; j < arr.length - 1 ; j++) {
// 每两个相邻的值做比较
for(var i = 0 ; i < arr.length - 1 - j ; i++) {
// 前面的比后面的大，就交换
if(arr[i] > arr[i + 1]) {
var t = arr[i] ;
arr[i] = arr[i + 1] ;
arr[i + 1] = t ;
}
}
// 每一轮拿到一次最大值
console.log(arr);
}
console.log(arr);
选择排序
var arr = [8,5,3,2,1] ;
// 第一轮
// 先找到最小值，再和第一个位置进行交换
// 假设第一个位置上的数最小
var min = 0 ;
// 拿第一个位置上的数与后面的所有值作比较
for(var i = 1 ; i < arr.length ; i++) {
if(arr[min] > arr[i]) {
min = i ;
}
}
console.log(min);
// 拿到最小值以后，与第一个位置上的值交换
var t = arr[0] ;
arr[0] = arr[min] ;
arr[min] = t ;
// 1 5 3 2 8
// 第二轮
// 假设第二个位置上的数最小
var min = 1 ;
for(var i = 2 ; i < arr.length ; i++) {
if(arr[min] > arr[i]) {
min = i
}
}
console.log(min);
// 拿到最小值以后，与第一个位置上的值交换
var t = arr[1] ;
arr[1] = arr[min] ;
arr[min] = t ;
// 1 2 3 5 8
// 第三轮
// 假设第三个位置上的数最小
// 第四轮
var arr = [1,4,2,7,3,6];
for(var i = 0 ; i < arr.length - 1 ; i++) {
// 假设第i个位置上的数是最小的
var min = i ;
// 拿这个最小的值和后面所有的数进行比较
for(var j = i + 1 ; j < arr.length ; j++) {
// min对应的数比后面的数大
if(arr[min] > arr[j]) {
min = j
}
}
console.log(min);
// 拿到最小值以后，与第一个位置上的值交换
if(min !== i) {
var t = arr[i] ;
arr[i] = arr[min] ;
arr[min] = t ;
}
}
console.log(arr);
数组的基本方法
// push(v1,v2,v3...) 向数组尾部追加值
// pop() 在数组尾部删除一个值
// unshift() 向数组的头部追加值
// shift() 向数组的头部删除一个值
var arr = [1,2,3] ;
// arr[3] = 'a' ;
arr.push('a' , 'b' , 'c') ;
console.log(arr);
arr.pop() ;
console.log(arr);
arr.unshift('hello' , 'hi');
console.log(arr);
arr.shift();
console.log(arr);
var arr2 = [] ;
for(var i = 0 ; i <= 10 ; i++) {
// arr2[i] = i
arr2.push(i)
}
console.log(arr2);
push封装
// 向一个数组中追加数据
// var arr = [1,2,3,4] ;
// arr[arr.length] = 'hello' ;
// console.log(arr);
// function push(n , n2 , n3) {
// var arr = [1,2,3,4] ;
// arr[arr.length] = n ;
// arr[arr.length] = n2 ;
// arr[arr.length] = n3 ;
// console.log(arr);
// }
function push() {
var arr = [1,2,3,4] ;
// 用于接受实参列表 --- 伪数组
console.log(arguments);
for(var i = 0 ; i < arguments.length ; i++) {
console.log(arguments[i]);
arr[arr.length] = arguments[i]
}
console.log(arr);
}
push('a','b','h' ,'t')
pop封装
// 删除数组中的最后一个值
function pop() {
var arr = [1,2,3,4,5] ;
var arr2 = [] ;
for(var i = 0 ; i < arr.length - 1 ; i++) {
arr2.push(arr[i])
}
console.log(arr2);
}
pop()
作业练习
随机验证码（必须包含小写，大写，数字）
concat封装
去重
统计
在一个已经排序好的数组中插入一个值, [1,4,6,9,12] 10
附加题：
自己封装 forEach / map / filter / every / some
