【ECMAScript笔记四】自定义对象(创建,遍历)、内置对象(Math、Data、Array、String)、数据类型比较

文章目录

    • 10 自定义对象
      • 10.1 创建对象方式
        • 10.1.1 字面量
        • 10.1.2 new object
        • 10.1.3 构造函数
      • 10.2 遍历对象
    • 11 内置对象
      • 11.1 `Math` 数学对象
      • 11.2 `Date` 时间对象
      • 11.3 `Array` 数组对象
      • 11.4 `String` 字符串对象
    • 12 简单数据类型和复杂数据类型

10 自定义对象

  • JavaScript中的对象分为3种:自定义对象、内置对象、浏览器对象
  • 前面两种对象是JS基础内容,属于ECMAScript;第三个浏览器对象属于我们JS独有的

概念: 一组无序的相关属性和方法的集合。所有的事物都是对象,例如:字符串,数组,数值,函数等。

组成:

  • 属性: 事物的特征,在对象中用属性表示(常用名词)
  • 方法: 事物的行为,在对象中用方法表示(常用动词)

为什么需要: 保存一个值时,可以使用变量。保存多个值时,可以使用数组,如果要保存一个人的完整信息,需要使用对象。

var arr=["张三丰","男",128,154];

使用数组表示一个人的完整信息不明确,不清楚128和154代表什么。

如果用对象表示:

person.name="张三丰";
person.sex="男";
person.age=128;
person.height=154;

10.1 创建对象方式

10.1.1 字面量

对象字面量:就是花括号{},里面包括对象的属性和方法。

var obj={
    name: "张三丰",    // 属性(键):属性值(值),
    age: 18,
    sex: "男",
    sayHello: function() {    // 方法:匿名函数
        console.log("hello");
    }
}
  • 里面的属性方法采用键值对的形式

如何调用?

  • 调用对象的属性:对象名.属性名 / 对象名['属性名']

    console.log(obj.name);   // 张三丰
    console.log(obj['age']);   // 18
    
  • 调用对象的方法 :对象名.方法名

    console.log(obj.sayHello());   // hello
    

注意点:

  1. 变量和属性的区别:

变量 :单独声明并赋值,使用的时候直接写变量名,单独存在

属性 :在对象里面不需要声明,使用的时候必须是对象.属性,对象中存在

  1. 函数和方法的区别:

函数:单独声明,调用使用函数名(),单独存在

方法:在对象里面,调用使用对象.方法(),对象中存在

10.1.2 new object
var obj2 = new Object();  // 创建一个空对象
obj2.name = "张三丰";
obj2.age = 18;
obj2.sex = "男";
obj2.sayHello = function() {
    console.log("hello");
}
10.1.3 构造函数

前面两种创建对象的方式一次只能创建一个对象,创建多个对象时需要使用构造函数。

构造函数:一种特殊的函数,主要用来初始化对象,总与new运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。

// 创建类(class),泛指
function 构造函数名()
{
    this.属性 = 值;   // this为当前对象
    this.方法 = function() {}
}

// 调用构造函数,创建对象,特指
// 通过构造函数创建对象的过程也成`对象的实例化`
new 构造函数名();

案例:

// 构造函数首字母要大写
function Star(name, age, sex) {   
    // 属性和方法前面必须要加`this`
    this.name=name;
    this.age=age;
    this.sex=sex;
    this.sing=function(sang) {
        console.log(sang);
    }
}
// 调用构造函数,必须使用`new`,不需要`return`就可以返回结果,结果是一个对象
var ldh = new Star("刘德华", 18, "男");
var zxy = new Star("张学友", 19, "男");
console.log(ldh.name);
ldh.sing('冰雨');

10.2 遍历对象

for(变量 in 对象) {
    
}
var zsf={
    name:"张三丰",
    age:18,
    sex:"男",
    sayHello:function() {
        console.log("hello");
    }
}
for(var k in zsf) {
        console.log(k);  // 输出 属性名
        console.log(obj[k])// 输出 属性值,注意这里的k是变量,不加引号
}

