0
0

JavaScript(基础语法)

首先,搞清楚一点,Java 跟 JavaScript一点关系都没有

html(素颜)+css(化妆)+JavaScript(行为)

俗称前端三剑客

JavaScript的组成

  • ECMAScript(简称 ES): JavaScript 语法
  • DOM: 页面文档对象模型, 对页面中的元素进行操作
  • BOM: 浏览器对象模型, 对浏览器窗口进行操作

这里我们主要讲一些语法知识,也是在html文件里面敲的,工具VsCode,在body标签下写script标签

注释

:有

单行注释 //

; 有

多行注释 /* */

,使用

Ctrl + /

切换注释,多行注释不能嵌套…

输入输出

输入:prompt

弹出一个一个输入框

<body><script>prompt("请输入密码:");</script></body>

在这里插入图片描述

输出:alert

弹出一个警示对话框,输出结果

<script>alert("hello world!");</script>

在这里插入图片描述

输出:console.log

在控制台打印一个日志(供程序员看的),这是咱们在开发中最常用的一种输出方式

<script>
   console.log("hello world!");</script>

进去之后按F12,打开开发者工具,里面就可以看到(当然,每个人的电脑设置可能不一样,但大多数都是F12)

在这里插入图片描述

同时,如果js代码中,出现了一些语法错误,或者运行时错误,也会在控制台中显示出来
比如,我们console 少些 一个 e

<script>
   consol.log("hello world!");</script>

在这里插入图片描述

JS的基础语法

跟java还是有很多地方不一样的

变量

定义一个变量:

var 变量名 = 初始值;

var 是JS的关键字,表示这是一个变量,末尾的分号可以省略,但是不建议省略

<script>var num =10;//创建了一个名为 num 的,数字类型的变量var s ='hello';//创建了一个名为 s 的,字符串类型的变量var arr =[];//创建了一个名为 arr,数组类型的变量
        console.log(num);
        console.log(s);
        console.log(arr);</script>

不管创建的变量是啥类型,都统一用var这个关键字来表示,至于变量具体是啥类型,取决于初始化的值是啥类型…(JS不区分整形和浮点型,字符串可以用单引号也可以用双引号)

在这里插入图片描述

JavaScript 中还支持使用 let 定义变量. 用法和 var 基本类似
区别大体记住let有

块级作用域

的约束:

<script>{let a =10;}
console.log(a);</script>

在这里插入图片描述

<script>{var a =10;}
console.log(a);</script>

在这里插入图片描述

var包含全局

动态类型

先看一下这个代码:

<script>var a =10;//数字
       a ="hello";//字符串
       console.log(a);</script>

在这里插入图片描述

此时,我们发现,输出的是hello,说明了,随着程序的运行,变量的类型可能会发生改变,这种就称为

"动态类型"

(运行时),但是像我们c,c++,java,go…这样的语言不支持这种 运行时 类型发生改变,这种行为就是

"静态类型"

基本数据类型

有这几种:

number:

数字. 不区分整数和小数.

boolean:

true 真, false 假.

string:

字符串类型.

undefined:

只有唯一的值 undefined. 表示未定义的值.

null:

只有唯一的值 null. 表示空值

number 数字类型

JS 中不区分整数和浮点数, 统一都使用 “数字类型” 来表示

数字进制表示:

计算机中都是使用二进制来表示数据, 而人平时都是使用十进制.
因为二进制在使用过程中不太方便(01太多会看花眼).
所以在日常使用二进制数字时往往使用 八进制 和 十六进制 来表示二进制数字

<script>var a =07;// 八进制整数, 以 0 开头var b =0xa;// 十六进制整数, 以 0x 开头var c =0b10;// 二进制整数, 以 0b 开头
console.log(a);
console.log(b);
console.log(c);</script>

在这里插入图片描述

注意:

一个八进制数字对应三个二进制数字
一个十六进制数字对应四个二进制数字. (两个十六进制数字就是一个字节)

