JS基础(4) 对象创建,常见内置对象使用,简单数据类型和复杂数据类型

关于面向对象笔者也是做过一个案例,也是已经发布,有兴趣的同学可以去看看

对象

三种创建对象方法

  1. 利用字面量创建对象(常用)键值对

      let obj = {
                uname: 'warm',
                age:18,
                sex:'男',
                show:function(){
                    console.log('这是对象的方法');
                }
            };//创建了一个对象
          obj.uname;//使用对象属性 .点的形式
          obj['uname'];//使用['']的形式使用属性
          obj.show();//使用方法
  2. 利用new Object 创建对象

    //利用new object创建对象
            let obj2 = new Object();//创建了一个空对象
            obj2.uname = 'Ti';//利用等号赋值的方法添加对象的属性,方法
            obj2.age = 20;
            obj2.sex = '男';
            obj2.show = function(){
                console.log('这是通过了new object创建对象')
            }
  3. 利用构造函数创建对象

        //构造函数 函数封装对象
            function Person(uname, age, sex) {
                this.uname = uname;
                this.age = age;
                this.sex = sex;
                this.show = function(str) {
                    console.log(str);
                }
            }
            let obj3 = new Person('Tiwarm', 19, '男');
            console.log(obj3.uname);
            obj3.show('这是通过构造函数new对象');

    new在执行的时候会做四件事

    1. 在内存中创建一个新的空对象

    2. 让this指向这个新对象

    3. 执行构造函数里面的代码,给这个新对象添加属性和方法

    4. 返回这个新对象(所以构造函数里面不需要return)

遍历对象

for...in 语句用于对数组或者对象的属性进行循环操作(常用于对象)  

    let obj3 = new Person('Tiwarm', 19, '男');
        for (let k in obj3) {
            console.log(k); //输出属性名
            console.log(obj3[k]); //输出值
        }

内置对象

JavaScript中的对象分为三种

  1. 自定义对象

  2. 内置对象

  3. 浏览器对象

前两种对象是JS基础内容,属于ECMAScript;第三个浏览器对象属于我们JS独有的。

内置对象就是指JS语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或者是最基本而必要的功能(属性和方法)。

Math对象

学习链接:Math - JavaScript | MDN (mozilla.org)

因为实在太多了,去官网的话就一目了然了,有什么方法,怎么使用,明明白白,这里挑几个重点

随机函数

random()返回一个随机小数 0<=x<1,这个方法不用跟参数。

 <script>
        //得到一个随机小数
        console.log(Math.random());
        //得到两个数之间的随机整数,包含这两个数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        console.log(getRandom(1, 10));
        //随机点名
        let arr = ['warm', 'warm1', 'warm2', 'warm3', 'warm4'];
        console.log(arr[getRandom(0, arr.length - 1)]);
​
        //猜数字游戏
        let random = getRandom(1, 10); //随机生成一个数
        let num = prompt('请输入一个1~10之间的数字');
        let i = 1;
        while (true) {
            if (num > random) alert('大了');
            if (num < random) alert('小了');
            if (num == random) {
                alert(`恭喜你地${i}次猜中了`);
                break;
            }
            num = prompt('再来一次');
            i++;
        }
    </script>

日期对象

Date对象和Math对象不一样,他是一个构造函数,所以我们需要实例化后才能使用,下面会给出一些常用的案例进行学习

获取当前时间

        //获取当前时间
        let now = new Date();
        console.log(now);

Date()构造函数的参数

        //1.使用date必须使用构造器的方式,如果里面没有跟参数那么返回系统当前的时间
        let date = new Date();
        console.log(date);
        //2.参数常用写法 数字型 2021,11,24  或者是 字符串型 '2021-11-24 13:12:11'
        let date1 = new Date(2021, 11, 24);
        console.log(date1);

日期格式化

 //日期格式化
        let days = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        let year = date.getFullYear();
        var month = date.getMonth() + 1;
        let dates = date.getDate();
        console.log(`今天是:${year}年${month}月${dates}日\t${days[date.getDay()]}`);

封装函数显示时间

        //封装一个函数返回当前时分秒 格式:00:00:00
        function getTime() {
            let time = new Date();
            let h = time.getHours();
            h = h < 10 ? '0' + h : h;
            let m = time.minutes();
            m = m < 10 ? '0' + m : m;
            let s = time.getSeconds();
            s = s < 10 ? '0' + s : s;
            return h + ':' + m + ':' + s; //也可以说返回三个值
        }

数组对象

学习地址:Array - JavaScript | MDN (mozilla.org)

  1. 字面量

  2. new Array();