11 内置对象

  • 内置对象就是指JS语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法),帮助我们快速开发
  • JavaScript提供了多个内置对象:Math、Date、Array、string等

哪里查“内置对象的使用”文档:

  • MDN:https://developer.mozilla.org/zh-CN/

Mozilla开发者网络(MDN )提供了有关开放网络技术(Open Web )的信息,包括HTML、CSS、万维网、HTML5应用的API

  • W3C:https://www.w3school.com.cn/w3c/w3c_china.asp

11.1 Math 数学对象

Math是一个内置对象,它具有数学常数和函数的属性和方法。不是一个函数对象。

console.log(Math.PI);   // 圆周率

console.log(Math.max(1, 99, 3));   // 99
console.log(Math.max(1, 'pink'));    // NaN
console.log(Math.max());    // -Infinity

console.log(Math.abs(-1));    // 绝对值 1
console.log(Math.abs('-1'));    // 1 (隐式转换)
console.log(Math.abs('pink'));    // NaN

console.log(Math.floor(1.1));    // 向下取整 1
console.log(Math.floor(1.9));    // 1

console.log(Math.ceil(1.1));    // 向上取整 2
console.log(Math.ceil(1.9));    // 2

console.log(Math.round(1.1));    // 四舍五入 1
console.log(Math.round(1.5));    // 2
console.log(Math.round(-1.1));    // -1
console.log(Math.round(-1.5));    // -1(.5特殊,永远往大取)

console.log(Math.random());     // 随机数 0.2546988455547, 会返回一个随机数,范围为[0,1)
// 取两个数之间`[a, b]`的随机整数:
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandomInt(1, 10));