特殊的数字值:

Infinity:

无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围.

-Infinity:

负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围.

NaN:

表示当前的结果不是一个数字

<script>var max = Number.MAX_VALUE;// 得到 Infinity
console.log(max *2);// 得到 -Infinity
console.log(-max *2);// 得到 NaN
console.log('hello'-10);//字符串拼接
console.log('hello'+10);</script>

在这里插入图片描述

注意:
  1. 负无穷大 和 无穷小 不是一回事. 无穷小指无限趋近与 0, 值为 1 / Infinity
  2. ‘hehe’ + 10 得到的不是 NaN, 而是 ‘hehe10’, 会把数字隐式转成字符串, 再进行字符串拼接.
  3. 可以使用 isNaN 函数判定是不是一个非数字.
<script>
  console.log(isNaN(10));// false
console.log(isNaN('hello'-10));// true</script>

在这里插入图片描述

String 字符串类型

单引号双引号均可,但不能没有

如果字符串中已经包含了引号,就需要我们转义
不转义:

<script>var str ="Thank you,"dabaifan"";</script>

在这里插入图片描述

转义:

<script>var str ="Thank you,\"dabaifan\"";//用 \" 来表示转义 " 
console.log(str);</script>

在这里插入图片描述

如果是单引号包裹双引号或者双引号包裹单引号,不需要转义

<script>var str1 ="Thank you,'dabaifan'";var str2 ='Thank you,"dabaifan"';
console.log(str1);
console.log(str2);</script>

在这里插入图片描述

求长度:

<script>var a ="hello boy";
console.log(a.length);var b ="哒哒哒";
console.log(b.length);</script>

单位为字符的数量
在这里插入图片描述

字符串拼接:

使用 

+

进行拼接

<script>var a ="hello boy,";var b ="thank you";
console.log(a + b);</script>

在这里插入图片描述

boolean 布尔类型

表示 “真” 和 “假”

在JS中 ,布尔类型 会被当成 1 和 0 来处理

<script>var a =true;var b =false;var c =1;
console.log(a + c);
console.log(b + c);</script>

在这里插入图片描述

这种设定方式是不科学的,发生了

"隐式类型转换"

,开发中不建议这么写…

如果一个编程语言,越支持

"隐式类型转换"

,认为类型越弱(C,JS,PHP)
如果一个编程语言,越不支持

"隐式类型转换"

,认为类型越强(Java,Go,Python)
强类型,意味着类型之间的差异越大,界限更明确, 弱类型意味着类型之间的差异不大,界限是更模糊的…

注意:

静态类型/动态类型 VS 强类型/弱类型 是不相关的概念(正交)

undefined 未定义的数据类型

如果一个变量没有被初始化过,结果就是undefined,是undefined 类型…(非法的)

<script>var a;
console.log(a);</script>

在这里插入图片描述

undefined 和 字符串进行相加,结果进行字符串拼接:

<script>var a;
console.log(a +"10");</script>

在这里插入图片描述

undefined 和 数字进行相加,结果就是NaN

<script>var a;
console.log(a +10);</script>

在这里插入图片描述

null 空值类型

null 表示当前的一个变量是一个"空值":

<script>var a =null;
console.log(a +10);
console.log(a +"10");</script>

在这里插入图片描述

注意:

null 和 undefined 都表示取值非法的情况, 但是侧重点不同.
null 表示当前的值为空. (相当于有一个空的盒子)
undefined 表示当前的变量未定义(相当于盒子都没有)

运算符

和java类似,其实大多数语言都类似

算数运算符

  • /
  • %
注意:

<script>
console.log(1/2);</script>

在这里插入图片描述

<script>
       console.log(1+2);
       console.log(1-2);
       console.log(1*2);
       console.log(1/2);
       console.log(1%2);//取余</script>

在这里插入图片描述

赋值运算符 & 复合赋值运算符

  • =
  • +=
  • -=
  • *=
  • /=
  • %=
