20200831–叶梦宇-

学习总结

数组

arr[i]
三个不限制
不限制元素的数据类型
不限制下标越界
取值超过下标,不报错,返回undefined
赋值超过下标,不报错,自动在指定位置创建新元素
稀疏数组:下标不连续的数组,此时数组会自动将length调整到最大下标+1
不限制元素个数
var arr=new Array(3);
arr[0]="name";
arr[1]="sex";
arr[2]="age";
arr[6]="birthday";

数组长度

数组名.length

获取最后一个元素 arr[arr.length-1]

获取倒数第n个元素 arr[arr.length-n]

末尾追加一个新元素 arr[arr.length]=值

缩容
删除末尾一个元素 arr.length--
删除末尾n个元素 arr.length-=n
清空数组 arr.length=0

数组分类

索引数组

索引数组以0开始的整数作为下标

遍历索引数组
for(var i=0;i<arr.length;i++){
arr[i]; //当前数组元素
}

关联数组

关联数组使用字符串作为下标,关联数组中的元素只能单独添加

创建关联数组 var hash=[name:"哈哈哈",age=“123”]

访问关联数组元素 hash["下标名(key)"]

关联数组特点

关联数组length属性始终为0
关联数组无法使用索引数组的API

关联数组遍历
for(var key in hash){
key //仅获取当前下标名称
hash[key] //获取当前元素值
}
常用方法:仅获取hash中的所有key
var keys=[];
var i=0;
for(keys[i++] in hash);

遍历数组中的元素

​ for-in
​ for(var key in 数组){
​ // key是要遍历的每个元素的下标
​ // 数组[key]是每个下标对应的元素
}
​ for循环
​ for(var i=0;i<数组.length;i++){
​ // i表示每个元素的下标
​ // 数组[i]表示下标对应的元素
}

数组中的方法

数组转字符串
String(arr)
arr.toString()
arr.join("连接符")
var arr=[1,2,3,4];
arr.join("/")
无缝拼接 arr.join("")

判断空数组 arr.join("")===""

动态生成页面元素
var arr=["h","e","l","l","o"]
var html=""+arr.join("")+""
document.body.innerHTML=html

拼接和截取数组

拼接和截取都无权修改原数组,只能返回新数组,必须用变量承接返回值

拼接

var newArr=arr1.concat(arr2,....)
截取

var subArr=arr.slice(start,end);
注意:截取时包含start,不包含end。如果end为负数,是从start位置 到倒数第end位

修改数组

删除元素

arr.splice(start,n) start表示从第几个下标开始 ,n表示删除长度。

注意:start为负数,表示倒数从第几个参数开始删除。

var arr=[1,2,3,4,5,6,7,8,9];
// 只有一个负数代表删除倒数n个数
arr.splice(-2)
console.log(arr)

省略第二个参数,表示删除starti位置后所有元素

返回值
var deletes=arr.splice(starti,n)

插入元素

arr.splice(start,0,值1,值2,...) ,原start位置的值及其之后的值被向后顺移

替换元素

arr.splice(start,n,值1,值2...) 先删除arr中start位置的n个元素,再在start位置插入新元素

常用方法:广告轮播

移除开头的n个元素拼到结尾
imgs=imgs.concat(imgs.splice(0,n))

移除结尾的n个元素拼到开头
imgs=imgs.splice(-n).concat(imgs)

翻转数组中的元素
arr.reverse()
var arr=[1,2,3,4,5,6,7,8,9];

console.log(arr.reverse())

排序

解决问题:自定义比较器函数
定义比较器函数
升序
function compare(a,b){return a-b;}
降序
function compare(a,b){return b-a;}
将比较器函数作为对象传入sort方法
arr.sort(compare)
es6写法 arr.sort((a,b)=>a-b)

栈和队列

JS中没有专门的栈和队列的类型,都是用普通数组模拟的

:一端封闭只能从另一端进出的数组

注意:开头入栈和结尾入栈的顺序是相反的

(结尾)出入栈

arr.push(值)

在数组的末尾添加元素,返回数组的长度

查看数组最后一位的值:arr[arr.length]=值

删除数组的最后一个元素

​ var last=arr.pop()

(开头)出入栈

在数组的开头添加元素,返回数组的长度,相当于arr.splice(0,0,值)

​ arr.unshift(值)
​ 出

删除数组的第一个元素

​ arr.shift()

队列(queue): 只能从结尾进入,从开头出的数组

结尾入

在数组的末尾添加元素,返回数组的长度

查看数组最后一位的值:arr[arr.length]=值

​ arr.push(值)
开头出

删除数组的第一个元素

​ arr.shift()

二维数组

数组中的元素内容,又是一个子数组,数组中每个元素也是数组

创建二维数组
var arr=[];
arr[i]=[值1,值2,...]

在创建数组同时,初始化子数组
var arr=[
[值1,值2,...],
[值1,值2,...],
]

访问二维数组中的元素
arr[i][j】 提示:用法和普通数组元素的用法完全一样

注意:任何情况一维下标 i 不能越界,否则直接报错

遍历二维数组
for(var i=0;i<arr.length;i++){
for(var j=0;j<arr[i].length;j++){
arr[i][j】 //当前元素
}
}

字符串

字符串是由多个字符组成的只读字符数组,用于存储和处理文本

字符串 对比 数组

相同点
​ 1. 字符串和数组都有下标

2. 字符串和数组都有“.length”的方法

  1. 字符串和数组都可以使用for循环遍历

  2. 字符串和数组都有slice()的方法

    不同点

    1.字符串和数组两者类型不同

    2.字符串和数组的API不通用

string API

将任意的类型转为字符串
new String() 转为字符串,返回对象
String() 转为字符串,返回字符串

大小写转换
将英文字母转为大写 str.toUpperCase()

​ 将英文字母转为小写 str.toLowerCase()

获取指定位置字符 var char=str.charAt(i)
获得指定的unicode码 var unicode=str.charCodeAt(i)

将unicode码转换为字符 var char=String.fromCharCode(unicode)

查找某个字符出现的位置下标
var i=str.indexOf("字符",start)
在str中从start位置开始查找下一个关键词的位置,若省略start,则默认为0
优点:可以指定开始位置,可以找所有
缺点:不支持正则,一次只能找一种字符
查找所有字符出现的位置
var i=-1;
while((i=str.indexOf("字符",i+1))!=-1){
console.log(i) //本次找到的字符位置下标
}
专门查找最后一个字符的位置
var i=str.lastIndexOf("字符")

截取字符串

1. var subStr=str.slice(start,end)
  1. var subStr=str.substring(start,end)
    slice 和 substring 对比

    1. slice下标允许使用负数,substring下标为负数自动转为0

    2. slice中开始的下标小于结束的下标,substring下标不分顺序

      var subStr=str.substr(start,n) n为 截取 长度

DOM

DOM (Document Object Model) 译为文档对象模型,是 HTML 和 XML 文档的编程接口。

HTML DOM 定义了访问和操作 HTML 文档的标准方法。

DOM 以树结构表达 HTML 文档。

DOM操作流程

1,在头脑中构建DOM树

2,查找我们要触发事件的 元素。

3,为元素绑定事件

4,查找发生事件的元素

换行是个节点,空格也是个节点,table也是个结点

学习心得

自己努力学吧

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1