// 1、随机点名
var arr =['张三', '张三丰', '张三疯子''李四','李思思];
console.log(arr[getRandomInt(0, 4)]);
console.log(arr[getRandomInt(0, arr.length - 1)]);

// 2、猜数字游戏
var random = getRandomInt(1, 10);
while (true) {      // 死循环,记得设置退出
    var num = prompt('你来猜? 输入1~10之间的一个数字');
    if (num > random) {
        alert('你猜大了');
    } else if (num < random) 
    {
        alert('你猜小了');
    } else {
        alert('你好棒,猜对了');
        break;      // 猜中了,退出整个循环结束程序
    }
}

11.2 Date 时间对象

Date():日期对象,返回年 月 日 时 分 秒,是一个构造函数,必须使用new来调用。

var arr = new Array();   //创建一个数组对象
var obj = new object();   //创建了一个对象实例

// 1. 使用Date  如果不输入参数 则返回系统的当前时间
var date = new Date();
console.log(date);  // Thu Dec 14 2023 11:58:00 GMT+0800 (中国标准时间)


// 2. 参数常用写法  
// ① 数字型  2019, 10, 01 
var date1 = new Date(2019, 10, 1);
console.log(date1);    // Fri Nov 01 2019 00:00:00 GMT+0800 (中国标准时间)  返回的是 11月 不是 10月 
// ② 字符串型 '2019-10-1 8:8:8'
var date2 = new Date('2019-10-1 8:8:8');
console.log(date2);   // Tue Oct 01 2019 08:08:08 GMT+0800 (中国标准时间)
  • 日期格式化

【ECMAScript笔记四】自定义对象(创建,遍历)、内置对象(Math、Data、Array、String)、数据类型比较_第1张图片

// 年 月 日

var date = new Date();
console.log(date.getFullYear());   // 当前年份 2023
console.log(date.getMonth() + 1);   // 月份 12 ,正常返回的月份要小1个月,所以要月份+1
console.log(date.getDate());   // 几号 14
console.log(date.getDay());   // 周几 4 ,周一返回的是 1 周六返回的是 6 ,周日返回 0(老外认为周日是第一天)

// 我们写一个 “今天是:2023年12月14日 星期四”
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
console.log('今天是:' + year + '年' + month + '月' + dates + '日 ' + arr[day]);
// 时 分 秒

var date = new Date();
console.log(date.getHours());   // 时 12
console.log(date.getMinutes());   // 分  59
console.log(date.getSeconds());   // 秒  43

// 要求封装一个函数,返回当前的时分秒 格式 08:08:08
function getTimer() {
    var time = new Date();
    var h = time.getHours();
    h = h < 10 ? '0' + h : h;
    var m = time.getMinutes();
    m = m < 10 ? '0' + m : m;
    var s = time.getSeconds();
    s = s < 10 ? '0' + s : s;
    return h + ':' + m + ':' + s;
}
console.log(getTimer());    // 12:59:43
// 总的毫秒数(时间戳):距离1970年1月1号过了多少毫秒数

// 方法1. 通过 valueOf()  getTime()
var date = new Date();
console.log(date.valueOf());  // 1702530377621
console.log(date.getTime());  // 1702530377621

// 方法2. 简单最常用的写法
var date1 = +new Date();  // +new Date() 
console.log(date1);   // 1702530377621

// 方法3. H5 新增方法
console.log(Date.now());   // 1702530377621
// 倒计时效果

function countDown(time) {   // time 不传参就是当前时间
    var nowTime = +new Date();    // 当前时间总的毫秒数
    var inputTime = +new Date(time);   // 截止日期的总的毫秒数
    var times = (inputTime - nowTime) / 1000;   // 中间总秒数 
    var d = parseInt(times / 60 / 60 / 24);   // 天
    d = d < 10 ? '0' + d : d;
    var h = parseInt(times / 60 / 60 % 24);   // 时
    h = h < 10 ? '0' + h : h;
    var m = parseInt(times / 60 % 60);   // 分
    m = m < 10 ? '0' + m : m;
    var s = parseInt(times % 60);   // 秒
    s = s < 10 ? '0' + s : s;
    return d + '天' + h + '时' + m + '分' + s + '秒';
}

console.log(countDown('2023-12-30 18:00:00'));   // 16天04时34分15秒
var date = new Date();
console.log(date);   // Thu Dec 14 2023 13:25:44 GMT+0800 (中国标准时间)

11.3 Array 数组对象

  • 创建数组的两种方式
// 方法1:字面量
var arr = [1, 2, 3];  
console.log(arr[0]);   // 1

// 方法2:new Array()
// var arr1 = new Array();  // 创建了一个空的数组
// var arr1 = new Array(2);  // 表示数组的长度为2,里面有2个空的数组元素 
var arr1 = new Array(2, 3);  // 等价于[2,3],表示里面有2个数组元素是2和3
console.log(arr1);   // (2)[2,3],前面的2代表有2个元素
  • 检测是否为数组
var arr = [];
var obj = {};

// 方法1:`instanceof`运算符
console.log(arr instanceof Array);  // true
console.log(obj instanceof Array);  // false

// 方法2:`Array.isArray(参数)`,H5新增的方法 ie9以上版本支持
console.log(Array.isArray(arr));  // true
console.log(Array.isArray(obj));  // false
  • 添加 / 删除 数组元素

【ECMAScript笔记四】自定义对象(创建,遍历)、内置对象(Math、Data、Array、String)、数据类型比较_第2张图片

var arr = [1, 2, 3];

// 1. push(元素) 末尾添加元素
arr.push(4, 'pink');
console.log(arr);   // (5) [1, 2, 3, 4, 'pink']                                              
console.log(arr.push(4, 'pink'));   // 7 返回长度
console.log(arr);   // (7) [1, 2, 3, 4, 'pink', 4, 'pink']

// 2. pop() 删除最后一个元素  
console.log(arr.pop());   // pink 返回删除的元素
console.log(arr);   // (6) [1, 2, 3, 4, 'pink', 4]

// 3. unshift(元素) 开头添加元素
console.log(arr.unshift('red', 'purple'));   // 8 返回长度
console.log(arr);   // (8) ['red', 'purple', 1, 2, 3, 4, 'pink', 4]

// 4. shift() 删除第一个元素  
console.log(arr.shift());   // red 返回删除的元素
console.log(arr);   // (7) ['purple', 1, 2, 3, 4, 'pink', 4]
  • 数组排序

【ECMAScript笔记四】自定义对象(创建,遍历)、内置对象(Math、Data、Array、String)、数据类型比较_第3张图片

// 1. 翻转数组
var arr = ['pink', 'red', 'blue'];
arr.reverse();
console.log(arr);  // (3) ['blue', 'red', 'pink']

// 2. 数组排序(冒泡排序)
var arr1 = [13, 4, 77, 1, 7];
arr1.sort(function(a, b) {
    //  return a - b; 升序
    return b - a;   // 降序
});
console.log(arr1);   // (5) [77, 13, 7, 4, 1]
  • 数组索引号

image-20231214141355922

// 返回数组元素的索引号
// 方法1:indexOf(数组元素),从前面开始找
var arr = ['red', 'green', 'blue', 'pink', 'blue'];
console.log(arr.indexOf('blue'));  // 2,返回第一个满足条件的索引号 

var arr = ['red', 'green', 'pink'];
console.log(arr.indexOf('blue'));  // -1,在数组中找不到元素

// 方法2:lastIndexOf(数组元素),从后面开始找
var arr = ['red', 'green', 'blue', 'pink', 'blue'];
console.log(arr.lastIndexOf('blue'));  // 4,返回最后一个满足条件的索引号 
  • 数组去重
function unique(arr) {
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) === -1) {
            newArr.push(arr[i]);   // 新数组中没有该元素就加进去
        }
    }
    return newArr;
}
var demo = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'])
console.log(demo);  // (5) ['c', 'a', 'z', 'x', 'b']
  • 数组转化为字符串

