JavaScript学习笔记三（51-75）

最新推荐文章于 2024-05-20 15:17:08 发布

isWhj.ReTurN_N

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量122

点赞数

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/m0_74071065/article/details/128960734

版权

JavaScript学习笔记三（51-75）

A-10-4 数组的常用方法

数组是一个复杂数据类型，我们在操作它的时候就不能再想基本数据类型一样操作了
比如我们想改变一个数组

// 创建一个数组
var arr = [1, 2, 3]

// 我们想把数组变成只有 1 和 2
arr = [1, 2]

这样肯定是不合理，因为这样不是在改变之前的数组
相当于心弄了一个数组给到 arr 这个变量了
相当于把 arr 里面存储的地址给换了，也就是把存储空间换掉了，而不是在之前的空间里面修改
所以我们就需要借助一些方法，在不改变存储空间的情况下，把存储空间里面的数据改变
有以下几类方式：

1. push

push 是用来在数组的末尾追加一个元素

var arr = [1, 2, 3]

// 使用 push 方法追加一个元素在末尾
arr.push(4)

console.log(arr) // [1, 2, 3, 4]

2. pop

pop 是用来删除数组末尾的一个元素

var arr = [1, 2, 3]

// 使用 pop 方法删除末尾的一个元素
arr.pop()

console.log(arr) // [1, 2]

3. unshift

unshift 是在数组的最前面添加一个元素

var arr = [1, 2, 3]

// 使用 unshift 方法想数组的最前面添加一个元素
arr.unshift(4)

console.log(arr) // [4, 1, 2, 3]

4. shift

shift 是删除数组最前面的一个元素

var arr = [1, 2, 3]

// 使用 shift 方法删除数组最前面的一个元素
arr.shift()

console.log(arr) // [2, 3]

5. splice

splice 是截取数组中的某些内容，按照数组的索引来截取
语法： splice(从哪一个索引位置开始,截取多少个,替换的新元素) （第三个参数可以不写）（逗号隔开）

var arr = [1, 2, 3, 4, 5]

// 使用 splice 方法截取数组
arr.splice(1, 2)

console.log(arr) // [1, 4, 5]

6. arr.splice( , )

arr.splice(1, 2)表示从索引 1 开始截取 2 个内容
第三个参数没有写，就是没有新内容替换掉截取位置

var arr = [1, 2, 3, 4, 5]

// 使用 splice 方法截取数组
arr.splice(1, 2, '新内容')

console.log(arr) // [1, '新内容', 4, 5]

7. reverse

reverse 是用来反转数组使用的

var arr = [1, 2, 3]

// 使用 reverse 方法来反转数组
arr.reverse()

console.log(arr) // [3, 2, 1]

8. sort

sort 是用来给数组排序的

var arr = [2, 3, 1]

// 使用 sort 方法给数组排序
arr.sort()

console.log(arr) // [1, 2, 3]

9. concat

concat 是把多个数组进行拼接
和之前的方法有一些不一样的地方，就是 concat 不会改变原始数组，而是返回一个新的数组

var arr = [1, 2, 3]

// 使用 concat 方法拼接数组
var newArr = arr.concat([4, 5, 6])

console.log(arr) // [1, 2, 3]
console.log(newArr) // [1, 2, 3, 4, 5, 6]

注意： concat 方法不会改变原始数组

10. join

join 是把数组里面的每一项内容链接起来，变成一个字符串
可以自己定义每一项之间链接的内容
语法：join(要以什么内容链接)
不会改变原始数组，而是把链接好的字符串返回

var arr = [1, 2, 3]

// 使用 join 链接数组
var str = arr.join('-')

console.log(arr) // [1, 2, 3]
console.log(str) // 1-2-3

注意：join 方法不会改变原始数组，而是返回链接好的字符串

11. indexOf

indexOf 用来找到数组中某一项的索引
语法： indexOf(你要找的数组中的项)

var arr = [1, 2, 3, 4, 5]

// 使用 indexOf 超找数组中的某一项
var index = arr.indexOf(3)

console.log(index) // 2

我们要找的是数组中值为 3 的那一项
返回的就是值为 3 的那一项在该数组中的索引
如果你要找的内容在数组中没有，那么就会返回 -1

