[前端学习笔记]JavaScript对象_var obj = { age: function () { return console.log(-CSDN博客

本文链接：https://blog.csdn.net/sillyxue/article/details/120685322

文章目录

一、JS对象

1. 创建对象（三种方式）

// 1）利用对象字面量{}
        // var obj = {}; 空对象 
        var obj = {
            // 属性或方法"键值对"形式，用"逗号"隔开
            uname: '张三疯',
            age: 18,
            sex: '男',
            // 方法冒号后面跟"匿名函数"
            sayHi: function () {
                console.log('hi~');
            }
        }
// 2）利用new Object
        var obj = new Object(); // 创建了一个空的对象
        obj.uname = '张三疯';
        obj.age = 18;
        obj.sex = '男';
        obj.sayHi = function () {
            console.log('hi~');
        }
// 3）利用构造函数【常用】
        // 把对象里面一些相同的属性和方法抽象出来封装到函数里面。【相当于类】
        // 构造函数名字首字母要大写
        function Star(uname, age, sex) {
            // this 指向new创建的空对象
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function (sang) {
                console.log(sang);
            }
        }
        // 利用构造函数创建对象的过程 也称为“对象的实例化”
        var ldh = new Star('刘德华', 18, '男');
        var zxy = new Star('张学友', 19, '男');
        // 调用
        console.log(ldh.name);
        console.log(zxy['sex']);
        ldh.sing('冰雨');

2. 变量与属性、函数与方法的区分

1）变量与属性

// 相同点：都是用来存储数据
        // 变量 -- 单独声明并赋值，调用为直接写变量名  
        var num = 10;
        var obj = {
        // 属性 -- 在对象里面的不需要声明，调用为对象.属性
            age: 18,
            fn: function () {
            }
        }

2）函数与方法

// 相同点：都是实现某种功能
        // 函数 -- 单独声明并调用，调用为函数名()
        // 方法 -- 在对象里面，调用为对象.方法()
        function fn() {
        }
        console.log(obj.age);

3. 遍历对象

var obj = {
            name: '亚瑟',
            age: 18,
            sex: '男',
            fn: function () { }
        }
		// key value的形式
        for (var k in obj) {
            console.log(k); // 属性名
            console.log(obj[k]); // 属性值
        }

4. 内置对象

内置对象有Array数组、Math数学、Date日期、RegExp正则表达式、String 字符串。具体的方法可以查询MDN文档。下面列举一些常用方法：

1）Math

// Math.max(1, 99, 3) 最大值99
// Math.floor(2.3) 向下取整2
// Math.ceil(2.3)  向上取整3
// Math.round(2.3) 四舍五入2
// Math.random() 在[0,1)的随机小数
// Math.abs(-5) 绝对值5
// Math.sqrt(9) 开方3
// Math.pow(2,4) 乘方16
 
// 特别的
console.log(Math.min(1, 99, '老师')); // NaN
console.log(Math.min(1, 99, '0')); // 0 隐式转换
console.log(Math.max()); // -Infinity  
console.log(Math.min()); // Infinity 
console.log(Math.abs('-1')); // 1 隐式转换
console.log(Math.abs('老师')); // NaN   

// 随机生成一个1~10的整数
function getRandom(min, max) {
       return Math.floor(Math.random() * (max - min + 1)) + min;
}
var random = getRandom(1, 10);

2）Date

// Date是一个构造函数 必须使用new来创建
        var date = new Date();
// 没有参数则返回当前系统时间
        console.log(date);
// 有参数返回参数时间
        var date2 = new Date('2019-10-1 8:8:8');
        console.log(date2); //Tue Oct 01 2019 08:08:08
// 常用方法
// d1.getFullYear() 年
// d1.getMonth() 月-1（月从0开始）
// d1.getDate() 日
// d1.getDay() 周几（周日是0）
// d1.getHours() 时
// d1.getMinutes() 分
// d1.getSeconds() 秒
// d1.getTime() 时间戳,指格林威治时间1970年1月1日0时0分0秒起至今的总毫秒数

// 格式化日期 xx年xx月xx日 星期xx
		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]);
// 格式化日期 时分秒格式 08:08:08
        var date = new Date();
        console.log(date.getHours()); // 时
        console.log(date.getMinutes()); // 分
        console.log(date.getSeconds()); // 秒
        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());
// 时间戳：距离1970年1月1号过了多少毫秒数（4种方式）
		// 1.常用 +
        var date1 = +new Date();
        console.log(date1);
        // 2.valueOf
        console.log(date.valueOf());
        // 3.getTime
        console.log(date.getTime());
        // 4.H5新增now
        console.log(Date.now());

3）Array

// 1.创建数组
		var arr = [1, 2, 3];
		var arr1 = new Array();  // 空数组
		var arr2 = new Array(2);  // 表示数组的长度为2  里面有2个空的数组元素 
		var arr3 = new Array(2, 3, 4); // 等价于[2,3,4]
