JavaScript Day2

已于 2023-03-17 11:48:16 修改
阅读量26 收藏
点赞数
文章标签： javascript 前端
于 2023-03-15 00:11:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62137679/article/details/129543286
版权
本文介绍了JavaScript中的for循环和while循环的使用场景，展示了如何进行断点调试。接着讲解了数组的增删改查操作，包括push、unshift、pop、shift和splice方法。此外，文章还涵盖了函数的概念，强调其在代码复用中的重要性，以及函数参数、返回值和作用域的相关知识。
摘要由CSDN通过智能技术生成

JavaScript Day2(基础)

for 循环

断点调试需要重新刷新页面

for循环和while循环有什么区别呢:

当如果明确了循环的次数的时候推荐使用for循环

当不明确循环的次数的时候推荐使用while循环

for (let i = 1; i <= 3; i++){
    document.write(`第${i}天<br>`)
    for (let j = 1; j <=5; j++){
        document.write(`记住了第${j}个单词<br>`)
    }
}

let row = +prompt('请输入行数')
let col = +prompt('请输入列数')
//外层循环打印行数
for (let i = 1; i <=row; i++){
    //里面循环打印几个星星
    for (let j = 1; j <= col; j++){
        document.write('☆')
    }
    //进行换行显示
    document.write('<br>')
}

//九九乘法表
document.write('<table style="border-collapse:collapse">')
for (let i = 1; i <= 9; i++){
    document.write('<tr>')
    for (let j = 1; j <= i; j++){
        document.write(`<td style="border: 2px black solid; padding: 5px">${j}×${i}=${j*i}</td>`)
    }
    document.write('</tr>')
}

数组

增

数组.push()是在数组末尾添加一个或多个元素，返回值是数组的长度

let arr = [1,2,3]
arr.push(4,5,'6')
console.log(arr) //(6) [1, 2, 3, 4, 5, '6']
console.log(arr.push(7)) //7

let arr = [2,0,6,1,77,0,52,0,25,7] //筛选数组, >= 10
let newArr = []
for (i = 1; i < arr.length; i++){
    if (arr[i] >= 10){
        newArr.push(arr[i])
    }
}
console.log(newArr)

数组.unshift()是在数组开头添加一个或多个元素,返回值是数组的长度

let arr = [1,2,3]
arr.unshift(4,5,'6')
console.log(arr) //(6) [4, 5, '6', 1, 2, 3]
console.log(arr.unshift(7)) //7

删

数组.pop()方法从数组中删除最后一个元素，并返回该元素的值

数组.shift()方法从数组中删除第一个元素，并返回该元素的值

数组.splice()方法删除指定元素：

arr.splice(起始位置,删除几个元素)

let arr = [1,2,3,4,5,6]
console.log(arr.pop()) //6
console.log(arr) //(5) [1, 2, 3, 4, 5]
console.log(arr.shift()) //1
console.log(arr) //(4) [2, 3, 4, 5]
console.log(arr.splice(1,1)) //[3]
console.log(arr) //(3) [2, 4, 5]

splice另外两种用法:

  1. 增加 arr.splice(开始位置，0，插入的内容)

  2. 替换的内容 arr.splice(开始位置，要删除元素的数量，要插入的任意多个元素**)**

改、查

数组[下标值]

实例

实例一

柱状图

css

* {
    margin: 0;
    padding: 0;
}
.box {
    display: flex;
    width: 700px;
    height: 300px;
    border-left: 1px solid pi
    border-bottom: 1px solid 
    margin: 50px auto;
    justify-content: space-ar
    align-items: flex-end;
    text-align: center;
}
.box>div {
    display: flex;
    width: 50px;
    background-color: pink;
    flex-direction: column;
    justify-content: space-be
}
.box div span {
    margin-top: -20px;
}
.box div h4 {
    margin-bottom: -35px;
    width: 70px;
    margin-left: -10px;
}

js

