前端入门一之JS对象、字符串对象、数组对象、Data()对象等

前言

• JS是前端三件套之一，也是核心，本人将会更新JS基础、JS对象、DOM、BOM、ES6等知识点，这篇是JS常用的内置对象;
• 这篇文章是本人大一学习前端的笔记；
• 欢迎点赞 + 收藏 + 关注，本人将会持续更新。

目录总览

1、对象

• 对象简单来说，是指一个具体事物，也是一个数据类型（object）
• 对象由属性和方法组成
  • 属性：事务的特征，常用名词（变量）
  • 方法：事物的行为，常用动词（封装函数）

1.1、创建对象（object）

• 字面量创建对象
• new Object创建对象
• 构造函数

利用字面量创建对象

• 键：相当于属性名
• 值：相当于属性值，可以说任意类型（数字类型、字符串类型、布尔类型、函数类型等）

var star = {
    name: 'pink',
    age: 18,
    sex: 'man'
    sayHi: function() {
        alert("hello world");
    }
}

对象的调用

• 对象.属性名
• 对象[‘属性名’]
• 方法的调用：对象.方法名()

变量、属性、函数、方法总结

• 变量：单独声明赋值，单独存在
• 属性：对象里面的变量称为属性，不需要声明
• 函数：单独存在，通过==“函数名（）”==的方式应用
• 方法：运用：对象.方法名（）

利用new Object创建对象

• var 对象名 = new Object( );
• 使用：对象.属性=值；

var obj = new Object();
obj.name = 'mark';
obj.age = 18;
obj.skill = function() {
    console.log("独创太极拳");
    //console.log(obj['sex']);
    //console.log(obj.skill());
}

利用构建函数方法创建对象

注意两点：

• 构造函数用于创建某一类对象，其首字母要大写
• 构建函数要和new一起使用才有意义

//构建函数语法
function 构建函数名() {
    this.属性 = 值;
    this.方法 = function() {           //注意方法的写法
        
    }
}
new 构造函数名();
//两个构造函数名一样
//new 构造函数名()，返回一个对象

//1、构造函数不需要写return
//2.必须加this
function Star(name,age,sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.sing = function(sang) {
        
    }
}
var ldh = new Star('ldh',18,'man');
ldh.sing(sang);

关键字new做的四件事情

1. 在内存中创建一个新的空对象。
2. 让this指向这个新的对象
3. 指向构造函数里面的代码，给这个新对象添加属性方法
4. 返回这个新对象（所以构造函数里面不需要return）

1.2、遍历对象的属性

• for……in

for(var k in obj) {
    console.log(k);       //这里的k是属性名
    console.log(obj[k]);  //这里的obj[k]是属性值
}

2、内置都对象

• js中对象分三种：自定义对象、内置对象、浏览器对象
• js提供了多个内置对象：Math、Data、Array、String等

2.1、查文档

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

Math对象

• 注意：Math不是一个构造函数，所以不需要new

Math.PI						//圆周率
Math.floor()				//向下取整
Math.ceil()					//向上取整
Math.round()				//四舍五入，就近取整，   但是要注意                     -3.5     看结果是    -3(往大的取)
Math.abs()					//绝对值
Math.max()/Math.min() 		//求最大值和最小值

注意：上面的方法必须代括号

console.log(Math.PI);
console.log(Math.max(1,5,3));

练习：封装一个属于自己的数学对象（有PI 、最大值、最小值）：

var myMath = {
    PI: 2.131592653,
    max: function() {
        var max = arguments[0];
        for(var i = 1;i < arfuments.length; i++) {
            if(argumets[i] > max) {
                max = arguments[i];
            }
        }
    }
    return max;
},
    min: function() {
        var min = arguments[0];
        for(var i = 1;i < arfuments.length; i++) {
            if(argumets[i] < min) {
                min = arguments[i];
            }
        }
        return min;
    }
}

Math取整方法

注意点：

• Math.round(), 如果是 .5 时，是往大了取

Math取绝对值

• Math.abs( ) 绝对值
  • 会有一个隐形转换，把字符串型转化为数字型

随机数方法random()

• 取值范围： [0,1)

//等到两个数之间的随机数，并且包含这两个整数
function getRandom(min,max) {
    return Math.floor(Math.randon()*(max - min +1) + min);
}
console.log(getRandom(10,20));

练习：随机点名

var arr = ['张三' , '李四' , '王五'];
console.log(arr[getRandom(0,arr.length-1)]);

4、Date()日期对象

• 注意：Data和Math对象不一样，他是一个构造函数，需要new后才能使用
• Data 实例主要来处理日期和时间

4.1、Data()方法的使用

4.1.1、获取当前时间

var now = new Date();        //这一步必须写
console.log(now);

• 如果Data( )不写参数，就返回当前时间
• 如果Data( )里面写参数，就返回括号里面输入的时间

