JavaScript相关

最新推荐文章于 2023-05-20 22:16:33 发布

原创最新推荐文章于 2023-05-20 22:16:33 发布 · 174 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #java

JavaScript

JavaScript中的类与Java中的类很相似，但是有区别

JavaScript:

1 构造方法使用constructor关键字进行声明；

2 成员变量无需定义；

3 类中方法在定义时，不需要使用function关键字。如果使用function定义出来的就是一个函数对象了。

如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript类的定义和使用</title>
</head>
<body>
</body>
<script>
    class person {

        constructor(name, age) {
            this.name = name;
            this.age = age;

        };

        show() {
            document.write(this.name + "..." + this.age)
        };

        eat() {
            document.write("吃饭...")
        };

    };

    let p = new person("张三", 23);
    p.eat();
    p.show();

</script>

</html>

Java

构造方法必须要与类名保持完全一致

需要声明成员变量

定义方法时需要有权限修饰符、返回值、参数列表等

下为一个标准的JavaBean类

package com.itheima.edu.info.manager.domain;

public class Person {

    private String id;
    private String name;
    private String age;
    private String birthday;

    public Person() {
    }

    public Person(String id, String name, String age, String birthday) {
        this.id = id;
        this.name = name;
        this.age = age;
        this.birthday = birthday;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getAge() {
        return age;
    }

    public void setAge(String age) {
        this.age = age;
    }

    public String getBirthday() {
        return birthday;
    }

    public void setBirthday(String birthday) {
        this.birthday = birthday;
    }
}

JavaScript创建类的第二种方式：字面量

字面量在定义类的时候就已经创建好了对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字面量定义类和使用</title>
</head>
<body>

</body>

<script>

    let person ={
        name:"张三",
        age:23,
        hobby:["学习","听课"],

        eat:function () {
            document.write("吃东西。。。")
        }


    };

    document.write(person.name + "," + person.age + "," + person.hobby[0] + "," + person.hobby[1]+"<br>");

