js第二周学习

用户9671199795423
81 阅读3分钟

hash数组（下标可以自定义）

创建hash数组

var arr=[];//创建空数组
arr['自定义下标']=新值;//添加内容
arr['自定义下标'];//访问hash数组

注意:hash数组length会失效

遍历hash数组

for(var i in arr){
    i->下标
    arr[i]->当前次元素
}

数组的API

数组的所有元素转换为一个字符串

语法var str=arr.join('定义拼接符')

//将数组中的所有元素渲染到页面上
var arr=['值1','值2','值3','值4'];
var str="<开始标签>"+arr.join("<结束标签><开始标签>")+"结束标签";
找到的标签名.innerHTML=str;

拼接数组:给数组添加新元素

语法var newArr=arr.concat(新值1,新值2.....);

  • 可以拼接数组(将传入的数组打散拼接)

截取子数组:取出数组某一部分

语法 var subArr=arr.slice(开始下标,结束下标);

  • 含头不含尾。
  • 结束下标可以不写，从开始截取到最后
  • 开始和结束都可以不写，截取全部
  • 支持负数，-1代表倒数第一位

以上都3个API都不会修改原数组，返回一个新数组

以下所有API都直接修改原数组

删增替

语法

  • 删除var dels=arr.splic(开始下标,n)//n代表删除几个返回删除的元素拼接成的数组，没有删除也返回一个空数组。
  • 插入var dels=arr.splic(开始下标,0,新值1,.....)从开始下标插入，向开始下标前面添加
  • 替换var dels=arr.splic(开始下标,n,新值1,...)添加值可以不用和删除的数量对等

翻转数组

语法arr.reverse()

数组的排序

语法

升序arr.sort();默认将数组中的元素转为字符串,PK每个字符的ASCLL码

数字升序

arr.sort(function(a,b){
    console.log(a);//后一个
    console.log(b);//前一个
    return a-b; //如果a-b返回的是一个正数，说明后一个>前一个
                //如果a-b返回的是一个负数，说明后一个<前一个
                //如果a-b返回的是一个0，说明后一个==前一个
                //而sort方法会根据你返回的正数、负数、0，自动考虑要
})

数字降序arr.sort(function(a,b){return b-a;})

栈和队列(添加元素和删除元素)

语法

  • arr.unshift(新值1,...)开头添加，从下标0开始添加
  • var last=arr.shift()开头删除,从下标0开始删除，一次删一个，返回删的元素
  • arr.push(新值1,...)结尾添加，从arr.length-1的位置添加
  • var last=arr.pop()结尾删除,从arr.length-1的位置删除，一次删一个，返回删除的元素

数组判断(返回一个布尔值)

需要满足每一个条件，和&&一样

var bool=arr.every(function(val,i,arr){
        val->当前值
         i ->当前值下标
        arr->数组本身
        return 判断条件;
})

只需要满足其中一个条件，和||一样

var bool=arr.some(function(val,i,arr){
    return 判断条件;
})

遍历

forEach直接修改原数组

arr.forEach(function(val,i,arr){
    操作
})

map不修改原数组，返回新的原数组

var newArr=arr.map(function(val,i,arr){
    return 操作;
})

过滤和汇总

过滤，返回需要的的部分，不会修改原数组

var subArr=arr.filte(function(val,a,arr){return 判断条件})

汇总

var sum=arr.reduce(function(prev,val,i,arr){return prev+val})//prev+val，相当于prev+=val；

箭头函数

语法 function省略不写，()和{}之间添加一个=>,只有一个参数，()可以省略不写，如果函数体只有一句，return和{}也可以省略不写；

二维数组（数组里面引用着另外一个数组）

创建

var arr=[
    [值1,值2],
    [值1,值2],
    [值1,值1]
]

访问

arr[下标][下标]

注意

  • 列越界，返回undefined
  • 行越界，报错

遍历二维数组

for(var i=0;i<arr.length;i++){
    for(var j=0;j<arr[i].length;j++){
        console.log(arr[i][j]);
    }
}

字符串API

和数组相同部分

  • str.length字符串的个数
  • str[i]获取字符串中某个字符
  • 遍历字符串
  • 不修改字原数组的API，字符串都可以使用(concat、slice)

转义字符

  • '\''将字符串中与原文冲突的字符转为原文
  • \n换行
  • \t大空格，和按tab一样
  • '\u4e00'输出unicode编码的字符

大小写转换

  • var 大写=str.toUpperCase();大写
  • var 小写=str.toLowerCase();小写

获取字符串指定位置字符

str.charAt(i) === str[i]

获取字符串指定位置字符的ASCII码

var ascii=str.charCodeAt(i)

通过ASCII码转回原文

var str=String.fromCharCode(ascii)

检索字符串，获取关键字下标