let arr = []
for(let i = 1; i <=4; i++){
    arr.push(prompt(`请输入第${i}季度的数据:`))
}
console.log(arr)
document.write('<div class="box">')
for (let j = 0; j< arr.length; j++){
    document.write(`
    <div style="height: ${arr[j]}px;">
    <span>${arr[j]}</span>
    <h4>第${j + 1}季度</h4>
    </div>
    `)
}
document.write('</div>')

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-13R5VTl2-1678810218494)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20230311205407573.png)]

实例二

冒泡排序：
let arr = [5,42,32,32,1]
for (let i = 1; i <= arr.length-1; i++) {
    for (let j = 0; j <= arr.length-i-1; j++){
        if (arr[j] > arr[j+1]){
            let temp = arr[j]
            arr[j] = arr[j+1]
            arr[j+1] = temp
        }
    }
}
console.log(arr.sort())
sort 排序：
let arr = [5,42,32,32,1]
arr.sort(function (a,b){
    return a - b
})
console.log(arr)
//sort 降序排列
arr.sort(function (a,b){
    return b - a
})
console.log(arr)

函数

实现代码复用

命名规范基本与变量名命名一致，前缀为动词

函数的复用代码和循环重复代码不同之处：

循环代码写完即执行，不能很方便控制执行位置；

函数随时调用，随时执行，可重复调用.

函数参数：

函数声明时，小括号里面的是形参，形式上的参数；

函数调用时，小括号里面的是实参，实际的参数.

参数默认值

程序更严谨

// function getSum(x,y){
//     document.write(x + y)
// }
// getSum() //NaN,undefined + undefined
function getSum(x = 0,y = 0){
    document.write(x + y)
}
getSum() //0

return

在函数体中使用return关键字能将内部的执行结果交给函数外部使用

return后面代码不会再被执行，会立即结束当前函数，所以return后面的数据不要换行写

return函数可以没有return，这种情况函数默认返回值为undefined

使用数组可以return多个值

//打印数组最大值及最小值
function getArrValue(arr = []){
    let max = arr[0]
    let min = arr[0]
    for (let i = 1; i < arr.length; i++){
        if (arr[i] > max) {
            max = arr[i]
        }
        if (arr[i] < min) {
            min = arr[i]
        }
    }
    return [max, min] //返回数组
}
let newArr = getArrValue([11,1,23,2,34])
console.log(`数组的最大值是: ${newArr[0]}`)
console.log(`数组的最小值是: ${newArr[1]}`)

tips:

  1. 形参作用:本质上就是在函数内部声明变量

​ 实参作用:给形参赋值

  1. 两个相同的函数后面的会覆盖前面的函数

  2. 在Javascript中实参的个数和形参的个数可以不一致

​ 如果形参过多会自动填上undefined (了解即可)；

​ 如果实参过多那么多余的实参会被忽略(函数内部有一个arguments,里面装着所有的实参).

作用域

局部变量或者块级变量没有let声明直接赋值的当全局变量看（强烈不提倡）

还有一种特殊情况，函数内部的形参可以当做局部变量看

访问原则：在能够访问到的情况下先局部，局部没有，再找全（作用域链:采取就近原则的方式来查找变量最终的值）

匿名函数

函数表达式
let fn = function (x, y) {
    console.log(x + y)
}
fn(1, 2)

函数表达式和具名函数的不同:

具名函数的调用可以写到任何位置

函数表达式必须先声明后使用

立即执行函数

防止变量影响

无需调用，立即执行，其实本质已经调用了

多个立即执行函数之间用分号隔开

//方式1 (function(){})();
(function (x, y){
    console.log(x + y)
})(1, 2);
//方式2 (function(){}());
(function(x, y){
    console.log(x + y)
}(1, 3));

倒计时基础铺垫

