javascript基础知识2

119 阅读9分钟

条件分支:if和'?'

if语句

语法

if ("条件")
    {
        alert("可以显示出的结果");
        alert("可以显示出的结果");
    }
else if()
        {
        //多种选择
        }
else{
    alert ();//这是显示出来if条件以为的结果
    
}

if (…) 语句会计算圆括号内的表达式,并将计算结果转换为布尔型

意思是括号内是数字0 、空字符串""nullundefinedNaN 都会被转换成 false 。 其他值被转换为 true .

“?“

let accessAllowed = (age > 18) ? true : false;

前的对执行前的语句否则执行后的语句

可用?嵌套多个语句

逻辑运算符

||(或)
result = value1 || value2 || value3

从左向右看,只要有一个是真的则返回那个值且转换成布尔值

若都是假的则返回最后一个值且不转换成布尔值

&&(与)
let hour = 12;
let minute = 30;
if (hour == 12 && minute == 30) 
    {
      alert( 'Time is 12:30' );  
    }

只有两边同时成立时才为true否则为false

遇到假值返回假值,若没有假值返回为最后一个真值

注意与运算 && 的优先级比或运算 || 要高

!(非)

两个非运算 !! 有时候用来将某个值转化为布尔类型

空值合并运算符 '??'

显示第一个已定义的值

:JavaScript 禁止将 ?? 运算符与 && 和 || 运算符一起使用,除非使用括号明确 指定了优先级。

循环:while 和 for

while

语法

while (condition) {
// 代码
// 所谓的“循环体”
}

let i = 0;
while (i < 3) { // 依次显示 0、1 和 2
alert( i );
i++;
}
“do…while” 循环

语法

do {
// 循环体
} while (condition);

let i = 0;
do {
alert( i );
i++;
} while (i < 3);
“for” 循环
for (begin; condition; step) {
// ……循环体……
}

for的两个;不可省略,可将其中的内容填写至循环体中

跳出循环

"无限循环 + break " (需要注意主体)

继续下一次迭代

它不会停掉整个循环。而是停止当前这一次迭代,并强 制启动新一轮循环(如果条件允许的话)

break/continue 标签

break 语句跳出循环至标签处

只有在循环内部才能调用 break/continue ,并且标签必须位于指令上方的某个位置

"switch" 语句

语法

switch(x) {
case 'value1': // if (x === 'value1')
...
[break]
case 'value2': // if (x === 'value2')
...
[break]//若没有break将一直执行下面的语句直到结束
default://除case的其他情况
...
[break]
}

“case” 分组

case 3: // (*) 下面这两个 case 被分在一组
case 5:
alert('Wrong!');
alert("Why don't you take a math class?");
break

这样case3和case5可执行相同的结果

类型很关键

let arg = prompt("Enter a value?")
switch (arg) {
case '0':
case '1':
alert( 'One or zero' );
break;
case '2':
alert( 'Two' );
break;
case 3:
alert( 'Never executes!' );
break;
default:
alert( 'An unknown value' )
}
  1. 在 prompt 对话框输入 0 、 1 ,第一个 alert 弹出。
  2. 输入 2 ,第二个 alert 弹出。
  3. 但是输入 3 ,因为 prompt 的结果是字符串类型的 "3" ,不严格相等 === 于数字类型的 3 ,所以 case 3 不会执行!因此 case 3 部分是一段无效代码。所以会执行 default 分 支。

函数

函数声明

function showMessage() {
alert( 'Hello everyone!' );
}

引入函数用function

function后面加函数名

{}中为函数体

调用函数

showMessage();
局部变量

在函数中声明的变量只在该函数内部可见

在外部使用会报错

function showMessage() {
let message = "Hello, I'm JavaScript!"; // 局部变量
alert( message );
}
showMessage(); // Hello, I'm JavaScript!
alert( message ); // <-- 错误!变量是函数的局部变量
外部变量

函数可以只有在没有局部变量的情况下才会使用外部变量访问修改外部变量

参数

函数括号之间的参数是用于接收函数调用时传递的实际数据值的。当调用函数时,可以将一些值传递给函数,这些值被称为实际参数。实际参数会被传递到函数的形式参数中,并在函数内部使用。

形式参数是在函数定义时声明的参数,它们位于函数名后的括号内。形式参数是变量的一种,用于接收实际参数的值。通过在函数定义时声明形式参数,我们可以在函数体内使用这些参数,并对它们进行操作。

形式参数的作用有以下几点:

  1. 传递数据:形式参数用于接收来自函数调用的实际参数值,通过实际参数的值,可以将数据传递给函数内部进行处理。
  2. 形参和实参的关联:形式参数提供了将实际参数和函数内部操作关联起来的机制。通过将实际参数赋值给形式参数,函数可以在内部操作这些值。
  3. 灵活性:通过使用形式参数,函数可以接受不同的数据值进行操作,使得函数的逻辑可以在不同的上下文中重复使用。 fromtext
function showMessage(from, text) { // 参数:from 和 text
alert(from + ': ' + text);
}
showMessage('Ann', 'Hello!'); // Ann: Hello! (*)
showMessage('Ann', "What's up?"); // Ann: What's up? (**

相当于c语言中的变量x y a b 之类的可以对其进行赋值和计算

image.png

默认值

如果未提供参数,那么其默认值则是 undefined

返回值