//常用写法，数字型 2019，10，1   字符串型 '2023-1-19 14：17：50'
//如果Data() 里面写参数，就返回括号里面输入的时间
var data = new Date('2023-1-19')     //这一步必须写
console.log(date);

4.2、日期格式化

目的：获取 2019-8-8 8:8:8 格式的日期

//首先
var data = new Date();
/*
方法名	说明	代码
getFullYear()	获取当年				
getMonth()	获取当月(0-11)			
getDate()	获取当天日期					
getDay()	获取星期几(周日0到周六6)		
getHours()	获取当前小时	
getMinutes()	获取当前小时	
getSeconds()	获取当前秒钟
*/
//data.getFullYear();

//写一个2023年1月19日
function getDate() {
    var data = new Date();
    var year = data.getFullYear();
    var month = data.getMonth();
    var Data = data.getData();
    return year + '年' + month + '月' + data + '日';
}

//写一个返回时分秒的函数 格式 08：08：08
function getTime() {
    var data = new Date();
    var h = data.getHours();
    h < 10 ? '0' + h : h;
    var m = data.getMinutes();
    m < 10 ? '0' + m : m;
    var s = data.getSeconds();
    s < 10 ? '0' + s : s;
    return h + ':' + m + ':' + s;
}

4.3、获取日期的总的毫秒形式

• data.valudeOf( ) : 得到现在距离1970.1.1总的毫秒数
• data.getTime( ): 得到现在距离1970.1.1总的毫秒数

var data = new Date();

//1.
console.log(date.valudeOf());
console.log(date.getTime());

//2.
var date1 = +new Date();   //+new Data() 返回的就是总的毫秒数
console.log(date1);

//3.H5
console.log(Date.now());

制作一个倒计时函数

function countDown(time) {
    var nowTime = +new Date();
    var inputTime = +new Date(time);
    var times = (inputTime - nowTime) / 1000;  //times是剩余时间的秒数
    
    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 + '秒'；
}

数组对象

5.1、数组对象的创建

创建数组对象的两种方式

• 字面量创建
• new Array()

5.2、检测是否为数组

• instanceof 运算符，可以判断一个对象是否属于某种类型
• Array.isArray( ) 用于判断一个对象是否为数组，是H5提供的方法

var arr = [1,2];
var obj = {};
console.log(arr instanceof Array);
console.log(Array.isArray(obj));

5.3、添加删除数组元素

//只有头插和头删，尾删和尾插
/*
push(参数1…)	末尾添加一个或多个元素，注意修改原数组	；并返回新的长度
pop()	删除数组最后一个元素	；返回它删除的元素的值
unshift(参数1…)	向数组的开头添加一个或更多元素，注意修改原数组	；并返回新的长度
shift()	删除数组的第一个元素，数组长度减1，无参数，修改原数组	；并返回第一个元素
*/

//1.push
var arr = [1,2,3];
arr.push(4);
//返回的是新数组

//2.unshift
arr.unshift('red');

//3.pop
arr.pop();  //不加参数

//4.shift
arr.shift();  //不加参数

筛选数组

//有一个包含工资的数组[1500，2000，1200，2100，1800]，要求把数组中超过2000删除，剩下的放在新数组里面
var arr = [1500，2000，1200，2100，1800];
var newArray = [];
for(var i = 0;i < arr.length;i++){
    if(arr[i] < 2000) {
        newArray.push(arr[i]);  //这样就避免了定义数组长度
    }
}

5.4、数组排序

/*
reverse()	颠倒数组中元素的顺序，无参数	；该方法会改变原来的数组，返回新数组
sort()	对数组的元素进行排序；	该方法会改变原来的数组，返回新数组
*/

//1.翻转数组
var arr = ['pink','red','blue'];
arr.reverse();  //一个数组的行为

//2.数组排序  要注意双位数
var arr1 = [1,5,3,6];
arr1.sort(function(a,b)		//记忆：返回值为复数
         {
    return b - a;   //降序排序
    return a - b;   //升序排序
})

5.5、数组索引

/*
indexOf()	数组中查找给定元素的第一个索引	; 如果存在返回索引号，如果不存在，则返回-1
lastIndexOf()	在数组的最后一个索引，从后向前索引 ;	如果存在返回索引号，如果不存在，则返回-1
*/

var arr = ['red','green','blue','pink'];
console.log(arr.indexOf('blue');  //返回为：2

数组去重

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;
}

5.6、数组转化为字符串

/*
toString()	把数组转换成字符串，逗号分隔每一项  ;返回一个字符串
join(‘分隔符’)	方法用于把数组中的所有元素转换为一个字符串 ; 返回一个字符串
*/

//1.toString()
var arr = [1,2,3];
console.log(arr.toString());

//2.join('分隔离')
var arr1 = ['green','blue','red'];
console.log(arr1.join());  //默认用逗号
console.log(arr1.join('-')); //green-blue-red
console.log(arr1.join('&')); //green&blue&red

5.7、其他方法

