JavaScript day8
知识点回顾
函数：
封装性，复用性，调用性
函数名 小驼峰 (首字母不要大写)
形参：
函数声明时的参数
用于接受实参的
本质上是局部变量
实参：
函数调用时的参数
返回值 return
返回一个结果
结束整个函数
作用域
预编译 函数可以先调用后声明
arguments 用于接受实参列表（伪数组）
递归函数 自己调用自己
构造函数 创建对象
回调函数 ？
数组
创建方式2种 [] new Array(1,2,3,3)
数组的长度 ，数组的下标
数组的长度和值可以随时被更改
数组的遍历
for
for in 遍历下标 主要是用于遍历对象（不适合数组）
for of 遍历值
封装
includes() 判断数组中是否存在某个值
质数判断的假设法和是否存在的假设法做对比（到底flag为true还是false）
join() 把数组变成字符串 (三目) i < arr.length - 1 ? arr[i] + ',' : arr[i]
push() 向数组尾部追加无数个 遍历arguments ，把数组的长度边长 arr[arr.length] = arguments[i]
pop() 删除数组中最后一个值 创建一个新的数组 遍历原数组时丢掉最后一个 i < arr.length - 1
随机验证码
随机取数组中的一个值(根据下标)
冒泡排序
选择排序
function sum(a ,b) {
return a + b
}
function sum() {
return arguments[0] + arguments[1]
}
排序
// 冒泡排序：相邻的做比较，大的就向后交换 arr[i] > arr[i+1]
function bubbleSort(arr) {
// 控制比较的轮数
for(var i = 0 ; i < arr.length - 1 ; i++) {
// 从头开始做比较（大数下沉）
for(var j = 0 ; j < arr.length - 1 - i ; j++) {
if(arr[j] > arr[j + 1]) {
var t = arr[j] ;
arr[j] = arr[j + 1] ;
arr[j + 1] = t ;
}
}
}
// console.log(arr);
return arr
}
var arr2 = bubbleSort([8,6,4,3,2,10]);
console.log(arr2);
// 选择排序：找到最小的数，放在前面
function selectSort(arr) {
// 控制比较的轮数
for(var i = 0 ; i < arr.length - 1 ; i++) {
// 假设第一个位置最小，与后面所有的数比较
var min = i ;
for(var j = i + 1 ; j < arr.length ; j++) {
// 拿第一个位置上的 数与后面所有的数做比较
if(arr[min] > arr[j]) {
// min 记录最小的角标
min = j ;
}
}
// 判断与假设是否相同
if(min !== i) {
var t = arr[min] ;
arr[min] = arr[i] ;
arr[i] = t ;
}
}
// console.log(arr);
return arr
}
var arr2 = selectSort([8,6,4,3,2,10]);
console.log(arr2);
验证码
function rand(min , max) {
return parseInt(Math.random() * (max - min) + min)
}
function join(arr , f) {
var res = '' ;
for(var i = 0 ; i < arr.length ; i++) {
res += i < arr.length - 1 ? arr[i] + f : arr[i]
}
return res
}
// 随机验证码，必须同时包含小写，大写和数字
// function randCode(n) {
// // 默认4位
// n = n || 4 ;
// var res = '' ;
// var arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'] ;
// for(var i = 0 ; i < 4 ; i++) {
// res += arr[rand(0,arr.length)]
// }
// console.log(res);
// return res ;
// }
function randCode(n) {
// 默认4位
n = n || 4 ;
var arr2 = [] ;
var numArr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
var bigArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'] ;
var smallArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'] ;
var allArr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'] ;
// 从数字中去一个
arr2.push(numArr[rand(0,numArr.length)]) ;
// 从大写中去一个
arr2.push(bigArr[rand(0,bigArr.length)]) ;
// 从小写中去一个
arr2.push(smallArr[rand(0,smallArr.length)]) ;
for(var i = 0 ; i < n - 3 ; i++) {
arr2.push(allArr[rand(0,allArr.length)])
}
// 以上顺序总是一样的
console.log(arr2);
// 打乱顺序,随机交换每个位置上的值
for(var i = 0 ; i < arr2.length ; i++) {
var j = rand(0 , arr2.length) ;
var t = arr2[i] ;
arr2[i] = arr2[j] ;
arr2[j] = t ;
}
// document.write(join(arr2 , ''))
return join(arr2 , '') ;
}
var res = randCode();
document.write(res)
数组的方法
数组的方法 push() pop() unshift() shift()
数组的常用方法
join() 把数组变成字符串
includes() 判断数组中是否存在某个值
indexOf() 判断数组中是否存在某个值，返回第一次出现的下标,找不到就返回-1
lastIndexOf() 判断数组中是否存在某个值，返回最后一次出现的下标
concat() 拼接数组，返回一个新的数组
slice(i,i) 截取数组中的部分值,返回一个新的数组
splice(i , 删除的个数 ， 新增的值...) 新增，删除，替换 --- 直接改变原数组 !!!!!!!
function includes(arr , n) {
for(var i in arr) {
if(arr[i] === n) {
return true
}
}
return false
}
function indexOf(arr , n) {
for(var i in arr) {
if(arr[i] === n) {
return i
}
}
return -1
}
function lastIndexOf(arr , n) {
// 假设找不到
// var flag = -1 ;
// for(var i in arr) {
// if(arr[i] === n) {
// flag = i
// }
// }
// return flag
for(var i = arr.length - 1 ; i >= 0 ; i--) {
if(arr[i] === n) {
return i
}
}
return -1
}
var arr = [1,2,3,4,2,5] ;
var str = arr.join('&') ;
console.log(str);
console.log(arr.includes(20));
console.log(arr.indexOf(2));
console.log(arr.lastIndexOf(2));
var arr1 = [1,2,3,4] ;
var arr2 = [6,7,8] ;
var arr3 = arr1.concat(arr2);
console.log(arr3);
// slice(i , i) 截取数组中的值 (包前不包后)
var arr4 = [1,2,3,4,5,6,7] ;
var arr5 = arr4.slice(2,5);
console.log(arr5);
// splice(i , 删除的个数, 插入的值) 删除，替换，新增
// 用法1：在任意位置插入数据
// arr.splice(i , 0 , v1 ,v2 , v3 ....)
// 用法2：删除
// arr.splice(i , 删除的个数)
// 用法3：替换
//
var arr = [1,2,3,4,5] ;
arr.splice(arr.length,0,'a','b','c') ;
console.log(arr);
// splice(i , 删除的个数)
arr.splice(2 , 2)
console.log(arr);
// splice( i , 删除的个数 ， 替换的值...)
arr.splice(3 , 3 , 'A' ,'B' , 'C');
console.log(arr);
arr.splice(2,0,'a')
判断数组
基本数据类型：number string boolean null undefined
基本数据类型可以通过typeof来判断
引用数据类型：function 数组 对象
// Array.isArray() 判断是不是数组
var arr = [1,2,3];
console.log(typeof arr); // object
console.log(Array.isArray(arr));
封装concat
var arr1 = [1,2,3] ;
var arr2 = [6,7,8] ;
// [1,2,3,6,7,8]
var arr3 = [] ;
// 遍历第一个数组
for(var i in arr1) {
arr3.push(arr1[i])
}
// 遍历第二个数组
for(var i in arr2) {
arr3.push(arr2[i])
}
console.log(arr3);
function concat(arr1 , arr2) {
var arr3 = [] ;
// 遍历第一个数组
for(var i in arr1) {
arr3.push(arr1[i])
}
// 遍历第二个数组
for(var i in arr2) {
arr3.push(arr2[i])
}
console.log(arr3);
}
function concat() {
var arr3 = [] ;
for(var i in arguments) {
var arr = arguments[i] ;
for(var j in arr) {
arr3.push(arr[j])
}
}
console.log(arr3);
}
concat([1,2,3] , ['a' , 'b' ,'c'] , [4,5,7])
数组去重
var arr = [1,2,3,42,1,3,2,2,1,3,5] ;
// 方法1：得到新的数组
var newArr = [] ;
// 遍历原数组
for(var i in arr) {
// 判断原数组中每一个值是否在新数组中存在
// if(newArr.indexOf(arr[i]) === -1)
// if(!newArr.includes(arr[i])) {
// newArr.push(arr[i])
// }
// 自己把includes方法写了一遍
var flag = false ;
for(var j in newArr) {
if(newArr[j] === arr[i]) {
flag = true ;
break ;
}
}
if(!flag) {
newArr.push(arr[i])
}
}
console.log(newArr);
// 方法2：直接改变原数组
// 对比，出现重复的就删掉
// 拿第一个值出来跟后面所有的值作比较
var arr = [1,2,3,42,1,3,2,2,1,3,5] ;
// 比较的轮数
for(var i = 0 ; i < arr.length - 1 ; i++) {
// 拿第i个数与后面所有的数进行比较
for(var j = i + 1 ; j < arr.length ; j++) {
// 只要相同就删除
if(arr[i] === arr[j]) {
// 没删除一个的时候，数组塌陷!!!!!!!!!!
arr.splice(j , 1);
j--;
}
}
}
console.log(arr);
统计
// 比较的轮数
for(var i = 0 ; i < arr.length ; i++) {
var count = 0 ;
// 拿每一个值与所有的值进行比较
for(var j = 0 ; j < arr.length ; j++) {
if(arr[i] === arr[j]) {
count++ ;
}
}
console.log(arr[i] + '出现了' + count + '次');
}
方法1：先去重再统计
var arr2 = [] ;
for(var i = 0 ; i < arr.length ; i++) {
if(!arr2.includes(arr[i])) {
arr2.push(arr[i])
}
}
console.log(arr2);
// 拿新数组中的每一个值与原数组进行比较
for(var i = 0 ; i < arr2.length ; i++) {
var count = 0 ;
for(var j = 0 ; j < arr.length ; j++) {
if(arr2[i] === arr[j]) {
count++
}
}
console.log(arr2[i] + '出现了' + count + '次');
}
var arr = [1,2,1,3,2,3]
// 方法2：一边删除一边统计
for(var i = 0 ; i < arr.length ; i++) {
// 拿第一个值与后面的值进行比较
var count = 1 ;
for(var j = i + 1 ; j < arr.length ; j++) {
if(arr[i] === arr[j]) {
count++ ;
arr.splice(j , 1) ;
j-- ;
}
}
console.log(arr[i] + '出现了' + count + '次');
}
console.log(arr);
// 方法3：先排序，再统计
var arr = [1,1,1,1,2,2,2,3,4,4];
for(var i = 0 ; i < arr.length ; ) {
var count = 1 ;
for(var j = i + 1 ; j < arr.length ; j++) {
if(arr[i] === arr[j]) {
count++ ;
}
else {
// 只要不相等说明后面没有相同 的了
break ;
}
}
console.log(arr[i] + '出现了' + count + '次');
i += count
}
sort
var arr = [5,32,5,2,6,1];
var res = arr.sort() ;
console.log(res);
var res = arr.sort(function (a , b) {
return a - b
})
console.log(res);
回调函数
// callback:回调函数
// 把一个函数当做另一个函数的参数
function xunHuan(n , fn) {
for(var i = 0 ; i < n ; i++) {
fn()
}
}
xunHuan(5 , function(){
document.write(1 + '\
')
})
xunHuan(6 , function () {
console.log(666);
})
function ff() {
console.log(999);
}
xunHuan(10 , ff)
数组的迭代方法
// forEach(function(v , i , arr){}) 遍历数组
var arr = [1,2,3,5,6,7] ;
var sum = 0 ;
arr.forEach(function (v , i , arr) {
sum += v ;
})
console.log(sum);
function forEach(arr , cb) {
for(var i = 0 ; i < arr.length ; i++) {
cb(arr[i] , i)
}
}
forEach([1,2,3] ,function (v , i) {
// console.log(666);
console.log(v);
console.log(i);
})
// 把数组中的每一个值加1
回调
// sort(函数)
// var res = arr.sort(function(a,b){return a - b})
// arr.forEach(function (v,i) { })
// 函数也可以是一个参数
function fn(n) {
// console.log(n); // 函数
n()
}
// fn(console.log(777)) // n is not a function
// var a = console.log(777);
// console.log(a);
fn(function(){
console.log();
})
function aa(arr , fn) {
for(var i = 0 ; i < arr.length ; i++) {
fn(arr[i])
}
}
aa([1,2,3] , function (v) {
console.log(v);
})
把数组中的每个值加1
var arr = [1,2,3] ;
// for(var i = 0 ; i < arr.length ; i++) {
// arr[i] = arr[i] + 1 ;
// }
// console.log(arr);
// for(var i = 0 ; i < arr.length ; i++) {
// arr[i] = arr[i] * 2 ;
// }
// console.log(arr);
function aa(arr , cb) {
for(var i = 0 ; i < arr.length ; i++) {
arr[i] = cb(arr[i]) ;
}
console.log(arr);
}
aa([2,3,4] , function (v) {
return v * 3
})
数组的迭代方法
sort(function(a,b){return a - b}) 升序
sort(function(a,b){return b - a}) 降序
forEach(function(v,i,arr){}) 遍历数组
map(function(v,i,arr){}) 改变数组中的值，返回一个新的数组 必须return
filter(function(v,i,arr){}) 过滤器，找到满足条件的值，返回一个新的数组
every(function(v,i){}) 判断数组中是不是每一个值都满足条件
some(function(v,i){}) 判断数组中有没有满足条件的值
sort() ASCII升序
var arr = [5,3,22,1,7] ;
var res = arr.sort(function (a , b) {
return b - a
})
console.log(res);
var arr = [5,3,22,1,7] ;
arr.forEach(function (v, i) {
console.log(v);
if(i == 2) {
// break ; // 报错
// return 没有任何意义
}
})
var arr = [1,2,3] ;
var res = arr.map(function (v) {
return v + 3
})
console.log(res);
var arr = [1,4,7,3,2] ;
var res = arr.filter(function (v) {
return v > 2
})
console.log(res);
var arr = [10,40,70,38,26] ;
var res = arr.every(function (v) {
return v > 60
})
console.log(res);
var res = arr.some(function (v) {
return v > 60
})
console.log(res);
作业
随机验证码（必须包含小写，大写，数字）
concat封装
去重
统计
在一个已经排序好的数组中插入一个值, [1,4,6,9,12] 10
附加题：
自己封装 forEach / map / filter / every / some