function sum(a, b) {
return a + b;
}
let result = sum(1, 2);
alert( result ); // 

在一个函数中可能会出现很多次 return

只使用 return 但没有返回值也是可行的。但这会导致函数立即退出

函数命名

函数命名要根据他的作用进行命名

showMessage(..) // 显示信息
getAge(..) // 返回 age(gets it somehow)
calcSum(..) // 计算求和并返回结果
createForm(..) // 创建表格(通常会返回它)
checkPermission(..) // 检查权限并返回 true/false
函数 == 注释

使函数更简单易懂

function showPrimes(n) {
for (let i = 2; i < n; i++) {
if (!isPrime(i)) continue;
alert(i); // 一个素数
}
}
function isPrime(n) {
for (let i = 2; i < n; i++) {
if ( n % i == 0) return false;
}
return true;
}

嵌套在一起

几个常用函数

写一个返回数字 a 和 b 中较小的那个数字的函数 min(a,b)

写一个函数 pow(x,n),返回 x 的 n 次方。换句话说,将 x 与自身相乘 n 次,返回最终结果。

pow(3, 2) = 3 * 3 = 9
pow(3, 3) = 3 * 3 * 3 = 27
pow(1, 100) = 1 * 1 * ...*1 = 1
函数表达式

相当于把一个函数放进一个盒子里,并给盒子命名,下次输入盒子名称就可以显示函数内容

function sayHi() { // (1) 创建
alert( "Hello" );
}
let func = sayHi; // (2) 复制
func(); // Hello // (3) 运行复制的值(正常运行)!
sayHi(); // Hello // 这里也能运行(为什么不行呢
回调函数

ask 的两个参数值 showOkshowCancel可以被称为 回调函数 或简称 回调

例question 关于问题的文本 yes 当回答为 “Yes” 时,要运行的脚本 no 当回答为 “No” 时,要运行的脚本

function ask(question, yes, no) {
if (confirm(question)) yes()
else no();
}
ask(
"Do you agree?",
function() { alert("You agreed."); },
function() { alert("You canceled the execution."); }
);

效果

屏幕截图 2023-11-08 111116.png

点击”确定“

屏幕截图 2023-11-08 111142.png

注意

函数表达式 vs 函数声明

函数表达式是在代码执行到达时被创建,并且仅从那一刻起可用。在函数声明被定义之前,它就可以被调用。

严格模式下,当一个函数声明在一个代码块内时,它在该代码块内的任何位置都是可见的。但在代 码块外不可见。

区别

function sum(a, b) {
return a + b;
}//声明
// 函数表达式
let sum = function(a, b) {
return a + b;
};

什么时候选择函数声明与函数表达式? 根据经验,当我们需要声明一个函数时,首先考虑函数声明语法。它能够为组织代码提供更多的灵活性。因为我们可以在声明这些函数之前调用这些函数。 这对代码可读性也更好,因为在代码中查找 function f(…) {…} 比 let f =function(…) {…} 更容易。函数声明更“醒目”。 ……但是,如果由于某种原因而导致函数声明不适合我们(我刚刚看过上面的例子),那么 应该使用函数表达式。

箭头函数,基础知识

let func = (arg1, arg2, ...argN) => expression
let sum = (a, b) => a + b;
/* 这个箭头函数是下面这个函数的更短的版本:
let sum = function(a, b) {
return a + b;
};
*/
alert( sum(1, 2) ); // 3
let age = prompt("What is your age?", 18);//此处的18弹出来自动输入框中默认输入18
let welcome = (age < 18) ?
() => alert('Hello') :
() => alert("Greetings!");
welcome();
多行的箭头函数
let sum = (a, b) => { // 花括号表示开始一个多行函数
let result = a + b;
return result; // 如果我们使用了花括号,那么我们需要一个显式的 “return”
};
alert( sum(1, 2) ); // 3

JavaScript 特性

代码结构

  1. 语句用分号分隔
  2. 通常,换行符也被视为分隔符.
  3. 在代码块 {...} 后以及有代码块的语法结构(例如循环)后不需要加分号

严格模式

该指令必须位于 JavaScript 脚本的顶部或函数体的开头

变量

  • let
  • const(不变的,不能被改变)
  • var(旧式的,稍后会看到

一个变量名可以由以下组成:

  1. 字母和数字,但是第一个字符不能是数字。
  2. 字符 $ 和 _ 是允许的,用法同字母。
  3. 非拉丁字母和象形文字也是允许的,但通常不会使用

有 8 种数据类型: number — 可以是浮点数,也可以是整数, bigint — 用于任意长度的整数, string — 字符串类型, boolean — 逻辑值: true/false , null — 具有单个值 null 的类型,表示“空”或“不存在”, undefined — 具有单个值 undefined 的类型,表示“未分配(未定义)”, object 和 symbol — 对于复杂的数据结构和唯一标识符,我们目前还没学习这个类型。 typeof 运算符返回值的类型

交互 prompt(question[, default]) 提出一个问题,并返回访问者输入的内容,如果他按下「取消」则返回 null 。 confirm(question) 提出一个问题,并建议用户在“确定”和“取消”之间进行选择。选择结果以 true/false 形式返 回。 alert(message) 输出一个 消息 。 这些函数都会产生 模态框,它们会暂停代码执行并阻止访问者与页面的其他部分进行交互,直到 用户做出回答为止