week1 初识前端

7/9 复习数据类型 运算符 和提纲

1.变量

内存是主存 硬盘是辅存

变量就是内存中的一个数据存储区域

变量三要素: 变量名称 数据类型 变量值

JS是弱类型的语言,在定义变量时,无需指定数据类型

定义变量:

var 变量名 ; //声明 变量名 = 变量值;//赋值 var 变量名 = 变量值 //声明并赋值

ES6 中定义变量 通常使用

let 变量名 = 变量值

const 变量名 = 变量值

var vs let vs const

>var定义变量会有声明提升现象,let/const没有声明提升 ----- 将变量声明部分提升到当前作用域的最顶部.

------未声明提升时,将定义变量之前的位置称作"暂存死区(暂时性死区)" -----在暂存死区中使用到该变量时会爆出引用错误

>let 是es6中新增定义变量的语法

var 与 let/const的作用域也有区别,通常let/const是块级的

>let与const的区别:let用于定义变量,定义的变量可使用赋值运算符重新赋值,而const定义的变量不能使用赋值运算符重新赋值

......

2.数据类型

基本(原始)类型:Number /String/ Boolean /Null/Undefined/ Symbol /BigInt

引用(复杂)类型:Object

typeof:用于求解表达式的数据类型

使用typeof求解出的结果是一个字符串,该字符串可能取值有:

'number' , 'string','boolean','object','undefined','symbol','BigInt','function',

3.运算符

eg: let b = 3 < 2 && ( a = 99 ) > 999

'i = ' + i + 'j='+ j ---------- ` i = ${i} , j = ${j}`

4.流程控制语句

1.顺序结构

2.条件结构

if类(3种) if(条件1 ){ } else { } ........ switch(表达式){ case '常量1': ....break; ---break可省略,当省略 break 时会贯穿执行 case '常量2': ....break; ..... default: 当表达式与所有case 后的常量均不相等时执行的语句块 break; }

3.循环结构

