js第二周

用户9045485532619
126 阅读5分钟

数组的基础

创建数组

  • 直接量： var arr=[值1，...];
  • 构造函数： var arr=new Array（值1，...）;

浅拷贝：如果传递的是原始类型，其实就是复制了一个副本给对方，两者互不影响

hash（关联）数组

下标可以自定义

创建

1、先创建空数组： var arr=[];

2、为数组添加自定义下标并且赋值： arr["自定义下标"]=新值；

访问

arr["自定义下标"]；

强调

hash数组的length会失效，永远为0

遍历hash数组，不能再使用for 循环，必须使用for in 循环，不需要设置开始和结束，纯自动化，专门为了遍历hash数组而存在。

语法

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

hash数组的原理

hash算法：将字符串，计算出一个尽量不重复的数字（地址值） 字符串内容相同，则计算出来的数字也一定相同

添加元素：js解释器会将自定义下标交给hash算法，得到一个数字（地址值），直接将你要保存的数据放到此地址之中保存

获取元素：js解释器会将指定的下标再次交给hash算法，得到了一个和当初保存时完全一样的数字（地址值），通过此地址值就可以找到你当初保存的数据了，取出来使用了

数组API

数组转字符串

arr to str

var str=arr.join("自定义链接符");

join方法用于把数组中所有元素放入一个字符串。

固定套路 2个

1、单词无缝拼接

  var arr=["h","e","l","l","o"," ","w","o","r","l","d"];
  console.log(arr.join(""));

2、将数组拼接成DOM页面元素（数据渲染页面）

var arr=["-请选择-","重庆","北京"，"成都","贵州","湖南"];
var str="<option>"+arr.join("<option></option>")+"</option>";
sel1.innerHTML=str;

拼接数组：添加元素的新方式

语法： var newArr=arr.concat（新值1，arr1，。。）；

截取子数组

语法： var subArr=arr.slice(starti ,endi);

特殊：

  • 不会修改原数组，只会返回一个新数组；
  • 含头不含尾；
  • 支持负数参数，-1代表倒数第一个；
  • endi可以省略不写，如果不写，则从starti截取到末尾
  • （深拷贝）starti和endi都可以省略不写，那么从头到尾完整的赋值一份,两者不会相互影响

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

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

删插替

删除：var dels=arr.splice(starti,n);//n代表删除几个

插入：var dels=arr.splice(starti,0,新值1,...);

替换： var dels=arr.splice(starti,n,新值1，...);

翻转数组

语法：arr.reverse();

数组的排序

语法： arr.sort(); 默认：将数组中的元素转为字符串，然后再按位pk每一个字符的unicode号（ascii码）；

匿名回调函数

arr.sort(function(a,b){
return a-b;//数组升序排列
return b-a;//数组降序排列
})

栈和队列

栈：其实就是数组，只不过是一端封闭，只能从另一端进出

开头进： arr.unshift(新值1,...);//向前添加，导致其他元素下标都会改变

开头出： var first=arr.shift();//向前删除

结尾进： arr.push(新值1,..);//添加元素的新方式

结尾出： var last=arr.pop();//删除元素的新方式

队列：其实就是数组，只不过只能从一端浸入，从另一端出去

开头进： arr.unshift(新值1,...);//向前添加，导致其他元素下标都会改变

结尾出： var last=arr.pop();//删除元素的新方式，一次只能删除一个，返回的是删除那个元素

结尾进： arr.push(新值1，。。。); //添加元素的新方式，向后添加

开头出： var first=arr.shift();//删除元素的新方式，向前删除，一次只能删除一个，有返回值，返回的是删除的值，缺点：导致其他元素下标都会发生改变。

ES5（2014年）为数组提供了3组6个API：

判断：2个；判断的结果一定是一个布尔值

every：每一个，要求所有元素都满足条件，结果才为true，只要有一个不满足则为false，非常类似于&&；

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

some：有一些，只要有一个元素满足，则为ttrue，全部不满足则为flase；非常类似于||；

var bool=arr.some(function(var,i,arr){
    var//当前的值
    i//当前的值下标
    arr//数组本身
    return 判断条件;
})

遍历

拿到数组中的每一个元做相同或相似的操作

forEach //直接修改原数组

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

map //不修改原数组，返回一个新数组

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

过滤和汇总

过滤：

var subArr=arr.filter(function(var,i,arr){
    return 判断条件；
})

汇总

var sum=arr.reduce(function(prev,val,i,arr){
    return prev+val;
})

