JS第一阶段1

news2024/10/6 3:10:11

文章目录

    • 1. js组成
    • 2. JS三种书写位置
      • JS输出语句
    • 3. 变量
    • 4. 数据类型
      • Number
      • 字符串型 String
      • 布尔型boolean
      • Unddefined和Null
    • 5. 获取变量的数据类型
      • 获取检测变量的数据类型
    • 6. 数据转换类型
      • 转换为字符串
      • 转换为数字型(重点)
      • 转换为布尔型
    • 7.运算符
      • 算数运算符
      • 递增和递减运算符
        • 比较运算符
      • 逻辑运算符(★)
      • 赋值运算符
      • 运算符优先级
    • 8. 流程控制
      • 8.1顺序结构
      • 8.2分支结构(if、三元表达式、switch)
        • if
        • 三元表达式
        • switch
        • if和switch区别
      • 8.3循环结构
        • for 循环
        • 双重 for 循环
        • while 循环
        • do while 循环
        • continue break
    • 9. 数组
      • 创建数组
      • 获取数组元素
      • 数组的长度
    • 10. JS函数
      • 函数的使用
      • 函数的参数
      • 函数的返回值
      • break ,continue ,return 的区别
      • arguments的使用
      • 函数案例:
      • 函数的两种声明方式
        • 自定义函数方式(命名函数)
          • 函数表达式方式(匿名函数)
    • 11. JS作用域
      • 全局作用域 局部作用域
      • 没有块级作用域
      • 变量的作用域
      • 作用域链
    • 12. 预解析
    • 7. 了解
      • 解释型语言和编译性语言
      • 标识符、关键字、保留字
      • JS命名规范以及语法格式

1. js组成

在这里插入图片描述

2. JS三种书写位置

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

JS输出语句

在这里插入图片描述

3. 变量

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
变量命名规范
在这里插入图片描述
在这里插入图片描述

4. 数据类型

在这里插入图片描述
在这里插入图片描述

Number

  1. 数字型进制
    在JS中八进制前面加0,十六进制前加0x
  2. 数字型范围
    在这里插入图片描述
  3. 数字型三个特殊值
    在这里插入图片描述
  4. isNaN()
    在这里插入图片描述
    在这里插入图片描述

字符串型 String

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

布尔型boolean

true在运算中当1来看
false当0来看

Unddefined和Null

在这里插入图片描述

5. 获取变量的数据类型

获取检测变量的数据类型

在这里插入图片描述
prompt去过来的值默认是 字符串型的

var age=prompt(‘请输入您的年龄’)
consale.log(age);
consale.log(typeof age);
//结果是string

6. 数据转换类型

转换为字符串

在这里插入图片描述

转换为数字型(重点)

在这里插入图片描述
在这里插入图片描述

转换为布尔型

在这里插入图片描述

7.运算符

算数运算符

浮点数值的最高精度是 17 位小数,但在进行算术计算时其精确度远远不如整数。

var result = 0.1 + 0.2;    // 结果不是 0.3,而是:0.30000000000000004
console.log(0.07 * 100);   // 结果不是 7,  而是:7.000000000000001

所以:不要直接判断两个浮点数是否相等 !

递增和递减运算符

必须和变量一起使用(不能是++1、++2)
++num 前置递增,就是自加1,
使用口诀:先自加,后返回值

var  num = 10;
alert(++num + 10);   // 21

num++ 后置递增,就是自加1,
使用口诀:先返回原值,后自加

var  num = 10;
alert(10 + num++);  // 20
alert(num);		//11

开发时,大多使用后置递增/减,并且代码独占一行,例如:num++; 或者 num–;

比较运算符

=== 和 !==全等,要求值和数据类型都一致
在这里插入图片描述

逻辑运算符(★)

&&与、||或、!非(取反)
逻辑中断(短路操作)
在这里插入图片描述
在这里插入图片描述

 var num = 0;
console.log(123 || num++);
console.log(num); 

赋值运算符