检测是否为数组

  //new Array()方式
        let arr1 = new Array(2); //开辟两个长度,这里的单个二只作为长度空间
        let arr2 = new Array(2, 3); //开辟两个长度存放2和3,这里的2作为元素值了

        //判断检测是否为数组
        //方法1.instanceod Array;
        let arr3 = [];
        let arr4 = {};
        console.log(arr3 instanceof Array); //true
        console.log(arr4 instanceof Array); //false

        //方法2 Array.isArray()//H5新增的方法 ie9以上版本才支持
        console.log(Array.isArray(arr3));
        console.log(Array.isArray(arr4));

添加删除数组方法

push()添加数组 末尾

push() 在我们数组的末尾 添加一个或者多个元素

push()完毕之后有个返回值是数组的长度

unshift()添加数组 首部

unshift () 在数组的开头添加一个元素

unshift ()完毕之后有个返回值是数组的长度

pop() 删除数组 末尾

pop() 它可以删除数组最后的元素一次只能删一个

pop()返回值是删除的数组

shift()

shift() 它可以删除数组前面的元素一次只能删一个

shift() 返回值是删除的数组

splice() 该方法可以实现插入,删除,替换的功能

数组排序方法

翻转数组

reverse()

数组名.reverse();

冒泡排序

sort()

数组名.sort(function(a, b) {

return a - b

});

数组索引方法

数组索引

indexOf()

数组名.indexOf(值);返回值再数组中对应的下标

只返回第一个满足条件的 后面还有的话不返回

返回值为-1 代表数组中没有该元素

lastIndexOf

lastIndexOf顾名思义从最后开始查找

只返回第一个满足条件的 后面还有的话不返回

返回值为-1 代表数组中没有该元素

应用案例:

  let arr = [1, 2, 3, 4];
        //添加删除数组
        //1.push() 在我们数组的末尾 添加一个或者多个元素
        arr.push(5, 6);
        console.log(arr.push(7)); //push完毕之后有个返回值是数组的长度
        console.log(arr);
        //2.unshift 在数组的开头添加一个元素
        arr.unshift(0);
        console.log(arr);
        //3.pop() 它可以删除数组最后的元素一次只能删一个
        console.log(arr.pop) //返回值是删除的数组
            //4.shift() 它可以删除数组前面的元素一次只能删一个
        console.log(arr.shift()) //返回值是删除的数组

        //删除数组中大于2000的值
        let num = [1500, 1600, 2000, 2100, 2200, 1222];
        let newNum = [];
        for (let i = 0; i < arr.length; i++) {
            if (num[i] < 2000) {
                // newNum[newNum.length] = num[i];
                newNum.push(num[i]);
            }
        }
        console.log(newNum);


        //数组排序
        //翻转数组 reverse
        arr.reverse();
        console.log(arr);

        //冒泡排序
        let arr2 = [13, 4, 77, 1, 7];
        arr2.sort();
        console.log(arr2); //这样有问题

        arr2.sort(function(a, b) {
            return a - b //a-b升序,b-a降序
        }); //这样写才行
        console.log(arr2);

        //数组索引
        //indexof 只返回第一个满足条件的 后面还有的话不返回
        let arr3 = [1, 9, 8, 7, 6, 5, 4, 3, 2, 1];
        console.log(arr3.indexOf(1));
        console.log(arr3.indexOf(10)); //-1

        //lastIndexOf顾名思义从最后开始查找
        console.log(arr3.lastIndexOf(1));//10

