JavaScript的引入方式和基础语法~2

简介: JavaScript的引入方式和基础语法~

运算符:

一元运算符:++,--
算术运算符:+,-,*,、,%
赋值运算符:=,+=,-=...
关系运算符:>,<,>=,<=,!=,== ,===...
逻辑运算符:&&,||,!
三元运算符:条件运算符?true_value:false_value

其他的运算符使用方法和含义与java是相同的,这里我们就不进行赘述了,这里我们主要说明以下=====的使用方法

==的使用方法:

举例:

如下所示,变量a为number类型的20,而变量b为string类型的20,在java中,如果使用==对变量a和b进行比较,比较结果必然为false

<script>
  var a=20;
  var b="20"
  alert(a==b);
</script>

但JavaScript中的比较结果为true,原因为:当使用==对两个变量进行比较时,首先会判断类型是否一样,如果不一样,则进行类型转换,再比较其值

显示如下:

===的使用方法:

举例:

<script>
  var a=20;
  var b="20"
  alert(a===b);
</script>

显示如下:

这里之所以返回false的原因为:当使用===对两个变量进行比较时,首先会判断类型是否一样,如果不一样,直接返回false,如果类型一样再比较其值

JavaScript中的类型转换:

string转换为number:

string:按照字符串的字面值,转化为数字,如果字面值不是数字,则转为NaN

举例:

字面值为数字时:

<script>
  var b=+"20";
  //当变量b被转为数字20,那么输出结果应为21,否则为201[字符串的链接]
  alert(b+1);
</script>

显示如下:

字面值不为数字时:

<script>
  var b=+"abc";
  alert(b);
</script>

显示如下:

上述我们是通过正负号将字面值为数字的字符串转化为数字的,但在JavaScript中,这并不是最优解,通常情况下,我们**通过parseInt进行转换**

举例:

<script>
  var b="20";
  alert(parseInt(b)+1);
</script>

显示如下:

boolean转换为number:

举例:

当boolean值为true时,转化为1:

<script>
  var falg=+true;
  alert(falg);
</script>

显示如下:

当boolean值为false时,转化为0:

<script>
  var falg=+false;
  alert(falg);
</script>

显示如下:

number转化为boolean:

举例:

number为0时,转化为false:

<script>
  var flag=0;
  //当if条件进行判断时,首先会将flag转化为boolean类型的,再进行判断
  if(flag){
    alert("转为true");
  }else{
    alert("转为false");
    }
</script>

number为NaN时转化为fasle:

<script>
  var flag=+"abc";
  if(flag){
    alert("转为true");
  }else{
    alert("转为false");
    }
</script>

显示如下:

number为其他数字时转化为true:

<script>
  var flag=23;
  if(flag){
    alert("转为true");
  }else{
    alert("转为false");
    }
</script>

显示如下:

string转化为boolean:

当string为空字符串时,转化为false:

举例:

<script>
  var flag="";
  if(flag){
    alert("转为true");
  }else{
    alert("转为false");
    }
</script>

显示如下:

当string为其他字符串时,转化为true:

举例:

<script>
  var flag="hello";
  if(flag){
    alert("转为true");
  }else{
    alert("转为false");
    }
</script>

显示如下:

null转化为boolean:

当为null时,转化为false:

<script>
  var flag=null;
  if(flag){
    alert("转为true");
  }else{
    alert("转为false");
    }
</script>

显示如下:

undefined转化为boolean:

当为undefined时,转化为false:

举例:

<script>
  var flag=undefined;
  if(flag){
    alert("转为true");
  }else{
    alert("转为false");
    }
</script>

显示如下:

其他类型转化为boolean类型可以简化书写:

很多时候,我们定义了许多字符串,当我们要将这些字符串传递给方法进行使用时,首先需要对字符串进行健壮性的判断,看该字符串是否有值,如果没有值,那么就不再使用它了