image-20231214142731331

// 1. toString() 将我们的数组转换为字符串
var arr = [1, 2, 3];
console.log(arr.toString());  // 1,2,3 (逗号分隔)

// 2. join(分隔符) 
var arr1 = ['green', 'blue', 'pink'];
console.log(arr1.join());   // green,blue,pink(默认逗号)
console.log(arr1.join('-'));  // green-blue-pink
console.log(arr1.join('&'));  // green&blue&pink
  • 其他常用的方法

【ECMAScript笔记四】自定义对象(创建,遍历)、内置对象(Math、Data、Array、String)、数据类型比较_第4张图片

11.4 String 字符串对象

  • 基本包装类型
// 基本包装类型:把`简单数据类型`包装成了`复杂数据类型`
var str = 'andy';
console.log(str.length);   // 4
// 对象这种复杂数据类型才有`属性和方法`,这个String简单数据类型为什么会有length属性呢?

// 上两行代码的实际运行过程:
// (1) 把简单数据类型包装为复杂数据类型 
var temp = new String('andy');
// (2) 把临时变量的值 给 str
str = temp;
// (3) 销毁这个临时变量
temp = null;
  • 字符串的不可变
var str = 'andy';
console.log(str);  // andy
str = 'red';
console.log(str);  // red  (但此时andy仍然占内存)

//需要进行大量字符串拼接操作时,会对电脑的内存产生比较大的影响
var str = '';
for (var i = 1; i <= 1000000000; i++) {
    str += i;
}
console.log(str);  // 卡死
// 字符串所有的方法,都不会修改字符串本身,操作完成会返回一个新的字符串
  • 字符串索引号

【ECMAScript笔记四】自定义对象(创建,遍历)、内置对象(Math、Data、Array、String)、数据类型比较_第5张图片

// str.indexOf('要查找的字符', 查找的起始位置)
var str = '改革春风吹满地,春天来了';
console.log(str.indexOf('春'));   // 2
console.log(str.indexOf('春', 3));  //  8
// 查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数

var str = "abcoefoxyozzopp";
var index = str.indexOf('o');  // 先查找第一个o出现的位置,此时 index =3
var num = 0;
while (index !== -1) {
    console.log(index);    // 3 6 9 12
    num++;
    index = str.indexOf('o', index + 1);
}
console.log('o出现的次数是: ' + num);
  • 根据位置返回字符

【ECMAScript笔记四】自定义对象(创建,遍历)、内置对象(Math、Data、Array、String)、数据类型比较_第6张图片