/*
concat()	连接两个或多个数组 不影响原数组 ; 返回一个新的数组(一般用’+‘)
slice()	  数组截取slice(begin,end)	返回被截取项目的新数组
splice()	数组删除splice(第几个开始要删除的个数)	; 返回被删除项目的新数组，这个会影响原数组
*/

6、字符串对象

6.1、基本包装类型

• js中特殊引用类型：String、Number、Boolean

• 基本包装类型：

  把简单的类型包装成复杂的数据类型，这样就有了浮渣数据类型的属性和方法

var str = 'andy';
console.log(str.length);

6.2、字符串的不可变

var a = 1;
a = 10;

• 字符串的不可变性：指的是里面的值不可变，虽然看上去改变了内容，但是地址改变了，内存新开辟一个空间。

6.3、根据字符返回位置

字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串

/*
indexOf(‘要查找的字符’，开始的位置)	           返回指定内容在元字符串中的位置，如果找不到就返回-1，开始的位置是index索引号
lastIndexOf()	        从后往前找，只找第一个匹配的
*/

var str = '改革春风吹满地，春天来了'；
console,log(str.indexOf('春'));
console,log(str.indexOf('春',3));  //索引号是从3号开始的

6.3.1、返回字符位置（案例）

//查找字符串 “abcoefoxyozzopp” 中所有o出现的位置以及次数

/*
核心算法：先查找第一个o出现的位置
然后 只要 indexOf返回的结果不是 -1 就继续往后查找
因为 indexOf 只能查找到第一个，所以后面的查找，一定是当前索引加1，从而继续查找
*/

var str = 'abcoefoxyozzopp';
var index = str.indexOf('o');
var num = 0;
for(int i = 0;i < str.length;i++){
    console.log(index);
    num++;
    index = str.indexOf('o',index + 1);   //一定加一
}

6.4、根据位置返回字符

/*
charAt(index)	返回指定位置的字符(index字符串的索引号)	       使用：str.charAt(0)
charCodeAt(index)	获取指定位置处字符的ASCII码(index索引号)	使用：str.charCodeAt(0)
str[index]	获取指定位置处字符	HTML,IE8+支持和charAt()等效
*/

判断一个字符串 “abcoefoxyozzopp” 中出现次数最多的字符，并统计其次数：

/*
核心算法：利用 charAt() 遍历这个字符串
把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就 +1
遍历对象，得到最大值和该字符
<script>
    // 有一个对象 来判断是否有该属性 对象['属性名']
    var o = {
        age: 18
    }
    if (o['sex']) {
        console.log('里面有该属性');

    } else {
        console.log('没有该属性');

    }

    //  判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数。
    // o.a = 1
    // o.b = 1
    // o.c = 1
    // o.o = 4
    // 核心算法：利用 charAt() 遍历这个字符串
    // 把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就 +1
    // 遍历对象，得到最大值和该字符
    var str = 'abcoefoxyozzopp';
    var o = {};
    for (var i = 0; i < str.length; i++) {
        var chars = str.charAt(i); // chars 是 字符串的每一个字符
        if (o[chars]) { // o[chars] 得到的是属性值
            o[chars]++;
        } else {
            o[chars] = 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);
    console.log('最多的字符是' + ch);
</script>

var str = 'abcoefoxyozzopp';
var o = {};
for(var i = 0;i < str.length;i++){
    var char = str.charAt(i);
    if(o[char]){
        o[char]++;
    }else {
        o[char] = 1;   //主要这个写法，这是一个重点
    }
}

//遍历对象
var max = 0;
var ch = '';
for(var k in o){
    if(o[k] > max){
        max = o[k]
        ch = k;      //  k   是属性名字
    }
}

6.5、字符串操作方法

/*
concat(str1,str2,str3…)	  concat() 方法用于连接两个或对各字符串。拼接字符串🔥
substr(start,length)	从 start 位置开始(索引号), length 取的个数。
slice(start,end)	从 start 位置开始，截取到 end 位置 ，end 取不到 (两个都是索引号)
substring(start,end)	从 start 位置开始，截取到 end 位置 ，end 取不到 (基本和 slice 相同，但是不接受负)

*/

var str1 = '改革春风吹';
console.log(str1.substr(2,2));

6.6、replace()方法 + 案例

replace()方法用于在字符串中用一些字符替换另一些字符

var str = 'andyandy';
console.log(str.replace('a','b'));

//替换所有
while(str.indexOf('o') !== -1) {
    str = str.replace('o','*');
}

6.7、split()方法

**split()**方法用于切分字符串，它可以将字符串切分为数组

var str = 'a,b,c';
console.log(str.split(','));
//返回的是一个数组['a','b','c']

split(‘分隔符’)

6.8、大小写转换

• toUpperCase() 转换大写
• toLowerCase() 转换小写

简单类型于复杂类型

• 值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型
  string ，number，boolean，undefined，null
• 引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型
  通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等