var arr = [1, 2, 3, 4, 5]

// 使用 indexOf 超找数组中的某一项
var index = arr.indexOf(10)

console.log(index) // -1

12. forEach

和for循环一个作用，就是用来遍历数组的
语法：arr.forEach(function (item, index, arr) {})

var arr = [1, 2, 3]

// 使用 forEach 遍历数组
arr.forEach(function (item, index, arr) {
  // item 就是数组中的每一项
  // index 就是数组的索引
  // arr 就是原始数组
  console.log('数组的第 ' + index + ' 项的值是 ' + item + '，原始数组是', arr)
})

13. map

和 forEach 类似，只不过可以对数组中的每一项进行操作，返回一个新的数组

var arr = [1, 2, 3]

// 使用 map 遍历数组
var newArr = arr.map(function (item, index, arr) {
  // item 就是数组中的每一项
  // index 就是数组的索引
  // arr 就是原始数组
  return item + 10
})

console.log(newArr) // [11, 12, 13]

14. filter

和 map 的使用方式类似，按照我们的条件来筛选数组
把原始数组中满足条件的筛选出来，组成一个新的数组返回

var arr = [1, 2, 3]

// 使用 filter 过滤数组
var newArr = arr.filter(function (item, index, arr) {
  // item 就是数组中的每一项
  // index 就是数组的索引
  // arr 就是原始数组
  return item > 1
})

console.log(newArr) // [2, 3]

设置的条件就是 > 1
返回的新数组就会是原始数组中所有 > 1 的项

A-10-5 数组去重

方式一：就比如重新创建一个容器，把数组内的数字重新装进去，在装进去的时候利用if判断一下装的数字是否存在

// Mathod 1 
var arr = [1,2,3,4,3,5,6,2,1]
var arr2 = [] //Empty

