js中的方法是什么意思,js常用方法大全

大家好,小编来为大家解答以下问题,js中的方法是什么意思,js常用方法大全,今天让我们一起来看看吧!

js简介

前端三大件
        html  超文本标记语言  结构层  也是一门语言
        css  层叠样式表  样式层
        JavaScript 轻量级弱类型的脚本语言
js三大核心
        ES(ECMAScript) js 语法规范
        我们要按照指定的语法进行开发  js这门语言就是一个工具  我们使用这个工具解决问题
         ECMASCRIPT: 定义了java的语法规范,描述了语言的基本语法和数据类型
         BOM (Browser Object Model): 浏览器对象模型
         提供一整套操作浏览器的解决方法
         DOM (Document Object Model): 文档对象模型
         提供一整套文档流相关的属性和方法       

vscode 常用快捷键

  1. Ctrl + / : 注释

  2. Alt+B : 快速开启浏览器

  3. 复制 : shift + alt + ↓

  4. 移动 : alt + ↓

  5. 格式化代码规范 : shift + alt + F

  6. 折叠侧边栏 :Ctrl + B

  7. ctr + ` => 切换vscode终端

  8. 浏览器调出控制台

  9. Ctrl+N : 新建

  10. Ctrl + C : 复制 ( 光标在这一行即可)

  11. Ctrl + X : 删除当前行

  12. Ctrl+Z 撤销这一次操作

  13. Ctrl+Shift+Z : 反撤销

js应用位置行内

写在标签上的 js 代码需要依靠事件(行为)来触发

写在a标签上的href属性上
<a href="java:alert('我是一个弹出层');">点击</a>
写在其他元素上
<div οnclick="alert('我是一个弹出层')">点击</div>
注:onclick 是一个事件(点击事件),当点击元素的时候执行后面的 js 代码

内嵌式js代码

内嵌式的js代码会在页面打开的时候直接触发

在html页面书写一个标签,标签内部书写js代码
< type="text/java">
    alert('我是一个弹出层')
</>
注:标签可以放在head里面也可以放在body里面

外链式jS代码

外链式js代码只要引入了html页面,就会在页面打开的时候直接触发

新建一个.js后缀的文件,在文件内书写js代码,把写好的js文件引入html页面

我是index.js文件
alert('我是一个弹出层')
html文件
通过标签的src属性,把写好的js文件引入页面
< src="index.js"></>
一个页面可以引入多个js文件
< src="index1.js"></>
< src="index2.js"></>
< src="index3.js"></>

JS中的注释

学习一个语言,先学习一个语言的注释,因为注释是给我们自己看的,也是个开发人员看的

写一个好的注释,有利于我们以后阅读代码

单行注释

一般就是用来描述下面一行代码的作用

可以直接写两个/,也可以按Ctrl+/

// 单行注释
// 下面代码表示在浏览器里面出现一个弹出层
alert('弹出层')
多行注释

一般用来写一大段话,或者注释一段代码

可以直接写/**/然后再两个星号中间写注释。各个编辑器的快捷键不一样,vscode是ctrl+shift+a

/*
  多行注释
*/
/*
  注释的代码不会执行 alert('弹出层')
*/
alert('弹出层')

JS输出的三种方式

<>
        alert(4333)  //弹出弹框
        console.log('hello.word')  //控制台打印   遇到问题 使用console.log() 进行打印 如果能够出来结果说明 结果不在这里  如果不出来 说明错误出现在上面
        document.write('东风吹战鼓擂当今世界谁怕谁')  //在网页上显示
 </>

变量

变量指的是在程序中保存数据的一个容器

变量是计算机内存中存储数据的标识符,根据变量名称可以获取到内存中存储的数据

也就是说,我们向内存中存储了一个数据,然后要给这个数据起一个名字,为了是我们以后再次找到他

语法: var 变量名 = 值

定义变量及赋值
// 定义一个变量
var num;
// 给一个变量赋值
num = 100;
// 定义一个变量的同时给其赋值
var num2 = 200;

注意:

  1. 一个变量名只能存储一个值

  2. 当再次给一个变量赋值的时候,前面一次的值就没有了

  3. 变量名称区分大小写(JS 严格区分大小写)

变量的命名规则和命名规范
  • 规则: 必须遵守的,不遵守就是错

    1. 一个变量名称可以由 数字字母英文下划线(_)美元符号($) 组成

    2. 严格区分大小写

    3. 不能由数字开头

    4. 不能是 保留字 或者 关键字

    5. 不要出现空格

  • 规范: 建议遵守的(开发者默认),不遵守不会报错

    1. 变量名尽量有意义(语义化)

    2. 遵循驼峰命名规则,由多个单词组成的时候,从第二个单词开始首字母大写

    3. 不要使用中文

<>
        // x = 8
        // y = 8
        // alert(x+y)  // 给cpu 发送指令 算1+1 
        // alert(x+y) 
        // alert(x+y) 
        // alert(x+y) 
        // alert(x+y)  
        // 第一个需求  100 行代码  都是算2+2   alert(2+2) 这种写法有弊端   这属于写死 想改成8+8 100行都要改  
        // 如果想简单 
        //设置 x  y  都是可变的量   
        // 第一次 x = 2 y =2 满足上面的需求  
        // 当我们想算8+8的时候 仅仅需要改 x = 8 y=8 即可
        // 这里 x y 就是变量
        // var x = 10;   // 从右往左  
        // 规则  你必须遵守  
        // 规范 风格  可遵守可不遵守 
        // alert(x)
        // var 1abc = 1
        // alert(1)
        // 只能包含 字母 数字 下划线  $ 
        // 不能以数字开头  
        // var a = 10;
        // var A = 20;
        // alert(a); // 10 
        // 严格区分 大小写
        // var = 100
        // alert(var) 
        // 避开关键字 和保留字 
        //  关键字 就是 已经被系统占用的 单词   保留字 就是虽然还没占用但是后边会占用  
        //  编辑器中高亮的 就是关键字   
    </>

数据类型

是指我们存储在内存中的数据的类型

我们通常分为两大类 基本数据类型复杂数据类型

基本数据类型
  1. 数值类型(number)

    • 一切数字都是数值类型(包括二进制0b,八 进制0o,十进制,十六进制0x等)

    • NaN(not a number),一个非数字

    • console.log(0o77)八进制

  2. 字符串类型(string)

    • 被引号包裹的所有内容(可以是单引号也可以是双引号)console.log('hello')

  3. 布尔类型(boolean)

    • 只有两个(true 或者 falsevar test=true console.log('test')

  4. null类型(null)

    • 只有一个,就是 null,表示空的意思

      var test = null;
       console.log(test)
  5. undefined类型(undefined)

    • 只有一个,就是 undefined,表示没有值的意思

var test; 仅仅声明 但是没有赋值

var test 仅仅声明 但是没有赋值

console.log(test) undefined

复杂数据类型

对象类型object 类 数组

函数类型function 函数 工具

判断数据类型
  • 使用 typeof 关键字来进行判断 不是随便两个数据类型就能一起参与运算的

// 第一种使用方式
var n1 = 100;
console.log(typeof n1);
​
// 第二种使用方式
var s1 = 'abcdefg';
console.log(typeof(s1));
​
var test =  0xabc
        console.log(typeof test) // number  数值 如果返回的是number 代表这是一个 数值类型
        
        var haha = 'abc'
        console.log(typeof haha)  // string 字符
​
​
        var haha1 = true
        console.log(typeof haha1) //boolean  布尔
​
        var test1;
        console.log(typeof test1) //undefined  undefined
​
        var test2 = null;
        console.log(typeof test2) //object  null  是object 的一个特殊类型
判断一个变量是不是数字
  • 可以使用 isNaN 这个方法来判断一个变量是不是数字

  • isNaNis not a number

// 如果变量是一个数字
var n1 = 100;
console.log(isNaN(n1)); //=> false
​
// 如果变量不是一个数字
var s1 = 'Jack'
console.log(isNaN(s1)); //=> true

数据类型转换

数据类型之间的转换,比如数字转成字符串,字符串转成布尔,布尔转成数字等

其他数据类型转成数值
  1. Number(变量)

    可以把一个变量强制转换成数值类型

    可以转换小数,会保留小数

    可以转换布尔值

    遇到不可转换的都会返回 NaN

  2. parseInt(变量)

    从第一位开始检查,是数字就转换,知道一个不是数字的内容

    开头就不是数字,那么直接返回 NaN

    不认识小数点,只能保留整数

  3. parseFloat(变量)

    从第一位开始检查,是数字就转换,知道一个不是数字的内容

    开头就不是数字,那么直接返回 NaN

    认识一次小数点

  4. 除了加法以外的数学运算

    运算符两边都是可运算数字才行

    如果运算符任何一遍不是一个可运算数字,那么就会返回 NaN

    加法不可以用

<>
        //Number() 转换的内容当做一个整体来处理
        // 如果可以转成一个合法数字 则转换成数字
        // 如果不能转成一个合法的数字 则转换成NaN 
        var num='123abc';
        console.log(typeof(num));
        var num1 = 'kangbazi';
        console.log(typeof(num1));
        var num2 = Number(num1);
        console.log(typeof(num2));
        //parseInt()  转成整数
        // 不管转换什么 都是一位一位的对待  'abc'
        // 如果第一位不能转成合法的数字  那么就立马输出 NaN 然后停止转换 
        // 如果第一位能转成合法的数字  那么保留第一位 然后继续看第二位 
        // 以此类推直到结束 不认小数点  true  NaN   false  NaN
        var test = '123abc';
        console.log(parseInt(test))
        //parseFloat()
        // 也是以为一位的对待  同parseInt 
        // 如果第一位不能转成合法的值 那么就立马输出 NaN 然后停止转换 
        // 如果第一位可以转换 那么保留第一位 继续下一位  
        // 识别小数点
         var test = '123.45';
         console.log(parseFloat(test));// 123.45
         console.log(parseFloat('123.45abc'));// 123.45
         console.log(parseFloat('abc123.45'));// NAN
         var test;
         console.log(parseFloat(test));// 123.45
         console.log(parseFloat(null));//nan
         // isNaN()  只要带is的工具 结果不出意外一定是布尔类型  
         // 如果是NaN 则返回true  否则返回false
         console.log(isNaN(parseFloat('abc123.456')));// true
         console.log(isNaN(parseFloat('123.456abc')));// false 
​
         console.log(parseFloat('abc123.4576')+100) // NaN 
         console.log(NaN == NaN) // 结果一定是布尔类型 要么true 要么false
    </>
转换字符串
  1. 变量.toString()

    有一些数据类型不能使用 toString() 方法,比如 undefinednull

  2. String(变量)

    所有数据类型都可以

  3. 使用加法运算

    在 JS 里面,+ 由两个含义

    字符串拼接: 只要 + 任意一边是字符串,就会进行字符串拼接

    加法运算:只有 + 两边都是数字的时候,才会进行数学运算

<>
        //String()
        // 任何类型都可以使用这个转成字符串
​
        // toString()
        // 不能转 undefined null
        var test;
        console.log(String(test)+100)
        console.log(String(null)+100)
        // +  除了相加 还有拼接的作用 
        //加法运算:只有 + 两边都是数字的时候,才会进行数学运算
        console.log(typeof(1+1+'abc')) // 只要两边有一个字符串 那么就是拼接 
        // // 从左往右运算  2+'abc'  2abc
        console.log(typeof('abc'+1+1)) // 开始见到字符串 后边所有都是拼接
        // // abc11
    </>
转换成布尔

Boolean(变量)

在 js 中,只有 ''0nullundefinedNaN,这些是 false

其余都是 true

<>
        //在 js 中,只有 ''、0、null、undefined、NaN,这些是 false 其余都是 true
        // 0 0.0 NaN ""  ''  false  null undefined
            //  复杂数据类型 引用类型中 如果是空的  结果一定是false 
​
            // 重点  后边判断  逻辑运算 都会用到  
​
            // 转字符串  转数值 转 布尔 上面的都是 明着转换   
            // 后边知识点 很多隐式转换   
​
            // 负无穷 是true
        console.log(Boolean(""))
        console.log(Boolean(" "))
    </>

运算符

就是在代码里面进行运算的时候使用的符号,不光只是数学运算,我们在 js 里面还有很多的运算方式

数学运算符
  1. +

    只有符号两边都是数字的时候才会进行加法运算

    只要符号任意一边是字符串类型,就会进行字符串拼接

  2. -

    会执行减法运算

    会自动把两边都转换成数字进行运算

  3. *

    会执行乘法运算

    会自动把两边都转换成数字进行运算

  4. /

    会执行除法运算

    会自动把两边都转换成数字进行运算

  5. %

    会执行取余运算

    会自动把两边都转换成数字进行运算

 <>
        console.log(1+2) // 3
        console.log(true+false) // 隐式转换  true1 false0 结果 1
        console.log(1+1+'abc') // 2abc
        console.log('abc'+'def'+1+2+4)
        console.log(100/50) //2 
        console.log(100/0) // Infinity   分母为0 返回正无穷
        console.log(100%3)  //1
        console.log(2**3) // 8
​
        var num = 16789
        h = parseInt(num/3600) // 小时
        m = parseInt(num%3600/60) //分钟
        s = parseInt(num%60) //秒
        console.log(h,'时',m,'分',s,'秒')
    </>
赋值运算符
  1. =

    就是把 = 右边的赋值给等号左边的变量名

    var num = 100

    就是把 100 赋值给 num 变量

    那么 num 变量的值就是 100

  2. +=

    var a = 10;
    a += 10;
    console.log(a); //=> 20

    a += 10 等价于 a = a + 10

  3. -=

    var a = 10;

    a -= 10;
    console.log(a); //=> 0

    a -= 10 等价于 a = a - 10

  4. *=

    var a = 10;
    a *= 10;
    console.log(a); //=> 100

    a *= 10 等价于 a = a * 10

  5. /+

    var a = 10;
    a /= 10;
    console.log(a); //=> 1

    a /= 10 等价于 a = a / 10

  6. %=

    var a = 10;
    a %= 10;
    console.log(a); //=> 0

    a %= 10 等价于 a = a % 10

<>
        // = 赋值    ==  判断是否相等 
​
        var num = 100;
        console.log(num)
​
        // num = num + 100 
        // console.log(num)
        num += 100 // 等同于num = num+100 
        console.log(num) // 200 
        
        // -= 
        num -= 100  // num = num -100
        console.log(num) // 100
​
        // *= 
        num *= 5 // num = num * 5
        console.log(num) // 500
        // /=
​
        num /= 5  // num = num /5
        console.log(num) // 100
        // %=
​
        num  %= 3 // num = num %3 
        console.log(num)  //1
        // **=
        num **=2 // num = num**2
        console.log(num)//1
    </>
比较运算符
  1. ==

    • 比较符号两边的值是否相等,不管数据类型 >

      1 == '1'

      两个的值是一样的,所以得到 true

  2. ===

    • 比较符号两边的值和数据类型是否都相等 >

      1 === '1'

      两个值虽然一样,但是因为数据类型不一样,所以得到 false

  3. !=

    • 比较符号两边的值是否不等 >

      1 != '1'

      因为两边的值是相等的,所以比较他们不等的时候得到 false

  4. !==

    • 比较符号两边的数据类型和值是否不等 >

      1 !== '1'

      因为两边的数据类型确实不一样,所以得到 true

  5. >=

    • 比较左边的值是否大于或等于右边的值 >

      1 >= 1 结果是 true

      1 >= 0 结果是 true

      1 >= 2 结果是 false

  6. <=

    • 比较左边的值是否小于或等于右边的值 >

      1 <= 2 结果是 true

      1 <= 1 结果是 true

      1 <= 0 结果是 false

  7. >

    • 比较左边的值是否大于右边的值 >

      1 > 0 结果是 true

      1 > 1 结果是 false

      1 > 2 结果是 false

  8. <

    • 比较左边的值是否小于右边的值 >

      1 < 2 结果是 true

      1 < 1 结果是 false

      1 < 0 结果是 false

<>
         console.log(1==1)// true
         console.log('1'==1) // true 
        // // 两个= 仅仅是判断值是否相等 不判断类型 
         console.log('1'===1) // false  === 判断值和类型是否都相等 
         console.log(1!='2') //判断值是否不相等 如果不相等 true 否则 false
         console.log(1!=='2')// 判断值和类型是否都不相等  是 返回给true 否则 false 
         console.log(5>6)
         console.log(5>=6)
​
         console.log(5<6)
         console.log(5<=6)
​
​
        // 比较运算符  结果一定是布尔类型  
​
        // = 赋值  
        // == 值是否相等 
        // === 值和类型是否都相等 
​
        // console.log(NaN == NaN)
​
        // console.log(undefined == null) // true 
        // // undefined 派生自 null  
        // console.log(undefined === null) // false  因为类型不一致 
        console.log(1 == true) // true
        console.log(1 === true) // false 因为类型不一致
    </>
逻辑运算符
  1. &&

    • 进行 且 的运算 >

      符号左边必须为 true 并且右边也是 true,才会返回 true

      只要有一边不是 true,那么就会返回 false

      true && true 结果是 true

      true && false 结果是 false

      false && true 结果是 false

      false && false 结果是 false

  2. ||

    • 进行 或 的运算 >

      符号的左边为 true 或者右边为 true,都会返回 true

      只有两边都是 false 的时候才会返回 false

      true || true 结果是 true

      true || false 结果是 true

      false || true 结果是 true

      false || false 结果是 false

  3. !

    • 进行 取反 运算 >

      本身是 true 的,会变成 false

      本身是 false 的,会变成 true

      !true 结果是 false

      !false 结果是 true

<>
        // 逻辑运算符的结果 不一定是布尔类型
         // 逻辑与       &&   两边都是true  结果才是true 
         // 两边只要有一个是false 整个结果就是false
        var test1=true&&false&&true // 遇到false 停止向右走
        console.log(test1)
        // 逻辑或    ||   两边只要有一个是true  整个结果就是true 
         //  两边都是false  整个结果就是false  
        // 遇到true 停止向右判断
        var test2=false||false||true
        console.log(test2)
        // 逻辑非  !  true-> false  false-> true
        console.log(!true)
    </>
逻辑补充
<>
        var num = 123.456789;
        alert(num.toFixed(2));  //toFixed()保留几位小数
        false || true  && false 
        false || false
        if(false && true || true && false){        
            console.log('true');
        }
        else{
             console.log('走到这里alse');
         }
        //逻辑与  逻辑或在一起的 先执行逻辑与 
​
        alert(!(true) && true)
​
        //逻辑非 和逻辑与 在一起的时候 先 逻辑非  
​
        //逻辑非 ! > 逻辑与 &&> 逻辑或 || 
​
        //==  值相等    ===  值和类型 都相等  
​
        //Object.is(数据1,数据2)
        //判断两个数据是否一致  返回的是一个布尔类型的结果 
​
​
        alert(Object.is(1,'1')) // false
        alert(Object.is(1,1)) // true
​
        alert(undefined == null)  // true
        alert(Object.is(undefined,null)) // false 
        alert(Object.is(NaN,NaN)) // true 如果位true 说明两个数据一致
        // false 不一致
    </>

自减自增运算符
  1. ++

    • 进行自增运算

    • 分成两种,前置++后置++

    • 前置++,会先把值自动 +1,在返回

      var a = 10;
      console.log(++a);
      // 会返回 11,并且把 a 的值变成 11
    • 后置++,会先把值返回,在自动+1

      var a = 10;
      console.log(a++);
      // 会返回 10,然后把 a 的值变成 11
  2. --

    • 进行自减运算

    • 分成两种,前置--后置--

    • ++ 运算符道理一样

 <>
        var test=10   //++   每次加一
        console.log(++test) //11  // 前置  ++变量 会先把值自动 +1,在返回
        console.log(++test)  //12 // 后置  变量++ 会先把值返回,在自动+1
        console.log('--------')
        console.log(test)  //12
        console.log(++test) //13
        console.log(test++)//13
        console.log(++test)  //15  //--一样
        console.log(--test)  //14
        console.log(--test)  //13
        console.log(test--)  //13
        console.log(--test)  //11
        console.log(--test)  //10
        console.log(test)
        var test1=test++ + ++test - --test + test-- +test
        console.log(test1)  //32
    </>

分支结构

if语句
  • 通过一个 if 语句来决定代码是否执行

  • 语法: if (条件) { 要执行的代码 }

  • 通过 () 里面的条件是否成立来决定 {} 里面的代码是否执行

    // 条件为 true 的时候执行 {} 里面的代码
    if (true) {
      alert('因为条件是 true,我会执行')
    }
    ​
    // 条件为 false 的时候不执行 {} 里面的代码
    if (false) {
        alert('因为条件是 false,我不会执行')    
    }
if else 语句
  • 通过 if 条件来决定,执行哪一个 {} 里面的代码

  • 语法: if (条件) { 条件为 true 的时候执行 } else { 条件为 false 的时候执行 }

  • 两个 {} 内的代码一定有一个会执行

    // 条件为 true 的时候,会执行 if 后面的 {} 
    if (true) {
      alert('因为条件是 true,我会执行')
    } else {
      alert('因为条件是 true,我不会执行')
    }
    ​
    // 条件为 false 的时候,会执行 else 后面的 {}
    if (false) {
      alert('因为条件为 false,我不会执行')
    } else {
      alert('因为条件为 false,我会执行')
    }
if else if ... 语句
  • 可以通过 ifelse if 来设置多个条件进行判断

  • 语法:if (条件1) { 条件1为 true 的时候执行 } else if (条件2) { 条件2为 true 的时候执行 }

  • 会从头开始依次判断条件

    • 如果第一个条件为 true 了,那么就会执行后面的 {} 里面的内容

    • 如果第一个条件为 false,那么就会判断第二个条件,依次类推

  • 多个 {} ,只会有一个被执行,一旦有一个条件为 true 了,后面的就不在判断了

    // 第一个条件为 true,第二个条件为 false,最终会打印 “我是代码段1”
    if (true) {
          alert('我是代码段1')
    } else if (false) {
        alert('我是代码段2')           
    }
    ​
    // 第一个条件为 true,第二个条件为 true,最终会打印 “我是代码段1”
    // 因为只要前面有一个条件满足了,就不会继续判断了
    if (true) {
          alert('我是代码段1')
    } else if (true) {
          alert('我是代码段2')
    }
    ​
    // 第一个条件为 false,第二个条件为 true,最终会打印 “我是代码段2”
    // 只有前一个条件为 false 的时候才会继续向后判断
    if (false) {
          alert('我是代码段1')
    } else if (true) {
          alert('我是代码段2')
    }
    ​
    // 第一个条件为 false,第二个条件为 false,最终什么也不会发生
    // 因为当所有条件都为 false 的时候,两个 {} 里面的代码都不会执行
    if (false) {
          alert('我是代码段1')
    } else if (false) {
          alert('我是代码段2')
    }
if else if … else 语句
  • 和之前的 if else if ... 基本一致,只不过是在所有条件都不满足的时候,执行最后 else 后面的 {}

    // 第一个条件为 false,第二个条件为 false,最终会打印 “我是代码段3”
    // 只有前面所有的条件都不满足的时候会执行 else 后面的 {} 里面的代码
    // 只要前面有一个条件满足了,那么后面的就都不会执行了
    if (false) {
          alert('我是代码段1')
    } else if (false) {
          alert('我是代码段2')
    } else {
          alert('我是代码段3')
    }
三元运算符
  • 三元运算,就是用 两个符号 组成一个语句

  • 三元运算只是对 if else 语句的一个简写形式

  • 语法: 条件 ? 条件为 true 的时候执行 : 条件为 false 的时候执行

 var res=18
       if(res==18){
        console.log('成年')
       }
       else(
        console.log('未成年')
       )
       res=>18?'成年':'未成年'
       console.log(res)
       res==18?console.log('成年'):console.log('未成年')
​
       var rom=parseFloat(prompt('请输入一个数'))
       if(rom==0){
        console.log('你是男生')
       }
       else(
        console.log('你是女生')
       )
       rom==0?console.log('你是男生'):console.log('你是女生')
分支嵌套
<>
        // 中国人 
            //成年人
                //绿码
                //红码
​
            //未成年
​
        //外国人
        var rel=parseInt(prompt('请输入你是哪国人 0中国人 1外国人'));
        if(rel==0){
            console.log('中国人');
            var rel1=parseInt(prompt('是否成年 0成年 1未成年'));
            if(rel1==0){
                console.log('成年人');
                var rel2=parseInt(prompt('请出示你的健康码 1绿码 0红码'));
                if(rel2==1){
                    console.log('绿码');
                }
                else{
                    console.log('红码');
                }
            }
            else{
                console.log('未成年');
            }
        }
        else{
            console.log('外国人');
        }
        
    </>
switch分支结构
  • 也是条件判断语句的一种

  • 是对于某一个变量的判断

  • 语法:

  • switch (要判断的变量) {
      case 情况1:
        情况1要执行的代码
        break
      case 情况2:
        情况2要执行的代码
        break
      case 情况3:
        情况3要执行的代码
        break
      default:
        上述情况都不满足的时候执行的代码
    }
      switch(条件){
                  case 结果/情况方案:  
                      执行语句;
                      break; //阻断程序往下执行
                      // case 后边不能写 >
              //如果不写 就会继续穿透到下一个结果/情况 然后这个这个结果的代码
                  case 结果2/情况2:
                      执行语句2;
                      break;
           default:  //如果 switch 括号里边的结果  都不在下面的case中
                  // 那么就会走到 default 
                  执行语句3;
                  break;
          }

循环结构

  • 循环结构,就是根据某些给出的条件,重复的执行同一段代码

  • 循环必须要有某些固定的内容组成

    1. 初始化

    2. 条件判断

    3. 要执行的代码

    4. 自身改变

while循环
  • while,中文叫 当…时,其实就是当条件满足时就执行代码,一旦不满足了就不执行了

  • 语法 while (条件) { 满足条件就执行 }

  • 因为满足条件就执行,所以我们写的时候一定要注意,就是设定一个边界值,不然就一直循环下去了

<>
         // 初始值    计数器 默认 0 
        // 判断条件    计数器 <= 10
        // 执行的代码  跑步 
        // 计数器     计数器++
​
        // 计数器
        // while(条件判断){
        //     条件满足的执行的代码;
        //     计数器++;
        // }
        var count=1 ;
        while(count<=10){
            console.log('他跑了'+count+'圈')
            count++;
        } 
        //只要while条件为true 循环就会执行
        //死循环就是条件永远为true
        //我们在开发过程中 也会刻意制造死循环
        while(true){
            console.log('死循环')
        }
       //1-100所有偶数相加
       var ser=0
        var sem=0
        while(ser<100){
            ser+=2
            sem+=ser
            console.log(sem)
        }
    </>
do while循环
do{
  执行的代码
}
while(条件)
  • 是一个和 while 循环类似的循环

  • while 会先进行条件判断,满足就执行,不满足直接就不执行了

  • 但是 do while 循环是,先不管条件,先执行一回,然后在开始进行条件判断

  • 语法: do { 要执行的代码 } while (条件)

 do {
       var password = prompt('请输入密码'); // 无论如何 一定会执行一次
    }while(password != '123456'); // 如果密码不是123456 那就继续输入
for 循环
  • whiledo while 循环都不太一样的一种循环结构

  • 道理是和其他两种一样的,都是循环执行代码的

  • 语法: for (var i = 0; i < 10; i++) { 要执行的代码 }

<>
        //1000-2022之间所有的润年
        var ser=0
        for(num=1000;num<=2022;num++){
            if((num%4==0 && num%100!=0)||num%400==0){
                ser=num
                document.write('<table border=1>')
                document.write('<tr>')
                document.write('<th>年份</th>')
                document.write('<th>是否是润年</th>')
                document.write('</tr>')
                document.write('<tr>')
                document.write('<td>'+ser+'</td>')
                document.write('<td>是</td>')
                document.write('</tr>')
            }
        }
    </>
循环嵌套
>
        //循环中再来个循环
        //七列的矩形
        for(var n=1;n<=7;n++){
            for(var m=1;m<=7;m++){
                document.write('*'+"&nbsp;")
            }
            document.write('<br>')
        }
    </>
    <>
        //直角三角形
        for(var n=0;n<9;n++){   //外面循环控制行
            document.write(n)
            for(var m=0;m<n;m++){  //里面循环控制列
                document.write('*'+"&nbsp;")
            }
            document.write('<br>')
        }
    </>
<>
        //等腰三角形
        for(var a=1;a<=9;a++){
            for(var b=9;b>=a;b--){
                document.write('&ensp;')
            }
            for(var c=1;c<=a;c++){
                document.write('* &nbsp;')
            }
            document.write('<br>')
        }
    </>
break 终止循环
  • 在循环没有进行完毕的时候,因为我设置的条件满足,提前终止循环

  • 比如:我要吃五个包子,吃到三个的时候,不能在吃了,我就停止吃包子这个事情

  • 要终止循环,就可以直接使用 break 关键字

<>
        var i=0
        while(i<100){
            if(i==4){
                break;  //终止循环
            }
            console.log(i)
             i++
        }
    </>
    <>
        var i=0
        while(i<100){
            if(i==4){
                i++
                continue  //跳过这次循环  继续下面的循环             
            }
            console.log(i)
             i++
        }
    </>
CONTINUE 结束本次循环
  • 在循环中,把循环的本次跳过去,继续执行后续的循环

  • 比如:吃五个包子,到第三个的时候,第三个掉地下了,不吃了,跳过第三个,继续吃第四个和第五个

  • 跳过本次循环,就可以使用 continue 关键字

函数

函数的概念
  • 对于 js 来说,函数就是把任意一段代码放在一个 盒子 里面

  • 在我想要让这段代码执行的时候,直接执行这个 盒子 里面的代码就行

  • 先看一段代码

    // 这个是我们以前写的一段代码
    for (var i = 0; i < 10; i++) {
      console.log(i)
    }
    ​
    // 函数,这个 {} 就是那个 “盒子”
    function fn() {
      // 这个函数我们以前写的代码
      for (var i = 0; i < 10; i++) {
        console.log(i)
      }
    }
函数的两个阶段(重点)
  • 按照我们刚才的说法,两个阶段就是 放在盒子里面让盒子里面的代码执行

函数定义阶段

  • 定义阶段就是我们把代码 放在盒子里面

  • 我们就要学习怎么 放进去,也就是书写一个函数

  • 我们有两种定义方式 声明式赋值式

声明式

  • 使用 function 这个关键字来声明一个函数

  • 语法:

<>  //声明式
        function story(){
            document.write('一言之美,贵于千金.——葛洪')
            document.write('人无忠信,不可立于世.——程颐')
            document.write('诚信为⼈之本Python解释器的安装步骤。——鲁迅')
            document.write('⾔必信,⾏必果。——⼦路')
        }// function: 声明函数的关键字,表示接下来是一个函数了
// story: 函数的名字,我们自己定义的(遵循变量名的命名规则和命名规范)
// (): 必须写,是用来放参数的位置(一会我们再聊)
// {}: 就是我们用来放一段代码的位置(也就是我们刚才说的 “盒子”)
    </>

赋值式

  • 其实就是和我们使用 var 关键字是一个道理了

  • 首先使用 var 定义一个变量,把一个函数当作值直接赋值给这个变量就可以了

  • 语法:

<>  //赋值式
         var storle=function(){
            document.write('不信不⽴,不诚不⾏。——晁说之')
            document.write('读书贵精不贵多。——书摘')
            document.write('真诚是⼀种⼼灵的开放。——拉罗什富科')
            document.write('腹有诗书⽓⾃华,读书万卷始通神。——苏轼')
        }// 不需要在 function 后面书写函数的名字了,因为在前面已经有了
    </>

函数调用阶段

  • 就是让 盒子里面 的代码执行一下

  • 让函数执行

  • 两种定义函数的方式不同,但是调用函数的方式都以一样的

调用一个函数

  • 函数调用就是直接写 函数名() 就可以了

    // 声明式函数
    function fn() {
      console.log('我是 fn 函数')
    }
    // 调用函数
    fn()
    ​
    // 赋值式函数
    var fn2 = function () {
      console.log('我是 fn2 函数')
    }
    // 调用函数
    fn()
    • 注意: 定义完一个函数以后,如果没有函数调用,那么写在 {} 里面的代码没有意义,只有调用以后才会执行

调用上的区别

  • 虽然两种定义方式的调用都是一样的,但是还是有一些区别的

  • 声明式函数: 调用可以在 定义之前或者定义之后

  • // 可以调用
    fn()
    // 声明式函数
    function fn() {
      console.log('我是 fn 函数')
    }
    // 可以调用
    fn()
  • 赋值式函数: 调用只能在 定义之后

    // 会报错
    fn()
    // 赋值式函数
    var fn = function () {
      console.log('我是 fn 函数')
    }
    // 可以调用
    fn()
函数的参数(重点)
  • 我们在定义函数和调用函数的时候都出现过 ()

  • 现在我们就来说一下这个 () 的作用

  • 就是用来放参数的位置

  • 参数分为两种 行参实参

    // 声明式
    function fn(行参写在这里) {
      // 一段代码
    }
    fn(实参写在这里)
    ​
    // 赋值式函数
    var fn = function (行参写在这里) {
      // 一段代码
    }
    fn(实参写在这里)

行参和实参的作用

  1. 行参

    • 就是在函数内部可以使用的变量,在函数外部不能使用

    • 每写一个单词,就相当于在函数内部定义了一个可以使用的变量(遵循变量名的命名规则和命名规范)

    • 多个单词之间以 , 分隔

      // 书写一个参数
      function fn(num) {
        // 在函数内部就可以使用 num 这个变量
      }
      ​
      // 书写两个参数
      function fun(num1, num2) {
        // 在函数内部就可以使用 num1 和 num2 这两个变量
      }
    • 如果只有行参的话,那么在函数内部使用的值个变量是没有值的,也就是 undefined

    • 行参的值是在函数调用的时候由实参决定的

  2. 实参

    • 在函数调用的时候给行参赋值的

    • 也就是说,在调用的时候是给一个实际的内容的

      function fn(num) {
        // 函数内部可以使用 num 
      }
      ​
      // 这个函数的本次调用,书写的实参是 100
      // 那么本次调用的时候函数内部的 num 就是 100
      fn(100) 
      // 这个函数的本次调用,书写的实参是 200
      // 那么本次调用的时候函数内部的 num 就是 200
      fn(200)
    • 函数内部的行参的值,由函数调用的时候传递的实参决定

    • 多个参数的时候,是按照顺序一一对应的

      function fn(num1, num2) {
        // 函数内部可以使用 num1 和 num2
      }
      // 函数本次调用的时候,书写的参数是 100 和 200
      // 那么本次调用的时候,函数内部的 num1 就是 100,num2 就是 200
      fn(100, 200)

参数个数的关系

  1. 行参比实参少

  • 因为是按照顺序一一对应的

  • 行参少就会拿不到实参给的值,所以在函数内部就没有办法用到这个值

  1. 行参比实参多

  • 因为是按照顺序一一对应的

  • 所以多出来的行参就是没有值的,就是 undefined

函数的return(重点)

  • return 返回的意思,其实就是给函数一个 返回值终断函数

终断函数
  • 当我开始执行函数以后,函数内部的代码就会从上到下的依次执行

  • 必须要等到函数内的代码执行完毕

  • return 关键字就是可以在函数中间的位置停掉,让后面的代码不在继续执行

返回值
  • 函数调用本身也是一个表达式,表达式就应该有一个值出现

  • 现在的函数执行完毕之后,是不会有结果出现的

  • return 关键字就是可以给函数执行完毕一个结果

    function fn() {
      // 执行代码
      return 100
    }
    // 此时,fn() 这个表达式执行完毕之后就有结果出现了
    console.log(fn()) // 100
  • 我们可以在函数内部使用 return 关键把任何内容当作这个函数运行后的结果

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值