<script>var a =10;var b =20;
       console.log(a = b);
       a =10;
       console.log(a += b);
       a =10;
       console.log(a -= b);
       a =10;
       console.log(a *= b);
       a =10;
       console.log(a /= b);  
       a =10;
       console.log(a %= b);</script>

在这里插入图片描述

自增自减运算符

  • ++:自增1
  • --:自减1
<script>var a =10;var b =20;
      console.log(a++);
      a =10;
      console.log(++a);
      console.log(b--);
      b =20;
      console.log(--b);</script>

在这里插入图片描述

比较运算符

  • <
  • <=

  • =

  • == (比较相等会进行隐式类型转换)
  • !=
  • === (比较相等不会进行隐式类型转换)
  • !==
<script>var a =10;var b ="10";
console.log(a == b);//发生隐式类型转换
console.log(a === b);//不发生隐式类型转换</script>

谈到比较两个对象,有三个维度的比较:
1:比较身份(是不是同一个对象)
2:比较值(对象里存储的数据 是否相等)
3:比较类型(两个对象是否是同一类型)
在这里插入图片描述

逻辑运算符

用于计算多个 boolean 表达式的值

&& 与:

一假则假

|| 或:

一真则真

! 非

c = a || b

如果 a 的值,为真(非0),此时 c 的值,就是表达式 a 的值
如果 a 的值,为假(为0),此时 c 的值,就是表达式 b 的值

c = a && b

如果 a 的值,为真(非0),此时 c 的值,就是表达式 b 的值
如果 a 的值,为假(为0),此时 c 的值,就是表达式 a 的值

位运算

&

按位与

|

按位或

~

按位取反

^

按位异或

移位运算

<<左移

有符号右移(算术右移)

无符号右移(逻辑右移)

条件语句

if 语句

条件表达式为 true, 则执行 if 的 { } 中的代码

// 形式1
if (条件) {
语句
}

// 形式2
if (条件) {
语句1
} else {
语句2
}

// 形式3
if (条件1) {
语句1
} else if (条件2) {
语句2
} else if .... {
语句...
} else {
语句N
}

三元表达式

是 if else 的简化写法

条件 ? 表达式1 : 表达式2;

条件为真, 返回表达式1 的值. 条件为假, 返回表达式2 的值

switch

更适合多分支的场景

switch (表达式) {
case 值1:
语句1;
break;
case 值2:
语句2:
break;
default:
语句N;
}

循环语句

重复执行某些语句

while循环

while (条件) {
循环体;
}

执行过程:

先执行条件语句
条件为 true, 执行循环体代码.
条件为 false, 直接结束循环

continue

结束这次循环

break

结束整个循环

for 循环

for (表达式1; 表达式2; 表达式3) {
循环体
}

表达式1: 用于初始化循环变量.
表达式2: 循环条件
表达式3: 更新循环变量.

执行过程:

先执行表达式1, 初始化循环变量
再执行表达式2, 判定循环条件
如果条件为 false, 结束循环
如果条件为 true, 则执行循环体代码.
执行表达式3 更新循环变量

数组

创建数组

使用 new 关键字创建

<script>var arr =newArray();</script>

使用字面量方式创建(常用)

<script>var arr =[];var arr2 =[1,2,'hello',true,'哈哈'];
console.log(arr);
console.log(arr2);</script>

在这里插入图片描述

注意

JS的数组不要求元素是相同的类型…

获取数组元素

使用下标的方法访问数组元素(下标从0开始)

<script>var arr =[1,2,'hello',true,'哈哈'];
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[4]);
arr[0]=0;
console.log(arr);//打印数组</script>

在这里插入图片描述

注意:如果下标超出范围读取元素,则结果为undefined…

<script>var arr =[1,2,'hello',true,'哈哈'];
console.log(arr[5]);
console.log(arr[-1]);</script>

在这里插入图片描述

注意:

不要给数组名直接赋值, 此时数组中的所有元素都没了

