2020-11-20 21:33 华为_海思_软件开发

关注

JavaScript学习笔记-6

写在前面

知识点：

字符串

常用方法

charAt/charCodeAt
slice / substr / substring
indexOf / lastIndexOf
split / replace

日期对象基本操作

2.1.17 字符串常用方法

所有用单引号，双引号、反引号包起来的都是字符串

let str='zasfsafsdfsdf'
//字符串由0到多个字符组成
str.length
str[0]
str[str.length-1]
console.log(str[20000000]) //=>undefined

//for循环输出字符串
略

charAt / charCodeAt

charAt：根据索引获取指定位置字符

charCodeAt：获取指定字符的ASCII码值

@params

n [number] 获取字符指定索引

@return

返回查到字符

找不到返回空字符串/对应编码值，不是undefined

console.log(str[20000000]) //=>undefined
console.log(str.charAt(20000000)) =>''

console.log(str.charCodeAt(0) //=>122
console.log(string.fromCharCode(122)) //=>z

substr / substring / slice 字符串截取

都是为了实现截取

substr(n,m) n开始截取m个字符（不写到末尾）

substring(n,m) n开始到m处（不含m）

slice(n,m) 同substr(n,m)，但支持负索引

console.log(str.substr(2,3) //=>'sfs'
console.log(str.substr(2,1000000) //=>'sfsafsdfsdf'超过截取全部
console.log(str.substr(-2,-3) //=>''
console.log(str.slice(-3,-2)) //=>'s' 快捷查找，负数索引，按照str.length+负数索引

indexOf/lastIndexOf

indexOf（x,y) x查找，y起始位置

lastIndexOf（x,y) x查找，y起始位置

let str='abcnn'
console.log(str.indexOf('n',2) //=>3
console.log(str.lastIndexOf('n') //=>4 
if (str.indexOf('@')===-1){
    //不存在返回-1
    //验证不包含
}
console.log(str.indexOf('abc')) //=>0 返回第一个字符所在索引
if(!str.includes('@')){
    console.log('不存在')
}

toUpperCase / toLowerCase 转大写/小写

str='luanxiaoxiang';
console.log(str.toUpperCase());
//实现首字母大写
str=str.substr(0,1).toUpperCase()+str.substr(1);
console.log(str);

split 指定一个分隔符，把字符串按照指定分隔符拆成数组(和数组中join对应)

let str='a|b|c|d';
let ary=str.split('|').join(',');
console.log(ary);
//split支持正则表达式

replace(老字符,新字符) 字符串替换

let str ='重庆@背景@上海';
str=str.replace('@','-');//=>"重庆-背景@上海"
//不使用正则每执行一次只替换一个
str=str.replace(/@/g,'-');//=>"重庆-背景-上海"

2.1.17.2 常用需求

时间字符串处理

let time = '2019-7-24 12:6:23';
//=>改变格式
//"2019年07月24日 12日06分23秒"
//"2019年07月24日"
//"07/24 12:06"

//方案1：replace替换
//字符串截取-略

////方案2：indexOf和substring
let n = time.indexOf('-')
let m = time.lastIndexOf('-')
let x = time.indexOf(' ')
let y = time.indexOf(':')
let z = time.lastIndexOf(':')
let year=time.substring(0,n);
let month=time.substring(n+1,m);
let day=time.substring(m+1,x);
console.log(year,month,day)

//方案3:基于split
let n=time.split(' ');
let m=n[0].split('-');
let x=n[1].split(':');
console.log(m,x)

//基于正则
let addZero=val=>val.length<2?'0'+val:val;
let ary=time.split(/(?: |-|:)/g);
time=ary[0]+'年'+addZero(ary[1])+'月'+addZero(ary[2])+'日';

实现一个方法queryURLParameter获取一个URL地址问号后面传递的参数信息

https://www.bilibili.com/video/BV1b4411y7Uq?p=35

https://www.bilibili.com/video/BV1b4411y7Uq?p=34

let url='http://www.zhufengpeixun.cn/index.html?1x=1&name=zhufeng&teacher=aaa#box';
/*
结果{
1x:1,
name:'zhufeng',
teacher:'aaa',
HASH:'box'
}
*/
let urlSplit=url.split('?');
let askParamsSplit=urlSplit[1].split(/(?:&|#)/g);
// console.log(askParamsSplit)
let obj={};
askParamsSplit.forEach(item=>includeEqual(item,obj));

let includeEqual=(str,obj)=>{
    if(str.includes('=')){
        let n = str.split('=')
        // console.log(n)
        key=n[0];
        // console.log(key)
        value=n[1];
        // console.log(value)
        obj[key]=value;
    }else{
        obj['HASH']=str;
    }
}

/*
queryURLParams: 获取url地址中问号传参信息和哈希值
@params
url[string]要解析的URL字符串
@return
[object]包含参数和哈希值信息对象
*/
function queryURLParams(url) {
    //获取？和#后面的信息
    let askIn = url.indexOf('?'),
        wellIn = url.indexOf('#'),
        askText = '',
        wellText = '';
    wellIn === -1 ? wellIn = url.length : null;
    askIn >= 0 ? askText = url.substring(askIn + 1, wellIn) : null;
    wellText = url.substring(wellIn + 1);
    //获取每一部分信息
    let result = {};
    wellText !== '' ? result['HASH'] = wellText : null;
    if (askText !== '') {
        let ary = askText.split('&');
        ary.forEach(item => {
            let itemAry = item.split('=');
            result[itemAry[0]] = itemAry[1];
        })
    }
    return result;
}
let url = 'http://www.zhufengpeixun.cn/index.html?1x=1&name=zhufeng&teacher=aaa#box';
let paramsObj = queryURLParams(url);
console.log(paramsObj);

//正则表达式
let url = 'http://www.zhufengpeixun.cn/index.html?1x=1&name=zhufeng&teacher=aaa#box';
function queryURLParams(url) {
    //获取每一部分信息
    let result = {},
        reg1 = /([^?#=&]+)=([^?#=&]+)/g,
        reg2 = /#([^?#=&]+)/g;
        url.replace(reg1,(n,x,y)=>result[x]=y);
        url.replace(reg2,(n,x)=>result['HASH']=x);
        return result;
}
let paramsObj = queryURLParams(url);
console.log(paramsObj);

low验证码.html

见VSCode

2.1.18 日期对象的基本操作

let time =new Data();

/*

获取当前客户端（本机电脑）本地时间、用户可以修改，不能作为重要参考项

Fri Jul 26 2019 10:02:17 GMT+0800

获取日期对象

/

标准日期方法/属性:

getFullYear()
getFullMonth() 获取0-11，代表1-12月
getDate() 获取日
getDay() 获取星期获取0-6，代表周日-周六
getHours()
getMinutes()
getSeconds()
getMilliseconds()
getTime() 获取1970/1/1 00:00:00这个日期之间毫秒差
toLocaleDateString() //=>2020/11/6
toLocaleString() //=>2020/11/6 上午9:30:31

//小时钟


//定时器控制运动:设置一个setInterval定时器，每隔1000ms执行一次
setInterval(queryDate,1000);

new Date('2019/7/27');
//Sat Jul 27 2019 00:00:00 GMT+0800 (中国标准时间)

/*
支持格式
yyyy/mm/dd
yyyy/mm/dd hh:mm:ss
yyyy-mm-dd    （在IE下不支持）
*/
function addZero(val) {
    val = Number(val);
    return val < 10 ? '0' + val : val;
}

function formatTime(time) {
    let ary = time.split(' ');
    console.log(ary);
    let aryLeft = ary[0].split('-'),
        aryRight = ary[1].split(':');
    ary = aryLeft.concat(aryRight);
    let result = ary[0] + '年' + addZero(ary[1]) + '月' + addZero(ary[2]) + '日' + ' ' + addZero(ary[3]) + ':' + addZero(ary[4]) + ':' + addZero(ary[5]);

    return result;
}

let time = '2020-11-8 12:0:0';
console.log(formatTime(time)); //=>2020年11月08日 12:00:00

//封装一套公共的时间字符串格式化处理方式
String.prototype.formatTime = function formatTime(template) {
    typeof template === 'undefined' ? template = '{0}年{1}月{2}日 {3}:{4}:{5}' : null;

    let matchAry = this.match(/\d+/g);
    template = template.replace(/{(\d+)}/g, (x, y) => {
        let val = matchAry[y] || '00';
        val.length < 2 ? val = '0' + val : null;
        return val;
    })
    return template;
}
let time = '2020-11-8 12:0:0';
console.log(time.formatTime('{1}-{2} {3}-{4}'));

DOM:document object model 文档对象模型，提供一些属性和方法供我们操作页面元素

获取DOM元素方法

document.getElementById()指定在文档中，基于元素ID或者这个元素对象
[context].getElementByTagName() 在指定容器中通过标签名获取一组元素集合
[context].getElementByClassName() 在指定容器中通过样式类名获取一组元素集合（不兼容IE6-8）
document.getElementByName() 在整个文档中，通过标签的Name属性值获取一组元素集合（在IE中只要表单元素Name才能识别）
document.head / document.body / document.documentElement获取页面中 HEAD / BODY / HTML三个元素
[context].querySelector([selector]) 在指定上下文（容器）中，通过选择器获取到指定的元素集合

//=> querySelector / querySelectorAll不兼容IE6-8
let box =document.querySelector('#box');
let links =document.querySelectorAll('a');
let links2 =document.querySelectorAll('#box a');
let aas =document.querySelectorAll('.aa');

//基于getElementByTagName / getElementByClassName获取到的是元素集合，想要操作某个元素需要在集合中根据索引取出

//querySelector获取的是一个元素对象，哪怕页面有多个符合也只获取第一个
//querySelectorAll获取到是一个集合，哪怕只有一个符合，也是一个集合

JS中的节点和描述节点间关系的数学

节点：Node，页面中所有东西都是节点

节点集合：NodeList(getElementsByName / querySelectorAll获取的都是节点集合)

元素节点（元素标签）
- nodeType：1
- nodeName：大写的标签名
- nodeValue：null
文本节点
- nodeType：2
- nodeName：‘#text’
- nodeValue：文本内容
注释节点
- nodeType：8
- nodeName：‘#commen’
- nodeValue：注释内容
文档节点document
- nodeType：9
- nodeName：‘#document’
- nodeValue：null
......

描述这些节点之间关系的属性

childNodes：获得所有子节点
children：获取所有的元素子节点（子元素标签）
parent：获取父节点
firstChild：第一个子节点
lastChild：最后一个子节点
firstElementChild / lastElementChild：第一个元素子节点 / 最后一个元素子节点（不兼容IE6-8）
previousSibling：获取上一个哥哥节点
nextSibling：获取上一个弟弟节点
previousElementSibling / nextElementSibling：获取上一个哥哥元素节点 / 获取上一个弟弟元素节点（不兼容IE6-8）
......

JS中动态增删改查

createElement 创建元素对象

createTextNode 创建文本对象

appendChild 把元素添加到容器末尾

insertBefore 把元素添加到指定容器中指定元素前面

        let box = document.createElement('div');
        box.id = 'boxActive';
        box.style.width = '200px';
        box.style.height = '200px';
        box.className = 'red'

        let text = document.createTextNode('珠峰培训');

        //添加：容器.appendChild(元素)
        box.appendChild(text);
        // document.body.appendChild(box);

        //放到指定元素前面：容器.insertBefore([指定元素],[新增元素])
        let haha = document.getElementById('hah');
        haha.parentNode.insertBefore(box, haha);

cloneNode(true / false) 克隆元素或节点

removeChild 移除容器中某个元素

let box1 = document.querySelector('.box');
//深克隆(克隆子元素)
let box2 = box1.cloneNode(true);
box2.querySelector('span').innerText = 'x2'
//浅克隆(不克隆子元素)
let box3 = box1.cloneNode(false);
box3.innerHTML = '<span>x3</span>';

document.body.appendChild(box2);
document.body.appendChild(box3);

//
document.body.removeChild(box3);

自定义属性另一种方式（这种方式是把自定义熟悉放到元素结构上）

.setAttribute('data-index',i);
.getAttribute('data-index');

var btnList = document.querySelectorAll('button');
for (let index = 0; index < btnList.length; index++) {
    // btnList[index].myIndex = index;
    //设置自定义属性：基于Set-ATTRIBUTE是吧属性信息写到了元素标签结构上，没有放到元素对象对应堆内存
    btnList[index].setAttribute('data-index', index);
    btnList[index].onclick = function () {
        //获取自定义属性：元素对象，属性名（原理是从堆内存中获取到对应属性值
        // alert(this.myIndex);
        //给予Get-ATTRIBUTE可以吧结构上存储的自定义属性值获取
        alert(this.getAttribute('data-index'));
    }
}