//1.用户输入
let second = +prompt('请输入秒数:')
//2. 封装函数
function getTime(t) {
    //3. 转换
    //小时： h = parseInt(总秒数 / 60 / 60 % 24)
    //分钟： m = parseInt(总秒数 / 60 % 60)
    //秒数： s = parseInt(总秒数 % 60)
    let h = parseInt(t / 60 / 60 % 24)
    let m = parseInt(t / 60 % 60)
    let s = parseInt(t % 60)
    h = h < 10 ? '0' + h : h
    m = m < 10 ? '0' + m : m
    s = s < 10 ? '0' + s : s
    // console.log(h, m, s)
    return `转换完毕之后是${h}小时${m}分钟${s}秒`
}
let str = getTime(second)
document.write(str)

补充：

&& || 逻辑中断

&& 左边为false就短路

|| 左边为true就短路

console.log(11 && 22) //22，都是真，返回最后一个真值
console.log(undefined && 20) //undefined
console.log(null && 20) //null
console.log(0 && 20) //0
console.log(11 || 22) //11，都是真，返回第一个真值
console.log(false || 20) //20
console.log(undefined || 20) //20

//变相设置函数形参默认值
function fn(x, y){
    x = x || 0
    y = y || 0
    console.log(x + y)
}
fn() //x没有传值为undefined，逻辑运算为false，||结果取后面的值即0
fn(1,2) //x为1逻辑运算为true，||逻辑中断

(function flexible(window, document) {
//window.devicePixeLRatio 获取当前设备的dpr
//获取不到，则默认取值为1
//移动端 获取为2，则执行2
var dpr = window.devicePixelRatio || 1
}(window, document))

if () Boolean()

//以下结果全为false
console.log(Boolean(''))
console.log(Boolean(0))
console.log(Boolean(undefined))
console.log(Boolean(null))
console.log(Boolean(false))
console.log(Boolean(NaN))

减法–（像大多数数学运算一样)只能用于数字

它会使空字符串""转换为0

null经过数字转换之后会变为0

undefined经过数字转换之后会变为NaN