在这里插入图片描述

运算符优先级

在这里插入图片描述

8. 流程控制

8.1顺序结构

8.2分支结构(if、三元表达式、switch)

if
// 条件成立  执行 if 里面代码,否则执行else 里面的代码 
if (条件表达式) {
    // [如果] 条件成立执行的代码 }
     else {
    // [否则] 执行的代码 }
// 适合于检查多重条件。 if (条件表达式1) {
    语句1} 
    else if (条件表达式2)  {
    语句2} 
    else if (条件表达式3)  {    语句3.... } else {
    // 上述条件都不成立执行此处代码 }
三元表达式

在这里插入图片描述

switch

当要针对变量设置一系列的特定值的选项时,就可以使用 switch。

switch( 表达式 ){ 
    case value1:
        // 表达式 等于 value1 时要执行的代码
        break;
    case value2:
        // 表达式 等于 value2 时要执行的代码
        break;
    default:
        // 表达式 不等于任何一个 value 时要执行的代码
}

在这里插入图片描述

if和switch区别

在这里插入图片描述

8.3循环结构

在这里插入图片描述

for 循环

for 循环主要用于把某些代码循环若干次,通常跟计数有关系。其语法结构如下:
f
}

var star = '';
for (var i = 1; i <= 5; i++) {
     star += '☆'
 }
console.log(star);
双重 for 循环

在这里插入图片描述
打印五行星星

var star = '';
for (var j = 1; j <= 3; j++) {
    for (var i = 1; i <= 3; i++) {
      star += '☆'
    }
    // 每次满 5个星星 就 加一次换行
    star += '\n'
}
console.log(star);
打印n行n列的星星
var row = prompt('请输入您打印几行星星:');
var col = prompt('请输入您打印几列星星:');
var str = '';
for (var i = 1; i <= row; i++) {
   for (j = 1; j <= col; j++) {
       str += '☆';
   }
   str += '\n';
}
 console.log(str);
 打印倒三角星星
var row = prompt('请输入您打印几行倒三角:');
var str = '';
for (var i = 1; i <= row; i++) {
   for (j = i; j <=row; j++) {
       str += '☆';
   }
   str += '\n';
}
 console.log(str);
 九九乘法表
 var str = ''
for (var i = 1; i <= 9; i++) { //  外层for控制 行数  9行
    for (var j = 1; j <= i; j++) { // j 控制列数    列数和行数是一样的  j <= i  
        str += j + " × " + i + " = " + i * j + '\t';
    }
    str += '\n';
}
console.log(str);

在这里插入图片描述

while 循环

在这里插入图片描述
使用 while 循环时一定要注意,它必须要有退出条件,否则会成为死循环
while 循环和 for 循环的不同之处在于 while 循环可以做较为复杂的条件判断,比如判断用户名和密码

do while 循环

在这里插入图片描述
while是先判断后执行,dowhile先执行一次再判断

continue break

在这里插入图片描述
在这里插入图片描述
continue少进行一次循环(退出本次循环,继续执行剩余次数的循环)
break直接结束循环

//求1~100之间,除了7整除之外的整数和
        var sum=0;
        for(var i=1;i<=100;i++){
            if(i%7==0){
                continue;
                //不执行本次循环,直接进行下一次循环
            }
            sum+=i;
        }
        console.log(sum);

9. 数组

创建数组

  1. 利用 new 创建数组
    var 数组名 = new Array() ;
    var arr = new Array(); // 创建一个新的空数组
    注意 Array () ,A 要大写
  2. 利用数组字面量创建数组
  3. 数组的字面量是方括号 [ ]
    声明数组并赋值称为数组的初始化
    这种字面量方式也是我们以后最多使用的方式
//1. 使用数组字面量方式创建空的数组
var  数组名 = []//2. 使用数组字面量方式创建带初始值的数组
var  数组名 = ['小白','小黑','大黄','瑞奇'];

数组中可以存放任意类型的数据,例如字符串,数字,布尔值等。

获取数组元素

数组可以通过索引来访问、设置、修改对应的数组元素,我们可以通过“数组名[索引]”的形式来获取数组中的元素。

// 定义数组
var arrStus = [1,2,3];
// 获取数组中的第2个元素
alert(arrStus[1]);   

遍历: 就是把数组中的每个元素从头到尾都访问一次(类似我们每天早上学生的点名)

var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
    console.log(arrStus[i]);
}

