JavaScript基础语法及规则（一）

最新推荐文章于 2024-04-24 19:31:26 发布
最新推荐文章于 2024-04-24 19:31:26 发布
阅读量682 收藏 5
点赞数 4
分类专栏： 前端 文章标签： javascript 前端 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51892736/article/details/126546320
版权

JavaScript基础语法及规则（一）

注释

  • 单行注释：// 注释内容
  • 多行注释：/* 注释内容 */

注意：JavaScript没有文档注释

变量

JavaScript中用var关键字（variable的缩写）来声明变量。

  • 格式：var 变量名= 数据值
    变量可以存放不同类型的值，如下在定义变量时赋值为数字数据，还可以将变量的值改为字符串类型的数。
var test = 20; 
test = "张三";

var的作用域：全局变量，且变量可以重复定义。

{ 
	var age = 20;
}
alert(age); // 在代码块中定义的age 变量，在代码块外边还可以使用

{ 
	var age = 20; 
	var age = 30;//JavaScript 会用 30 将之前 age 变量的 20 替换掉
}
alert(age); //打印的结果是 30

针对以上问题，衍生出了let关键字，与var用法类似，但是只能够在let所在的代码块中使用，并且不可重复定义。

js的变量名命名也有如下规则，与Java大致相同：

  • 组成字符可以是任何字母、数字、下划线（_)或者美元符号($)
  • 数字不能开头
  • 建议使用驼峰命名

基本数据类型

  • string：字符、字符串，单双引皆可
var str1="nihao";
var str2='hello';
  • number：数字（整数、小数、NaN(not a number))
var num1=10;
var num2=10.55;
var num3=-12.5;
  • boolean：布尔类型（true、false)
var flag1=true;
var flag2=false;
  • null:空
var obj=null;
  • undefined:未定义类型
var a;
var b=undefined;

使用 typeof 运算符可以获取数据类 alert(typeof age); 以弹框的形式将变量的数据类型输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
      var str1="nihao";
      alert(typeof(str1));

      str1=10;
      alert(typeof(str1));
      str1=true;
      alert(typeof(str1));
      str1=undefined;
      alert(typeof(str1));
      str1=null;
      alert(typeof(str1));
    </script>
</head>
<body>

</body>
</html>

运算符

JavaScript 提供了如下的运算符。大部分和 Java语言都是一样的，不同的是 JS 关系运算符中的 == 和 = = = ，一会我们只演示这两个的区别，其它运算符将不做演示。

  • 一元运算符：++，–
  • 算术运算符：+，-，*，/，%
  • 赋值运算符：=，+=，-=…
  • 关系运算符：>，<，>=，<=，!=，= =，= = =…
  • 逻辑运算符：&&，||，!
  • 三元运算符：条件表达式 ? true_value : false_value

比较运算符：有= =和 = = =两种比较运算符。

  • ==：
    1.判断类型是否一样，如果不一样，则进行类型转换
    2 . 再去比较其值是否相同，相同则返回true，否则false。
  • = = =:
    1.判断类型是否一样，如果不一样，直接返回false
    2 . 再去比较其值是否相同。相同则返回true，否则false。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var x=8;
        alert(x==8);
        alert(x===8);

        alert(x=="8");
        alert(x==="8");
    </script>
</head>
<body>

</body>
</html>

效果如下：
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

正则对象