//一般的判断方法
if(str!=null&&str.length>0){
//通过上面的学习,我们直接可以将代码优化为下述这样
 if(str){
    alert("转为true");
  }else{
    alert("转为false");
 }

流程控制语句:与java的用法相同

if:

举例:

<script>
  var count=10;
  if(count>0)
  {
    alert("该数是正数");
  }
</script>

显示如下:

switch:

举例:

<script>
  var number=2;
  switch(number){
      case 1:
      {
          alert("星期一");
          break;
      }
      case 2:
      {
          alert("星期二");
          break;
      }
      case 3:
      {
          alert("星期三");
          break;
      }
      case 4:
      {
          alert("星期四");
          break;
      }
      case 5:
      {
          alert("星期五");
          break;
      }
      case 6:
      {
          alert("星期六");
          break;
      }
      case 7:
      {
          alert("星期天");
          break;
      }
      default:
      {
          alert("输入有误,请重新输入");
          break;
      }
  }
</script>

显示如下:

for:

举例:

<script>
     var sum=0;
     //注意不要将变量i的类型根据习惯写成int了,JavaScript中并没有int类型
     //不使用var定义的原因是由于var所定义的变量是一个全局变量,即使循环结束,i的值依然可以被沿用
     for(let i=0;i<=100;i++)
     {
        sum+=i;
      }
      alert(sum);
</script>

显示如下:

while:

举例:

<script>
     var sum=0;
     var i=0;
     while(i<=100){
         sum+=i;
         i++;
     }
     alert(sum);
</script>

显示如下:

do…while:

举例:

<script>
     var sum=0;
     var i=0;
     do{
         sum+=i;
         i++;
     }while(i<=100)
     alert(sum);
</script>

显示如下:

函数:

函数(方法)是被设计为执行特定任务的代码块

定义:JavaScript函数通过function关键字进行定义

定义方式1:

function functionName(参数1,参数2....){
要执行的代码块
}

注意:

形式参数不需要类型,因为JavaScript是弱类型语言

返回值也不需要定义类型,可以在函数内部直接使用return返回即可

举例:

<script>
     function add(a,b)
     {
        return a+b;
     }
     var result=add(3,2);
     alert(result);
</script>

显示如下:

定义方式2:

var functionName=function(参数列表){
要执行的代码;
}

在js中,函数的调用可以传递任意数量的参数

传递的参数等于形参个数时:

举例:

<script>
     var add=function(a,b){
         return a+b;
     }
     let result=add(1,2);
     alert(result);
</script>

显示如下:

传递的参数个数小于形参个数时

举例:

<script>
     var add=function(a,b){
         return a+b;
     }
     let result=add(1);
     alert(result);
</script>

由于在函数调用时,只传递了一个值,那么a=1,b没有传值,则b为NaN,二者相加依然是NaN

显示如下:

传递的参数个数大于形参个数时

举例:

<script>
     var add=function(a,b){
         return a+b;
     }
     let result=add(1,3,7);
     alert(result);
</script>

由于在函数调用时,传递了3个值,那么a=1,b=2,实参7没有接收它的形参,则它不参与运算,实际函数调用为前两个数的求和

显示如下:

相关文章
|
4月前
|
存储 JavaScript 前端开发
Node.js的基本语法
【8月更文挑战第12天】Node.js的基本语法
149 1
|
2月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
2月前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
35 0
|
4月前
|
JavaScript 前端开发
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
这篇文章是JavaScript基础与实战教程的第一部分,涵盖了JavaScript的基本语法、标识符、数据类型以及如何进行强制类型转换,通过代码示例介绍了JS的输出语句、编写位置和数据类型转换方法。
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
|
4月前
|
前端开发 JavaScript 程序员
前端 JavaScript 的 _ 语法是个什么鬼?
前端 JavaScript 的 _ 语法是个什么鬼?
|
5月前
|
缓存 JavaScript 前端开发
前端框架与库 - Vue.js基础:模板语法、数据绑定
【7月更文挑战第14天】Vue.js 是渐进式框架,以简洁API和高效数据绑定知名。本文聚焦模板语法与数据绑定,解释常见问题和易错点,助力初学者避坑。模板语法中,{{ expression }} 用于渲染值,v-bind/: 用于动态绑定属性。数据绑定涉及文本、属性和事件,注意v-model适用于表单元素,计算属性有缓存。理解正确用法,借助文档和IDE,可提升开发质量和效率。善用Vue.js,打造响应式UI。
167 4
|
6月前
|
存储 JavaScript 前端开发
JavaScript 语法
JavaScript 语法
39 5
|
5月前
|
存储 JavaScript 前端开发
|
6月前
|
JavaScript 前端开发
JavaScript语法关键点:变量用`var`、`let`、`const`声明
【6月更文挑战第22天】JavaScript语法关键点:变量用`var`、`let`、`const`声明;七种数据类型包括`Number`、`String`、`Boolean`、`Null`、`Undefined`、`Symbol`和`Object`;运算符如算术、比较、逻辑和赋值;流程控制有`if...else`、`switch`和各种循环。了解这些是JS编程的基础。
63 3
|
5月前
|
前端开发 JavaScript
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
691 0