1024JS常用的对象总结(第十三课)主要内容String Date Math-阿里云开发者社区

JavaScript对象为第一部分

案例一:对象的类型

// ! 对象的类型
var name = "shriop"
var age = 19
var height = 1.80
console.log("名字是" + name + "年龄" + age + "身高" + height);
// ! 对象的类型
var obj1 = new Object();
console.log(obj1);
// ! 对象的创建
var obj2 = {
    "name": '张三',
    "age": '23',
    "sex": '男',
    run: function () {
        console.log("我是对象创建的方法")
    },
    hand: {
        "count": ''
    },
    eat:function(){
        console.log("我的函数内容在吃什么呢")
    }
}
// 修改
obj2["name"] = "李四"
// 修改
obj2.name = "赵武"
//增加
obj2["hand"] = "12346"
console.log(obj2.name)
console.log(obj2.hand)
// !方法的调用在js中
console.log(obj2.run())
console.log(obj2.eat())

案例二:认识对象

// ! 对象你声明 
// ! 对象属性的调用
// ! 对象的遍历
// ! 对象的类型
var name = "我是创建的对象"
var age = 23
var height = 1.98
console.log("名字是" + name + "年龄" + age + "身高" + height);
// ! 对象的类型
var obj1 = new Object();
console.log(obj1);
// ! 对象的创建
var obj2 = {
    "name": '我是张三李四赵武',
    "age": '45',
    "sex": '男',
    run: function () {
        console.log("我是对象创建的方法为Run")
    },
    hand: {
        "count": ''
    }
}
// 修改
obj2["name"] = "我是李四的信息"
// 修改
obj2.name = "赵武的信息"
//增加
obj2["hand"] = "234"
// 删除
delete obj2.hand
console.log(obj2.name)
console.log(obj2.hand)
console.log(obj2.run())
// ! 创建对象的购物的信息 
var shooping = {
    price: '123',
    name: '<智慧与人生>',
    address: "江西省"
}
// 增加
shooping.weight = 1.9
// 修改的方式
shooping["color"] = "yellow"
shooping.price = "4678"
// 删除
delete shooping.address
// 查询信息
console.log("购物信息商品的信息:_" + "价格" + shooping.price + "名称" + shooping.name + "地址" + shooping.address)
// !创建手机对象的信息
var phone = {
    color: "red",
    price: "456$",
    clq: ""
}
// 增加
phone.hz = 123
// 修改
phone.color = "black"
// 删除
console.log("手机购买用户的信息:")
// ! 创建用户的内容
var home = {
    account: '143',
    password: "12345678",
    nickname: "用户",
    phone: "19867894567",
}
// var arr=Object.values(home)
var arr = Object.keys(home)
for (var i = 0; i < arr.length; i++) {
    console.log("第二中方式" + home[arr[i]])
}
//!  for each
for (var j in home) {
    // console.log("for in ___"+j)
    console.log("for in ___" + home[j])
}
console.log(home)
// ! 案例三
var m = "hellow"
var obj = {
    "good friend": "shiplo",
    [m]: "你好数据"
}
// console.log(obj "good friend");
console.log(obj.m)
console.log(obj["good friend"]);
console.log(obj["hellow"]);
console.log(obj[m]);
console.log(obj.m);
// 
var people={
    "ban an a":'yellow',
    weight:'300'
}
console.log(people["ban an a"])

案例三:对象的案例实操

