JavaScript-初学者基础入门(下)

简介: JavaScript-初学者基础入门(下)

2.3.5 布尔型

布尔值 Boolean 只有两个值(true , false )
console.log(1 + true);  // 在运算中,true代表1
console.log(1+ false);  // false 代表0
console.log('t' + true);  // 在字符串拼接,会直接以字符串形式

2.3.6 null型

console.log(null+ 'pp') ;  // 会拼接字符串 nullpp
console.log(null + true) ;  // 会输出 1
// null表示"没有对象",即该处不应该有值。
1. 作为函数的参数,表示该函数的参数不是对象。
2. 作为对象原型链的终点。

2.3.7 数值转换

       有 3 个函数可以将其他数据类型的数据转换为数字型数据,它们分别是Number()、parseInt() 和 parseFloat() 。第一个函数即转型函数 Number() 可以用于任何数据类型,而另外两个函数则专门用于把字符串类型值转换为数字型值。将其他类型数据转换为数字型数据在类型转换那节专门介绍,下面主要讨论它们将字符串转换为数字时的区别。

//1.number()将其他数据类型的数据转换为数字型数据
var x = 123;             
var y = new Number(123);
console.log(y); //返回123
(x === y) // 为 false,因为 x 是一个数字,y 是一个对象
//2. parseInt()方法  将包含字符串的数字或小数转换成数字类型的整数
parseInt("123.3") ; //返回123 
//3. parseFloat()将其他数据类型的值转换为 Number 类型(浮点型)。
parseInt("123") ; //返回123.0 ;

2.3.7 数组

数组可以把一组相关的数据一起存放,并提供方便的访问方式。

//数组的创建于定义
var arr = new Array() ; //利用对象创建数组
//直接定义数组
var arr = [1,2,'haha',true] ;
//利用下标给数组赋值
arr[0] = 1 ;

2.4 运算符

运算符(operator)也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号

JavaScript 中常用的运算符有:

  • 算数运算符
  • 递增和递减运算符
  • 比较运算符
  • 逻辑运算符
  • 赋值运算符
基于Java运算符,用法相同,就不一一列举 ;

2.5 流程控制语句

       流程控制主要有三种结构,分别是顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序

又分为单分支语句,双分支语句和多分支语句。他们的处理逻辑如图所示:


2.5.1 if语句

// 条件成立执行代码,否则什么也不做
if (条件表达式) {
    //条件成立执行的代码语句
}

案列:打吃鸡

//1、if语句(单分支)
var age = prompt("请输入你的年龄");
   if(age<18){
        alert("你还未成年,请自觉删除游戏😒");
  }
//2、if...else(双分支)
if(age<18){
        alert("你还未成年,请自觉删除游戏😒");
}else{
    alert("加油!特种兵");
}
//3、 if...else if()...else (多分支)
if(age<18){
        alert("你还未成年,请自觉删除游戏😒");
}else if(age >18){
    alert("加油!特种兵");
}else{
    alert("您输入的年龄不符合实际");
}
注 :多分支语句只是多选一,最后只有一个语句执行

2.5.2 Switch语句

  1. 关键字 switch 后面括号内可以是表达式或值, 通常是一个变量
  2. 关键字 case , 后跟一个选项的表达式或值,后面跟一个冒号
  3. switch 表达式的值会与结构中的 case 的值做比较
  4. 如果存在匹配全等(===) ,则与该 case 关联的代码块会被执行,并在遇到 break 时停止,整个 switch 语句代码执行结束
  5. 如果所有的 case 的值都和表达式的值不匹配,则执行 default 里的代码
  6. 执行case 里面的语句时,如果没有break,则继续执行下一个case里面的语句
switch(表达式){
  case value1:
     //表达式等于 value1 时要执行的代码
     break;
  case value2:
     //表达式等于value2 时要执行的代码
     break;
  default:
     //表达式不等于任何一个value时要执行的代码    
}

