js中字符串、数组、日期等对象的介绍及常用字符串方法、数组方法-CFANZ编程社区

对象

JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。
在 JavaScript 中，对象是拥有属性和方法的数据。

属性是与对象相关的值。
方法是能够在对象上执行的动作。.关键词（）
举例：汽车就是现实生活中的对象。

汽车的属性：
car.name=Fiat 名称
car.model=500 型号
car.weight=850kg 重量
car.color=white 颜色

汽车的方法：
car.start() 启动
car.drive() 驾驶
car.brake() 刹车

Object对象

创建对象

var 对象名称=new Object();

设置对象属性

对象名称.属性名=值;

设置对象方法

对象名称.方法名=function(){ }

调用对象属性

 对象名称.属性名

调用对象方法

 对象名称.方法名()

String对象

创建String对象

var strOb = new String(“abcefg”);
var strOb = String(“abcefg”);
var strOb = “abcefg”;

属性

length (字符串长度)

方法

子字符串位置
indexOf(string,[index]) //返回子字符串abc在字符串中第一次出现的位置（从0开始计算），不存在返回-1

string ：查找的字符串的内容，必填项

index：开始查找位置，可有可无

返回值：返回值是查找到的子字符串的位置（下标），默认情况下，返回的是第一个被查找到的内容；如果被查找的内容不存在，则返回-1
lastIndexOf(string,[index]) //返回子字符串abc在字符串中最后一次出现的位置

string ：子字符串，查找的字符串的内容，必填项

index：开始查找位置，可有可无

返回值：返回值是查找到的子字符串的位置（下标），默认情况下，返回的是第一个被查找到的内容；如果被查找的内容不存在，则返回-1

// eg：查找 afgdtywgbfnjekagrn 字符串中有多少次 g 
var str = new String('afgdtywgbfnjekagrn');
var index = str.indexOf('g'); // 2
// 统计次数
var num = 0;
while(index !== -1){ // 查找
    num++;
    index = str.indexOf('g',index + 1);
}
console.log('g一共出现了'+num+'次');

// 封装函数 - 查找子字符串出现的次数
function counts(str,cStr){
    var index = str.indexOf(cStr);
    var num = 0; // 出现的次数

    while(index != -1){
        num++; // 每出现一次，次数+1
        index = str.indexOf(cStr,index+1);
    }
    return num;
}
var n = counts('38qhdahwdqjk24hjoiyowuierfy8','o');
alert('O一共出现了'+n+'次');

slice(start,end) 获取字符串的某个部分

截取是前包含，后不包含

start 表示开始位置，从0开始到正无穷

end 表示结束位置，可以为正值，也可以为负值

// 基础使用
var str = 'hello wolrd';
console.log(str.slice(3,5));
console.log(str.slice(3,-1));

// 案例：使用slice和定时器，实现内容的输出
var str = '我的名字叫张三，我今年十三岁了';
var oBox = document.querySelector('#box');
var i = 0;
function show(){
    if(i<str.length){
        oBox.innerHTML += str.slice(i,++i); // 方法一
        oBox.innerHTML += str.charAt(i++); // 方法二
        setTimeout(show,100);
    }
}
show();

截取
substr(起始位置,[截取长度]) //截取不写则代表截取到字符串未尾

起始位置：可以自定义，从0开始

截取长度：可以是一个数字，还可以不写；如果不写长度，表示截取到字符串的末尾

返回值：截取出来的字符串

substring(起始位置,[结束位置]) //不包括截取结果的右边界字符

起始位置：是一个下标值，不能为负值

结束位置：是一个下标值，不能为负值（不包括截取结果的右边界字符）

// 需求：判断图片是什么类型； 照片的格式必须是 png/jpg txt
// 获取文件名的后缀 - 后缀名开始的下标 - lastIndexOf / substr
function getSuffix(){
   var file = document.getElementById('files');
   var pic = file.value;// 图片的路径
   // var pic = '.././images/banner/one.txt'; 
   var suffix = pic.substr(pic.lastIndexOf('.')+1);
   if(suffix=='png'||suffix=='pneg'||suffix=='jpg'||suffix=='jpeg'){
       alert('图片格式正确');
   }else{
       alert('格式不正确！');
    }
}

<!-- 上传文件，判断文件格式是否正确 -->
<input type="file" id='file'>
<button id='btn'>提交</button>
<script>
    var oBtn = document.querySelector('#btn');
    var oFile = document.querySelector('#file');
    oBtn.onclick = function(){
        var res = getStr(oFile.value);
        if(res){
            alert('上传成功')
        }else{
            alert('图片格式不正确')
        }
    }
</script>

替换
replace(‘子字符串1’,‘子字符串2’) //将字符串中子字符串1替换为子字符串2

var str='My name is apple. So I like to eat apple very much!';
// 1. 普通替换
alert(str.replace('apple','banana'));
alert(str.replace(/apple/g,'banana'));