以上6个API都是为了简化for循环

ES6箭头函数 、、专门简化一切的匿名函数

公式：function去掉，（）和{}之间添加一个=>，如果形参只有一个，那么（）可以省略，如果函数体只有一句话，那么{}可以省略，如果函数体只有一句话并且是return，那么return和{}一起省略；

二维数组

创建： var=[ [],[],[],[] ]

访问：arr[行下标][列下标]；

遍历二维数组：

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

String 字符串

概念：多个字符组成的字符数组；

String API

转义字符： \

包含特殊功能的符号:

换行
制表符： \t

输出unicode编码的字符

大小写转换

语法： var 大写=str.toUpporCase();

var 小写=str.toLowerCase();

获取字符串中指定位置的字符

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

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

var ascii=str.charCodeAt(i);

通过ASCII码转回原文：

var 原文=string.fromCharCode(ascii);

检索字符串

var i=str/arr.indexOf("关键字",starti);

拼接字符串

var newStr=str.concat(新字符串，...)===还不如+运算符

截取字符串

var newStr=str/arr.slice(starti,endi+1);//和数组的用法一模一样 str.substring(starti,endi+1);//几乎和slice一样，但是不支持负数参数 str.substr(starti,n);//n代表截取的个数，不必考虑含头不含尾

替换字符串

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

去掉开头结尾的空白字符

str.trim();

str.trimStart();

str.trimEnd();

切割/分割字符串

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

Math 对象 ：专门提供了数学计算的API

取整 ：3种

1、上取整：超过一点点，就会取下一个整数

Math.ceil(num);//小数点位数不能超过15位，否则会失效

2、下取整：无论超过多少，都会省略小数点部分

Math.floor(num);

3、四舍五入取整：

Math.round(num);//只看第一位小数

乘方和开方

乘方：Math.pow(底数,幂)

开方：Math.sqrt(num);//只能开平方

最大值和最小值

var max/min= Math.max/min(a,b,d,c,e...........); //自动在你传入的数字中找到最大值或最小值

绝对值：把负数变成整数

Math.abs(num)

随机数

Math.random(); - 在0~1之间取一个随机小数

公式：parseInt(Math.random()*(max-min+1)+min);

Date 对象：日期对象

创建：4种

1、创建当前时间： var now=new Date();

2、创建一个自定义时间：var birth=new Date("yyyy/MM/dd hh:mm:ss");

3、创建一个自定义时间：var birth=new Date(yyyy,MM-1,dd,hh,mm,ss);//修正月份，从0~11月，0代表1月

4、复制一个日期：var end=new Date(start);

##秒秒PI 年 月 日 星期：FullYear Month Date Day

时 分 秒 毫秒：Hours Minutes Seconds Miiliseconds

每一个分类都有一对儿getXXX/setXXX

其中getXXX负责获取一个分量的值

其中setXXX负责设置一个分量的值

定时器

周期定时器

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

停止：clearInterval(timer);

一次性定时器

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

停止：clearTimeout(timer);

扩展：如何使用JS创建页面元素：3步 - 深入数据渲染

1、创建空标签：var elem=document.createElement("标签名");

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

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

3、渲染到DOM树-上树

父元素.appendChild(elem);

BOM 浏览器对象模型

获取浏览器的文档显示区域的大小

innerWidth/innerHeight;

打开链接的新方式

当前窗口打开，可以后退

HTML：< a href="">内容

JS：open("url","_self");

当前窗口打开，禁止后退

history：当前窗口的历史记录

location.replace("新url");//叫做替换，不叫作跳转

新窗口打开，可以打开多个

HTML：< a href="" target="_blank">内容

JS：open("url","_blank");

新窗口打开，只能打开一个

HTML：< a href="" target="自定义name">内容

JS：open("url","自定义name");

打开新窗口/新链接

var newW=open("url","target","width=?,height=?,left=?,top=?");

window的专属事件

1、window.onload - load：加载

2、window.onresize - 创建如果大小发生了变化，就会触发

3、window.onscroll - 滚动事件，一旦滚动就会触发

本地/客户端存储技术

cookie：淘汰了，存储大小只有2kb，只有30天

webStorage：存储大小有8mb，永久保存

操作：

1、添加：xxxStorage.属性名="属性值";

2、读取：xxxStorage.属性名;

3、删除：xxxStorage.removeItem("属性名");

4、清空：xxxStorage.clear();

avatar
文章
阅读
粉丝