数组的长度

  1. 使用“数组名.length”可以访问数组元素的数量(数组长度)。
    此处数组的长度是数组元素的个数 ,不要和数组的索引号混淆。

  2. 可以通过修改 length 长度来实现数组扩容的目的
    length 属性是可读写的

var arr = ['red', 'green', 'blue', 'pink'];
arr.length = 7;
console.log(arr);
console.log(arr[4]);
console.log(arr[5]);
console.log(arr[6]);
声明变量未给值,默认值就是 undefined
  1. 可以通过修改数组索引的方式追加数组元素 ,不能直接给数组名赋值,否则会覆盖掉以前的数据(最常用)
var arr = ['red', 'green', 'blue', 'pink'];
arr[4] = 'hotpink';
console.log(arr);

在这里插入图片描述

在这里插入图片描述
筛选数组方法
在这里插入图片描述
在这里插入图片描述
冒泡排序
一种算法,把一系列的数据按照一定的顺序进行排列显示(从小到大或者从大到小)
在这里插入图片描述

10. JS函数

函数:就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

函数的使用

// 声明函数
function 函数名() {
    //函数体代码
}
// 调用函数
函数名();  // 通过调用函数名来执行函数体代码
  1. 调用的时候千万不要忘记添加小括号
  2. 口诀:函数不调用,自己不执行。
    声明函数本身并不会执行代码,只有调用函数时才会执行函数体代码。
  3. 函数的封装是把一个或者多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口简单理解:封装类似于将电脑配件整合组装到机箱中 ( 类似快递打包)

函数的参数

在这里插入图片描述

  1. 调用的时候实参值是传递给形参的
  2. 形参简单理解为:不用声明的变量

在这里插入图片描述
在这里插入图片描述

函数的返回值

// 声明函数
function 函数名(){
    ...
    return  需要返回的值;
}
// 调用函数
函数名();    // 此时调用函数就可以得到函数体内return 后面的值
  1. 在使用 return 语句时,函数会停止执行,并返回指定的值
  2. 如果函数没有 return ,返回的值是 undefined
    return 终止函数
    return 语句之后的代码不被执行
function add(num1,num2){
    //函数体
    return num1 + num2; // 注意:return 后的代码不执行
    alert('我不会被执行,因为前面有 return');
}
var resNum = add(21,6); // 调用函数,传入两个实参,并通过 resNum 接收函数返回值
alert(resNum);          // 27

return 只能返回一个值。如果用逗号隔开多个值,以最后一个为准。

function add(num1,num2){
    //函数体
    return num1,num2;
}
var resNum = add(21,6); // 调用函数,传入两个实参,并通过 resNum 接收函数返回值
alert(resNum);          // 6

在这里插入图片描述

break ,continue ,return 的区别

break :结束当前的循环体(如 for、while)
continue :跳出本次循环,继续执行下次循环(如 for、while)
return :不仅可以退出循环,还能够返回 return 语句中的值,同时还可以结束当前的函数体内的代码

arguments的使用

在这里插入图片描述
在这里插入图片描述

 //利用函数求任意个数的最大值
        function getMax(){
            var max = arguments[0];
            for(var i=1;i<arguments.length;i++){
                arguments[i]>max ? max=arguments[i]:max
            }
            return max;
        }
        console.log( getMax(11,23,345,12,1,5));

函数案例:

//利用函数反转任意数组 reverse
        function reverse(arr){
            var newArr=[];
            for(var i=arr.length-1;i>=0;i--){
                newArr[newArr.length]=arr[i];
            }
            return newArr;
        }
       var re = reverse([23,34,12,57,97,34]);
       console.log(re);
  //利用函数封装方式,对数组排序--冒泡排序sort
        /*  1.一共需要的趟数 用外层for循环
            2.每一趟交换次数 用里层for循环
            3.交换两个变量 */
        function sort(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 temp=arr[j];
                        arr[j]=arr[j+1];
                        arr[j+1]=temp;
                    }
                }
            }
            return arr;
        }
        var re=sort([12,45,6,9,54,34]);
        console.log(re);

函数的两种声明方式

自定义函数方式(命名函数)

利用函数关键字 function 自定义函数方式

// 声明定义方式
function fn() {...}
// 调用  
fn();  

因为有名字,所以也被称为命名函数
调用函数的代码既可以放到声明函数的前面,也可以放在声明函数的后面

函数表达式方式(匿名函数)
// 这是函数表达式写法,匿名函数后面跟分号结束
var fn = function(){...}// 调用的方式,函数调用必须写到函数体下面
fn();

在这里插入图片描述

11. JS作用域

通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。

全局作用域 局部作用域

全局作用域作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。
局部作用域作用于函数内的代码环境,就是局部作用域。 因为跟函数有关系,所以也称为函数作用域。

没有块级作用域

在这里插入图片描述
Js中没有块级作用域(在ES6之前)。

if(true){
  var num = 123;
  console.log(123); //123
}
console.log(123);   //123

变量的作用域

在JavaScript中,根据作用域的不同,变量可以分为两种:

1.全局变量: 在全局作用域下的变量,在全局作用域下 var 声明的变量 是全局变量
2.局部变量 在局部作用于下的变量,在函数内部的变量就是局部变量,在函数内部 var 声明的变量是局部变量。函数的形参实际上就是局部变量
3.区别:
全局变量:在任何一个地方都可以使用,只有在浏览器关闭时才会被销毁,因此比较占内存
局部变量:只在函数内部使用,当其所在的代码块被执行时,会被初始化;当代码块运行结束后,就会被销毁,因此更节省内存空间

作用域链

在这里插入图片描述
作用域链:采取就近原则的方式来查找变量最终的值

12. 预解析