for(var i=0;i<arr.length;i++){
	if( arr2.indexOf(arr[i])=== -1{
		arr2.push(arr[i])
		}
	}
	console.log(arr,arr2)

方式二：利用对象。将数组内的每一个值当成一个对象

var obj = {}

for(var i=0;i<arr.length;i++){
		obj[arr[i]] = x //随便是啥都可以
	}
console.log(obj)//打印出来的是字符串
var arr2 = []
for(var i in obj){
		arr2.push(i-0)//将字符串转换成数字类型，也可以用Number i
	}
	console.log(arr2)

方式三：new Set （超纲）

var set1 = new Set(arr)
console.log(set1)
var arr1 =  Array.from(set1)
console.log(arr1)

A-11 字符串(String)

我们创建字符串也分为两种方法字面量和构造函数

//字面量：
var str = 'hello'
//构造函数创建：
var str = new String('hello')

length属于只读类型，索引（下表）也是只读类型

A-11-1 字符集

ASCII 字符集：
我们都知道，计算机只能存储 0101010 这样的二进制数字
那么我们的 a ~ z / A ~ Z / $ / @ /… 之类的内容也有由二进制数字组成的
我们可以简单的理解为， a ~ z / A ~ Z / $ / @ /… 之类的内容都有一个自己的编号，然后在计算机存储的时候，是存储的这些编号，我们看的时候，也是通过这些编号在解析成我们要看到的内容给我们看到

上面的就是 ASCII 对照表，我们只需要知道他是这么存储的就好

unicode 编码：
我们看到了，ASCII 只有这 128 个字符的编码结构

但是因为 ASCII 出现的比较早，而且是美国发明的，早先时候这些内容就够用了
因为存储一些英文的内容，传递一些英文的文章什么的都够用了
那么对于这个世界来说肯定是不够用的
因为我们的汉字没有办法存储，包括一些其他国家的语言也没有办法存储
所以就出现了 unicode 编码，也叫:万国码，统一码。
unicode 对照表就是一个和 ASCII 一样的对照表，只不过变得很大很大，因为存储的内容特别的多
而且包含了世界上大部分国家的文字，所以我们的文字和字符现在在存储的时候，都是按照 unicode 编码转换成数字进行存储

UTF-8 就是一种 8 位的 unicode 字符集

A-11-2 案例-统计字符出现次数

如何统计字符串中字符出现的次数。
var str = "abcabcab"
"以：a:3,b:3,c:2的形式出现。
方式一：

var obj = {}
for(var i=0;i<str.length;i++){
	console.log(str[i])
	var key = str[i]

	if(obj[key] === undefined){
		obj[key] = 1
	}else{
		obj[key]++
	}

	console.log(obj)

方式二：

var obj = {}
for(var i=0;i<str.length;i++){
	console.log(str[i])
	var key = str[i]

	if(obj[key]){
		boj[key]++
	}else{
		obj[key] = 1
	}
}
	console.log(obj)

A-11-3 字符串的常用方法：

我们操作字符串，也有一堆的方法来帮助我们操作
字符串和数组有一个一样的地方，也是按照索引来排列的

1. 索引

chartAt
charAt(索引) 是找到字符串中指定索引位置的内容返回

var str = 'Jack'

// 使用 charAt 找到字符串中的某一个内容
var index = str.charAt(2)

console.log(index) // c

因为字符串也是按照索引进行排列的，也是同样从 0 开始
所以索引 2 的位置就是 c
如果没有对应的索引，那么就会返回空字符串

var str = 'Jack'

// 使用 charAt 找到字符串中的某一个内容
var index = str.charAt(10)

console.log(index) // ''

这个字符串根本没有索引 10 的位置
所以就会返回一个空字符串 ' '

charCodeAt
charCodeAt 就是返回对应索引位置的 unicode 编码

var str = 'Jack'

// 使用 charAt 找到字符串中的某一个内容
var index = str.charCodeAt(0)

console.log(index) // 74

因为 J 在 unicode 对照表里面存储的是 74，所以就会返回 74

fromCharCode
将Unicode编码转换成对应的字符

var str1 = str.charCodeAt(0)
console.log(str1)

var arr = []
for(var i=65;i<65;i++){
	arr.push(String.fromCharCode(i))
	}
	console.log(arr)

indexOf
indexOf 就是按照字符找到对应的索引位置的序号

var str = 'Jack'

// 使用 indexOf 找到对应的索引
var index = str.indexOf('J')

console.log(index) // 0

因为字符 J 在字符串 Jack 中的索引位置是 0
所以会返回 0

2. 截取

substring
substring 是用来截取字符串使用的
语法： substring(从哪个索引开始，到哪个索引截止)，包含开始索引，不包含结束索引

var str = 'hello'
//         01234

// 使用 substring 截取字符串
var newStr = str.substring(1, 3)

console.log(newStr) // el

从索引 1 开始，到索引 3 截止，包含前面的索引不包含后面的索引
所以返回的是 el

substr
substr 也是用来截取字符串的
语法：substr(从哪个索引开始，截取多少个),首位都包含

var str = 'hello'
//         01234

// 使用 substr 截取字符串
var newStr = str.substr(1, 3)

console.log(newStr) // ell

这个方法和 substring 不一样的是:第二个参数是截取多少个
从索引 1 开始，截取 3 个，所以得到的是 ell

slice
语法：slice(开始索引，结束索引)，和上面两个相似（可以不写结束索引，那么就只是直接到尾）

3. 大小写

toLowerCase 和 toUpperCase：
这两个方法分别使用用来给字符串转成小写字母和大写字母：

var str = hello

// 使用 toUpperCase 转换成大写
var upper = str.toUpperCase()

console.log(upper) // HELLO

// 使用 toLowerCase 转换成小写
var lower = upper.toLowerCase()

console.log(lower) // hello

4. 替换

replace

var str = "abcabcab"
var str1 = str.replace("a","*")
console.log(str1)

运行后会发现只会替换掉第一个a，后面的a不会被替换。这里需要用到后续学习的正则表达式，才能将所有的a都替换掉

5. 分割

split

var str = "abcd"
console.log(str.split("|"))

6. 位置查询

var str = "abcabcab"
//         01234567
//         76543210
console.log(str.indexOf("a",1))//从第“1”的位置开始巡查“a”，如果在，则返回位置的数字，不在则返回-1
console.log(str.lastIndexOf("a",3))//就是从后往前巡查

7. 链接字符串 +

var str = "abcd"
var str1 = str+"ef"
console.log(str1)

8. 去掉首尾空格

trim去掉首尾空格
trimStart和trimLeft去掉首空格
trimEnd和trimRight去掉尾空格

A-11-4 模糊查询

A-12 Math 数字

Math 是 js 的一个内置对象，提供了一堆的方法帮助我们操作数字

A-12-1 Math 数字常用方法

1. random 随机数

Math.random() 这个方法是用来生成一个 0 ~ 1 之间的随机数
每次执行生成的数字都不一样，但是一定是 0 ~ 1 之间的
生成的数字包含 0 ，但是不包含 1

2. round 四舍五入

四舍五入取整Math.round(4.46)=5

3. ceil/floor 取整

向上取整和向下取整

4. abs 绝对值

绝对值

5. sqrt 开根

6. pow 指数

Math.pow(底数,指数)

7. max/min

在多个数中找出最大值和最小值

8. PI

圆周率

A-13 事件对象 Date

JS提供的内置构造函数，用来获取时间

A-13-1 无参数

无参数时返回的时当前时间

var date = new Date()
console.log(date)

可以在控制台中看到是当前时间（随刷新变化）

A-13-2 含参数

如果只有一个参数那它就是毫秒数

new Date() 传递的参数有多种情况

传递两个数字，第一个表示年，第二个表示月份

var time = new Date(2019, 00) // 月份从 0 开始计数，0 表示 1月，11 表示 12月
console.log(time) // Tue Jan 01 2019 00:00:00 GMT+0800 (中国标准时间)

传递三个数字，前两个不变，第三个表示该月份的第几天，从 1 到 31

var time = new Date(2019, 00, 05) 
console.log(time) // Sat Jan 05 2019 00:00:00 GMT+0800 (中国标准时间)

传递四个数字，前三个不变，第四个表示当天的几点，从 0 到 23

var time = new Date(2019, 00, 05, 22) 
console.log(time) // Sat Jan 05 2019 22:00:00 GMT+0800 (中国标准时间)

传递五个数字，前四个不变，第五个表示的是该小时的多少分钟，从 0 到 59

var time = new Date(2019, 00, 05, 22, 33) 
console.log(time) // Sat Jan 05 2019 22:33:00 GMT+0800 (中国标准时间)

传递六个数字，前五个不变，第六个表示该分钟的多少秒，从 0 到 59

var time = new Date(2019, 00, 05, 22, 33, 55) 
console.log(time) // Sat Jan 05 2019 22:33:55 GMT+0800 (中国标准时间)

此外还有获取当前时间的方式：

//getFullYear 获取指定字符串的的年份
var time = new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getFullYear()) // 2019

//getMonth 获取指定字符串中的月份
var time = new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getMonth()) // 3
//注意：岳峰是从0开始的，即0表示一月，1表示二月

