【JavaScript】JS知识点梳理（三）

十八、字符串

字符串中方法，都不会改变原始字符串，因为是基本数据类型，每一个操作都是直接操作新值。

1、获取字符串指定位置的字符：

• charAt、charCodeAt、fromCharCode

数组方法	作用	参数	返回值
charAt	按索引获取字符 类似str[索引]，不同在于后者对于不存在的索引返回undefined	索引： charAt(str.length)	当前索引位置的字符，索引不存在返回空字符''
charCodeAt	按索引获取字符的（十进制）UNICODE编码	索引	当前索引对应字符的编码，索引不存在返回NaN
String.fromCharCode	与上者对应，通过编码获取字符	UNICODE编码(十进制的)	当前编码对应的字符

2、字符串查找与截取方法：

• substr、substring、slice

数组方法	作用	参数	返回值
substr	截取部分字符串	substr(n,m)；从索引n开始截取m个，m不写截取到末尾	截取的新字符串
substring	截取部分字符串	substring(n,m)，从索引n开始到索引m，不包含m，m不写截取到末尾	截取的新字符串
slice（推荐）	截取部分字符串	slice(n,m)，索引n到m，不含m，可以使负值，-1就是（str.length-1）倒数第一个	截取的新字符串

3、字符串转换为数组的方法：

• split

数组方法	作用	参数	返回值
split	用于把一个字符串分割成字符串数组	字符串或正则表达式 string.split(separator,limit)	返回新数组，不包括 separator 自身

4、字符串查找是否包含某个字符：

• indexOf、lastIndexOf、includes

5、字符串替换方法：

• replace

数组方法	作用	参数	返回值
replace	用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串	(字符串或要替换的模式的 RegExp 对象，替换文本或生成替换文本的函数) string.replace(searchvalue,newvalue)	新的字符串

6、字符串大小写转换方法：

• toLowerCase、toUpperCase

7、应用一：时间格式化

• 将'2020/3/11 14:10:01'转为'202年03月11日 14时10分01秒'

方案一：split、concat、map 转为数组，用模板字符串拼接
let time = '2020/3/11 14:10:01';
let arr = time.split(' ')
let arrL = arr[0].split('/')
let arrR = arr[1].split(':')
arr = arrL.concat(arrR).map(item=> item.length<2?'0'+item:item)
// console.log(arr);
time = `${arr[0]}年${arr[1]}月${arr[2]}日 ${arr[3]}时${arr[4]}分${arr[5]}秒`
console.log(time);
---------------------
改进：
let arr = time.split(/ |\/|:/g); /=[ '2020', '3', '11', '14', '10', '01' ]
let arr = time.match(/\d+/g); /=[ '2020', '3', '11', '14', '10', '01' ]

方案二：正则替换，不用转数组 (没有补0)
time = time.replace('/','年').replace('/','月').replace(' ','日 ').replace(':','时').replace(':','分')+'秒'
console.log(time);

方案三：最终正则
let time = '2020/3/11 14:10:01';
(proto=>{
  function formaTime(template = '{0}年{1}月{2}日 {3}时{4}分{5}秒'){
    let arr = this.match(/\d+/g);
    return template.replace(/\{(\d+)\}/g,(_,n)=>{ //_代表每一个要替换的{0}，n是索引，只用到索引
      let time = arr[n]||'0';
      arr[n].length<2?item = '0'+time:null;
      return time
    })
    // return template,字符串的处理是对新值的操作，所以这里return不对
  }
  proto.formaTime = formaTime
})(String.prototype)

time.formaTime()

8、应用二：获取地址栏中问号参数信息queryURLParams

：通过对地址栏参数的获取来请求、展示不同数据

function queryURLParams(url){
  let askIndex = url.indexOf('?'),
      polIndex = url.lastIndexOf('#'),
      askText = '',
      polText = '';
  polIndex>-1?null:polIndex = url.length;
  polText = url.substring(polIndex+1)
  if(askIndex>-1){
    askText = url.substring(askIndex+1,polIndex);
  }
  let obj = {};
  if(polText){obj['HASH'] = polText}
  if(askText){
    askText.split('&').forEach(item=>{
      if(item){
        let arr = item.split('=');
        obj[arr[0]] = arr[1]; /= arr[0]是变量，不能用obj.arr[0]
      }
    })
  }
  return obj
}
let result = 'https://www.bilibili.com/video/BV1Yi4y1t75Y?p=57#video'
console.log(queryURLParams(result))

