javascript语法使用element plus javascript语法规则

转载

lemon 2023-10-06 20:36:07

文章标签 javascript 前端 java html 数组 文章分类 JavaScript 前端开发

JavaScript基础语法及规则（一）

注释
变量
基本数据类型
运算符
正则对象

RegExp对象的创建方式：
test方法
正则对象使用注意事项

js数组

js数组的创建方式
js数组的常用属性/方法

eval全局函数
URL解码和编码
字符串转数字
函数

函数格式
重名函数

自定义对象

function形式创建自定义对象

属性定义方式
属性赋值

直接量自定义对象

第一种创建方式
第二种创建方式

注释

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

注意：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>

效果如下：

javascript语法使用element plus javascript语法规则_前端

javascript语法使用element plus javascript语法规则_html_02

javascript语法使用element plus javascript语法规则_数组_03

javascript语法使用element plus javascript语法规则_前端_04

正则对象

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>

效果如下：

javascript语法使用element plus javascript语法规则_数组_05

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>

效果如下：

javascript语法使用element plus javascript语法规则_html_06

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>

效果如下：

javascript语法使用element plus javascript语法规则_前端_07

javascript语法使用element plus javascript语法规则_html_08

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>

效果如下：

javascript语法使用element plus javascript语法规则_javascript_09

javascript语法使用element plus javascript语法规则_javascript_10

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>

效果如下：

javascript语法使用element plus javascript语法规则_javascript_11

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>

效果如下：

javascript语法使用element plus javascript语法规则_数组_12

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>

效果如下：

编码：

javascript语法使用element plus javascript语法规则_javascript_13

解码：

javascript语法使用element plus javascript语法规则_javascript_14

字符串转数字

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>

效果如下：

javascript语法使用element plus javascript语法规则_javascript_15

函数

函数格式

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>

效果如下：

javascript语法使用element plus javascript语法规则_前端_16

重名函数

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

<!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语法使用element plus javascript语法规则_javascript_17

函数使用的注意事项：
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>

效果如下：

javascript语法使用element plus javascript语法规则_javascript_18

javascript语法使用element plus javascript语法规则_数组_19

方式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>

效果如下：

javascript语法使用element plus javascript语法规则_数组_20

直接量自定义对象

格式：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>

效果如下：

javascript语法使用element plus javascript语法规则_java_21

javascript语法使用element plus javascript语法规则_java_22

第二种创建方式

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

<!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>

效果如下：

javascript语法使用element plus javascript语法规则_java_23