//getDate 获取当前时间的日期数
var time = new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getDate()) // 3

//getHours 获取当前字符串中的小时数
var time = new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getHours()) // 8

//getMinutes 获取当前字符串时间中的分钟数
var time = new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getMinutes()) // 0

//getSeconds 获取当前字符串中的时间的秒钟数
var time = new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getSeconds()) // 22

//getDat 获取当前字符串中的星期数
var time = new Date(2019, 03, 08, 08, 00, 22)
console.log(time.getDay()) // 1

//getTime 执行时间到格林威治时间的毫秒数
var time = new Date(2019, 03, 08, 08, 00, 22)
console.log(time.getTime()) // 1554681622000

A-13-3 获取时间差

是指获取两个时间点之间相差的时间
在 js 中是不能用时间直接做减法的，所以我们需要一些特殊的操作
在编程的世界里面，有一个特殊的时间，是 1970年01月01日00时00分00秒
这个时间我们叫做 格林威治时间
所有的编程世界里面，这个时间都是一样的，而且 格林威治时间 的数字是 0
从格林威治时间开始，每经过1毫秒，数字就会 + 1
所以我们可以获取到任意一个时间节点到 格林威治时间 的毫秒数
然后在用两个毫秒数相减，就能得到两个时间点之间相差的毫秒数
我们在通过这个毫秒数得到准确的时间