// 2.判断是否为数组
// 1) instanceof运算符
        var arr = [];
        var obj = {};
        console.log(arr instanceof Array); // true
        console.log(obj instanceof Array); // false
// 2) Array.isArray(参数)
        // H5新增的方法  IE9以上版本支持
        // 优先于instanceof，能检测iframes
        console.log(Array.isArray(arr)); // true
        console.log(Array.isArray(obj)); // false
// 3.添加数组元素，原数组会发生变化
        // 1）push 数组末尾 添加一个或多个元素
        var arr = [1, 2, 3];
        console.log(arr.push(4, 'pink')); 
        // 2）unshift 数组开头 添加一个或多个元素
        console.log(arr.unshift('red', 'purple'));
// 4.删除数组元素，原数组会发生变化
        // 1）pop 数组末尾 删除最后一个元素  
        console.log(arr.pop()); 
        // 2）shift 数组开头 删除第一个元素  
        console.log(arr.shift());
// 5.数组排序
        // 1）reverse() 翻转数组
        var arr = ['pink', 'red', 'blue'];
        arr.reverse();
        // 2）sort() 转换为字符串，按照“字符编码”的顺序进行排序
        var arr1 = [13, 4, 77, 1, 7];
        // 想按照其他标准进行排序，需要提供“匿名比较函数”
        // 当返回值为正数时，交换传入两形参在数组中位置（相当于冒泡排序）
        arr1.sort(function (a, b) {
            //  return a - b; // b<a时交换顺序，结果为升序
            return b - a; // b>a时交换顺序，结果为降序
        });
// 6.获取索引号 找不到元素，则返回-1
        // 1）indexOf(数组元素) 从前向后找
        var arr = ['red', 'green', 'blue', 'pink', 'blue'];
        console.log(arr.indexOf('blue')); // 2
        // 2）lastIndexOf(数组元素) 从后向前找
        var arr = ['red', 'green', 'blue', 'pink', 'blue'];
        console.log(arr.lastIndexOf('blue')); // 4
// 7.数组转换为字符串
        // 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
// 8.合并两个/多个数组 
        // concat() 可以在括号直接写数组元素 注意原数组不变!!
        var num1 = [1, 2, 3],
            num2 = [4],
            num3 = [7, 8, 9];
        num2 = num2.concat(5, 6); // [4,5,6]
        var num4 = num1.concat(num2, num3);
        console.log(num4); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
// 9.数组截取
        // slice【begin,end) 返回被截取的新数组 注意原数组不变!!
        var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
        console.log(animals.slice(2));
        // ["camel", "duck", "elephant"]
        console.log(animals.slice(1, 5));
        // ["bison", "camel", "duck", "elephant"]
        console.log(animals.slice(-2));
        // ["duck", "elephant"]
        console.log(animals.slice(2, -1));
        // ["camel", "duck"]
// 10.修改数组
        // splice(begin,count) 从第几个开始，删除几个 注意原数组改变！！
        var months = ['Jan', 'March', 'April', 'June'];
        months.splice(1, 0, 'Feb'); // 在索引1处删除0个元素，插入'Feb'
        console.log(months);// ["Jan", "Feb", "March", "April", "June"]
        months.splice(4, 1, 'May'); // 在索引4处删除1个元素，插入'May'
        console.log(months);// ["Jan", "Feb", "March", "April", "May"]

4）String

// 简单数据类型 字符串不可变的常量！
        var str = 'andy';
// 把简单数据类型包装为复杂数据类型 就有了属性和方法
        var temp = new String('andy');
// 1. 已知字符，返回位置  
        // 1)indexOf('要查找的字符', [起始的位置])
        var str = '改革春风吹满地，春天来了';
        console.log(str.indexOf('春')); // 2
        console.log(str.indexOf('春', 3)); // 8
        // 2)lastIndexOf() 从后往前找
        // 查找字符串中所有o出现的位置以及次数
        var str = "oabcoefoxyozzopp";
        var index = str.indexOf('o');
        var num = 0;
        while (index !== -1) { // -1表示后面找不到了
            console.log(index);
            num++;
            index = str.indexOf('o', index + 1); // 起始位置往后
        }
        console.log('o出现的次数是: ' + num);
// 2. 已知位置，返回字符
        // 1）charAt(index)
        var str = 'andy';
        console.log(str.charAt(3)); // y
        // 2）charCodeAt(index)  返回相字符ASCII值 
        // 目的：判断用户按下了哪个键 
        console.log(str.charCodeAt(0)); // 97
        // 3）str[index]  H5新增的
        console.log(str[0]); // a
// 3. 拼接字符串（可以直接用+）
        // concat('字符串1','字符串2'....)
        var str = 'andy';
        console.log(str.concat('red'));