1.
console.log(num);  // 结果是多少?
2.
console.log(num);  // 结果是undefined
var num = 10;3.
fn();
function fn() {
    console.log(11);
}//11
4.
fn();	//报错
var  fn = function() {
    console.log('想不到吧');
}
//相当于执行了以下代码
var fn;
fn();
fn = function() {
    console.log('想不到吧');
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

、、案例4
f1();
console.log(c);
console.l0g(b);
console.log(a);
function f1(){
	var a=b=c=9;
	console.log(a);
	console.log(b);
	console.log(c);
	}
//相当于执行了
function f1(){
		var a;
		a=b=c=9;//相当于var a=9;b=9;c=9;b和c直接赋值没有var声明当`全局变量`看
	//和集体声明var a=9,b=9,c=9;不同
		console.log(a);
		console.log(b);
		console.1og(c);}
	f1();
	console.log(c);
	console.l0g(b);
	console.log(a);

7. 了解

解释型语言和编译性语言

在这里插入图片描述

标识符、关键字、保留字

在这里插入图片描述
在这里插入图片描述

JS命名规范以及语法格式

标识符命名规范
变量、函数的命名必须要有意义
变量的名称一般用名词
函数的名称一般用动词
操作符规范
// 操作符的左右两侧各保留一个空格
单行注释规范
其他规范
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1526626.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

找不到msvcp110.dll怎么办,msvcp110.dll丢失的5种修复方法

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是“msvcp110.dll丢失”。由于msvcp110.dll是Microsoft Visual C Redistributable Package的重要组成部分&#xff0c;它的缺失会导致依赖于该组件的软件无法正常启动或运行&#xff0c;比如某…

从初学者到专家:Java反射的完整指南

一.反射的概念及定义 Java 的反射&#xff08; reflection &#xff09;机制是在运行状态中&#xff0c;对于任意一个类&#xff0c;都能够知道这个类的所有属性和方法&#xff1b;对于任意一个对象&#xff0c;都能够调用它的任意方法和属性&#xff0c;既然能拿到那么&#x…

Jenkins + Docker + ASP.NET Core自动化部署

本来没想着要写这篇博客&#xff0c;但是在实操过程中&#xff0c;一个是被网络问题搞炸了心态&#xff08;真心感觉网络能把人搞疯&#xff0c;别人下个包、下个镜像几秒钟搞定&#xff0c;我看着我的几KB小水管真是有苦说不出&#xff09;&#xff0c;另一个就是这里面坑还是…

C语言---指针的两个运算符:点和箭头

目录 点&#xff08;.&#xff09;运算符箭头&#xff08;->&#xff09;运算符需要注意实际例子 C语言中的指针是一种特殊的变量&#xff0c;它存储了一个内存地址。点&#xff08;.&#xff09;和箭头&#xff08;->&#xff09;是用于访问结构体和联合体成员的运算符。…

手撕算法-二叉树的镜像

题目描述 操作给定的二叉树&#xff0c;将其变换为源二叉树的镜像。数据范围&#xff1a;二叉树的节点数 0≤_n_≤1000 &#xff0c; 二叉树每个节点的值 0≤_val_≤1000要求&#xff1a; 空间复杂度 O(n) 。本题也有原地操作&#xff0c;即空间复杂度 O(1) 的解法&#xff0c…

【设计模式】-工厂模式

工厂模式是一种创建型设计模式&#xff0c;它提供了一种在不指定具体类的情况下创建对象的方法。工厂模式的核心思想是将对象的创建与使用分离&#xff0c;降低系统的耦合度&#xff0c;使系统更加灵活、可扩展。 工厂模式主要分为三种类型&#xff1a;简单工厂模式、工厂方法…

苍穹外卖-day06:HttpClient、微信小程序开发、微信登录(业务流程)、导入商品浏览功能代码(业务逻辑)

苍穹外卖-day06 课程内容 HttpClient微信小程序开发微信登录导入商品浏览功能代码 功能实现&#xff1a;微信登录、商品浏览 微信登录效果图&#xff1a; 商品浏览效果图&#xff1a; 1. HttpClient 1.1 介绍 HttpClient 是Apache Jakarta Common 下的子项目&#xff0c;…

苍穹外卖-day04:项目实战-套餐管理(新增套餐,分页查询套餐,删除套餐,修改套餐,起售停售套餐)业务类似于菜品模块

苍穹外卖-day04 课程内容 新增套餐套餐分页查询删除套餐修改套餐起售停售套餐 要求&#xff1a; 根据产品原型进行需求分析&#xff0c;分析出业务规则设计接口梳理表之间的关系&#xff08;分类表、菜品表、套餐表、口味表、套餐菜品关系表&#xff09;根据接口设计进行代…

C#重新认识笔记_ 点乘,叉乘

C#重新认识笔记_ 点积&#xff0c;叉乘 一、Dot Product 点乘&#xff1a; &#xff08;Ax*Bx&#xff09;&#xff08;Ay*By&#xff09;&#xff08;Az*Bz&#xff09;Dot Product 点积 利用点积&#xff0c;可以了解&#xff0c;两个向量(vector)的相关信息&#xff0c; …

el-form 的表单校验,如何验证某一项或者多项;validateField 的使用

通常对form表单的校验都是整体校验&#xff1a; this.$refs.form.validate( valid > {if (valid) {// 校验通过&#xff0c;业务逻辑代码...} }); 如果需要对表单里的特定一项或几项进行校验&#xff0c;应该如何实现&#xff1f; 业务场景&#xff1a;下图点探测按钮时…

CSS 零基础入门教程

目录 1. div 和 span2. 什么是CSS&#xff1f;3. CSS 引入方式3.1 内部样式表3.2 外部样式表3.3 行内样式 4. 选择器4.1 标签选择器4.2 类选择器4.3 id 选择器4.4 通配符选择器 5. CSS 基础属性6. 谷歌浏览器调试工具 正文开始。 1. div 和 span 在学习 CSS 之前&#xff0c;…

Redis 八种常用数据类型详解

夯实基础&#xff0c;这篇文章带着大家回顾一下 Redis 中的 8 种常用数据类型&#xff1a; 5 种基础数据类型&#xff1a;String&#xff08;字符串&#xff09;、List&#xff08;列表&#xff09;、Set&#xff08;集合&#xff09;、Hash&#xff08;散列&#xff09;、Zse…

redis学习-List类型相关命令以及特殊情况分析

目录 1. lpush key value1 value2 ... 2. lrange key start end 3. lpop key num 4. rpush key value1 value2 ... 5. rpop key num 6. lindex key index 7. llen key 8. lrem key num value 9. rpoplpush key1 key2 10. lset key index value 11. linsert key before/after…

算法---二分查找练习-1(在排序数组中查找元素的第一个和最后一个位置)

在排序数组中查找元素的第一个和最后一个位置 1. 题目解析2. 讲解算法原理3. 编写代码 1. 题目解析 题目地址&#xff1a;点这里 2. 讲解算法原理 算法原理如下&#xff1a; 首先&#xff0c;判断数组是否为空&#xff0c;如果为空&#xff0c;则直接返回{-1, -1}表示没有找到目…

深入解析JVM加载机制

一、背景 Java代码被编译器变成生成Class字节码&#xff0c;但字节码仅是一个特殊的二进制文件&#xff0c;无法直接使用。因此&#xff0c;都需要放到JVM系统中执行&#xff0c;将Class字节码文件放入到JVM的过程&#xff0c;简称类加载。 二、整体流程 三、阶段逻辑分析 3…

PostgreSQL中vacuum 物理文件truncate发生的条件

与我联系&#xff1a; 微信公众号&#xff1a;数据库杂记 个人微信: iiihero 我是iihero. 也可以叫我Sean. iiheroCSDN(https://blog.csdn.net/iihero) Sean墨天轮 (https://www.modb.pro/u/16258) 数据库领域的资深爱好者一枚。 水木早期数据库论坛发起人 db2smth就是俺&am…

世界第一个AI软件工程师问世!

2024年3月13日&#xff0c;科技公司Cognition推出了世界上第一位人工智能软件工程师Devin AI。这项创新有望利用人工智能编码和机器学习的力量加快发展。Devin AI不仅仅是帮助&#xff1b;它是一个成熟的队友&#xff0c;发挥智能编码自动化和自主人工智能编码的魔力&#xff0…

Spring Bean的生命周期流程

前言 Java 中的公共类称之为Java Bean&#xff0c;而 Spring 中的 Bean 指的是将对象的生命周期&#xff0c;交给Spring IoC 容器来管理的对象。所以 Spring 中的 Bean 对象在使用时&#xff0c;无需通过 new 来创建对象&#xff0c;只需要通过 DI&#xff08;依赖注入&#x…

数字化转型导师坚鹏:人工智能在金融机构数字化转型中的应用

人工智能在金融机构数字化转型中的应用 课程背景&#xff1a; 金融机构数字化转型离不开人工智能&#xff0c;在金融机构数字化转型中&#xff0c;人工智能起到至关重要的作用&#xff0c;很多机构存在以下问题&#xff1a; 不清楚人工智能产业对我们有什么影响&#xff1f;…

【数据可信流通,从运维信任到技术信任】

1. 数据可信流通体系 信任的基石&#xff1a; 身份的可确认利益可依赖能力有预期行为有后果 2.内循环——>外循环 内循环&#xff1a;数据持有方在自己的运维安全域内队自己的数据使用和安全拥有全责。 外循环&#xff1a;数据要素在离开持有方安全域后&#xff0c;持有方…