A-13-4 定时器

js中有两种定时器：倒计时定时器和间隔定时器

1：倒计时定时器
倒计时多少时间以后执行函数
语法： setTimeout(要执行的函数,间隔时间)
会在你设定的时间以后，执行函数
代码块：

var timerId = setTimeout(function () {
  console.log('执行')
}, 1000)
console.log(timerId) // 1

时间是按照毫秒进行计算的，1000 毫秒就是 1秒钟
所以会在页面打开 1 秒钟以后执行函数
只执行一次，就不在执行了
返回值是，当前这个定时器是页面中的第几个定时器

2：间隔定时器
每间隔多少时间就执行一次函数
语法： setInterval(要执行的函数,间隔多少时间)

var timerId = setInterval(function () {
  console.log('我执行了')
}, 1000)

时间和上者一样，是按照毫秒进行计算的
每间隔 1 秒钟执行一次函数，只要不关闭，会一直执行
返回值是，当前这个定时器是页面中的第几个定时器

3：定时器的返回值

设置定时器的时候，他的返回值是部分 setTimeout 和 setInterval 的
只要有一个定时器，那么就是一个数字

var timerId = setTimeout(function () {
  console.log('倒计时定时器')
}, 1000)

var timerId2 = setInterval(function () {
  console.log('间隔定时器')
}, 1000)

console.log(timerId) // 返回值为1
console.log(timerId2) // 返回值为2

4：关闭定时器
我们刚才提到过一个 timerId，是表示这个定时器是页面上的第几个定时器这个 timerId 就是用来关闭定时器的数字
我们有两个方法来关闭定时器 clearTimeout 和 clearInterval

var timerId = setTimeout(function () {
  console.log('倒计时定时器')
}, 1000)
clearTimeout(timerId)

var timerId2 = setInterval(function () {
  console.log('间隔定时器')
}, 1000)
coearInterval(timerId2)

关闭后都不会执行。原则上：clearTimeout 关闭 setTimeout ，clearInterval 关闭 setInterval
但是其实是通用的，他们可以混着使用

A-14 BOM

· BOM ( Browser Object Mode1 ) : 浏览器对象模型
· 起始就是操作浏览器的一些能力

· 我们可以操作哪些内容：
1、获取浏览器的一些相关信息（窗口大小）
2、操作浏览器进行页面跳转
3、操作当前浏览器地址栏信息
4、操作浏览器的滚动条
5、浏览器的信息（浏览器的版本）
6、让浏览器出现一个弹出框（alert/confirm/prompt）
…

· BOM的核心就是window对象
· window时浏览器内置的一个对象，里面包含着操作浏览器的方法

A-14-1 获取浏览器窗口的尺寸

innerHeight innerWidth 分别获取高度和宽度（包含滚动条）

var windowHeight = window.innerHeight
console.log(windowHeight)

var windowWidth = window.innerWidth
console.log(windowWidth)

A-14-2 浏览器的弹出层

alert 是在浏览器弹出一个提示框

window.alert('我是一个提示框')

这个弹出层知识一个提示内容，只有一个确定按钮
点击确定按钮以后，这个提示框就消失了

confirm 是在浏览器弹出一个询问框

var boo = window.confirm('我是一个询问框')
console.log(boo)

这个弹出层有一个询问信息和两个按钮
当你点击确定的时候，就会得到 true
当你点击取消的时候，就会得到 false

prompt 是在浏览器弹出一个输入框

var str = window.prompt('请输入内容')
console.log(str)

这个弹出层有一个输入框和两个按钮
当你点击取消的时候，得到的是 null
当你点击确定的时候得到的就是你输入的内容

A-14-3浏览器的地址信息

在 window 中有一个对象叫做 location
就是专门用来存储浏览器的地址栏内的信息的

location.href 这个属性存储的是浏览器地址栏内 url 地址的信息

console.log(window.location.href)

会把中文变成 url 编码的格式
location.href 这个属性也可以给他赋值

window.location.href = './index.html'
// 这个就会跳转页面到后面你给的那个地址