数组去重

 //数组去重
        function unique(arr) {
            let newArr = [];
            for (let i = 0; i < arr.length; i++) {
                if (newArr.indexOf(arr[i]) === -1) {
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }

数组转换为字符串

1.toString()方法

2.join()方法 比toString更强大 它可以自定义分隔符

 //将数组转化为字符串
        let arr5 = [1,2,3];
        let arr6 = [1,2,3];
        //1.使用toString()
        console.log(arr5.toString());
        //2.join(还可以使用分隔符)
        console.log(arr6.join('||'));

字符串对象

基本包装类型->复杂数据类型

不光是字符串,还要Number,Boolean都可以用来包装

 //基本包装类型
        let str = 'warm';
        console.log(str.length);
        //对象才有属性和方法  复杂数据类型才有属性和方法
        //简单数据类型为什么也有length属性呢
        //基本包装类型:就是把简单数据类型包装成为了复杂数据类型
        //(1).把简单数据类型用new包装为复杂数据类型
        let temp = new String('warm');
        //(2).把临时变量的值给str 
        str = temp; // console.log(temp.length);
        //(3).销毁这个临时变量
        temp = null;

字符串不可变

指的是里面的值不可变,虽然看上去像是改变了值,但其实是地址变了,再内存中开辟了一个新的内存空间。

      //字符串不可变
        //因为我们字符串不可变,所以不要大量的拼接字符串
        let str1 = '';
        for (let i = 1; i <= 100000000; i++) {
            str1 += i; //每次拼接都会开辟新的空间给它 所以次数一多内存占用率就高 卡顿
        }
        console.log(str1);

字符串常用方法

所有的方法都不会修改字符串本身(字符串是不可变的)

indexOf('字符') :根据字符返回位置

str3.indexOf('你');

indexOf('字符',[起始的位置])

console.log(str3.indexOf('你',4));//从索引是4开始查找

lastIndexOf();同理 这个的从后开始

 //字符串常用方法 所以的方法都不会修改字符串本身(字符串是不可变的)
        //根据字符返回位置
        let str3 = '你好,warm,很高兴认识你';
        console.log(str3.indexOf('你'));
        console.log(str3.indexOf('你', 4));

查找字符串中o所出现的位置以及出现的次数

   //查找字符串中o出现的所有位置以及出现的次数
        let str4 = 'abcdoeoderodop';
        let index = str4.indexOf('o');
        let step;
        while (index !== -1) {
            console.log(index);
            step++;
            index = str4.indexOf('o', index + 1);
        }
        console.log(`o一共出现了${step}次`);

根据位置返回字符(重点)

1.charAt(index)

       for (let i = 0; i < str5.length; i++) {
            console.log(str5.charAt(i));
        }

2. charCodeAt(index) :返回的是字符串的ASCII码 判断用户按了哪个键

        //charCodeAt(index) :返回的是字符串的ASCII码 判断用户按了哪个键
        for (let i = 0; i < str5.length; i++) {
            console.log(str5.charCodeAt(i));
        }

3. str[index] H5新增 就跟遍历数组一样

       for (let i = 0; i < str5.length; i++) {
            console.log(str5[i]);
        }

统计字符串中出现次数最多的字符,并统计其次数

//统计字符串中出现次数最多的字符,并统计其次数
        let str6 = 'abcdoeoderodop';
        let temp2 = {};
        for (let i = 0; i < str6.length; i++) {
            let char = str6.charAt(i); //char是字符串中的每一个字符
            if (temp2[char]) { //该属性值有没有出现 
                temp2[char]++; //出现一次 记录一次
            } else {
                temp2[char] = 1; //第一次出现
            }
        }
        console.log(temp2);
        //遍历对象找最大值
        let max = 0;
        let ch = '';
        for (const key in temp2) {
            if (temp2[key] > max) {
                max = temp2[key];
                ch = key;
            }
        }
        console.log(`${ch}出现的次数最多,有${max}次`);

字符串操作方法(重点)

字符串操作方法

concat(str1,str2...)等效于 + ,+更常用

 let str7 = 'hello';
console.log(str7.concat(' world'));

substr('截取的起始位置','截取几个字符');

let str8 = '你好!warm';
console.log(str8.substr(3, 4));

替换字符串 replace('被替换的字符串','替换为的字符')

 let str9 = 'warmws';
 console.log(str9.replace('w', 'W')); //它只会替换第一个字符
//全部替换
let test = 'abaabaaba';
while (test.indexOf('a') !== -1) {
  test = test.replace('o', '*');
}
console.log(test);

字符串转数组 split('分隔符')

let str10 = 'red,pink,blue';
console.log(str10.split(','));
let str11 = 'red&pink&blue';
console.log(str10.split('&'));

toUpperCase()//转换大写

toLowerCase()//转换小写

简单数据类型与复杂数据类型

简单数据类型也叫做基本数据类型或者值类型,复杂数据类型也叫做引用类型

  1. 值类型:简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型:string,number,Boolean,undefined,null.

    注:null返回的是一个空的对象,以后要是有个变量打算存储为对象,但是暂时没想好放什么,可以先赋值为null

  2. 引用数据类型:复杂数据类型,在存储是变量中存储的仅仅是地址(引用),因此被叫做引用数据类型,通过new关键字创建的对象(系统对象,自定义对象),如Object,Array,Date等。

堆和栈

注意:js中没有堆和栈的概念,这里只是帮助理解

值类型存在堆中,引用数据类型存在栈中。

  1. 简单数据类型 是存放再堆中,里面直接开辟一个空间存放的是值

  2. 复杂数据类型 首先在栈里面存放地址 用16进制表示 然后这个地址指向堆里面的数据

简单类型传参

传参不会改变原先外面定义的值,相互无影响

引用数据类型

传的是地址为参,会改变外面原先地址中对应的值,相互有影响

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值