JS循环、引用值和类型转换

白境
168 阅读2分钟

JS循环、引用值和类型转换

目录

一、循环

二、引用值

三、类型转换

四、课后作业

一、循环

  • 多次执行相同的代码就是循环

for循环

  • break 可以退出循环

  • continue可以跳过本次循环

    • 代码

       // 100以内的数跳过被7整除或个位数是7的数
 for (let i = 0; i <= 100; i++) {
     if (i % 7 === 0 || i % 10 === 7) {
         continue;
     }
     console.log(i); 
 }

  • for循环可以做很多事情，for循环中间的语句是判断语句，如果判断值为false即退出循环

    1. 100以内既能被4整除又能被5整除还能被6整除的数
     // 100以内既能被4整除又能被5整除还能被6整除的数
 for (let i = 1; i < 100; i++) {
     if (i % 4 === 0 && i % 5 === 0 && i % 6 === 0) {
           console.log(i);
     }
 }

    1. 打印0-100的数

    • 要求是：() 只能写一句表达式，不能写比较，{} 不能出现 i ++ i --
     // 打印0-100的数
 let i = 100
 for (; i--;) {
       console.log(i);
 }
 // i减到0 for检测到false自动退出循环
    1. 10的n次方怎么求
     // 10的n次方怎么求
     let n = 5;
     let num = 1;
     for (let i = 0; i < n; i++) {
         num *= 10;
     }
     console.log(num);
 ​
    1. n的阶乘
     //  n的阶乘
 let n = 5
 let num = 1;
 for (let i = 1; i <= n; i++) {
     num *= i
 }
 console.log(num);
    1. 把789颠倒为987
     // 把789颠倒为987
 let num = 789;
 let a = num % 10; // 9
 let b = (num - a) % 100 / 10 // 8
 let c = ((num - a) / 10 - b) / 10 // 7
 console.log(parseInt(''+ a + b + c)); //字符串拼接
    1. 打印出100以内的质数（仅仅能被1和自己整除的数）
     // 打印出100以内的质数
 let c = 0;
 for (let i = 2; i < 100; i++) {
     for (let j = 1; j <= i; j++) {
         if (i % j === 0) { // j从一开始循环每次加一，i每次都除j看是不是能整除
             c++
         }
     }
     if (c === 2) {
         // console.log(i)
     }
     c = 0
 }

二、引用值

引用值有哪些

  • array、object、function、date、RegExp

数组

  • array的索引号从0开始，length是从1开始
  • 可以用循环遍历数组中的每个元素

对象

  • 以键值对的形式出现 name:'白境'
  • name是属性名/键名，白境是属性值，键值
  • 每个键值对用逗号隔开

typeof判断类型

  • 可以判断number、string、boolean、boject、undefined、function
  • 其中object、array、function、null都会被判断为object
  • undefined判断为undefined
  • typeof(1 - '1') 返回number，字符串1被隐式转换为number
  • ** typeof(typeof(任意数据)) 返回的是string，因为typeof检查出类型的这几个字是字符串类型**

三、类型转换

显示类型转换

  • Number( ) 填字符串的非数字，会被转换成NaN
  • Number(true)// 1、Number(false)// 0、Number(null)// 0
  • parseInt( ) 只能转换和数字相关的数据，其他所有数据都会转换成NaN，且只保留整数，小数部分会被切掉
  • parseInt('123asv')// 123、parseInt('asv123')// NaN、parseInt('123asv123')// 123 数字和字符串在一起，从前往后判断，只要有字符就直接返回之前的数字，如果前面没有数字则直接返回NaN
  • parseFloat( ) 转换并保留所有小数点
  • toFixed( ) 括号内可以接受数字，表示需要保留几位小数，保留的小数四舍五入
  • 数字类型转换为字符串可用String( ) 或直接数字加空字符串

数字类型没有.length方法

  • 可以先String(数字类型).length

隐式类型转换

  • ++、-- 会把数据隐式转换为数字类型后再求值
  • + 号，如果有字符串则转换为字符串
  • *、/、%、-，字符串转换为数字
  • >，<，==，!，有字符串的情况下会被转换为数字，如果都是符号两边都是字符串则比较ASCII码，===不会隐式转换