// ! 创建 一个对象
var obiect={
    // 编号,
    id:"1002345001",
    // 姓名
    name:"我是object创建的对象内容一",
    // 性别
    sex:"男",
    // 年龄
    age:456,
    // 身高
    height:180,
    // 体重
    weught:60,
    // 身份证号
    SID:"12345678901007890",
    // qq号
    qq:"9876543210",
    // 王者账号
    wz:"19089765",
    // 定义对象的行为
    run:function(){
        console.log("我是奔跑的数据调用的方法")
    },
    // sleep
    sleep:function(){
        console.log("我是sleep的数据调用的方法")
    },
    // eat
    eat:function(){
        console.log("我是eat的数据调用的方法")
    },
    // reading
    reding:function(){
        console.log("我是reding的数据调用的方法")
    }
}
var arr = Object.keys(obiect)
for (var i = 0; i < arr.length; i++) {
    console.log("遍历" + obiect[arr[i]])
}
// 对象的行为去调用
console.log(obiect.run())
console.log(obiect.sleep())
console.log(obiect.eat())
console.log(obiect.reding())

案例四:自定义构造函数创建对象

// ! 创建自定义的构造函数的对象
// !定义构造的函数
// !定义构造函数的属性
function Student(name, sex, age, height) {
    // !初始化对象的name,sex,age,height
    /**
     * 
     * es6
     * var obj={
     * name,
     * age,sun
     * 
     * }
     * obj.name=name
     * obj.age=age
     * obj.sno=sno
     */
    this.name = name;
    this.sex = sex;
    this.age = age;
    this.height = height;
    // !定义构造函数的方法如何去调用
    // !方案一  定义了第一个方法
    this.eat = function () {
        console.log("今天用户定义了一个方法名字叫吃的方法")
    }
}
// !方案二  定义了第二个方法
function sleep() {
    console.log("用户在方案二中定义了一个方法叫sleep")
}
//用户创建对象的实例
var student1 = new Student("我是构造函数的方式创建的对象1", "男", 34, 156);
var student2 = new Student("我是构造函数的方式创建的对象2", "男", 34, 156);
var student3 = new Student("我是构造函数的方式创建的对象3", "男", 34, 156);
var student4 = new Student("我是构造函数的方式创建的对象4", "男", 34, 156);
// 打印输出
// console.log(student1);
console.log(student1.name + "_" + student1.age + "_" + student1.sex + "_" + student1.height);
console.log(student2.name + "_" + student2.age + "_" + student2.sex + "_" + student2.height);
console.log(student1.name + "_" + student2.age + "_" + student3.sex + "_" + student4.height);
// !方法的调用
student1.eat();
sleep();
// Student.sleep();
// !自己定义一个对象为Pig  使用自己定义的构造函数 如何执行?
/**
 * @MyCreteObjectStructure 用户自己创建的第一个函数名称为MyCreteObjectStructure
 * () 函数中的参数个数
 */
function MyCreteObjectStructure(id, name, sex, age, height, weight) {
    // !初始化对象的属性
    this.id=id;
    this.name = name;
    this.sex = sex;
    this.age = age;
    this.height = height;
    this.weight=weight;
    // 自己定义的一个函数方法为 CreteObjectStructure
    this.CreteObjectStructure = function () {
        console.log("@MyCreteObjectStructure 用户自己创建的第一个函数名称为MyCreteObjectStructure")
    }
}
//!用户创建对象的实例
var obj = new MyCreteObjectStructure(1000678,"我是构造函数的方式创建的对象1", "男", 34, 156,234);
// !方案一打印输出的内容
// 打印输出id
console.log(obj.id);
// * 方案二 对象名的函数遍历
for (var j in obj) {
    // console.log("for in ___"+j)
    console.log("用户打印的属性为" + obj[j])
}
// ! 函数方法的调用
// 对象名.方法名
obj.CreteObjectStructure ()

案例五:Object自定义对象