var i=str/arr.indexOf('关键字',开始位置)

  • 从开始位置开始查找，可以省略不写，默认从0开始查找
  • 返回找到的下标，没找到返回-1
  • 数组也可以使用
  • 默认一次只能查找到第一个关键字,不能找到所有关键字下标

解决

var str='no i sa no asd no no asda no';
var index=-1;
while((index=str.indexof('no',index+1))!=-1){
    console.log('找到的下标'+index);
}

拼接字符串

var newStr=str.concat(新字符串,...)不如直接+

替换字符串

var newStr=str.replace('固定关键字/RegExp','新内容')

去掉开头和结尾空格

  • str.trim()去掉开头和结尾空格
  • str.trimStart()去掉开头空格
  • str.trimEnd()去掉结尾空格

切割字符串

var arr=str.split('自定义切割符')

  • 切割后,切割符就不存在了
  • 如果切割符为空字符串''，切割每一个字符
  • 切割后返回为一个数组

Math对象

Math属性

Math.PI圆周率3.1415926

API

  • Math.ceil(num);上取整,小数点不能超过15位，否则会失效
  • Math.floor(num);下取整
  • Math.round(num);四舍五入取整，只看第一位小数

num.toFixed(d);不是Math的API，d代表保留几位小数，返回的结果是字符串

  • Math.pow(底数,幂)简写底数**幂乘方
  • Math.sqrt(num)只能开平方
  • Math.max/min(值1,值2,值3,值4)取最大/最小值，不能传入数组
    • 解决Math.max/min.apply(需要借用这个方法的名字,arr)apply具体打散数组功能
  • Math.abs(负数)把负数转为正数
  • Math.random()0~1之间取随机小数
    • 随机数公式parseInt(Math.random()*(max-min+1)+min)

Date对象(日期)

创建

  • var now=new Date()创建当前时间
  • var birth=new Date('YYYY/MM/DD HH:MM:SS)自定义时间
  • var birth=new Dare(YYYY,MMM,DD,HH,MM,SS)自定义时间

API

getXXX获取setXXX设置

  • FullYear年 当前年份的数字
  • Month月 0~11
  • Date日 1~31
  • Day星期 0~6 0代表星期天
  • Hours时 0~23
  • Minutes分 0~59
  • Seconds秒 0~59
  • Miiliseconds毫秒 0~999

注意所有分量都有设置和获取，唯独星期只有获取

定时器

开启timer=setInterval(callback,间隔毫秒数)

停止clearInterval(timer);

一次性定时器

开启：timer=setTimeout(callback,间隔毫秒数);

停止：clearTimeout(timer);

两者可以互相转换

js创建页面元素

创建空标签：

var elem=document.createElement("标签名");

为其设置必要的属性和事件

elem.属性名="属性值"; elem.on事件名=function(){}

渲染到DOM树

父元素.appendChild(elem);

window对象

  • 获取浏览器完整大小outerWidth/outerHeight
  • 获取浏览器文档显示区域innerWidth/innerHeight

不是window的获取屏幕完整大小sreen.width/height

打开链接的方式

  • 当前窗口打开，可以后退
HTML：<a href="">内容</a>
JS：open("url","_self");
  • 当前窗口打开，禁止后退 location.replace("新url");叫做替换，网页也会发生变化
  • 新窗口打开，可以打开多个
HTML：<a href="" target="_blank">内容</a>
JS：open("url","_blank");
  • 新窗口打开，只能打开一个
HTML：<a href="" target="自定义name">内容</a>
JS：open("url","自定义name");
  • 下载：<a href="xx.exe/zip/rar/7z"></a>
  • 打开：<a href="xx.txt/jpg/png/gif"></a>
  • 直接书写JS<a href='javascript:js代码'></a>

打开新窗口/新链接

  • var newW=open('url','target','width=?,height=?,left=?,top=?')

如果没有传第三个参数，就和浏览器融为一体，浏览器多大它就多大，如果传了，就会变成一个独立的窗口

  • window/newW.close()关闭窗口
  • newW.resiTo(宽,高)改变新窗口大小
  • newW.moveTo(X,Y)改变新窗口位置
  • 警告框alert('警告文字')输入框prompt('提示文字')确认框comfirm('提示文字')

window的专属事件

  • window.onload加载等其他资源加载完后才执行这事件里面的代码
  • window.onscroll滚动事件，滚动条滑动就会触发
    • window.scrollY获取滚动条当前位置
    • 属性.offsetTop/offsetLeft获取元素距离页面顶部/左面位置

本地/客户端存储技术

  • sessionStorage浏览器一旦关闭，数据就会死亡
  • localStorage只要不清空，就永久存在

操作:

  1. 添加XXXStorage.属性名='属性值';
  2. 读取XXXStorage.属性名;
  3. 删除XXXStorage.removeItem('属性名');
  4. 清空XXXStorage.clear();
avatar
文章
阅读
粉丝