2.5.3 循环结构

       在程序中,一组被重复执行的语句被称之为循环体,能否继续重复执行,取决于循环的终止条件。由循环体及循环的终止条件组成的语句,被称之为循环语句 ;

  1. for循环
for(初始化变量;条件表达式;操作表达式)
{
   //循环体
}
//案例 :
// 求1-100所以的整数和
var sum = 0;
for (var i = 1; i <= 100; i++) {
    var sum = sum + i;
}
console.log(sum);

 

2. while 循环

while(条件表达式){
  //循环体代码
}
//案例 :
//计算1~100之间所有整数的和
var n = 1;
        var sum = 0;
        while (n <= 100) {
            sum += n;
            n++;
        }
        console.log('1-100的整数和为' + sum);

执行思路:

  1. 先执行条件表达式,如果结果为 true,则执行循环体代码;如果为 false,则退出循环,执行后面代码

执行循环体代码

2. 循环体代码执行完毕后,程序会继续判断执行条件表达式,如条件仍为true,则会继续执行循环体,直到循环条件为 false 时,整个循环过程才会结束

注意:

  1. 使用 while 循环时一定要注意,它必须要有退出条件,否则会称为死循环
  2. while 循环和 for 循环的不同之处在于 while 循环可以做较为复杂的条件判断,比如判断用户名和密码

三、 函数

3.1 初识函数

       函数用于封装实现某项功能的多条语句,方便代码重用和程序维护。可以在任意地方任意时候调用。在这里我们只是对函数有一个基本的了解,更深刻地去理解学习函数(例如函数的本质是什么,什么是匿名函数、回调函数、立即执行函数 等等)我后续会笔记总结发帖。

3.1.1 函数声明

函数的声明知道有三种方式

// 1、使用function关键字声明函数
function sum(num1, num2) {
    return num1 + num2;
}
// 2、使用函数表达式的方式声明函数
var sum = function(num1, num2) {
    return num1 + num2;
}
// 3、使用构造函数创建函数(了解即可)
var sum = new Function('num1', 'num2', 'return num1 + num2;');

       知道函数调用时,执行完 return 语句后立即退出函数,位于 return 语句之后的任何代码都永远不会执行(但是变量依旧会预解析并声明提升)。另外如果函数中没有 return 语句或者函数结束时没有执return 语句函数默认返回值为 undefined 。在需要提前退出函数的情况下也可以利用 return 语句,如果不需要返回值则直接使用该语句而不带任何参数或者字面量值。

3.2 作用域

3.2.1 全局变量

1. 变量在<script>标签之内,或者是一个单独js文件

2. 如果在函数内部没有声明的变量也属于全局变量(即在函数内部可以使用外部的变量)

3. 浏览器关闭才会销毁

3.2.2 局部变量

1. 变量声明在函数内部

2. 函数的形参也可以看做是局部变量

3. 函数执行完毕就会销毁

链式作用域:

函数内部可以调用父集中的变量


       最后JavaScript的基本介绍就到这里,后续我会继续总结深入了解JS,祝大家在敲代码的路上一路通畅!

感谢大家的观看 !

相关文章
|
2月前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
361 2
|
23天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
23天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
29 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
1月前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
73 10
|
29天前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
3月前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
2月前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
2月前
|
自然语言处理 JavaScript 前端开发
JavaScript高级——ES6基础入门
JavaScript高级——ES6基础入门
26 1
|
2月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
507 1
|
2月前
|
Web App开发 JSON JavaScript
深入浅出:Node.js后端开发入门与实践
【10月更文挑战第4天】在这个数字信息爆炸的时代,了解如何构建一个高效、稳定的后端系统对于开发者来说至关重要。本文将引导你步入Node.js的世界,通过浅显易懂的语言和逐步深入的内容组织,让你不仅理解Node.js的基本概念,还能掌握如何使用它来构建一个简单的后端服务。从安装Node.js到实现一个“Hello World”程序,再到处理HTTP请求,文章将带你一步步走进Node.js的大门。无论你是初学者还是有一定经验的开发者,这篇文章都将为你打开一扇通往后端开发新世界的大门。