// 4. 截取字符串
        // substr('截取的起始位置', '截取几个字符');
        var str1 = '改革春风吹满地';
        console.log(str1.substr(2, 2)); // 春风
        // slice【begin,end)
        console.log(str1.slice(2, 3)); // 春
        console.log(str1.slice(2)); // 春风吹满地
// 5. 替换字符 
        // replace('被替换的字符', '替换为的字符')  只会替换第一个字符
        var str = 'andyandy';
        console.log(str.replace('a', 'b')); // bndyandy
        // 把所有的 o 替换为 *
        var str1 = 'abcoefoxyozzopp';
        while (str1.indexOf('o') !== -1) {
            // 还含有 o 就一直替换
            str1 = str1.replace('o', '*');
        }
// 6. 字符串转换为数组 
        // split('分隔符') 通过分隔符把字符串分割为数组 
        // 与之相反的是join('分隔符') 数组转换为字符串+分隔符
        var str2 = 'red, pink, blue';
        console.log(str2.split(','));
        var str3 = 'red&pink&blue';
        console.log(str3.split('&'));
// 7. 大写小写
        var str1 = 'abcAzBp';
        console.log(str1.toUpperCase()); // 大写
        console.log(str1.toLowerCase()); // 小写

5）RegExp
正则表达式可以匹配字符串，很多语言都支持。可以进行字符串的截取、替换、验证。
常用正则表达式

/* 语法：
            ^   开头
            $   结尾
            []  一位的范围(注意：里面^表示取反)
            {}  位数
            ()  分组
            
            *   >=0,匹配0位/多位，同{0，}
            +   >=1,匹配1位/多位，同{1，}
            ?   0||1,匹配0位/1位，同{0，1}
            .   匹配所有,除了空字符串
            
            \   转义
            \d  数字
            \w  数字、字母、下划线
            \s  空格、换行
*/
// 创建正则表达式
        var reg = new RegExp("123"); //不常用       
        var reg1 = /123/; //常用
// 字符串匹配
// 1.reg.exec()  返回匹配的内容
        var reg2 = /^[a-z]{3}$/; //a-z三位
        var str2 = "abc";
        console.log(reg2.exec(str2)); // abc
 // 2.reg.test()  返回布尔值
        var reg3 = /^\w{5,8}$/; //数字字母下划线5-8位
        var str3 = "Abc123_";
        console.log(reg3.test(str3)); // true
// 利用转义匹配+，加了转义字符就不是{1，}的意思了
        var reg6 = /^1\+$/ //1+
        var str6 = "1+";
        console.log(reg6.test(str6)); // true

// 例1. 验证邮箱格式
        var str11 = "ueeng@163.com"
        var reg11 = /^\w{5,12}@163\.com$/
        if (reg11.test(str11)) {
            console.log("邮箱验证成功");
        } else {
            console.log("邮箱验证失败");
        }
// 例2. 截取 字符串“2020-01-01”的数字部分
        var str12 = "2020-01-01";
        // 通过分组的方式
        var reg12 = /^(\d{4})-(\d{2})-(\d{2})$/;
        var result = reg12.exec(str12);
        console.log(result[1]);
        console.log(result[2]);
        console.log(result[3]);
//例3. 替换 字符串中的所有字母为1
        var str13 = "123a456b789c";
        // 原字符串是不变的！因为是常量！
        // g 实现全局匹配！
        var reg13 = /[a-zA-Z]/g
        var result = str13.replace(reg13, "1");//把所有字母替换成1
        console.log(result); // 123145617891

二、数据类型分类

基本数据类型（值类型）
·变量存储的是值本身，例如string、number、boolean、undefined、null。
·存放在栈中！栈里存放的是值。
复杂数据类型（引用类型）
·变量存储的是地址，通过new关键字创建的对象(系统/自定义对象)，例如Object、Array、Date等。
·存放在堆里！首先在栈里面存放地址（十六进制表示）然后这个地址指向堆里面的数据。

// 特别的：简单数据类型 null  
        // 返回的是一个空对象object 
        // 如果有个变量打算存储为对象，暂时没想好放啥，就给null
        var timer = null;
        console.log(typeof timer); // object
        
// 简单数据类型传参（传值）
        function fn(a) {
            a++;
            console.log(a); // 11
        }
        var x = 10;
        fn(x);
        console.log(x); // 10
// 复杂数据类型传参（传址）
        function Person(name) {
            this.name = name;
        }
		function f1(x) { // x = p
            console.log(x.name); // 2. 刘德华   
            x.name = "张学友";
            console.log(x.name); // 3. 张学友
        }
        var p = new Person("刘德华");
        console.log(p.name); // 1. 刘德华 
        f1(p);
        console.log(p.name); // 4. 张学友