    person.eat();

</script>

</html>

继承

js中所有类都直接或间接继承了Object`类。这个Object的类与Java中的顶层父类Object不同。

子类可以继承父类公共的方法，并可以对其进行重写。使用extends关键字实现及继承关系。

this()、super()关键字与java中意思相同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>继承</title>
</head>
<body>

</body>

<script>

    class person{
        constructor (name,age){
            this.name=name;
            this.age=age;
        }

       eat(){
            document.write("吃东西。。。")
       }


    };


    class worker extends person{

        constructor (name,age,salary){

            super(name,age);
            this.salary=salary;

        }


        show(){
            document.write(this.name+","+this.age+","+this.salary)
        }

        eat(){

            document.write("worker吃东西")

        }

    };

    let w = new worker("张三",233,10000);
    w.eat();
    document.write("<br>");
    w.show();

</script>

</html>

`ECMAScript`内置对象

内置对象就是es6中的内置类相当于是工具类

Number

其中NaN六亲不认，自己和自己用==进行比较也是false。

parseInt() 解析时间解析到非数字时就会停止解析。如下：

document.write(Number.parseInt(“123a2”));----->123.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Number</title>
</head>
<body>

</body>

<script>

    document.write(Number.parseFloat("3.1415"));
    document.write("<br>");
    document.write(Number.parseInt("123a2"));//解析到非数字时就会停止解析
    document.write("<br>");

    //isNaN
    document.write(Number.isNaN(NaN));   //true
    document.write("<br>");
    document.write(Number.isNaN(NaN==NaN));


</script>

</html>

Math

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Math</title>
</head>
<body>

</body>

<script>

    //向上取整 ceil
    document.write(Math.ceil(4.1));   //5
    document.write("<br>");

    //向下取整 floor
    document.write(Math.floor(4.9));  //4
    document.write("<br>");

    //四舍五入 round
    document.write(Math.round(4.3));  //4
    document.write("<br>");
    document.write(Math.round(4.7));  //5
    document.write("<br>");

    //随机数 random
    document.write(Math.random());     //[0,1)
    document.write("<br>");

    //幂次方 pow(x,y)
    document.write(Math.pow(2, 3));   //8


</script>

</html>

Date

getTime() 可以获取当前时间距离时间原点的毫秒值，可以使用当前时间的毫秒值作为参数传递，避免一些静态资源（图片、音视频）走缓存

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date</title>
</head>
<body>

</body>
<img src="">
<script>

    //构造方法
    let d1 = new Date();
    document.write(d1 + "<br>");

    //根据给定的时间的毫秒值创建date对象
    let d2 = new Date(1000*60);
    document.write(d2 + "<br>");

    //指定时间获取date对象
    let d3 = new Date(2020,11,12,13,14,15);
    document.write(d3 + "<br>");

    //成员方法
    let fullYear = d1.getFullYear();
    document.write(fullYear + "<br>");

    let month = d1.getMonth();
    document.write(month + "<br>");//11  0-12

    let day = d1.getDay();
    document.write(day + "<br>"); //4星期四  获取的是星期几

    let date = d1.getDate();
    document.write(date + "<br>");  //10  获取的是今天的日期

    document.write(d1.toLocaleString() + "<br>");

    let time = d1.getTime();
    document.write(time);  //返回当前时间的毫秒值

    document.querySelector("img").src="http://www.xxx.com?time="+d1.getTime();



</script>

</html>

String

与java中的String相似，但是前端做体验，后端做安全。后端使用会更多

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>String</title>
</head>
<body>

</body>

<script>

    //构造方法创建字符串对象
    let s1 = new String("hello");

    //直接赋值
    let s2 = "helloWorld";

    //属性
    document.write(s1.length + "<br>");
    document.write(s2.length + "<br>");

    //成员方法
    //charAt
    document.write(s2.charAt(0)+"<br>");

    //indexof
    document.write(s2.indexOf("l") + "<br>");

    //lastIndexof
    document.write(s2.lastIndexOf("l") + "<br>");  //8

    //sustring
    document.write(s2.substring(0,2) + "<br>");  //截串 [0,2)

    //split
    let s3 = "张三,23,89";
    let content = s3.split(",");
    document.write(content[0]+"<br>");
    document.write(content[1]+"<br>");
    document.write(content[2]+"<br>");
    document.write("========================"+"<br>");

    for (let i = 0; i <content.length ; i++) {
        document.write(content[i]+"<br>")
    }

    //replace
    let s4 = "你TMD";
    let s5 = s4.replace("TMD","***");
    document.write(s5);



</script>

</html>

RegExp（正则表达式）

表达式格式 /^$/ 不要加双引号

/*
    方括号
        用于查找/校验某一个范围内的字符：
        [a]     匹配a字符
        [abc]   匹配a b c中任意一个
        [^abc]  匹配除了a b c之外，任意一个
        [a-z]   匹配所有小写字母中任意一个
        [a-zA-Z_0-9]   匹配所有小、大写字母、数字、_中任意一个

    元字符
        拥有特殊含义的字符，为了简化方括号的写法
        .                   匹配任意字符一个
        \.                  匹配“.”这个字符
        \w  = [a-zA-Z_0-9]   匹配所单词字符中任意一个
        \d  =   [0-9]       匹配所有数字中任意一个
        \W  = [^a-zA-Z_0-9]   匹配除了单词字符之外，所有字符中任意一个
        \D  =   [^0-9]       匹配所有非数字中任意一个
    量词
        [a]+  至少有一个a字符
        [a]*   任意个a字符
        [a]?   最多有一个a字符串
        [a]{m}    m个a
        [a]{m,}   至少有m个a
        [a]{,n}   最多有n个a
        [a]{m,n}   最少有m个，最多有n个a
    边界
        ^   匹配开始
        $   匹配结束

验证手机号和验证码案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>
</head>
<body>

</body>

<script>

    //手机号验证

   // let reg=new RegExp("/^[0-9]{11}$/");
    let reg=/^[1][358][0-9]{9}$/;

    let str="1888888";

   let b = reg.test(str);

    document.write(b + "<br>");


    //2.验证用户名
    //规则：字母、数字、下划线组成。总长度4~16
    let reg2 = /^[A-z 0-9_]{4,16}$/;
    let s="asfesrdty";
    let b1 = reg2.test(s);
    document.write(b1 + "<br>");


</script>
</html>

Array

类似于java中的Arrays工具类一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Array</title>
</head>
<body>

</body>

<script>

    let arr=[1,2,3,4];

    //1. push(元素)    添加元素到数组的末尾
    arr.push(5);
    document.write(arr + "<br>");

    //2. pop()         删除数组末尾的元素
    arr.pop();
    document.write(arr + "<br>");

    //3. shift()       删除数组最前面的元素
    arr.shift();
    document.write(arr + "<br>");

    //4. includes(元素)  判断数组中是否包含指定的元素
    document.write(arr.includes(5) + "<br>");
    document.write(arr.includes(3) + "<br>");

    //5. reverse()      反转数组元素
    document.write(arr.reverse() + "<br>");

    //6. sort()         对数组元素排序
    document.write(arr.sort() + "<br>");

</script>


</html>

Set

与java中的区别：

有序且唯一。java中set是无序的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Set</title>
</head>
<body>

</body>

<script>

    let s = new Set();

    //添加部分实验数据
    s.add("a");
    s.add("b");
    s.add("c");
    s.add("c");

    // size属性（与java不同）    获取集合的长度
    document.write(s.size + "<br>");

    // keys()      获取key迭代器对象
    let a = s.keys();
    for (let i = 0; i <s.size ; i++) {

        document.write(a.next().value + "<br>");

    }


    // 用法与java不同，类似于数据库查询出结果集遍历

    // delete(元素) 删除指定元素
    document.write(s.delete("c") + "<br>");

    let a1 = s.keys();
    for (let i = 0; i <s.size ; i++) {

        document.write(a1.next().value + "<br>");

    }





</script>

</html>

Map

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Map</title>
</head>
<body>

</body>

<script>

    let m = new Map();
    //  m.add("张三", "23");   错误
    // set(key,value)  添加元素
    m.set("张三", "23");
    m.set("李四", "24");
    m.set("李四", "25");

    let entries = m.entries();

    // size属性     获取集合的长度
    for (let i = 0; i < m.size; i++) {
        document.write(entries.next().value + "<br>");
    }

    // get(key)     根据key获取value
    let v = m.get("李四");
    document.write(v + "<br>");

    // delete(key)  根据key删除键值对
    document.write(m.delete("李四"));
    document.write("<br>");
    let e = m.entries();
    for (let i = 0; i <m.size ; i++) {
        document.write(e.next().value + "<br>");
    }


</script>

</html>