改进：js中创建一个a标签，将参数url绑定到元素上：
    function queryURLParams(url) {
      let link = document.createElement('a')
      link.href = url;
      let polText = link.hash.substr(1),  /= hash: "#video"
        askText = link.search.substr(1),  /= search: "?p=57"
        obj = {};
      if (polText) {
        obj['HASH'] = polText
      }
      if (askText) {
        askText.split('&').forEach(item => {
          if (item) {
            let arr = item.split('=');
            obj[arr[0]] = arr[1]
          }
        })
      }
      return obj
    }

改进：正则
let result = '4y1t75Y?p=57#video';//这个分号必须加上
(proto=>{
  function queryURLParams(){
    let obj = {};
    this.replace(/([^?=&#]+)=([^?=&#]+)/g,(_,key,value)=>obj[key] = value);
   /= (_,key,vlaue){};其中第一个参数为大正则每次匹配到的整体，
   /=后面参数为大正则匹配内容里面的括号内容，有几个括号可以有几个参数；
    this.replace(/#([^?=&#]+)/g,(_,hash)=>obj['HASH'] = hash);
    /=: _:#video;hash:video;
    return obj;
  }
  proto.queryURLParams = queryURLParams
})(String.prototype)
console.log(result.queryURLParams());

9、应用三：获取四位随机（可能重复）验证码

let str = '0123456789QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm';
function createCode(){
  let newStr = '';
  for(let i=1;i<=4;i++){
    let index = Math.round(Math.random()*(61-0)+0);
    // newStr += str[one]
    let char = str.charAt(index);
    newStr += char;
  }
  return newStr
};
console.log(createCode())

改进：不重复的四位验证码
function createCode(){
  let newStr = '';
  for(let i=1;i<=4;i++){
    let index = Math.round(Math.random()*(61-0)+0);
    let char = str.charAt(index);
    if(newStr.includes('char')){
      i--;
      continue;
    }//判断是否已经包含，不包含正常加，包含重新循环
    newStr += char;
  }
  return newStr
};
---
对于不确定次数，将for循环改为while循环：
while(newStr.length<4){
  let index = Math.round(Math.random()*(61-0)+0);
  let char = str.charAt(index);
  if(!newStr.toUpperCase().includes(char.toUpperCase())){
    newStr += char;
  }

十九、日期对象

1、基本操作

• new Date()：获取当前客户端（本机时间）时间，日期对象的实例，所以是对象数据类型；
  • 日期的实例对象，可以使用原型链上日期方法；
  • get返回数字类型，to返回字符串类型；
  • getTime():获取当前日期距离1970/1/1 00:00:00这个日期之间的毫秒差，常用于比较两个时间；
  • getMonth():获取0-11，代表1~12月；
  • getDay():获取0-6，代表周日-周六；
  • toLocaleDateString():获取当前年月日字符串；
  • toLocaleString():获取当前完整日期字符串；
  • time.toLocaleTimeString():获取当前时间字符串；
  • 其他正常

let time = new Date()
typeof time;//'object'
console.log(time);//Thu Sep 24 2020 12:26:12 GMT+0800 (中国标准时间)
time.toLocaleDateString();//="2020/9/24"
time.toLocaleString();//="2020/9/24 下午12:26:12"
time.toLocaleTimeString();//="下午12:26:12"

2、new Date():也可以时间字符串传参（有规定的格式），来转为日期的实例对象，该几位就几位；

如：new Date('2020/9/07')==>Mon Sep 07 2020 00:00:00 GMT+0800 (中国标准时间)
支持格式：
yyyy/mm/dd
yyyy/mm/dd hh:mm:ss
yyyy-mm-dd ：ie下可能不支持，最新应该可以