<script>var arr =[1,2,3,4,5];
console.log(arr);
arr =100;
console.log(arr);</script>

相当于本来 arr 是一个数组, 重新赋值后变成数字了
在这里插入图片描述

新增数组元素

通过修改 length 新增

<script>var arr =[9,5,2,7];
console.log(arr);
arr.length =10;
console.log(arr);
console.log(arr[4], arr[5]);</script>

在这里插入图片描述

空属性就是,中间元素任然是 undefined

通过下标新增

<script>var arr =[];
arr[2]=10;
console.log(arr);</script>

在这里插入图片描述

此时这个数组的 [0] 和 [1] 都是 undefined

注意下面这样的操作

<script>var arr =[1,2,3,4,5];
arr[-1]=10;
console.log(arr);
console.log(arr.length);</script>

在这里插入图片描述

此时这里的 -1 就不算是下标了,更像是一个"属性",并没有影响到数组的长度

<script>var arr =[1,2,3,4,5];
arr['hello']=10;
console.log(arr);
console.log(arr['hello']);
console.log(arr.length);</script>

在这里插入图片描述

JS中的数组,不是一个正经的数组,他除了能接数组的活,还能接 map的活(键值对),就像是一个"对象",在JS中,可以在运行时,给对象新增属性
arr[‘hello’] 就是在给 arr 这个对象,新增了一个属性,属性的名字是 hello,属性的值是 10…

使用 push 进行追加元素

<scipt>
var arr = [9, 5, 2, 7, 3, 6, 8];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] % 2 != 0) {
newArr.push(arr[i]);
}
}
console.log(newArr);
    </script>

在这里插入图片描述

删除数组中的元素

使用 splice 方法删除元素

<script>var arr =[9,5,2,7];// 第一个参数表示从下表为 2 的位置开始删除. 第二个参数表示要删除的元素个数是 1 个
arr.splice(2,1);
console.log(arr);</script>

在这里插入图片描述

函数

语法格式

// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
函数体
return 返回值;
}
// 函数调用
函数名(实参列表) // 不考虑返回值
返回值 = 函数名(实参列表) // 考虑返回值

函数定义并不会执行函数体内容, 必须要调用才会执行. 调用几次就会执行几次

<script>functionadd(x,y){return x + y;}let res =add(10,20);
console.log(res);

res =add('hello,','world');
console.log(res);

res =add('hello',20);
console.log(res);</script>

在这里插入图片描述

传入的实参类型是可以任意的,只要能够支持函数内部的逻辑,函数参数的个数,一般在写代码的时候,都是需要调用的时候传入的实参,个数和形参匹配,但是,JS并没有在语法上做出这样的限制,如果实参和形参个数不一样,也不是完全不行…

<script>functionadd(a,b,c,d,e){return a + b + c + d + e;}var res =add(10,20);
console.log(res);

res =add(10,20,30);
console.log(res);

res =add(10,20,30,40);
console.log(res);</script>

在这里插入图片描述

上面没被传参传到的形参,就是undefined,所以最后返回的就是 数字+undefined,结果就是NaN

想要得到想要的结果,我们需要加一些约束条件:

<script>functionadd(a,b,c,d,e){
    a = a ||0;
    b = b ||0;
    c = c ||0;
    d = d ||0;
    e = e ||0;return a + b + c + d + e;}var res =add(10,20);
console.log(res);

res =add(10,20,30);
console.log(res);

res =add(10,20,30,40);
console.log(res);</script></body>

在这里插入图片描述

这样写,就不会出错了,但是实际开发中不推荐,因为太"灵活了",如果哪出错了,你都不一定发现得了…

函数表达式

在 JS 中,函数就是 “一等功民”(函数,就像一个普通变量一样,可以被赋值给其他变量,也可以作为另一个函数的参数,还可以作为另一个函数的返回值…相比于普通变量多了一个功能,可以被调用)

所谓的函数表达式,就是把一个函数赋值给一个变量:

<script>functionhello(){
    console.log("hello");}let f = hello;f();</script>