var people = new Object()
people.name = "我叫张胜男";
people.age = 123;
people.weight = 67;
people.height = 189;
people.eat = function () {
    console.log(people.name + " " + people.weight + " " + people.age)
}
console.log(people.name);
people.eat()
// ! 抽象函数的理解
// ! 创建对象的信息
// ! 自定义一个对象为Dog对象的内容
var Dog = new Object()
// 狗的编号
Dog.id = 10099987001;
// 狗的姓名
Dog.name = "小环"
// 狗的毛色
Dog.corlor = "balck"
// 狗的身高
Dog.height = "189"
// 狗的体重
Dog.weight = 89
// 狗的行为
Dog.run = function () {
    // 在run方法中调用
    console.log("在run方法中调用"+Dog.name + "_______" + Dog.id)
}
// 在 sleep 方法中调用
Dog.sleep = function () {
    console.log("在 sleep 方法中调用"+Dog.color + "_______" + Dog.height + "__" + Dog.weight)
    Dog.run()
}
// 睡觉
Dog.food = function () {
    // ! 执行方法名称为food()
    console.log("在 sleep 方法中调用"+Dog.name + "_______" + Dog.id + Dog.color + "_______" + Dog.height + "__" + Dog.weight)
    Dog.sleep()
}
// 吃食物
console.log(Dog.id)
// 调用方法
Dog.food()

JavaScript的Math对象为第二部分

案例六:Number属性的转换:

var name1="hello";
var  name2=new String("hello");
var  name4=new String("hello");
var name3=new Number(10);
// new
console.log(name1==name2);
console.log(name1===name2);
console.log(name2==name4);
console.log(name2===name4);
console.log(typeof name1,typeof name2,typeof name3);
// Number
console.log(2**53-1)
console.log(Number.MAX_SAFE_INTEGER,"安全最大的整数")
console.log(Number.MIN_SAFE_INTEGER,"安全最小的整数")
// 进制转换
var a=100;
var b1=a.toString(2)
var b2=a.toString(16)
var b3=a.toString(8)
console.log(b1+" "+b2+" "+b3)
console.log(b1,1000..toString(8))
console.log(b2,1000..toString(16))
console.log(b3,1000..toString(2))
var c=3.145926;
console.log(c.toFixed(3));
console.log(typeof c.toFixed);
var str1="123.01"
var str2="abcde"
var str3=parseInt(str1)
var str4=parseInt(str2)
var str5=parseFloat(str1)
console.log(str5)
var e="15.34567"
var e1="23"
var e2=Number.parseInt(e)
console.log(e2)

案例七:Math方法的使用

var p=Math.PI
console.log(p);
console.log(Math.E)
console.log(Math.PI)
console.log(Math.SQRT2)
console.log(Math.SQRT1_2)
console.log(Math.LN2)
console.log(Math.LN10)
console.log(Math.LOG2E)
console.log(Math.LOG10E)
console.log("---------------------------------")
var num=3.1;
var num1=3.6;
console.log(Math.floor(num),Math.ceil(num),Math.round(num));
console.log(Math.floor(num1),Math.ceil(num1),Math.round(num1));
console.log(Math.pow(6,5))
console.log(Math.sqrt(25))
var a1=123;
var a3=789;
var a2=90;
var a4=989;
console.log(Math.max(a1,a2,a3,a4))
console.log(Math.min(a1,a2,a3,a4))
console.log(Math.abs(a2-a4))
console.log(Math.sin(45))
console.log(Math.tan(45))
console.log(Math.tanh(45))
console.log(Math.trunc(45.9000))

JavaScript的字符串对象为第三部分

案例八:String的属性和方法的介绍从基础开始

var newStr = new String("用户你好我是JavaScript中的字符串")
for(var i=0;i<newStr.length;i++){
    console.log(newStr[i])
    for(var j=0;j<newStr.length;j=j+21){
        // console.log(newStr.charAt(j))
        console.log("_")
    }
}
// 打印字符串的长度
var l = newStr.length;
console.log(typeof l)
// 打印字符串的长度
console.log("打印字符串的长度" + l)
// 创建字符串的对象
var newStr1 = new String("One World One Dream Dert")
// 判断
if (newStr1.constructor == String) {
    console.log("他是一个带有字符串的实现")
}
console.log(newStr1)
console.log(newStr1.constructor)
// 定义字符串增加的方法
String.prototype.getl = function () {
    console.log(this.length)
}
var newStr2 = new String("abcdefghijklmnopq");
var l2 = newStr2
l2.getl()
// String常用到的方法
/**
 * @charAt 查找字符
 * @indexOf 查找首次出现的字符
 * @lastIndexOf  查找最后出现的字符的位置
 */