// 2. 将所有的数字替换为 空格
var str2 = '张三1李四2王五3马六';
alert(str2.replace(/[0-9]/g,' '));

// 3. 将所有的小写字母替换为空格
var str2 = '张三w李四f王五n马六';
var newStr2 = str2.replace(/[a-zA-Z]/g,' '); 
console.log(newStr2);

//  4. 将所有的字母 替换为 空格【不区分大小写】
var str2 = '张三w李四F王五n马六';
// var newStr2 = str2.replace(/[a-zA-Z]/g,' '); 
var newStr2 = str2.replace(/[a-z]/gi,' '); 
console.log(newStr2);

获取指定位置的字符

charAt(n) 默认为第一个字符

n 表示的是下标，范围是 0-正无穷，不能使用负值
获取指定字符的ASCII编码 str.charCodeAt()

var str1 = 'helloworld';
var getStr1 = str1.charCodeAt(2);
console.log(getStr1);

转换大小写
toLowerCase()
toUpperCase()

<!-- 登录验证码效果 -->
<input type="text" id='inp'><span>tR4wC</span><br/>
<button id='btn'>按钮</button>
<script>
    // 模拟验证码的规则
    // 1. 找到按钮
    var oBtn = document.querySelector('#btn');
    // 3. 获取input里面的内容
    var oInp = document.querySelector('#inp');
    // 4. 获取span里面的内容
    var oSpan = document.querySelector('span');
    // 2. 添加点击事件
    oBtn.onclick = function(){
        // 5. 将input里面的内容转为大写
        var inp = oInp.value.toUpperCase();
        // 6. 将span里面的内容转为大写
        var yanzheng = oSpan.innerText.toUpperCase();
        if(inp == yanzheng){
            console.log('验证成功');
        }else{
            console.log('验证失败');
        }
    }
</script>

将字符串分割为数组
split(分割符,[返回数组的最大长度])

分隔符：是一个字符串类型或者是正则表达式