// 方法1. charAt(index)  返回相应索引号的字符
var str = 'andy';
console.log(str.charAt(3));   // y
// 遍历所有的字符!
for (var i = 0; i < str.length; i++) {
    console.log(str.charAt(i));   // a n d y
}

// 方法2. charCodeAt(index)  返回相应索引号的字符ASCII值 目的:判断用户按下了那个键 
console.log(str.charCodeAt(0));   // 97

// 方法3. str[index]  H5新增的
console.log(str[0]);   // a
// 有一个对象 来判断是否有该属性 对象['属性名']
var o = {
	age: 18
}
if (o['age']) {
	console.log('里面有该属性');   // 里面有该属性
} else {
console.log('没有该属性');
}  


// 案例:判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符,并统计其次数。

// 1. 统计出现次数
var str = 'abcoefoxyozzopp';
var o = {};   // 创建一个o对象,最后得到o.a=1,o.o=4等
for (var i = 0; i < str.length; i++) {
    var chars = str.charAt(i); // 使用charAt()遍历这个字符串,chars是字符串的每一个字符
    if (o[chars]) {    // o[chars] 得到的是属性值
        o[chars]++;   // 属性值在对象中已存在,次数+1
    } else {
        o[chars] = 1;   // 属性值在对象中不存在,则赋值为1
    }
}
console.log(o);
// 2. 遍历对象,得到最大值和该字符
var max = 0;
var ch = '';
for (var k in o) {   // k是属性名,o[k]是属性值
    if (o[k] > max) {
        max = o[k];
        ch = k;
    }
}
console.log(max);   // 4
console.log('最多的字符是' + ch);   // 最多的字符是o
  • 拼接 / 截取 字符串

【ECMAScript笔记四】自定义对象(创建,遍历)、内置对象(Math、Data、Array、String)、数据类型比较_第7张图片

// 拼接 concat('字符串1','字符串2'....)
var str = 'andy';
console.log(str.concat('red'));  // andyred

var str1 = "andy";
var str2 = "asda"
concat(str1,str2);  // andyred

// 截取 substr('截取的起始位置', '截取几个字符');
var str1 = '改革春风吹满地';
console.log(str1.substr(2, 2)); // 春风 从第2个开始取2个字
  • 替换字符串
// replace('被替换的字符', '替换为的字符') 
var str = 'andyandy';
console.log(str.replace('a', 'b'));  // bndyandy,只会替换第一个字符

// 把字符串 'abcoefoxyozzopp' 里所有的 o 替换为 *
var str1 = 'abcoefoxyozzopp';
while (str1.indexOf('o') !== -1) {
    str1 = str1.replace('o', '*');
}
console.log(str1);
  • 字符转换为数组
// split('分隔符')    前面我们学过 join 把数组转换为字符串
var str2 = 'red, pink, blue';
console.log(str2.split(','));  // (3) ['red', ' pink', ' blue']
var str3 = 'red&pink&blue';
console.log(str3.split('&'));  // (3) ['red', ' pink', ' blue']
  • 转换大小写

    • toUpperCase()

    • toLowerCase()

12 简单数据类型和复杂数据类型

  1. 简单数据类型(值类型):
  • string,number,boolean,undefined,null…

  • 存储变量时,直接存储变量的值

var a = null;
console.log(typeOf a);  // null 虽然是简单数据类型,但是输出为object,是一个空对象

null 的用处:如果我们想要声明一个对象,但是不知道给对象什么东西时,我们就可以先null一下

  1. 复杂数据类型(引用类型):
    • Object,Array,Date…
    • 存储变量时,在中存储的仅仅是地址(引用)中储存的才是变量的值
    • 通过new关键词创建的对象

内存分配:操作系统将内存分为

  • 栈:用于存储简单数据类型,由操作系统自动分配释放存放函数的参数值、局部变量的值等。
  • 堆:用于存储复杂数据类型,一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收。

【ECMAScript笔记四】自定义对象(创建,遍历)、内置对象(Math、Data、Array、String)、数据类型比较_第8张图片

你可能感兴趣的:(前端之路,ecmascript,笔记,javascript,前端)