RegExp对象的创建方式：

  • var reg=new RegExp("表达式“） 开发中基本不用。
  • var reg=/^ 表达式 $/ 直接量（开发中常用）
    直接量存在边界，^表示开始， $表示结束。

test方法

  • var 变量名=正则对象.test(string)：用来校验字符串是否匹配正则，全部字符都匹配则返回true，有字符不匹配则返回false

正则对象使用注意事项

  • /^表达式$/： 只要有无法成立正则的字符存在，即为false，全部符合为true。
    (检查严格，眼睛不揉沙子)适用于表单校验
  • /表达式/ ：只要有成立正则的字符存在，即为true。全部不符合为false
    (检查不严格，懒人思想)适用于字符串查找、替换

js数组

js数组的创建方式

  • var arr=[1,2,3,“a”,true] :常用的创建方式，长度为5

  • var arr=new Array(): 创建了一个数组，默认长度为0

  • var arr=new Array(“a”,“b”,true):长度为3

  • var arr=new Array(4):开辟了一个长度为4的数组，但是每个元素本质都为undefined

js数组的常用属性/方法

  • length ：设置或返回数组中元素数目
    代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var arr=['hello','你好',1,2];
        
        alert(arr.length);
    </script>
</head>
<body>
</body>
</html>

效果如下：
在这里插入图片描述

  • join()：把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分离
    代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var arr=['a','b','c'];
        var result=arr.join("+");
        alert(result);
       
    </script>
</head>
<body>

</body>
</html>

效果如下：
在这里插入图片描述

  • pop() ：删除并且返回数组的最后一个元素
    代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //pop()删除并且返回数组的最后一个元素
        var arr=['a','b','c','d'];
        var temp=arr.pop();
        alert(temp);
        alert(arr.length);
    </script>
</head>
<body>

</body>
</html>

效果如下：
在这里插入图片描述
在这里插入图片描述

  • push()：像数组的末尾添加一个元素，并返回新的长度
    代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
   
        var arr=['a','b','c','d'];
        var len=arr.push('e','w','t');
        alert(len);
        alert(arr);

    </script>
</head>
<body>
</body>
</html>

效果如下：
在这里插入图片描述

在这里插入图片描述

  • reverse() ：对元素顺序进行颠倒
    代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var arr=['a','b','c'];
        alert(arr.reverse());

        // var arr=['a','b','c'];
        // var result2=arr.reverse();
        // alert(result2);
        // alert(arr);
    </script>
</head>
<body>

</body>
</html>

效果如下：
在这里插入图片描述

eval全局函数

  • eval(): 计算JavaScript字符串，并把它作为脚本代码来执行，用于增强程序的扩展性，只可以传递原始数据类型String，对传递String对象没作用。
    代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
      //  var x=10;
      eval("var x=10;");
      //eval(new String("var x=10;"));
        alert(x);
    </script>
</head>
<body>
</body>
</html>

效果如下：
在这里插入图片描述

URL解码和编码

  • encodeURI(String):把字符串编码为URL
  • decodeURI(String):解码某个编码的URL
    代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
      //javascript encodeURI(String)编码
      var msg="http://www.itheima.cn/index.html?username=张三&passsword=123";
      //alert(msg);
      var temp=encodeURI(msg);
      alert(temp);

      //decodeURI
      alert(decodeURI(temp));
  </script>
</head>
<body>

</body>
</html>

效果如下：
编码：
在这里插入图片描述
解码：
在这里插入图片描述

字符串转数字

  • parseInt(string):string按照字面值转换成整数部分，小数点后面不关注
  • parseFloat(string0:string按照字面值转换成一个小数类型

注:
如果字符串的某个字符从字面值上无法转为数字，那么从该字符开始停止转换，仅返回前面正确的转换值。(例如:11.5a55，parselnt结果11，parseFloat结果11.5).
如果字符串的第一个字符就无法从字面值上转为数字，那么停止转换，返回 NaN NaN(NotANumber，一个数字类型的标识，表示不是一个正确的数字。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //var str="10.5a5";
        //var str="10.55";
        //var str="1a0.55";
        var str="a10.55";//返回NaN(Not a Number) 不是一个数字
        var num1=parseInt(str);
        alert(typeof(num1)+","+num1);

        var num2=parseFloat(str);
        alert(typeof(num2)+","+num2);

    </script>
</head>
<body>

</body>
</html>

效果如下：
在这里插入图片描述

函数

函数格式

function 函数名（参数列表）{
函数体
}
代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
      /*  public static void getSum(int a,int b){
            return a+b;
        }*/
      function getSum(a,b){
         return a+b;
      }

      var result=getSum(1,2);
      alert(result);
    </script>
</head>
<body>

</body>
</html>

效果如下：
在这里插入图片描述

重名函数

按照最近的一个函数来运算，看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function getSum(a,b,c){
            alert(a+"-"+b+"-"+c);
        }
      function getSum(a,b){
          alert(a+"-"+b);
      }
     getSum();

    </script>
</head>
<body>

</body>
</html>

效果如下：
在这里插入图片描述

函数使用的注意事项：
JavaScript函数调用执行完毕一定有返回值，值及类型根据 return决定，如果未说明return具体值，返回值为undefined;
JavaScript函数若同名，则不存在方法重载，只有方法相互覆盖，最后定义的函数覆盖之前的定义;
因为JavaScript不存在函数重载，所以JavaScript仅根据方法名来调用函数，即使实参与函数的形参不匹配，也不会影响正常调用；
如果形参未赋值，就使用默认值undefined。

自定义对象

function形式创建自定义对象

属性定义方式

方式1. this关键字，在对象声明定义阶段，定义一个属性

  • 格式：this.属性名=”属性值“

方式2. 创建对象后，使用对象.属性方式，动态定义属性

属性赋值

方式1.
代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function Person(){
            this.name="校长";
            this.age="18";
        }

        var p=new Person();
        alert(p.name);
        alert(p.age);
    </script>
</head>
<body>

</body>
</html>

效果如下：
在这里插入图片描述
在这里插入图片描述

方式2：
代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function Person(n,a){
            this.name=n;
            this.age=a;
        }

        //创建了一个Person对象,p
        var p=new Person("小王","20");
        p.sex="男";
        alert(p.sex);
    </script>
</head>
<body>

</body>
</html>

效果如下：
在这里插入图片描述

直接量自定义对象

  • 格式：var 变量名={属性名:“属性值”,属性名:“属性值”,…};
    示例：var person={name:"小李",age:18};

第一种创建方式

在变量名声明定义阶段，定义一个属性

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //person实例对象 创建完毕
        var person={name:"小李",age:18};
        alert(person.name);
        alert(person.age);
    </script>
</head>
<body>
</body>
</html>

效果如下：
在这里插入图片描述
在这里插入图片描述

第二种创建方式

创建变量后，使用变量名.属性方式，动态定义属性。
代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //person实例对象 创建完毕
        var person={name:"小李",age:18};
        alert(person.name);
        person.name="小王";
        alert(person.name);
    </script>
</head>
<body>

</body>
</html>

效果如下：
在这里插入图片描述
在这里插入图片描述

鬼鬼不同路
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
JavaScript 基础语法（一）
m0_60439135的博客
03-06 166
JavaScript 基础语法
JavaScript基础语法
weixin_52397329的博客
11-19 358
JavaScript基础语法 主要内容 JavaScript 简介 ​ JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。它的主要目的是，验证发往服务器端的数据、增加 Web 互动、加强用户体验度等。 JavaScript 的组成 ​ ECMAScript定义的只是这门语言的基础，与Web浏览器没有依赖关系，而在基础语法上可以构建更完善的脚本语言。JavaScript的运行需要一定的环境，脱离了环境JavaScript.
JavaScript基本的的语法规则
一个非常Cool的人
02-02 2406
介绍了基础语法中的运算符、分支语句、循环语句、异常的捕获与处理、js中的this关键字、let与const定义变量使用规则、js中的void链接、异步编程setTimeout、函数闭包。欢迎大家阅读。
JS常用语法归纳（全）
最新发布
nx_live的博客
04-24 2133
JS基础语法归纳，快速掌握JS语言
js核心基本语法（全面）
weixin_60941411的博客
04-09 3324
const：const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后的值不可再修改，const 定义的变量并非常量，并非不可变，它定义了一个常量引用一个值。Number("3.14") // 返回 3.14 Number(" ") // 返回 0 Number("") // 返回 0 Number("99 88") // 返回 NaN。如果我们在js中写的方法都是全局的方法，在需要嵌入到别人的界面中的时候，这些全局的东西很可能会和别人的东西重名从而引发错误，所以说需要用js闭包包起来。
JavaScript语法规则
m0_37058714的博客
06-27 1484
1.语句;(每一条JS语句都是一条发送给浏览器的指令)eg:  alert("hello  world");2.JS区分大小写eg：alert和Aler是不一样的代码和运行结果如下代码： &lt;script&gt; alert("hello world !"); &lt;/script&gt;运行结果：代码：&lt;script&gt; Alert("h...
javaScript基础语法介绍
10-24
本文从javascript简介开始，介绍了javascript的语法以及注意事项、动态语言、引用外部JS文件、变量命名规则、判断是否已经声明、不存在块级作用域这些方面的内容，是篇相当不错的基础语法的介绍文章，推荐给小伙伴们
javascript基础语法学习笔记
10-23
本文将深入讲解JavaScript的基础语法，包括它的组成、引入方式、注释、空格处理、代码折行规则、大小写敏感性以及保留字和关键字。 1. **JavaScript的组成**： - **ECMAScript**：JavaScript的核心语言部分，由...
JavaScript基础语法.pdf
08-22
"JavaScript基础语法详解" JavaScript基础语法是JavaScript语言的核心部分，包括ECMAScript的基础语法、DOM文档对象模型和BOM浏览器对象模型等。JavaScript是一种具有面向对象能力的、解释型的程序设计语言，主要...
JavaScript程序设计-JavaScript基础语法.pptx
11-02
理解并掌握这些基础语法和数据类型是进行JavaScript程序设计的第一步，它们构成了编写JavaScript代码的基础框架。随着学习深入，还将涉及函数、对象、数组、字符串操作、正则表达式、错误处理、事件处理等更复杂的...
JavaScript语法规范
热门推荐
pengjunlee的博客
01-02 5万+
目录 1.标识符的命名规范 2.程序注释 3.常用标识符命名方法 4.ECMAScript5严格模式 参考书籍：《JavaScript 权威指南----ECMAScript5+HTML5DOM+HTML5BOM》编著：张亚飞 JavaScript编写语法遵循ECMAScript标准，以下是ECMAScript语言的一些基本规范。 1.标识符的命名规范 ECMAScript标识...
JavaScript基本语法
bzzb_的博客
04-10 492
一.基本词法 ​ JavaScript语法就是指构成合法的JavaScript程序的所有规则和特征的集合,包括词法和句法.词法包括字符编码 命名规则,标识符,关键字,注释规则,注释字符用法等. 1.字符编码 ​ JavaScript程序使用Unicode字符集编写.Unicode字符集中每个字符使用两个字节来表示,这意味着用户可以使用中文来命名JavaScript变量 <!DOCTYPE h...
JavaScript的语法规则
Cimiy_的博客
12-16 1121
JavaScript的注释与分号 // 单行注释 /**/多行注释 语句结束使用分号 ，如果省略，则由解析器确定语句的结尾。 JavaScript的语法 ECMAScript中的一切（变量、函数名和操作符）都是区分大小写的。 JavaScript的标识符 标识符：变量、函数、属性的名字，或者函数的参数。 命名规则： -由字母、数字、下划线（_）或美元符号（$)组成 -不能以数字开头 -不能使用关键...
10JavaScript语法——基本规则
wayliu的博客
03-08 185
1.脚本和模块 2.import 声明 3.export 声明 4.函数体 5.预处理和指令序言 1.脚本和模块 在ES6引入了模块机制后，JavaScript有两种源文件，一种叫脚本，另一种叫模块。 1-1 区别 概念上区别 脚本是具有主动性的JavaScript代码段，是控制宿主完成一定任务的代码。 模块是被动性的JavaScript代码段，是等待被调用的库。 引入执行区别 脚本可由浏览器或者node环境引入执行。 模块只能由JavaScript代码用import引入执行。 现代浏览器可以支持sc
javaScript的基本语法规范总结
Mrsanger的博客
11-09 1502
javaScript的基本规范和常识 1.//单行 /**/多行注释 2.语句结束使用分号结尾。 3.JavaScript是区分大小写的，变量和函数都是区别大小写的。 4.javascript标识符，所谓标识符就是变量 函数 属性的名字，或者函数里面的参数，这都是称之为标识符 标识符铭文规定：字母数字下划线或者是$ 不能以数字开头，不能使用关键字或者保留字做标识符，保留字符就是指的特殊
程序设计基础总结课PPT文档.pptx
11-14
程序设计基础总结课PPT文档.pptx

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鬼鬼不同路

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值