返回值：数组
显示字符串效果
bold()加粗 italics()斜体 strike()删除 fontcolor(’#f00’) fontsize(1-7) sup() sub()

var oFont = document.getElementById('font');
var val = oFont.innerText;
oFont.innerHTML = val.big().fontcolor('red').strike().fontsize(18);
// oFont.innerHTML = val.sub()
console.log(val.sub());

设为超链接

link(url)

var oBox = document.querySelector('#box');
oBox.innerHTML = str.strike().fontsize(7).fontcolor('red').italics().link('http://www.baidu.com');

<!-- 文字搜索效果 -->
<div class="box">
        银河系的尽头，恐怕就是带货！<br/>
        最近，得到“铁娘子”董明珠力捧的接班人孟羽童，在迅速出圈走红后，没隔几天就
</div>
<input type="text" name="" id="inp">
<button id='btn'>查找</button>

<script>
    // 1. 点击查找按钮
    var oBtn = document.querySelector('#btn');
    var oInp = document.querySelector('#inp');
    var oBox = document.querySelector('.box');
    oBtn.onclick = function(){
        // 2. 获取input里面的值
        var val = oInp.value;
        console.log(val.fontcolor('red'));
        // 3. 对input里面的值添加文字变红的样式
        var newVal = val.fontcolor('red').bold();
        // 4. 直接使用替换 replace 将改变之后的文字替换上去
        // var reg = /[num]/g;
        var reg=new RegExp(val,'g');
        var newInner = oBox.innerHTML.replace(reg,newVal);
        // console.log(newInner);
        oBox.innerHTML =  newInner;
    }
</script>
// 功能不完善，需要修改

Date对象

创建Date对象

var dateObj=new Date();

方法

1. 将日期转为字符串
  toLocaleString()  
  toLocaleDateString() 
  toLocaleTimeString()

获取年、月、日、小时、分、秒

getYear() //两位的年(2000年前)或三位的年[1900]
getFullYear() //四位的年
getMonth() //月份+1
getDate() //日
getHours() //小时
getMinutes() //分钟
getSeconds() //秒
getTime() //1970 年 1 月 1 日至今的毫秒数

定时器

setInterval(函数体,时间（毫秒）,参数（传递给函数的参数）)

// 时间跳动案例
function getT(){
        // 获取时间
        var d = new Date();
        var year = d.getFullYear(); 
        var month = d.getMonth()+1;
        var day = d.getDate();
        var h = d.getHours();
        var m = d.getMinutes();
        var s = d.getSeconds();
        var ms = d.getMilliseconds();
        var oTime = document.getElementById('times');
        oTime.innerHTML = year+'-'+month+'-'+day+' '+h+':'+m+':'+s+' '+ms;
}
function stop(){
        // 清除某个定时器  clearInterval(定时器的名称);
        clearInterval(myTime);
}

怎么计算时间差

使用时间戳计算时间差

2021-9-5 10:30:20 -> 1630809020000

2020-8-9 12:30:45 -> 1596947445000

差多少年，天，小时，分钟，秒钟

时间戳参照时间： 1970/1/1 0:0:0(格林威治时间)

1970/1/1 8:0:0（北京时间）

时间戳：d.getTime(); 单位是毫秒数

    var aTime = new Date('2021-9-5 10:30:20'); // 指定的某个时间
    var bTime = new Date('2021-8-5 8:20:10');  // 
    var cha = aTime.getTime() - bTime.getTime();
    if(cha<=0){
        console.log('时间输入有误！');
    }else{
        var miao = cha / 1000; // 秒的单位
        var s = miao % 60; // 秒

        var fen = parseInt(miao / 60); // 分钟的单位
        var m = fen%60;// 分钟

        var hour = parseInt(fen / 60); // 小时的单位
        var h = hour % 24; // 小时

        var day = parseInt(hour / 24); // 天
        var d = day % 365;

        var y = parseInt(day/365); // 年

        console.log('两个时间相差：'+y+'年，'+d+'天，'+h+'小时，'+m+'分钟，'+s+'秒钟'); 
    }

案例：苏宁易购显示抢购活动

设置时间
1. 直接设置年月日，时分秒
new Date() 获取当前时间

new Date(字符串 / 时间戳 / 值); 获取指定时间

字符串：“2021-2-3 12:23:34”

时间戳：1617589820000

值： 2012,5,6,12,30,00

2. 简单设置时间

set… [用的不多]

setMonth();

setDate();

setFullYear();

案例：某人从2008-8-8号过起了三天打鱼两天筛网的日期，问：今天该打鱼还是筛网，明天呢？明年的今天呢？

Array对象

创建数组对象

var arrOb=new Array(值,…)
var arrOb=Array(值,…)
var arrOb=[值,…]
var arrOb=new Array(n);
arrOb[0]=值1;
arrOb[1]=值2;
…

属性

length //数组中元素的数目

方法

转为字符串
toString() //将数组转换为字符串，以逗号连接
join(‘连接符’) //将数组元素连接成字符串

var arr = ['云南','九寨沟','拉萨','西双版纳','三亚','少林寺'];
console.log(arr.toString());
console.log(arr.join('')); // 链接数组中的内容，没有连接符号
console.log(arr.join('*'));
var str = arr.join('-');
console.log(str.split('-'));

// 练习：写一个函数对传入的字符串中每个单词的首字母大写 输入capitalize('the quick brown fox'); 返回The Quick Brown Fox
function capitalize(str){
   var arrStr = str.toLowerCase().split(' ');
   for(var i=0;i<arrStr.length;i++){
        arrStr[i] = arrStr[i].replace(arrStr[i][0],arrStr[i][0].toUpperCase());
   }   
   // console.log(arrStr); // 数组
   return arrStr.join(' ');
}
var getStr = capitalize('heLLo woRld xiaoMing');
console.log(getStr);

连接多个数组，返回新数组
concat(字符串/数组/数字) //连接多个数组，返回新数组
追加元素,并返回新数组长度
unshift(value,…) //头部追加

push(value,…) //尾部追加
删除元素并返回该元素
shift() //删除第一个元素

pop() //删除最后一个元素
删除元素或删除并插入新元素
splice(开始位置,长度,新内容1，新内容2…新内容n) //返回包括删除元素的数组
将数组元素升序排序
sort(回调函数)
颠倒数组中的元素
reverse()

案例：随机返回1-100的随机数，值不能重复

var arr=[];
for(var i=0;i<10;i++){
	var num=Math.floor(Math.random()*100);
	arr.push(num);
}

// 案例：要求将数组中的0项去掉
var arr = [4, 0, 7, 9, 0, 0, 2, 6, 0, 3, 1, 0];

深拷贝浅拷贝

思考：

var arr=[1,2,3,4];
arr1 = arr;
arr[1] = 'hello';
console.log(arr);
console.log(arr1);

参考资料：

https://www.cnblogs.com/echolun/p/7889848.html

Math对象

Math对象属于Javascript内置对象，无需实例化，可以直接使用

属性

Math.PI

方法

Math.round(number) //四舍五入整数
Math.ceil(number) //向上取整
Math.floor(number) //向下取整
Math.random() //随机返回0.0~1.0之间的数
Math.max(x,y) //求最大值
Math.min(x,y) //求最小值
Math.pow(x,y) //求xy

获取指定范围的随机数

Math.floor(Math.random()*(max-min+1))+min

Global对象

Global对象是ECMAscript中最特别的对象，因为它根本不存在。说它不存在是因为在ECMAscript中，不存在独立的函数，所有函数都必须是某个对象的方法。

例如isNaN(),isFinite(),parseInt()和parseFloat()等，都是Global对象的方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GPr5lYyv-1645865632488)(…/images/image-20210829161735537.png)]

编码函数escape()
解码函数unescaoe()
求值函数eval()
检查某个值是否为数字isNaN

布置作业：从简单到难

多提问

没学过的知识点，提前备注

多问解题思路

知识点

添加代码注释