需要注意的

  • undefined、null 不大于，不小于，不等于零
  • `undefined、null 在两等号是true 三等号是false

isNaN()

  • 可以判断数据类型是否为NaN，只有当括号内的数据类型为NaN时，才返回true
  • isNaN('a') // true 其中字符串会被隐式转换为NaN，所以返回的是true
  • isNaN(null) // false 因为null会被转换成0

四、课后作业

  • 用户输入一个数字，返回该数字对应的斐波那契数列长度的值

第一种方式实现

 let n =  parseInt(prompt('请输入数列的长度为'))
 let arr = [];
 let num = 1
 for(let i = 0; i <= n ; i++){
   if(arr.length < 2){
       arr.push(num)
   }else{
       num = arr[i-1] + arr[i-2]
       arr.push(num)
   }
 }
 console.log(arr[n-1]);

第二种方式实现

 let n = '用户输入的数字'
 let n1 = 1
 let n2 = 1
 let n3;
 if(n<=0){
     console.log('你输入的数字有问题');
 }else if(n<=2){
     console.log(1);
 }else{
     for(let i = 2; i< n; i++){
     n3 = n1 + n2;
     n1 = n2
     n2 = n3
     }
     console.log(n3);
 }

第四课

目录

一、函数基础部分

二、作用域入门

一、函数基础部分

数学的函数定义

  • y = f(x) 任意值 x 对应确定的 y ， y就是x的函数
  • 数学里的函数，函数值是确定的，有确定性

计算机里的函数

  • 函数式编程
  • 当一个if语句只变更部分参数却需要写很多个的时候，就可以用到函数
  • 之所以用函数是为了解决耦合的问题（代码重复度太高）
  • 基本原则：高内聚，低耦合，让一个模块有强功能性，高独立性
  • 需要了解模块的单一责任制

函数

  • js里的函数特点，不调用不执行，只有调用时才执行函数体内的代码

函数命名规则

  • 和变量命名差不多，不能用数字开头
  • 一般都用动词，例如get
  • 小驼峰命名法

函数声明方式

  • 普通声明：function 函数名(形参){函数体}
 function plan() {
   let a = 1,
     b = 2;
   console.log(a, b);
 }
  • 匿名函数：let a = function(形参){函数体} 又叫做函数字面量
 let test = function () {
   // -> 匿名函数
   let a = 1,
     b = 2;
   console.log(a, b);
 };

函数的参数

  • 函数()内的参数是占位的参数，形式参数
  • 函数调用时的参数才是实际参数，实参
  • 形参和实参的位置必须保证一一对应，否则执行函数就会出现问题
  • 形参和实参的数量可以不相等

arguments

  • arguments可以在函数体内部得到实参的值，是一个伪数组，可以遍历
  • 案例：实参求和
 function sum() {
   let a = 0;
   for (i = 0; i < arguments.length; i++) {
     a += arguments[i];
   }
   return a;
 }
 console.log(sum(1, 2, 3, 4, 5, 10));

 //  函数内部可以更改实参的值
 function test(a, b) {
   a = 3;
   console.log(arguments[0] === a);
 }
 test(1, 2); // 3

 // 局部变量和全局变量
 let a = 1;
 function test1() {
   //局部变量
   let b = 2;
   a = 4;
   console.log(a, b);
   function test2() {
     // 局部变量
     let c = 3;
     b = 5;
     console.log(b);
   }
   test2();
 }
 test1();
 console.log(a);

reutrn

  • 函数体的最后一句话，如果你不写JS引擎会帮你写，默认return返回的是undefined
  • return后面的语句都不会执行
  • return可以返回数据

二、作用域入门

  • 作用域内部可以访问到作用域外部的变量，会一层一层往外找
  • 作用域外部不能访问到作用域内部的变量，除非你传进去

函数式编程

  • 一个固定的功能或者是程序段被封装的过程，实现一个固定的功能或是程序
  • 在这个封装体中需要一个入口和一个出口，入口就是参数，出口就是返回

三、课后作业（伪代码）

1、输入饮料名，得到相应饮料的价格

html

 <p>输入饮料</p>
 <input type="text" id="j_drink" value="请输入饮料名称" />
 <button id="btn_money">点击查询价格</button>
 <p id="showMoney"></p>

js

 let container = document.querySelector("#container");
 let j_drink = container.querySelector("#j_drink");
 let btn_money = container.querySelector("#btn_money");
 let showMoney = container.querySelector("#showMoney");
 function drink(type) {
   switch (type) {
     case "百事可乐":
       return "3元";
     case "雪碧":
       return "3.5元";
     case "果粒橙":
       return "4元";
     case "脉动":
       return "5元";
     case "苏打水":
       return "4元";
     default:
       return "你输入的饮料不存在";
   }
 }
 btn_money.addEventListener("click", () => {
   showMoney.innerHTML = drink(j_drink.value);
 });

2、做一个简易计算器输入第一个数，运算符、第二个数得到结果

html

 <p>输入运算符</p>
 <input type="text" id="j_fnum" value="请输入第一位数字" />
 <input type="text" id="j_symbol" value="请输入运算符" />
 <input type="text" id="j_lnum" value="请输入第二位数字" />
 <button id="btn_computed">点击计算结果</button>
 <p id="showFruit"></p>

js

 let j_fNum = container.querySelector("#j_fnum");
 let j_symbol = container.querySelector("#j_symbol");
 let j_lNum = container.querySelector("#j_lnum");
 let btn_computed = container.querySelector("#btn_computed");
 let showFruit = container.querySelector("#showFruit");
 ​
 function computed(first, symbol, last) {
   if (!first || !last || !symbol) {
     return "请确认值和符号是否输入正确";
   } else if (!Number(first) || !Number(last)) {
     return "请确认值和符号是否输入正确";
   }
   if (symbol === "+") {
     return first + last;
   } else if (symbol === "-") {
     return first - last;
   } else if (symbol === "*") {
     return first * last;
   } else if (symbol === "/") {
     return first / last;
   } else if (symbol === "%") {
     return first % last;
   }
 }
 ​
 btn_computed.addEventListener("click", () => {
   showFruit.innerHTML =
     computed(
       parseInt(j_fNum.value),
       j_symbol.value,
       parseInt(j_lNum.value)
     ) || 0;
 });
 console.log(Number(0) === false);

3、输入一个数算出这个数的阶乘值

html

 <p>算出阶乘</p>
 <input type="text" id="mul" value="请输入想算出阶乘的数字" />
 <button id="btn_mul">点击计算结果</button>
 <p id="showMul"></p>

js

 let mul = container.querySelector("#mul");
 let btn_mul = container.querySelector("#btn_mul");
 let showMul = container.querySelector("#showMul");
 function factorial(mul) {
   let num = 1;
   while (mul) {
     num *= mul;
     mul--;
   }
   return num;
 }
 console.log(factorial(6));
 btn_mul.addEventListener("click", () => {
   showMul.innerHTML = `${mul.value}的阶乘是${factorial(
     parseInt(mul.value)
   )}`;
 });

\

avatar
文章
阅读
粉丝