JavaScript笔记50-75

数组的常用方法：

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

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

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

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

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

var arr = [1, 2, 3]

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

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

数组常用方法之 pop
pop 是用来删除数组末尾的一个元素

var arr = [1, 2, 3]

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

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

数组常用方法之 unshift
unshift 是在数组的最前面添加一个元素

var arr = [1, 2, 3]

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

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

数组常用方法之 shift
shift 是删除数组最前面的一个元素

var arr = [1, 2, 3]

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

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

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

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

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

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

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

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

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

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

arr.splice(1, 2, '我是新内容') 表示从索引 1 开始截取 2 个内容
然后用第三个参数把截取完空出来的位置填充

数组常用方法之 reverse
reverse 是用来反转数组使用的

var arr = [1, 2, 3]

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

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

数组常用方法之 sort
sort 是用来给数组排序的

var arr = [2, 3, 1]

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

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

这个只是一个基本的简单用法

数组常用方法之 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 方法不会改变原始数组

数组常用方法之 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 方法不会改变原始数组，而是返回链接好的字符串

数组常用方法之 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

你要找的值在数组中不存在，那么就会返回 -1

数组常用方法之 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)
})

forEach() 的时候传递的那个函数，会根据数组的长度执行
数组的长度是多少，这个函数就会执行多少回

数组常用方法之 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]

数组常用方法之 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 的项

字符串

创建字符串：

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

//字面量：
var str = 'hello'

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

字符集：

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

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

unicode 编码：

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

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

字符串的常用方法：

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

charAt：

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

indexOf：

indexOf 就是按照字符找到对应的索引

var str = 'Jack'

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

console.log(index) // 0

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

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

toLowerCase 和 toUpperCase：

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

var str = hello

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

console.log(upper) // HELLO

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

console.log(lower) // hello

Math

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

random：

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

var num = Math.random()
console.log(num) // 得到一个随机数

round：

Math.round() 是将一个小数四舍五入变成一个整数

var num = 10.1
console.log(Math.round(num)) // 10

var num2 = 10.6
console.log(Math.round(num2)) // 11

abs：

Math.abs() 是返回一个数字的绝对值

var num = -10
console.log(math.abs(num)) // 10

ceil：

Math.ceil() 是将一个小数向上取整得到的整数

var num = 10.1
console.log(Math.ceil(num)) // 11

var num2 = 10.9
console.log(Math.ceil(num2)) // 11

floor：

Math.floor() 是将一个小数 向下取整 的到的整数

var num = 10.1
console.log(Math.floor(num)) // 10

var num2 = 10.9
console.log(Math.floor(num2)) // 10

max：

Math.max() 得到的是你传入的几个数字之中 最大 的那个数字

console.log(Math.max(1, 2, 3, 4, 5)) // 5

min：

Math.min() 得到的是你传入的几个数字之中 最小 的那个数字

console.log(Math.min(1, 2, 3, 4, 5)) // 1

PI：

Math.PI 得到的是 π 的值，也就是 3.1415936...

console.log(Math.PI) // 3.141592653589793

因为计算机的计算精度问题，只能得到小数点后 15 位

使用 Math.PI 的时候，是不需要加 () 的

Date

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

new Date()

new Date() 在不传递参数的情况下是默认返回当前时间

var time = new Date()
console.log(time) // 当前时间 Fri Mar 01 2019 13:11:23 GMT+0800 (中国标准时间)

new Date() 在传入参数的时候，可以获取到一个你传递进去的时间

var time = new Date('2019-03-03 13:11:11')
console.log(time) // Sun Mar 03 2019 13:11:11 GMT+0800 (中国标准时间)

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 (中国标准时间)

传入字符串的形式

console.log(new Date('2019')) 
// Tue Jan 01 2019 08:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2019-02')) 
// Fri Feb 01 2019 08:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2019-02-03')) 
// Sun Feb 03 2019 08:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2019-02-03 13:')) 
// Sun Feb 03 2019 13:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2019-02-03 13:13:')) 
// Sun Feb 03 2019 13:13:00 GMT+0800 (中国标准时间)
console.log(new Date('2019-02-03 13:13:13')) 
// Sun Feb 03 2019 13:13:13 GMT+0800 (中国标准时间)