hello是一个函数名,hello后面没有(),说明这个操作,不是函数调用,而是一个单纯的函数赋值,f 就是function类型的变量)

在这里插入图片描述

还可以合并一下:

<script>letf=functionhello(){
    console.log("hello");}f();
console.log(typeof(f));</script>

在这里插入图片描述

在进一步,就可以把hello给省略了,此时就可以完全依赖 f 来找到该函数:

<script>letf=function(){
    console.log("hello world!");}f();
console.log(typeof(f));</script>

在这里插入图片描述

作用域

某个标识符名字在代码中的有效范围.
在 ES6 标准之前, 作用域主要分成两个

全局作用域:

在整个 script 标签中, 或者单独的 js 文件中生效.

局部作用域/函数作用域:

在函数内部生效.

<script>let ret =10;functionhello2(){functionhello(){
        console.log(ret);}hello();}hello2();</script>

在这里插入图片描述

JS中的作用域,是支持

"逐级向上"

查找的,当前在 hello 函数里,尝试打印 ret,但是在里面没找到 ret 变量,就往上找,到了 hello2 这里,也没找到 ret 变量,于是在往上找,找到了全局作用域,找到了(如果全局都没找到,就报错了)

作用域链

背景:

函数可以定义在函数内部.
内层函数可以访问外层函数的局部变量.
内部函数可以访问外部函数的变量. 采取的是链式查找的方式. 从内到外依次进行查找.

<script>let ret =10;functionhello2(){let ret =20;functionhello(){
        console.log(ret);}hello();}hello2();</script>

在这里插入图片描述

存在多个同名的变量,从内到外,先找到谁就是谁…

对象

就是一些属性和方法的集合,在JS中,对象是不依托于类的,在JS中所有对象,都是一个类型…Object…

使用字面量创建对象 {}

<script>let animal ={name:"金毛",age:2,height:50,weight:100,eat:function(){
        console.log("吃鸡肉");},run:function(){
        console.log("跑步");},};

console.log(animal.name);
console.log(animal.age);
animal.eat();
animal.run();</script>

每个属性和方法,其实都是通过

"键值对"

这样的方式来表达的…
{} 表示这是个对象…
键值对之间,使用

,

来分割…
键和值之间,使用

:

来分割…

在这里插入图片描述

使用 new Object 创建对象

<script>var student =newObject();// 和创建数组类似
student.name ="孙悟空";
student.height =175;
student['weight']=170;
student.sayHello=function(){
console.log("hello");}
console.log(student.name);
console.log(student['weight']);
student.sayHello();</script>

在这里插入图片描述

注意,

使用 { } 创建的对象也可以随时使用 student.name = “孙悟空”; 这样的方式来新增属性.

使用 构造函数 创建对象

前面的创建对象方式只能创建一个对象. 而使用构造函数可以很方便 的创建 多个对象.

function 构造函数名(形参) {
    this.属性 = 值;
    this.方法 = function...
}
var obj = new 构造函数名(实参);

注意:

在构造函数内部使用 this 关键字来表示当前正在构建的对象…
构造函数的函数名首字母一般是大写的…
构造函数的函数名可以是名词…
构造函数不需要 return…
创建对象的时候必须使用 new 关键字…
this 相当于 “我”…

<script>functionDog(name, color, action){this.name = name;this.color = color;this.f=function(){
console.log(action);}}var dog1 =newDog("xiaohei","black","run");var dog2 =newDog("xiaobai","white","swim");var dog3 =newDog("xiaofen","pink","sleep");
console.log(dog2);
dog2.f();

console.log(dog1);
dog1.f();

console.log(dog3);
dog3.f();</script>

在这里插入图片描述

标签： javascript 前端
本文转载自: https://blog.csdn.net/chenbaifan/article/details/124419310
版权归原作者 粉色的志明 所有， 如有侵权，请联系我们删除。
登录后发布评论

“JavaScript(基础语法)”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航