console.log('' - 1) //-1
console.log('as' - 1) //NaN
console.log(null - 1) //-1
console.log(null + 1) //1
console.log(undefined - 1) //NaN
console.log(NaN - 1) //NaN
m0_62137679
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript Day_03
m0_66095162的博客
03-24 1058
Javascript学习笔记
JavaScript程序设计训练 Day3
qq_55786319的博客
04-15 2122
1、编写程序，根据用户输入的数值，计算其平方、平方根和自然对数 <script> var input_num=Number(prompt("请输入一个数字:")); var sqrt_num=Math.sqrt(input_num);//开方 var pow_num=Math.pow(input_num,2);//平方 var log_num=Math.log(input_num);//ln,即e的多少次方等于input_n
四天学会JavaScript(Day1~Day4)
热门推荐
qq_41424688的博客
10-06 6万+
七天学完JavaSctipt~Day1 前言        在9月22号当时距离国庆还有8天的时候,原本是说国庆计划五天的时间来总结微服务的(详情见微服务架构设计模式与CAP定理),可没想到自己太过心急...提前过了一遍。。所以这次就打算用国庆的时间来好好学学JavaScript。其实前端这一块呢,我几乎是一个小白。过去也只是写写Ajax,或者整几个XX事件,接收接收数据而已。所以这个国庆我是计划用七天的时间把JavaScript语言从头
【JavaScript】详解Day.js：轻量级日期处理库的全面指南
lph159的博客
07-27 687
Day.js是一个轻量级的JavaScript日期库，兼具现代API和优秀的性能。它的API设计灵感来自于Moment.js，但相比之下，Day.js的体积更小，仅为2KB左右（压缩后和无依赖），非常适合在前端项目中使用。
JavaScript学习 one day
Sherry1014miss的博客
10-24 1422
1.初始JavaScript 完犊子，还是那么好玩，好怕我又陷进去，笑死，好有趣啊 2.DOM 2.BOM JS有三种书写位置 1.行内式JS 所有的JS里的代码用单引号使用 2，内嵌式 3.外部JS文件 JS中的注释 3.JS输入输出语句 变量 变量 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" cont
Web前端学习-day03-JavaScript
Javaw1212的博客
08-26 3958
交互性强: 由于JS语言是嵌入到HTML页面中undefined最终执行在客户端的浏览器中的语言undefined和用户是直接接触undefined Java语言是运行在服务器的语言undefined 用户需要进行交互的话必须通过网络才可以undefined所以JS语言的交互性会更强.==和===区别: ==先统一等号两边变量的类型 再比较值undefined ===先比较两个变量的类型undefined类型一致后再比较值. "666"==666 true "666"===666 false。...
JavaScript 快速入门手册
Java.慈祥
08-17 1万+
JavaScript是一门解释型语言，所谓解释型指语言是指不需要被编译为机器码在执行，而是直接浏览器|node中执行。JavaScript中每一个函数对象都存在一个隐藏的对象属性:prototype原型对象函数以普通函数调用，prototype没有任何作用函数以构造函数调用，new 构造函数(...);
JavaScript 获取时间
qq_56491274的博客
10-21 2662
JavaScript获取时间
JavaScript详解
weixin_45845391的博客
08-16 1万+
文档对象模型，就是将页面中所有的标签元素都看成是一个对象（一片叶子），主树干定义为根节点（根元素），所有的标签都是从根元素延伸出去的，摸清结构，找到某个标签就不再困难了。“顺藤摸瓜”，主树干有分支，每个分支还有许多小分支，只要把这个分支的结构整理清楚，任何一片叶子都不是难事了。每个标签都有它存在的意义，如果我们想要动态的修改某个标签的值。闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。突发奇想，如果在test1()函数里面，再嵌套一个函数，js是支持函数嵌套的。.
kettle开发篇-JavaScript脚本-Day31
qq_29061315的博客
12-29 3832
前言： 昨天我们讲了映射，映射可以帮我来将转换进行封装便于我们的重用，今天我们来讲解下JavaScript脚本，可以通过JavaScript脚本来处理一些复杂的转换问题。JavaScript脚本就是使用JavaScript语言通过代码编程来完成对数据流的操作。JS中有很多内置函数，可以在编写JS代码时查看。 一、JavaScript脚本 JavaScript脚本就是使用JavaScript语言...
JavaScript Day_02
03-24
javascript第二天笔记
JavaScript Day_01
03-24
javascript学习第一天笔记
JS.rar_day3lb_javascript
09-23
在"JS.rar_day3lb_javascript"这个压缩包中，我们很显然关注的是JavaScript技术，特别是与“futdraft”程序相关的应用。"futdraft"可能是一个足球模拟选秀或者阵容构建的应用，这需要对JavaScript有深入的理解以及对...
Javascript-day-2
02-26
"Javascript-day-2"这个主题可能指的是一个学习JavaScript的系列课程或教程的第二天内容。在这个阶段，我们通常会深入理解JavaScript的基础概念，包括变量、数据类型、操作符、控制流程以及函数等。 首先，变量是...
牛客JS题（二十一）数组扁平化
最新发布
不起眼小菜菜的博客
08-04 802
注释很详细，直接上代码……
Springboot+Websocket+Security+Vue 实现弹幕推送功能
Gemini1995的博客
08-01 667
【代码】Springboot+Websocket+Security+Vue 实现弹幕推送功能。
vite静态资源处理，处理vite项目中src和url路径问题
WanweI897的博客
08-02 471
处理vite项目中src和url路径问题
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 2850
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
linux命令行下使用的浏览器
没刮胡子的程序员专栏
08-01 108
从命令行浏览网页的原因有很多。 命令行工具通常具有丰富的选项和参数，可以根据用户的需求进行调整和配置。这种灵活性使得命令行在自动化和脚本编写方面非常有用。 对于系统管理员来说，命令行是管理和配置服务器的首选方式。通过命令行，管理员可以快速执行各种任务，例如安装软件包、配置网络、管理用户和权限等。与图形界面相比，命令行通常更高效，特别是在处理大量的重复性任务时。 使用Linux命令行浏览器可以提高工作效率，降低系统资源消耗，提高系统的稳定性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值