var aa = new String("1024程序我@你了");
//  查找字符
console.log("查找字符" + aa.charAt(8));
//  查找首次的字符
console.log("查找首次出现的字符" + aa.indexOf("f"))
var flag11=aa.includes('付出',9)
var flag12=aa.startsWith('付出')
var flag13=aa.endsWith("命运")
console.log(flag11);
console.log(flag12);
console.log(flag13);
//  查找末尾的字符
console.log("查找最后出现的字符的位置" + aa.lastIndexOf("q"))
//  截取字符串
console.log("截取字符串" + aa.slice(2))
console.log("截取某段字符串" + aa.slice(3, 9))
// 指定位置去取字符串
console.log("substr截取字符串" + aa.substr(8))
console.log("substr截取某段字符串" + aa.substr(1, 9))
// 字符的提取信息
console.log("字符的提取信息" + aa.substring(2))
console.log("字符的提取信息" + aa.substring(4, 9))
// 大小写转换
console.log("大小写转小换" + aa.toLocaleLowerCase())
console.log("大小写转大换" + aa.toUpperCase())
// String对象的连接 和  分离
var nickname = new Array("东西", "星辰", "一律", "我的", "网站");
var lastname = new Array("南北", "大海", "放行", "世界", "设计");
// 如何将上面的信息进行拼接呢?
for (var i = 0; i < nickname.length; i++) {
    // 两串字符的拼接
    console.log(nickname[i].concat(lastname[i]));
}
console.log("  ddf  ")
console.log("  ddf  ".trim())
//  字符串的分离
var str = "前途一片 光明，可我找不 到出路。感悟：把自 己封闭 起来，再光明 也是虚无。人到老年，放飞自己，才是真 正的出路。";
var str1 = "每个人都可以树立目标，但并不是每个人都能实现自己的目标。只要你付出劳动，总会得到目标的报偿。";
console.log(str.split(" "))
console.log(str.split("", 2))
console.log(str.split(" ", 3))
//stringObject.slice(start,end) 返回一个新的字符串,包括 start 处的字符,但不包括 end 处的字符,其长度为 end 减 start
//当接收的参数是负数时，slice会将它字符串的长度与对应的负数相加，结果作为参数。如果仅有一个参数，则从start开始到末尾。
var str = "HelloExample";
console.log(str); //HelloExample
console.log(str.slice(1, 3)); //el
console.log(str.slice(2)); //lloExmaple
console.log(str.slice(3, 1)); //空字符串
console.log(str.slice(-4, -1)); //mpl
console.log(str.slice(-4, 0)); //空字符串
console.log(str.slice(-1, -4)); //空字符串
console.log(str.slice(1, -4)); //elloExa
console.log(str.substring(-3, 9)); 
console.log(str.substr(-2)); 
// 替换
var str = "Visit HangZhou";
console.log(str); //Visit HangZhou
console.log(str.replace(/Hang/g, "Su")); //Visit SuZhou
var str = "1 plus 2 equal 3";
console.log(str); //1 plus 2 equal 3
console.log(str.replace(/(\d)/g, "*"));  //* plus * equal *
var str = "as An angaaaaale";
console.log(str.replace(/a/, "b")); //bs An angle
console.log(str.replace(/a/g, "b")); //bs An bngle
console.log(str.replace(/a/gi, "b")); //bs bn angle
var str = "Karl,John";
console.log(str.replace(/(\w+)\s*,\s*(\w+)/, "$2,$1")); //John,Karl
var str = '"ab", "b"';
console.log(str.replace(/"([^"]*)"/g, "'$1'")); //'ab', 'b' 
var str = "aaa bbb ccc";
console.log(str.replace(/\b\w+\b/g, function (w) {
    return w.substring(0, 1).toUpperCase() + w.substring(1);
})); //Aaa Bbb Ccc 
//search() – 执行一个正则表达式匹配查找。如果查找成功，返回字符串中匹配的索引值。否则返回 -1 。 
//stringObject.search(regexp) 返回stringObject 中第一个与 regexp 相匹配的子串的起始位置。
//此方法跟indexOf类似。此方法会忽略g标识
var str = "Visit HangZhou";
console.log(str) //Visit HangZhou
console.log(str.search(/Hang/)); //6
console.log(str.search(/hang/)); //-1
console.log(str.search(/hang/i)); //6
var str = "1 plus 2 equal 3";
console.log(str) //1 plus 2 equal 3
console.log(str.search(/\d/g)); //0

