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

前言

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

文章目录

- 目录总览
- - 1、对象
  - - 1.1、创建对象（object）
    - - 利用字面量创建对象
      - 对象的调用
      - 变量、属性、函数、方法总结
      - 利用new Object创建对象
      - 利用构建函数方法创建对象
      - 关键字new做的四件事情
    - 1.2、遍历对象的属性
  - 2、内置都对象
  - - 2.1、查文档
    - Math对象
    - Math取整方法
    - Math取绝对值
    - 随机数方法random()
  - 4、Date()日期对象
  - - 4.1、Data()方法的使用
    - - 4.1.1、获取当前时间
      - 4.2、日期格式化
    - 4.3、获取日期的总的毫秒形式
  - 数组对象
  - - 5.1、数组对象的创建
    - 5.2、检测是否为数组
    - 5.3、添加删除数组元素
    - - 筛选数组
    - 5.4、数组排序
    - 5.5、数组索引
    - - 数组去重
    - 5.6、数组转化为字符串
    - 5.7、其他方法
  - 6、字符串对象
  - - 6.1、基本包装类型
    - 6.2、字符串的不可变
    - 6.3、根据字符返回位置
    - 6.3.1、返回字符位置（案例）
    - 6.4、根据位置返回字符
    - 6.5、字符串操作方法
    - 6.6、replace()方法 + 案例
    - 6.7、split()方法
    - 6.8、大小写转换
  - 简单类型于复杂类型

目录总览

在这里插入图片描述

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做的四件事情

在内存中创建一个新的空对象。
让this指向这个新的对象
指向构造函数里面的代码，给这个新对象添加属性方法
返回这个新对象（所以构造函数里面不需要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等

在这里插入图片描述