while(循环条件){ //主体 } do{ //主体 }while(循环条件); for(循环变量初始化 ; 循环条件 ; 变量更新){} for(变量 in 对象){} for(变量 of 数组或集合){}

while 与 do-while 多用于循环次数不确定的情况 而 for 多用于循环次数确定的情况

while 是先判断条件,后执行循环主体 而 do-while 先无条件执行一次循环主体再判断条件是否继续循环循环主体

5.函数

//声明方式 function 函数名(形式参数列表){ //函数主题语句块 //return 表达式 } //函数表达式 const 变量名 = function(形式参数列表){ //函数主题语句块 //return 表达式 } //new Function() 这种方式很少使用 const 变量名 = new Function(形参列表字符串,函数主题语句块字符串)

函数的参数:

当函数体内部业务处理过程中需要的数据自身不能解决来源时,可通过参数进行传递.参数相当于是函数的一种输入

-形式参数(形参) - 是函数定义时的

-实际参数(实参) - 是函数调用时的

返回值:

函数体内部的处理结果需要将其返回给调用者.返回值相当于函数的一种输出

- 函数体内部利用 return 进行返回

-函数的返回值 return 到哪去了? return 返回到函数调用处

函数调用:

const 变量名 = 函数名(实参)

递归: 在函数体内部实现函数自身的调用

6.内置对象

1.Array

2.String

3.Date

4.Math

Math.floor() 对数字向下取整,即取小于参数值的最大整数

Math.ceil() 向上取整数

Math.round() 四舍五入取整数

parseInt() 将参数(通常为字符串)解析为整数

parseFloat() 将参数解析为浮点数字

5.......

7.10 继续复习 遍历迭代 知识点

reduce()

:在JavaScript中，reduce() 方法是一个高阶函数，它对数组中的每个元素执行一个由你提供的“reducer”回调函数，将数组“减少”为一个单一的值（例如，一个数字、一个对象、一个新数组等）。以下是 reduce() 方法的基本用法：

array.reduce((accumulator, currentValue, currentIndex, array) => { // ... 执行一些操作 ... return accumulator; // 返回累计值 }, initialValue); callback：一个“reducer”函数，它接受以下四个参数： accumulator：累计器累计回调的返回值，它是上一次调用回调时返回的累计值，或者是提供的初始值（initialValue）。 currentValue：数组中正在处理的当前元素。 currentIndex（可选）：数组中正在处理的当前元素的索引。 array（可选）：调用 reduce() 方法的数组。 initialValue（可选）：用作第一次调用 callback 函数时的第一个参数的值。如果没有提供这个初始值，reduce() 将从数组的第二个元素开始执行回调，并将第一个元素作为 accumulator 的初始值。 eg: const totalScore = arr.reduce((acc,arr) => acc + arr, 0)

forEach()

在JavaScript中，forEach 方法是数组对象的一个方法，它允许你遍历数组中的每个元素，并对每个元素执行一个回调函数。forEach 方法不会返回任何值（即返回 undefined），也不会改变原始数组，但回调函数内部可以改变数组中的元素。以下是 

forEach 方法的基本用法：

array.forEach(function(currentValue, index, arr), thisValue) function(currentValue, index, arr)：必需。一个函数，为数组中的每个元素执行。它接受以下三个参数： currentValue：数组中正在处理的当前元素。 index（可选）：数组中正在处理的当前元素的索引。 arr（可选）：forEach 方法正在操作的数组。 thisValue（可选）：当执行回调函数时，用作 this 的值。

页面输出对象数组类型

想要在页面上显示一个对象数组，你需要遍历这个数组，并将每个对象转换成一个字符串，然后将这些字符串连接起来以形成一个HTML内容。

1. 使用map方法遍历 failedScore数组，并将每个对象转换成一个 
   •  元素的字符串表示形式。
   • 使用 join('') 方法将数组中的所有字符串连接成一个单一的字符串，这样就没有逗号分隔，适合作为HTML内容。
   • 将生成的HTML字符串包裹在
     • 标签中，并赋值给#filterFailed 元素的innerHTML

function showFilterFailed() { // 调用 filterFailed 函数获取不及格的成绩数组 const failedScores = filterFailed(getScoreArr()); // 将不及格的成绩数组转换为HTML字符串 const failedScoresHTML = failedScores.map(scoreObj => `<li>科目：${scoreObj.科目}，成绩：${scoreObj.成绩}</li>` ).join(''); // 将HTML字符串设置为 #filterFailed 元素的 innerHTML document.querySelector('#filterFailed').innerHTML = `\t不及格的科目如下\n<ul>${failedScoresHTML}</ul>`; } function filterFailed(arr) { const arrClass = ['语文','数学','英语','物理','化学','地理'] const failedScoreArr = [] arr.forEach((score,index) => { if(score < 60){ failedScoreArr.push({科目: arrClass[index],成绩:score}) } }); console.log(failedScoreArr); return failedScoreArr }

7.11 复习内置对象 排序算法

6.内置对象

1.Array

数组的作用:使用一个变量存储一组数据(一个变量中存放多个值)

元素:数组中存放的一个个的数据

下标:数组中元素的而索引(编号index),下标编号从0开始,

创建数组对象:

const array = []//空数组 const array = [1,2,2,3,4]//初始化数组中的几个元素 const array = new Array() //空数组 const array = new Array(5) //传递数字参数时,表示数组的初始长度 const array = new Array('a','b') //初始化几个元素 // 在 js 中,创建数组对象时也可以省略 new 的关键字使用 eg: const array = Array()

数组的 API:

array.push() //在数组末尾添加元素 array.unshift() //开头添加元素 array.pop() //从末尾删除一个元素 array.shift() // 从开头删除一个元素 array.splice( index , len , val ) //从一个指定index索引处删除len个元素,然后使用val 代替删除的元素 如果删除个数为0 即len=0 则等于在index的位置插入val return 删除的那部分数据 array.sort( fn ) //对数组中的元素进行排序,可提供排序比较函数作为参数 ---- 默认按照数组元素的字符串字典顺 序升序排序 array.reverse( ) //对数组元素进行反转(逆排序) // 注意 前7个方法调用后,原数组本身会受影响(改变) array.concat(val) // 数组链接,原数组不变,返回连接后的新数组 array.indexOf(val,index?) //在数组中查找指定元素第一次出现的索引,找不到返回-1 可以从index之后开始查找 array.lastIndexOf(val,index?) //查找最后一次出现的索引,找不到返回 -1 array.slice(startIndex, endIndex?) //在原数组中进行子组件的截取 截取结果 包含起始索引处元素,不包含结束 索引处的元素 return 一个新数组 // ES5,ES6中新增 array.forEach(function(currentValue,index?,array?){}) //遍历迭代数组中的每个元素 没有返回值 ---传递一个 函数参数,该函数会在迭代数组中每个元素时被调用 currentValue 是数组中遍历迭代到的当前元素 index 是当前元素在数组中的下标 array 是调用forEach的数组 array.map(function(currentValue,index?,array?){}) //遍历迭代数组元素,会返回新数组 eg: const newScors = scores.map(function(curr,index,arr){ return curr +5 }) array.filter() //过滤数组元素 筛选出满足条件(即回调函数返回值 true)的元素 eg: const result = scores.fillter(function(score){ return score < 60}) array.some() //判断是否存在至少一个满足条件的元素 方法调用后返回Boolean eg: const has = scores.some(function(score){ return score === 100 }) array.erery() //判断是否每一个都满足条件 eg: const has2 = scores.every(function(socre){ return score >= 60 }) array.find() //查找满足条件的对应数组元素 eg: const exist = scores.find(function(curr , index , arr ){ return curr === 92 }) //如果查找到了就返回数组对应元素,如果没有找到就返回 undefined array.findIndex() //查找满足条件的数组元素下标 ---多用于引用类型对象 eg: const exist = scores.findIndex(function(curr , index , arr ){ return curr === 92 }) //如果查找到了就返回大于等于0的索引,如果没有找到就返回 -1 array.reduce() //归并运算 --累加 --传递两个参数,第一个是回调函数,第二个表示归并运算初始值 eg: const sum2 = scores.reduce(function(result , curr ){ return result += curr },0) //第一个回调函数的签名: function(result , curr , index , arr ) array.includes() //返回数组中是否存在指定元素 ......

对象:一个对象就是一系列属性的集合,可以使用`{}`来表示对象的直接量

//如 { 品牌:'华为', 颜色:'黑色', } const score ={ chinese:95, math:93, english:80, }

对象

2.String

用于处理文本数据

使用 ' ' 或 " " 或 ` ` 所包含的文本内容就是字符串

常用API

//属性 str.length //静态方法 String.fromCharCode(code) //返回一个字符串,是将指定的unicode编码转换为对应的字符 //成员方法 str.charAt(index) //找字符串中index索引处的字符 str.charCodeAt(index) // 字符串中index索引处的字符unicode的编码 str.concat() // 连接字符串 可能更多的使用 + 去拼接字符串 str.startWith(sub) //判断是否以指定字符串开头 str.endsWith(sub) //判断是否以指定字符串结尾 str.includes(sub) //判断字符串中是否包含指定的子字符串 str.indexOf(sub) //子字符串在原字符串中第一次出现的索引 str.padStart() //以指定的字符串在原字符串开头填充直到给定的字符串长度 str.padEnd() //在末尾填充 str.replace() //将满足指定规则的子字符串进行替换 str.slice(start,end) //截取子字符串 从开始索引(包含)截取到结束索引(不包含) 可以省略 end 表示截取到结尾 可以取负值 str.subString(start,end) //截取子字符串 参数不取负值 str.split() //以指定字符将字符串分割为数组 str.toLowerCase() //转换为小写 str.toUpperCase() //转换为大写 str.trim() //去掉字符串前后的空白

3.Date

const date = new Date(0) //传递数字参数,表示距离 1970-1-1 0:0:0 的毫秒值 const date = new Date('2005-1-2 13:27:58') //传递字符串参数,以字符串中的时间 const date = new Date(2024,7) //传递两个及以上的数字参数,表示 年 月(0~11) 日 时 分 秒 可以传负值, 会自动推算往前一年推算,也可以传大于12的值,自动递增一年 常用API console.log(date.toString()); Fri Jul 12 2024 20:04:50 GMT+0800 (GMT+08:00) console.log(date.toLocaleString()); 2024/7/12 20:04:50 console.log(date.toUTCString()); Fri, 12 Jul 2024 12:04:50 GMT console.log(date.toISOString()); 2024-07-12T12:04:50.814Z console.log(date.toTimeString()); 20:04:50 GMT+0800 (GMT+08:00) console.log(date.toDateString()); Fri Jul 12 2024 UTC 指的是世界标准时间 date.getTime() 返回距离1970年1月1日0:0:0的毫秒值 date.getDay() 0-星期天(0~6) 没有对应set date.getMonth() 获得月份 0-一月(0~11) date.getFullYear() 获得完整年份 date.getHours() 获得小时 date.getMinutes() 获得分钟 date.getSeconds() 获得秒 date.getMilliseconds() 获得毫秒

4.Math

Math.floor() 对数字向下取整,即取小于参数值的最大整数

Math.ceil() 向上取整数

Math.round() 四舍五入取整数

parseInt() 将参数(通常为字符串)解析为整数

parseFloat() 将参数解析为浮点数字

5.Set

对象允许你存储任何类型(无论是原始值还是对象引用)的唯一值

用法可见day 7.12 Set集合.html 或者 数组去重-set.html

6.......

排序

冒泡排序

两两比较,交换 , 将最大的值放后面,一轮过后将会把最大值放置在最后面

/* 冒泡排序(升序) 二重循环实现 外层控制比较轮数 内层控制每一轮的比较次数 使用N表示要比较的数字个数 外层(使用变量i表示循环变量 循环 N-1 (次) 内层循环 N-1-i (次)) */ function bubble(arr){ for(let i = 0 , len = arr.length; i< len - 1 ; i++){ //外层控制比较轮数 for(let j = 0 ; j < len - 1 - i ; j++){//内层控制一轮比较次数 if(arr[ j ] > arr[ j + 1 ]){ let x = arr[ j + 1 ] arr[ j + 1 ] = arr[ j ] arr[ j ] = x } } } return arr }

选择排序

function selection(arr){ for(let i = 0 , len = arr.length ; i < len -1 ;i++ ){ // 外层循环控制多少轮 let minIndex = i for(let j = i + 1 ; j < len ; j++){ // 内层循环控制比较次数,查找本轮最小值 if( arr[ j ] < arr[ minIndex ]){ minIndex = j } } let t = arr[minIndex] arr[minIndex] = arr[i] arr[i] = t ; } return arr }

快速排序

// 递归快排 function quick(arr){ // 先找一个基准数字 ,大的放右边,小的放左边(升序) const len = arr.length // 当数组只有一个或没有元素时,则返回 if(len <= 1){ return arr } // 这里以最后一个元素为基准 const base = arr[len -1] // 定义两个数组用于保存比基准值小/大或等的数字 const left = [] , right = [] for (let i = 0; i < len - 1 ; i++) { if(arr[i] < base ){ left.push(arr[i]) } else{ right.push(arr[i]) } } // 放置在 left 与 right 数组中的元素仍然可能没有排好顺序 则递归 return quick(left) .concat(base,quick(right)) }

乱序排序

function shuffle(arr){ for(let i = 0 , len = arr.length ; i < len ; i++){ const rand = Math.floor(Math.random()* len) // 将当前元素与随机下标处的元素交换位置 const t = arr[i] arr[i] = arr[rand] arr[rand] = t } return arr }

查找

二分查找(折半)

折半查找（也称为二分查找）是一种在有序数组中查找特定元素的搜索算法。其基本思想是，每次将搜索范围缩小一半，直到找到所需的元素或确定数组中不包含该元素。

以下是折半查找算法的步骤：

1. 将要查找的键值与数组中间的元素比较。
2. 如果键值与中间元素相等，则查找成功。
3. 如果键值小于中间元素，则在数组的左半部分继续查找。
4. 如果键值大于中间元素，则在数组的右半部分继续查找。
5. 重复以上步骤，直到找到所需的元素或查找范围为空。

/* 二分查找 (前提:数组有序-----升序/降序) 先取数组第一个元素下标作为头指针,最后一个元素下标作为尾指针 (头指针+尾指针)/2取整为中间指针 要查找的目标值与中间指针指向的元素进行比较,如果目标值与中间指针元素恰好相等则说明找到了 如果要查找的目标值比中间指针元素小,说明应该在中间指针前边的范围内可能存在目标值,则将尾指针改为中间指针前一个位置 反之,比中间指针大同理,如果尾指针位置在头指针位置之前则说明该目标值不存在 */ //递归实现折半 --- function Binary(arr,num){ const len = arr.length -1 let low = 0 , high = len const mid = Math.floor((low + high ) / 2) if( num === arr[mid] ){ return true } if(low > high ){ return false } if(num > arr[mid]){ low = mid -1 } else if(num < arr[mid]){ high = mid -1 } arr = arr.splice(low,high-low+1) console.log(`${arr}`); Binary(arr,num) } // 循环实现折半 function Binary1(arr,num){ const len = arr.length -1 let low = 0 , high = len while(low <= high){ let mid = Math.floor((low + high ) / 2) if(arr[mid] === num ){ return true } if(num < arr[mid]){ high = mid -1 } else{ lou = mid + 1 } } return false }

7.12 随机生成

随机验证码和颜色生成

在ascall中 数字(48~57)大写字母(65~90)小写字母(97~122)

/* 能取到下限,不能取到上限 @param lower 随机数字的下限 @param upper 随机数字的上限 */ function random(lower,upper){ return Math.floor(Math.random()*(upper - lower) + lower) }

验证码

function genCode(){ let code = '' // 验证码长度不足6位会持续生成字符 while(code.length < 6){ const rand = random(48,123) // 如果生产的字符在大小写,数字的编码范围内,则将其转换为验证码字符 ,反之则重新生成然后继续判断 if( rand >= 45 && rand <= 57 || rand >= 65 && rand <= 90 || rand >= 97 && rand <= 122){ code += String.fromCharCode(rand) } } return code }

随机颜色(十六进制rgb颜色)

function getColor(){ color = '' while(color.length < 6){ const rand = random(48,123) if(//0~9 A~F || a~f 没有大小写之分 rand >= 48 && rand <= 57 || rand >= 65 && rand <= 70 || rand >= 97 && rand <= 102 ) { color += String.fromCharCode(rand) } } return '#' + color }