location.reload

location.reload() 这个方法会重新加载一遍页面，就相当于刷新是一个道理

语法：window.location.reload()

注意：不要写在全局，不然浏览器就会一直处在刷新状态

A-14-4 浏览器的历史记录：

window 中有一个对象叫做 history是专门用来存储历史记录信息的

history.back

history.back 是用来会退历史记录的，就是回到前一个页面，就相当于浏览器上的 ⬅️ 按钮

window.history.back()
前提是你要有上一条记录，不然就是一直在这个页面，也不会回退

history.forword
是去到下一个历史记录里面，也就是去到下一个页面，就相当于浏览器上的 ➡️ 按钮

语法：window.history.forward()
前提是你要之前有过回退操作，不然的话你现在就是最后一个页面，没有下一个

A-14-5 浏览器的 onload 事件：

这个不在是对象了，而是一个事件
是在页面所有资源加载完毕后执行的

window.onload = function () {
  console.log('页面已经加载完毕')
}

在html页面中把js写在head里面：

<html>
  <head>
    <meta charset="UTF-8" />
    <script>
    	// 这个代码执行的时候，body 还没有加载
      // 这个时候我们就获取不到 body 中的那个 div

      // 就需要使用 window.onload 事件
      window.onload = function () {
        // 这个函数会在页面加载完毕以后在执行
        // 那么这个时候页面的 DOM 元素都已经加载了，我们就可以获取 div 了
      }
    </script>
  </head>
  <body>
    <div></div>
  </body>
</html>

在html页面中把js写在body最后面：

<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div></div>

    <script>
    	// 这个代码执行的时候，body 已经加载完毕了
      // 在这里就可以获取到 div，写不写 window.onload 就无所谓了

      window.onload = function () {
        // 这个函数会在页面加载完毕以后在执行
        // 那么这个时候页面的 DOM 元素都已经加载了，我们就可以获取 div 了
      }
    </script>
  </body>
</html>

A-14-6 浏览器的onscroll事件：

这个 onscroll 事件是当浏览器的滚动条滚动的时候触发或者鼠标滚轮滚动的时候出发

window.onscroll = function () {
  console.log('浏览器滚动了')
}

注意：前提是页面的高度要超过浏览器的可是窗口才可以

1、浏览器滚动的距离

浏览器内的内容即然可以滚动，那么我们就可以获取到浏览器滚动的距离

BUT，浏览器真的滚动了吗？
其实我们的浏览器是没有滚动的，是一直在那里

滚动的是什么？是我们的页面所以说，其实浏览器没有动，只不过是页面向上走了所以，这个已经不能单纯的算是浏览器的内容了，而是我们页面的内容所以不是在用 window 对象了，而是使用 document 对象

scrollTop
获取的是页面向上滚动的距离
一共有两个获取方式document.body.scrollTop和document.documentElement.scrollTop

window.onscroll = function () {
  console.log(document.body.scrollTop)
  console.log(document.documentElement.scrollTop)
}

两个都是获取页面向上滚动的距离

区别：

IE 浏览器：
没有 DOCTYPE 声明的时候，用这两个都行
有 DOCTYPE 声明的时候，只能用 document.documentElement.scrollTop

Chrome 和 FireFox：
没有 DOCTYPE 声明的时候，用 document.body.scrollTop
有 DOCTYPE 声明的时候，用document.documentElement.scrollTop

Safari：
两个都不用，使用一个单独的方法 window.pageYOffset

scrollLeft
获取页面向左滚动的距离
也是两个方法document.body.scrollLeft , document.documentElementLeft

window.onscroll = function () {
  console.log(document.body.scrollLeft)
  console.log(document.documentElement.scrollLeft)
}

两个之间的区别和之前的 scrollTop 一样

本地存储：

localStorage：

//增
localStorage.setItem("name","kerwin")

//取
localStorage.getItem("name")

//删
localStorage.removeItem("name")

//清空
localStorage.clear()

sessionStorage：

//增
sessionStorage.setItem("name","kerwin")

//取
sessionStorage.getItem("name")

//删
sessionStorage.removeItem("name")

//清空
sessionStorage.clear()