JavaScript的日期对象为第四部分:

案例九:日期的属性和方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间对象</title>
    <style>
        * {
            background-color: rgb(255, 255, 255);
            color: rgb(3, 4, 4);
            font-size: 26px;
            border: 2px solid yellowgreen;
        }
    </style>
</head>
<body>
    <script>
        // Sat Oct 22 2022 20: 33: 43 GMT + 0800(中国标准时间)
        var NewDate = new Date();
        document.write(NewDate + "<br>");
        // Tue Nov 22 2022 00: 00: 00 GMT + 0800(中国标准时间)
        var NewDate1 = new Date(2022, 10, 22);
        document.write(NewDate1 + "<br>")
        //Tue Nov 22 2022 20: 26: 30 GMT + 0800(中国标准时间)
        var NewDate2 = new Date(2022, 10, 22, 20, 26, 30);
        document.write(NewDate2 + "<br>")
        // Mon Jun 20 2022 22: 34: 23 GMT + 0800(中国标准时间)
        var NewDate3 = new Date("Jun 20,2022 22:34:23")
        document.write(NewDate3 + "<br>")
        // Sat Oct 22 2022 22: 34: 23 GMT + 0800(中国标准时间)
        var NewDate4 = new Date("2022/10/22/ 22:34:23")
        document.write(NewDate4 + "<br>")
        // 2022
        var NewDate5 = new Date();
        // 增加属性
        Date.prototype.mark = NewDate5.getFullYear()
        document.write(NewDate5.mark + "<br>")
        if (NewDate5.constructor == Date) {
            // 2022
            // 日期调用的对象信息内容
            document.write("日期调用的对象信息内容" + "<br>")
        }
    </script>
    <script>
        // 16个方式
        var myDate = new Date();
        var a3 = myDate.getDate();
        var a4 = myDate.getDay();
        var a2 = myDate.getMonth();
        var a1 = myDate.getFullYear();
        var a = myDate.getYear();
        var a6 = myDate.getHours();
        var a7 = myDate.getMinutes();
        var a8 = myDate.getSeconds();
        var a9 = myDate.getMilliseconds();
        var a13 = myDate.getTime();
        var a14 = myDate.toTimeString();
        var a15 = myDate.toDateString();
        var a16 = myDate.toGMTString();
        var a17 = myDate.toUTCString();
        var a10 = myDate.toLocaleDateString();
        var a11 = myDate.toISOString();
        var a12 = myDate.toGMTString();
        // 设置值
        document.write(a1 + "<br>");
        document.write(a2 + "<br>");
        document.write(a3 + "<br>");
        document.write(a4 + "<br>");
        // document.write(a5 + "<br>");
        document.write(a6 + "<br>");
        document.write(a7 + "<br>");
        document.write(a8 + "<br>");
        document.write(a9 + "<br>");
        document.write(a10 + "<br>");
        document.write(a11 + "<br>");
        document.write(a12 + "<br>");
        document.write(a13 + "<br>");
        document.write(a14 + "<br>");
        document.write(a15 + "<br>");
        document.write(a16 + "<br>");
        document.write(a17 + "<br>");
    </script>