将日期字符串格式化成指定内容

比如我们得到的时间字符串是 Sun Feb 03 2019 13:13:13 GMT+0800 (中国标准时间)
我指向得到这个日期中是那一年，我们就要靠截取字符串的形式得到
但是现在 js 为我们提供了一系列的方法来得到里面的指定内容

getFullYear：

getFullYear() 方式是得到指定字符串中的哪一年

var time = new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getFullYear()) // 2019

getMonth：

getMonth() 方法是得到指定字符串中的哪一个月份

var time = new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getMonth()) // 3

这里要有一个注意的地方

月份是从 0 开始数的

0 表示 1月，1 表示 2月，依此类推

getDate：

getDate() 方法是得到指定字符串中的哪一天

var time = new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getDate()) // 3

getHours：

getHours() 方法是得到指定字符串中的哪小时

var time = new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getHours()) // 8

getMinutes：

getMinutes() 方法是得到指定字符串中的哪分钟

var time = new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getMinutes()) // 0

getSeconds：

getSeconds() 方法是得到指定字符串中的哪秒钟

var time = new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getSeconds()) // 22

getDay：

getDay() 方法是得到指定字符串当前日期是一周中的第几天（周日是 0，周六是 6）

var time = new Date(2019, 03, 08, 08, 00, 22)
console.log(time.getDay()) // 1

getTime：

getTime() 方法是得到执行时间到 格林威治时间 的毫秒数

var time = new Date(2019, 03, 08, 08, 00, 22)
console.log(time.getTime()) // 1554681622000

获取时间差：

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

定时器

在 js 里面，有两种定时器，倒计时定时器和间隔定时器

倒计时定时器：
倒计时多少时间以后执行函数
语法： setTimeout(要执行的函数，多长时间以后执行)
会在你设定的时间以后，执行函数

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

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

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

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

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

定时器的返回值：

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

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

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

console.log(timerId) // 1
console.log(timerId2) // 2

关闭定时器：

我们刚才提到过一个 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
但是其实是可以通用的，他们可以混着使用

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

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

BOM

BOM（Browser Object Model）： 浏览器对象模型
其实就是操作浏览器的一些能力
我们可以操作哪些内容

获取一些浏览器的相关信息（窗口的大小）
操作浏览器进行页面跳转
获取当前浏览器地址栏的信息
操作浏览器的滚动条
浏览器的信息（浏览器的版本）
让浏览器出现一个弹出框（alert / confirm / prompt）

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

获取浏览器窗口的尺寸：

innerHeight 和 innerWidth
这两个方法分别是用来获取浏览器窗口的宽度和高度（包含滚动条的）

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

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

浏览器的弹出层：

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

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

这个弹出层知识一个提示内容，只有一个确定按钮
点击确定按钮以后，这个提示框就消失了
confirm 是在浏览器弹出一个询问框

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

这个弹出层有一个询问信息和两个按钮
当你点击确定的时候，就会得到 true
当你点击取消的时候，就会得到 false`` ``prompt 是在浏览器弹出一个输入框

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

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

浏览器的地址信息：

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

location.href：

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

console.log(window.location.href)

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

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

location.reload：

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

window.location.reload()

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

浏览器的历史记录：

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

history.back：

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

window.history.back()

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

history.forword：

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

window.history.forward()

前提是你要之前有过回退操作，不然的话你现在就是最后一个页面，没有下一个

浏览器的 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>

浏览器的onscroll事件：

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

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

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

浏览器滚动的距离：

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

思考一个问题？浏览器真的滚动了吗？
其实我们的浏览器是没有滚动的，是一直在那里

滚动的是什么？是我们的页面所以说，其实浏览器没有动，只不过是页面向上走了所以，这个已经不能单纯的算是浏览器的内容了，而是我们页面的内容所以不是在用 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()