</body>
</html>

案例十:格式化字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 格式化字符串
        var str="人最坏的习惯之一就是抱住已经拥有的东西不放，其实一个人只要舍得放下自己的那点小天地，就很容易走进宇宙的大世界。这个世界为你准备的精彩很多。"
        document.write("<h2>"+str.anchor()+"</h2><br>")
        document.write("<h2>"+str.big()+"</h2><br>")
        document.write("<h2>"+str.small()+"</h2><br>")
        document.write("<h2>"+str.fontsize()+"</h2><br>")
        document.write("<h2>"+str.bold()+"</h2><br>")
        document.write("<h2>"+str.italics()+"</h2><br>")
        document.write("<h2>"+str.link()+"</h2><br>")
        document.write("<h2>"+str.strike()+"</h2><br>")
        document.write("<h2>"+str.blink()+"</h2><br>")
        document.write("<h2>"+str.fixed()+"</h2><br>")
        document.write("<h2>"+str.fontcolor("red")+"</h2><br>")
        document.write("<h2>`其实一个人只要舍得放下自己的那点小天地'"+str.sub()+"</h2><br>")
        document.write("<h2>`其实一个人只要舍得放下自己的那点小天地'"+str.sup()+"</h2><br>")
    </script>
</body>
</html>

案例十一:字符串的计数问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字符串的计数问题</title>
</head>
<body>
    <script>
        function getMost(str) {
            // 步骤1
            var result = {};
            for (let i in str) {
                if (str[i] in result) {
                    // 步骤2
                    result[str[i]]++;
                } else {
                    // 步骤3
                    var object = {};
                    object[str[i]] = 1;
                    result = Object.assign(result, object);
                }
            }
            return result;
        }
        var str1=prompt("请输入你的字符串的信息")
        var result = getMost(str1);
        console.log(result);
    </script>
</body>
</html>

案例十二:字符串的几个应用题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<sc>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var a = prompt("请输入第1个数");
        var a1 = prompt("请输入第2个数");
        var a2 = prompt("请输入第3个数");
        var a3 = prompt("请输入第4个数");
        var a4 = prompt("请输入第5个数");
        console.log(Math.max(a, a1, a2, a3, a4))
        console.log(Math.min(a, a1, a2, a3, a4))
        var radom = Math.random() * 899 + 100;
        console.log(radom.toFixed(0))
        var radomq = Math.random() * 1000 + 1;
        console.log(radomq.toFixed(0))
    </script>
    <script>
        var str1 = prompt("请用户输入字符串的信息")
        var str2 = str1;
        console.log(str2)
        // 
        console.log(str2.replace(/a/gi, "_").toUpperCase()); //bs bn angle
    </script>
    <script>
        var str3 = prompt("请用户输入字符串的内容信息");
        var str4 = str3;
        console.log(str4.split(1, 7))
        if (str4.startsWith('say')) {
            console.log(str4.toUpperCase)
        } if (str4.endsWith('end')) {
            console.log(str4.toLocaleUpperCase)
        } else {
            console.log(str4)
        }
    </script>
    <!-- 字符串的拼接 -->
    <script>
        var a = "123"
        var b = "hah"
        var c = "123"
        var d = "123"
        var e = "hah"
        console.log(a.concat(b, c, d, e));
    </script>
</body>
</html>

1024JS常用的对象总结(第十三课)主要内容String Date Math

案例一:对象的类型

案例二:认识对象

案例三:对象的案例实操

案例四:自定义构造函数创建对象

案例五:Object自定义对象

案例六:Number属性的转换:

案例七:Math方法的使用

案例八:String的属性和方法的介绍从基础开始

案例九:日期的属性和方法

案例十:格式化字符串

案例十一:字符串的计数问题

案例十二:字符串的几个应用题

热门文章

最新文章

相关课程

相关电子书

相关实验场景