JS 基础（11月1日）_trimleft 弃用-优快云博客

文章目录

JS 概述

（全程简化）

什么是 js 的组成？

ECMAScript（es）其实就是js的规范（规则）
DOM 文档对象模型 div span
BOM 浏览器对象模型

JS 的使用方式

行内样式内嵌式外链式

变量

var 代表关键字：代表创建变量

var i = 200;

变量的赋值：默认值 undefined

console.log（打印东西）

console.log (我们想要打印的数据)

预解析

程序会先解析定义 var 和 function
比如使用 a 在最前面，定义 a 在最后面。那么打印a 就是 a = undefined ，因为提前解析了。但是没有赋值。

值的类型

基础数据类型（简单数据类型）
数字类型	整数，浮点数
字符串类型	string类型
undefined类型	未定义
布尔类型	true/false
null类型	空

复杂数据类型	引用数据类型
object类型

检测类型的方式

typeof（要检测的数据）

console.log(Object.prototype.toString.call(null))//任何数据都能精确的打印

值类型的转换

Number方法

纯数字字符串转为对应数字

let a = "10";
let number = Number(a);
console.log(typeof number) // number

空字符串和空白字符串都是0

let b = ""//空字符串
let c = " "//空白字符串
console.log(Number(b)) //0
console.log(Number(c))//0

布尔值：true转为1，false转为0

undefined：转为NaN

null：转为0

//根据js的转换规则
console.log(typeof Number(undefined)) // NaN
//NaN 非数字的数字
console.log(typeof Number(null))//0

console.log(typeof Number(false))//0
console.log(typeof Number(true))//1

parseInt（字符串转整数）

对数字取整直接舍弃小数部分，只保留整数

console.log(parseInt(1.1)) //1

将字符串转为整数数字，也包含取整功能

console.log(parseInt("1.9")) //1

字符串中，必须是纯数字字符串或者数字字符开头的字符串，才能转换为正常数字，且只取整数部分

// 后面的舍弃了，只取1234
console.log(parseInt("1234aaaa569")) //1234

如果不是数字打头的字符串，会转换为NaN

console.log(parseInt("cxc1234aaaa569")) //NaN

parseFloat（字符串转浮点数）

满足浮点数数字字符必须以数字开头，否则全是NaN

只留下第一个小数点

console.log(parseFloat("1.56.36")) //1.56

转换字符串（toString）

变量.toString() 方法

let a = 112233;
console.log(a.toString()) // 112233

String(变量) 方法

let a = 112233;
let s = String(a);
console.log(s) // 112233

+ 号拼接字符串方式

转Boolean

Boolean(变量)方法

转为false：NaN、0、“”空字符串、null、undefined
转为true：非0 非NaN数字、非空字符串

运算符

除了加法不是number ，其余都是

console.log(2-'2') //0 是number
console.log(2*'2') //4 是number
console.log(2/'2') //1 是number
console.log(7%'2')// 1 是number

逻辑运算符

逻辑运算符： &&的优先级高于 ||

函数

形参

形参与实参会一一对应，如果少了，那么对应的形参是undefined

返回值

我们可以不写return 函数

默认在代码段最后一行，写上return undefined

函数预解析

预解析时，会把函数的定义提升到最前面
如果遇到同名的变量并且变量没有赋值，还是以函数为主
如果变量赋值了，以变量为主

作用域

全局作用域

JS给我们提供了一个叫做window的全局作用域，可以理解为整个script标签内的作用域，就是全局作用域

全局变量都会挂载到 window 对象上

在script中定义的变量是全局变量

因为全局作用域window 上有一个属性叫name，所以我们的全局变量，要避免起名的时候叫做name

console.log(name) // 打印是空白，但是存在。

对象

函数—对象—数组三个都是复杂数据类型

字面量创建对象

下面 name 是键阿坤是值
对象内部就是键值对

var obj={} //声明一个变量obj，内部的值是一个空对象

var obj1={ 
    //声明一个变量为obj1，内部的值是一个对象
    //这个对象有个属性，属性名：name 属性值：'陈明旭'
    name:'阿坤',//！！注意，这里是逗号（,）不是分号（;）
    age：18,
    un:undefined,
    boole:false
    
    100:'1000'//正常来说，对象的key很少用数字命名
}
console.log(obj1) //打印

通过内置的构造函数

var obj=new Object() // object首字母大写

如何操作对象

点语法

console.log(1111) //这就是一个点语法

案例

var obj={
    name：'张三',
}

点语法查

//1.1 点语法 查
console.log(obj.name) //zhangsan
console.log(obj.age) //undefined

点语法增

//1.2 点语法 增：
obj.age=666
obj.abc=888
obj.zbc=999
console.log(obj)

点语法改

//1.3 点语法 改
obj.name ='lisi'
console.log(obj.name) //lisi

点语法删

//1.4 点语法 删
delete obj.name
console.log(obj) //{age:666}

中括号语法（数组语法）

案例

var obj={
    name:'zhangsan'
}

中括号语法查

表示查找 name 的字段值

//2.1 中括号语法 查
console.log(obj['name'])//zhangsan

中括号语法增

//2.2 中括号语法 增
obj['age']=18
console.log(obj)

中括号语法改

//2.3 中括号语法 改
obj['name']='lisi'
console.log(obj['name'])

中括号语法删

//2.4 中括号语法 删
delete obj['name']
console.log(obj)

中括号和点法的区别

符合变量的命名规范或者规则，两者没有差异
如果不符合，那么就有差异，就比如数字或者特殊符号，就只能通过，中括号语法
如果是变量相关的，只能使用中括号语法

循环遍历对象

语法：key 就是每一个键

for(var key in 对象名){}

案例

let res = {
    name: 'hello',
    age: 18,
    un: undefined,
    boole1: false,
    boole2: true
};
// k 是键，res[k] 是值
for (let k in res) {
    console.log(k + res[k])
}

数组

内置构造函数，创建数组

var arr = new Array(); //创建一个空数组
var arr2= new Array(1,2,3,4,5) //创建一个有值的数组
var arr3 = new Array(10) //创建一个有长度的数组

数组的方法

push 在数组末尾添加元素

返回值：追加数据后，数组最新的长度

var arr = [1, 2, 3]
// 向数组最后添加元素
var num = arr.push(100)
// 返回数组最新长度 num = 4
console.log(arr) // [1,2,3,100]
console.log(num) // 4

unshift 在数组开头添加元素

返回值：追加数据后，数组最新的长度

let arr = [1, 2, 3]
let num = arr.unshift(666)
// 在数组的开头添加 666
console.log(arr) // [666,1,2,3]
console.log(num) // 4

pop 删除数组最后一个数据

返回值：被删除的数据

let arr = [1, 2, 3];
// 删除最后一个元素
let num = arr.pop()
console.log(arr) //[1,2]
// 被删除的元素 3
console.log(num) //3

shift 删除数组第一条数据

返回值：被删除的数据

let arr = [1, 2, 3]
// 删除第一个数据
let num = arr.shift()
console.log(arr) //[2，3]
// 返回被删除的数据
console.log(num) //1

reverse 反转数组

let arr = [1, 2, 3, 4]
// 反转
let arr1 = arr.reverse()
console.log(arr1)//[4,3,2,1]

sort 排序

不传递参数的话，会转成字符串一位一位比较，ascill码值

//1、不传参数
let arr = [3, 5, 1, 2, 2, 100, 250]
let arr1 = arr.sort()
console.log(arr)  // [1, 100, 2, 2, 250, 3, 5]

// 2、传递参数
let arr = [3, 5, 1, 2, 2, 100, 250]
arr.sort(function (a, b){
    // a - b 升序
    // b - a 降序
    return a - b;
});
console.log(arr)  // [1, 2, 2, 3, 5, 100, 250]

splice 截取（包含结尾和开始），可新增数据

语法：

数组.splice(开始索引，多少个)

// 下面新增内容会影响到之前的数组，并且不会返回新增的数据

数组.splice(开始索引，多少个，插入数据1，插入数据2，插入数据3…)

返回值：截取的内容，是一个数组

let arr = [3, 2, 1, 4, 5, 100, 1000, 101]
// 从第 1 位 开始截取，截取到第3位
let arr1 = arr.splice(1,3)
console.log(arr1) //[2,1,4]

let arr = [3, 2, 1, 4, 5, 100, 1000, 101]
// 从第 1 位 开始截取，截取到第3位，新增 nwe
let arr2 = arr.splice(1, 3, 'n', 'w', 'e')
console.log(arr2) //[2,1,4]
// 因为新增了元素，之前数组被更改了
console.log(arr) //[3,'n','w','e',100,1000,101]

slice（截取不包含结尾）

语法：数组.slice(开始索引，结束索引)
可以填写负整数，表示倒数第几个（其实就是length +负整数）
如果不传递第二个参数，默认是length
如果不传递第一个参数，默认是0

返回值：复制出来的部分内容组成的新数组

let arr = [3, 2, 1, 4, 5, 100, 1000, 101]
let arr1 = arr.slice(1,)
console.log(arr1) //[2,1]

splice 和 slice 的差异（一定是高频面试题）

参数含义不同
splice 相当于剪切，所以会改变原数组
slice 相当于复制，所以不会改变原数组

concat（元素拼接）

语法：数组.concat(数组1，数组2，数组3，…)

返回值：拼接好的数组

let arr = [1, 2, 3]
console.log('原始arr数据' + arr) // 原始arr数据1,2,3
let arr1 = arr.concat([4, 5, 6])
console.log('拼接好的arr1数据' + arr1) // 拼接好的arr1数据1,2,3,4,5,6

join（连接符）

语法：数组.join()

作用：使用连接符，把数组内的每一个数据拼接成一个字符串连接符根据参数来，不写默认为 , 号

返回值：连接好的数据（字符串）

let arr = [1, 2, 3];
console.log('原始数组' + arr) //原始数组1,2,3
let arr1 = arr.join('+'); 
console.log(arr1) // 1+2+3

indexOf（查找数据，开始索引）

语法：

数组.indexOf(要检查的数据)
数组.indexOf(要检查的数据,开始索引)

返回值：返回这个元素第一次出现的索引，没找到返回 -1

let arr = [1, 2, 3, 3, 2, 1]
let arr3 = arr.indexOf(2, 1);
console.log(arr3) //1(索引号)

lastIndexOf（查找数据，开始索引）

作用：从后向前去查找。第一次数组内，出现的索引号位置，其他同上

filter（数组过滤）

let arr = [52,520,144,330];
let res = arr.filter(function (value, index, array) {
	// 返回 大于 300 的数值 生成新数组 res
    return value > 300;
});
console.log("返回值", res); // 返回值 [520, 330]

find（查找数组中第一个满足条件的数据）

作用：查找数组满足条件的第一个

注意：以return的形式书写查找条件

返回值：

如果数组内有满足条件的数据，那么就是第一个满足条件的数据
如果数组内没有满足条件的数据，那么就是 undefined

let arr = [10, 2, 3, 4, 5];
let res = arr.find(function (value, index, array) {
	// 查找的条件
    return value % 10 === 0
});
console.log('返回值', res) // 返回值 10

findIndex（查找数组中第一个满足条件的数据索引位置）

返回值：

如果数组内满足条件的数据，那么就是第一个满足条件的数据所在的索引位置
如果数组内没有满足条件的数据，那么就是 -1

其他同上一个

let arr = [10, 20, 3, 4, 5];
let res = arr.findIndex(function (value, index, array) {
	// 查找的条件
    return value % 10 === 0
});
console.log('返回值', res) // 返回值 0

every（判断数组的每一项是否都满足）

返回值：都满足 true 否则 false

注意：以return的形式书写判断条件

let arr = [10, 20, 3, 4, 5];
let res = arr.every(function (value, index, array) {
	// 条件 每一项全部 > 大于 100
    return value < 100
});
console.log('返回值', res) // true

some（判断数组中是否有一个满足条件）

作用：判断数组内是否有一个满足条件

注意：以return 的形式书写判断条件

let arr = [10, 20, 3, 4, 5];
let res = arr.some(function (value, index, array) {
    // 条件 每一项 > 大于 400 一个即可
    return value > 400
});
console.log('返回值', res) // 返回值 false

reduce（叠加）

作用：叠加

返回值：最终的叠加结果

注意：以return 的形式书写叠加表达式

let arr = [10, 20, 3, 4, 5];
// function 里面第一个是表示上一项，第二个表示当前数组的元素
let res = arr.reduce(function (prev, item) {
    return prev + item
    // 0 是方法的第二个参数，表示起始值。选填，默认从 0 开始
}, 0)
console.log('返回值', res) // 返回值 42

数组遍历的九种方式

forEach

在开发种，常用第一个参数第二个参数看情况。第三个参数很少使用

语法：数组 . forEach(fucntion (item, index, o){})

item ：数组的每一项（数组的每一个值）
index：数组每一项对应的下标
o：原始数组

let arr = [100, 200, 300, 400, 500];
arr.forEach(function (value, index, array) {
    console.log(value) // 获取数组中的每一个值
    console.log(index) // 获取数组中的每一个索引
    console.log(array) // 这是数组
})

map 遍历

跟forEach 相同，但是多了一个返回值，可以对数据进行加工，返回新数组

let arr = [100, 200, 300, 400, 500]
let arr1 = arr.map(function (item, index, o) {
	// 加工
    return item / 100
})

数组塌陷

原因

let arr = [100, 200, 300, 400];
console.log('初始数组', arr)
for (let i = 0; i < arr.length; i++) {
    // 每截取一位，源数组就会少一个值，导致数组塌陷
    arr.splice(0, 1)
    // i = 0  截取一位，源数组长度 3
    // i = 1  截取一位，源数组长度 2
    // i = 2 , 2 < 2 不成立，结束循环
}
console.log(arr) // [300, 400]

方案一（倒着循环数组）

let arr = [100, 200, 300, 400];
console.log('初始数组', arr)
for (let i = arr.length - 1; i >= 0; i--) {
    // 因为每次删除一个，i 也每次减少一个。所以不会塌陷
    arr.splice(i, 1)
}
console.log(arr) // []

方案二

let arr = [100, 200, 300, 400]
console.log('初始数组', arr)
for (let i = 0; i < arr.length; i++) {
    arr.splice(i, 1)
    // 截取一个之后退一步就解决了
    i--
}
console.log(arr)

数组去重

方案1

let arr = [1, 2, 2, 2, 5, 1, 1, 4, 5, 3, 1, 3, 1, 2];
console.log('原始数组', arr)
/*
    1、直接遍历
    2、拿到当前这个，和当前以后进行比较，是否有一样的
    3、只要有一样的，就干掉一个
*/
for (let i = 0; i < arr.length; i++) {
    //当前这个：arr[i]
    //如何知道后面有没有了：indexOf(查找谁，从哪个索引开始)
    //查找谁 arr[i]
    //那开始 i+1
    //如果后面找到了，返回值就是找到的哪个的数据的索引位置
    //如果后买你没找到，返回值 -1
    //只要不是 -1 ，就等于干掉了一个
    let index = arr.indexOf(arr[i], i + 1);
    if (index !== -1) {
        arr.splice(index, 1)
        i--
    }
}

方案2

let arr = [1, 2, 2, 2, 5, 1, 1, 4, 5, 3, 1, 3, 1, 2];
// 思路: 排序
arr.sort()
//2、遍历
//	判断，当前这个 和下一个，只要一样，随便删除一个
for (let i = 0; i < arr.length; i++) {
    if (arr[i] === arr[i + 1]) {
        arr.splice(i, 1)
        i--
    }
}
console.log('处理后的数组', arr) //[1, 2, 3, 4, 5]

方案3

let arr = [1, 2, 2, 2, 5, 1, 1, 4, 5, 3, 1, 3, 1, 2];
let newArr = [];
for (let i = 0; i < arr.length; i++) {
    //使用 indexOf 判断这个元素在新数组中有没有没有就加上
    if (newArr.indexOf(arr[i]) === -1) {
        newArr.push(arr[i])
    }
}
console.log(newArr)  // [1, 2, 5, 4, 3]

方案4

    /*
        思路：
            1、创建一个对象
                特点：键名不能重复，一样就是修改
                特点：可以用纯数字当作键名
            
    */
    let arr = [1, 2, 2, 2, 5, 1, 1, 4, 5, 3, 1, 3, 1, 2];
    let obj = {};
    //2、遍历原始数组，把每一个数据当作obj内的键名来使用
    for (let i = 0; i < arr.length; i++) {
        let item = arr[i];
        //把item当作 obj 内的键名来使用
        obj[item] = 'cmx'
    }
    //把原始数组清空。
    arr.length = 0
    //console.log("清空之后：",arr)
    //4、遍历obj。把每一个 键名依次 插入到arr 内
    for (let k in obj) {
        arr.push(k - 0)
    }
    console.log('去重之后：', arr)

方案5

let arr = [1, 2, 2, 2, 5, 1, 1, 4, 5, 3, 1, 3, 1, 2];
for (let i = 0; i < arr.length; i++) {
    let index = arr.indexOf(arr[i], i + 1);
    while (index !== -1) {
        arr.splice(index, 1)
        //注意：因为重复的时候，如果 index 不变，那么就是死循环
        //注意：因为重复的时候，如果 index 不变，那么就是死循环
        //需要让，index 修改一下
        index = arr.indexOf(arr[i], i + 1)
    }
}

方案6

/*利用 Set 数据结构
    特点：不允许存储重复数据
    语法：var s=new Set([数据1，数据2，数据3]，...)
    var s=new Set([100,200,300])
    console.log(s)
    
*/
let arr = [1, 2, 2, 2, 5, 1, 1, 4, 5, 3, 1, 3, 1, 2];
let s = new Set(arr);
console.log(s)
//2、把Set 数据结构还原成一个数组
//方法1：Array.from(数据)
//	返回值：把该数据还原成一个数组
// var r1=Array.from(s)
//console.log(r1)

//方法2 使用 ... 运算符 展开运算符
// var r2=[... s] 
//console.log(r2)

//书写：
let r1 = Array.from(new Set(arr));
let r2 = [...new Set(arr)];
console.log(r1)
console.log(r2)

数据类型

数据类型的区别
存储：	基本数据类型：直接把值存储在栈内存里面
	复杂数据类型：把数据放在堆内存存储，把数据地址放在栈内存中
赋值：	基本数据类型的赋值：就是直接值的复制，赋值完毕，两个变量没有关系
	复杂数据类型的赋值：就是进行地址的复制，赋值完毕，两个变量操作一个存储空间
比较：	基本数据类型：进行值的比较
	复杂数据类型：进行地址的比较

回调函数

一种调用方式
概念
1. 把函数A当作参数传递到函数B内
2. 在函数B 内利用形参方式来调用函数A
3. 我们管函数A 叫做函数B 的回调函数（callback）
使用：
1. 需要封装异步代码的时候
2. 需要封装循环相关的时候

字符串

是一个js内的基本数据类型 String
包装数据类型（了解）
1. 在js内，字符串/布尔/数值。也是包装数据类型
2. 平时存储时候，是按照基本数据类型存储
3. 当你是用该数据的时候，会瞬间转换成复杂数据类型的形式让你使用
4. 当使用完毕，再次转换成基本数据类型的形式存储

模板字符串

使用反引号（``）定义字符串
特点：

可以换行书写
可以直接在字符串内解析变量，当你需要解析的时候，书写 ${变量}

var str = '23';
console.log(`你好， 我叫阿坤，今年${str}岁了，我喜欢睡觉`);

字符串注意事项

如果打印的超过长度，都是undefined

let str = 'hello world'
console.log('原始字符串 : ', str) // 原始字符串 :  hello world
console.log(str[100]) // undefined
//尝试修改, 不能修改
str[1] = 'z'
console.log(str) // hello world

字符串常用方法

chartAt（返回当前元素）

返回值：

如果字符串内有该索引位置，那么就返回索引位置的字符
如果字符串没有该索引位置，那么就返回空字符串（’”）

str = 'hello world'
var res = str.chartAt(1) // e

charCodeAt

语法：字符串.charCodeAt(索引)

返回值：

如果字符串内有该索引位置，那么就是该索引字符的编码（unicode）
如果字符串内没有该索引位置，那么就是 NaN

let str = 'hello world'
let res = str.charCodeAt(1); // 查找 e 的 unicode 编码
console.log(res) // 101

toUpperCase （转大写并返回）

语法：字符串.toUpperCase()

toLowerCase（转小写并返回）

语法：字符串.toLowerCase()

substr（截取、要前也要后）（已弃用）

let str = 'hello world'
//表示 从[2] 开始 ，截取到 [7] 位置的内容
let res = str.substr(2, 7);
console.log(res) // llo wor

substring（截取、要前不要后）

let str = 'hello world'
//表示从 [2] 截取到 [7],包含 [2] 位置字符，不包含[7] 位置字符
let res = str.substring(2, 7);
console.log(res) // llo w

slice（截取、要前不要后）

特点：可以写负数

let str = 'hello world'
//表示从 [2] 截取到 [7],包含 [2] 位置字符，不包含[7] 位置字符
let res = str.slice(-9, -4); // -4 倒数第四个
console.log(res) // llo w

replace（替换字符）

注意：值能替换出现一个

返回值：替换好的字符串

let str = 'hello world'
//把str字符串的第一个 ’l‘ 字符替换成 ’*‘
let res = str.replace('l', '*');
console.log(res) // he*lo world

split（切割转数组）

语法：字符串.split(分隔符)

作用：按照分隔符把字符串分隔分开

返回值：一个数组

如果填写的是 “”(空字符串), 那么按照索引逐位分开

let str = '2022-10-3';
// 表示使用 '-' 把 str 分隔成 若干个 部分
// let res = str.split('-') // ['2022', '10', '3']
// 如果填写的是 '', 那么按照索引逐位分开
let res = str.split('')
console.log(res) // ['2', '0', '2', '2', '-', '1', '0', '-', '3']

indexOf（查找数据，开始索引）

语法：字符串.indexOf(检测的字符段片段，开始索引)

返回值：返回这个元素第一次出现的索引，没找到返回 -1

let str = '2022-10-3';
let res = str.indexOf('2', 1); // 从第二个元素开始查找  
console.log(res) // 返回 2

lastIndexOf（从后向前检索，其他同上）

concat（拼接字符串）

语法：原始字符串.concat(字符串1，字符串2，字符串3，…)
返回值：拼接好的字符串

trim（去除结尾的空格）

let str = " 1234  ";
// 去除结尾的空格
let res = str.trim();
console.log('trim : ', res) // trim :  1234

trimStart / trimLeft（去除开始的空格）

let str = " 1234  ";
let res = str.trimStart();
console.log(res) // 1234  
res = str.trimLeft(); // 已经弃用
console.log(res) //1234

trimEnd / trimRight（去除结尾的空格）

let str = " 1234  ";
let res = str.trimEnd();
res = str.trimRight(); // 已经弃用
console.log(res) //  1234

查询字符串

如何把对象数据结构转换成查询字符串

let obj = {name: 'Jack', age: 18, gender: '男'};
//结果：'name=Jack&age=18&gender=男'
//提前准备一个字符串，接受拼接结果
let str = '';
//循环遍历对象
for (let objKey in obj) {
    str += `${objKey}=${obj[objKey]}&`
}
// 从零开始，倒着切一位
let splice = str.slice(0, -1);
console.log(splice) // name=Jack&age=18&gender=男

如何把查询字符串转换成对象数据结构

//定义一个字符串
let str = 'name=Jack&age=18&gender=男'
//定义一个对象
let o = {};
//使用'&'把str 字符串 分割成数组
let split = str.split('&');
split.forEach(function (value, index, array) {
    let str = value.split('=');
    o[str[0]] = str[1];
})
console.log(o)

json 字符串

json格式字符串

‘{“name”:“Jack”，“age”:18}’
‘[{“name”:“cmx”},{“name”:“cmx”}]’
要求：key 和 value 必须被双引号包裹，数字和布尔除外

把JS数据结构，转换成json格式字符串

语法：JSON.stringify(JS的数据结构)

//返回值：一个合法的 json 格式字符串
let obj = {name: 'Jack', age: 22, gender: '男'}
//把 obj 转成json 格式字符串
let str = JSON.stringify(obj)
console.log(str) // {"name":"Jack","age":22,"gender":"男"}
console.log(typeof str) //string

把 json 格式化字符串，转换成 JS的数据结构

//语法：JSON.parse(json格式字符串)
let str = '{"name":"cmx","age":18,"gender":"男"}';
//把字符串 str 当作json 格式化字符串转换成JS的数据结构
let obj = JSON.parse(str);
console.log(obj) // {name: 'cmx', age: 18, gender: '男'}

数字

常用方法

Math.random（随机数）

返回值：一个 0~1之间的随机数，有可能包含0 但是绝不可能包含1

Math.round（四舍五入）

返回值：对该数字进行四舍五入取整以后的结果

>= 5 ，向上取值， < 5 向下取整

负数有点不同

console.log(Math.round(-10.5))//11

Math.ceil（向上取整)

返回值：对该数字进行向上取整以后的结果

Math.floor（向下取整）

返回值：对该数字进行向下取整以后的结果

Math.abs（绝对值）

返回值：该数字的绝对值

Math.pow（x 的 y 次方）

math.pow(底数，指数)
Math.pow(谁，的多少次)

返回值：取幂结果

Math.sqrt（平方根）

返回值：该数字的算数平方根

Math.max / Math.min（若干个数字最大值 / 最小值）

Math.PI（近似 Π）

保留小数

语法：数字.toFixed(你要保留多少位的小数)

返回值：以字符串的形式返回保留好的小数位的数字，小数位不够的时候用 0 补，并且四舍五入

let n = 10.23456789;
let res = n.toFixed(3);
console.log(res)//10.235

转换进制数

十进制转换成其他进制（这是个秘密）

语法：数字.toString(你要转换的进制数)
返回值：以字符串的形式返回转换好的进制数字
参数范围：2~36

var n = 8
var res = m.toString(16)
console.log(res)

其他进制数字转换成十进制

语法：parseInt(你要转换的数字，你把这个数字当作几进制)
返回值：转换好的十进制数字，数值类型

// 把这个进制当成 8 进制转换
let number = parseInt('32', 8);
console.log(number) //26

时间对象

创建时间对象

var time = new Date() //当前时间

创建指定之间节点的时间对象

传递一个数字表示毫秒数
传递多个数字，分别表示，年月日时分秒毫秒
多个参数

// 自动进位了
let time = new Date(2005, 11, 31, 23, 59, 59, 999 + 1); 
console.log(time) //Sun Jan 01 2006 00:00:00 GMT+0800 (中国标准时间)

传递字符串

YYYY-MM-DD HH-mm:ss‘
‘YYYY/MMMM/DD HH:mm:ss’
注意：年月日和时分秒之间有一个空格
注意：月份位置，1 表示 1月，12月表示 12 月

//1、
let time = new Date("2008-8-8 20:00:00"); //Fri Aug 08 2008 20:00:00 GMT+0800
//2、
let time1 = new Date('2008/8/8 20:00:00');//Fri Aug 08 2008 20:00:00 GMT+0800
console.log(time1)

常用方法

getFullYear（获取年份）/ setFullYear（设置年份）

let time = new Date();
let fullYear = time.getFullYear();
console.log(fullYear) //打印年份

getMonth（获取月份） / setMonth（设置月份）

注意：0 表示 1 月，11 表示 12 月

let m = new Date().getMonth();
console.log(m)

getDate（获取几号 / 日期）/ setDate（设置日期）

返回值：该时间对象内的日期信息

let m = new Date().getDate();
console.log(m)

getHours（获取小时）/ setHours（设置小时）

let m = new Date().getHours();
console.log(m)

getMinutes（获取分钟）/ setMinutes（设置分钟）

let m = new Date().getMinutes();
console.log(m)

getSeconds（获取秒钟）/ setSeconds（设置秒种）

let m = new Date().getSeconds();
console.log(m)

getMilliseconds（获取毫秒）/ setMilliseconds（设置毫秒）

let m = new Date().getMilliseconds();
console.log(m)

getDay（获取星期）

let m = new Date().getDay();
console.log(

getTime（获取从元年到现在的毫秒数）/ setTime（设置时间戳）

let m = new Date().getTime();
console.log(m)

获取时间差

最终：目的函数，获取两个时间节点之间的时间差
问题1：是否需要参数？

需要两个参数，分别是两次时间节点
问题2：是否需要返回值？
1. 需要一个返回值
2. 需要一个能包含四个信息的返回值，四个信息分别是天小时分钟秒钟
3. 要么返回一个数组：[ 1, 2, 3, 4, ]
4. 要么返回一个对象：{day:xxx,hours:xxx,minutes:xxx,seconds:xxx}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html, body {
      width: 100%;
      height: 100%;
    }

    div {
      width: 700px;
      height: 200px;
      font-size: 50px;
      line-height: 100px;
      text-align: center;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      font-weight: 700;
      background-color: #ccc;
      color: #ccc;
      text-shadow: 1px 1px 0 #333, -1px -1px 0 #fff;
    }
  </style>
</head>
<body>

  <script>
function diffTime(start,end){
    //1、计算出相差的毫秒
   	//结束时间节点的时间戳 - 开始节点的时间戳
    //顺便换算成秒
    var sub = Math.ceil((end.getTime() - start.get.getTime()) / 1000)
    //console.log(sub)
    
    //2、换算
    //2.1 换算天
    var day = parseInt(sub / (60 *60 *24))
    //console.log(day)
    //2.2 换算小时
    var hours = parseInt(sub / (60 * 60 * 24) / (60 * 60))
    //console.log(day)
    //2.3 换算分种
    var minutes = parseInt(sub % (60 * 60 ) / 60)
    //console.log(minutes)
    //2.4 换算秒钟
    var seconds = sub % 60
    //console.log(seconds)
    
    //3、组装一个对象
    var obj = {
        day:day,
        hours:hours,
        minutes:minutes,
        seconds:seconds
    }
    //4、返回这个对象
    return obj
}
// 将来我们使用的时候
var t1 = new Date()
var t2 = new Date('2022-12-31 23:59:59')
var res = diffTime(t1,t2)
document.write(`
	<div>
		距离过年还有：<br>
		<span>${res.day} 天 ${res.hours} 时 ${res.minutes} 分 ${res.seconds} 秒</span>
	</div>
`)
  </script>
</body>
</html>

定时器

概述

定时器：

浏览器提供的一个 JS 内异步执行代码的机制
异步与非异步：
- 非异步（同步）:JS 执行代码的基本原则
  - 从上到下从左到右依次执行代码
  - 从上面一行代码没有执行完毕，下面一行代码等待
- 异步：当JS 代码在执行过程中遇到异步代码的时候
  - 不会执行该异步内容，而是把该异步内容放在队列内等待
  - 继续向下执行同步代码
  - 等待所有同步代码执行完毕
  - 再来队列内执行异步代码

延时定时器（setTimeout）

语法：setTimeout(函数，数字)
作用：在指定时间以后，执行一遍函数

数字是毫秒

function ss() {
    console.log("sss")
}
// 在 3 秒 之后执行的函数 ss
setTimeout(ss, 3000)

间隔定时器

语法：setInterval(函数，数字)
作用：每间隔一段时间，执行一遍函数
数字：单位是毫秒，表示间隔多少时间

// 在 3 秒 之后执行的函数 ss
setInterval(function ss() {
    console.log("sss")
}, 3000)

定时器的返回值

不区分定时种类
返回值就是一个数字，表示你是页面上的第几个定时器
作用：用来关闭定时器使用的

var t1 = setTimeout(function(){},1000)
var t2 = setInterval(funciton(){},1000)
console.log('t1:',t1,typeof t1) //t1:1 number
console.log("t2:",t2,typeof t2) //t2：2 number

关闭定时器

语法：

clearTimeout(定时器返回值)
clearInterval(定时器返回值)

认识BOM

BOM（Browser Object Model）浏览器对象模型
私人：一整套操作，浏览器相关内容的属性和方法
特点：
1. 由浏览器提供的属性和方法
2. 在不同的浏览器内表现的形式不一样
3. 在不同的浏览器的兼容情况不一样
语法：基本上都是 window.xxx，在书写的时候可以省略 widow 不写
1. 例子：弹出层
2. 标准语法：widow.alert()
3. 书写：alert()
操作部分
1. 弹出层
2. 历史记录
3. 地址栏
4. 标签页
5. 滚动条
6. …

常见的事件

语法：事件源.addEventListener(‘事件类型’, 事件触发执行的函数);
事件监听三要素

事件源：哪个dom元素触发了事件，要获取dom元素
事件类型：用什么方式触发，比如：鼠标单击 click
事件触发执行的函数：要做什么事

区别：on方式会被覆盖，addEventListener方式可以绑定多次，拥有更多特性，推荐使用

<input id="btn" type="button" value="点我一下试试2">
<script>
    document.querySelector('#btn').onclick = function () {
      alert('试试就试试');
    }
</script>

在这里插入图片描述

浏览器的可视窗口尺寸

语法：
- 宽度：window.innerWidth
- 高度：window.innerHeight
注意：获取到的尺寸是包含滚动条内的尺寸

console.log('宽度：',window.innerWidth,innerWidth)
console.log('高度：',window.innerHeight,innerHeight)

浏览器的弹出层

提示框

语法：window.alert(“提示文本”)
表现：一段提示文本 + 确定按钮
返回值：undefined

var res = window.alert("你好 世界")
console.log(res)

询问框

语法：window.confirm(‘提示文本’)
表现：在提示框的基础上 + 取消按钮
返回值：一个布尔值
- 如果用户点击的是确定按钮，返回 true
- 如果用户点击的是取消按钮，返回 false

var res = window.confirm("您确定要删除该信息吗")
console.log(res)

输入框

语法：window.prompt(“提示文本”)
表现：在输入框的基础上 + 文本框
返回值：
- 如果用户点击的是取消按钮，那么就是 null
- 如果用户点击的是确定按钮，那么就是文本框的内容（如果没有输入的就是空字符串）
  
  注意：拿到的值是一个字符串类型，哪怕输入的数字，也是字符串的类型

var res = window.prompt("请输入密码")
console.log(res)
console.log(typeof res)

浏览器的常见事件

依赖浏览器的行为而触发的事件

load

语法：window.onload =function () {}
时机：当前页面所有资源(htm，css， js，图片，视频，音频，等 ) 记载完毕后触发
常用：
- 当你在body 内书写js代码的时候，并且操作了页面元素的时候

window.onload = function(){
    console.log("所有资源加载完毕了")
}

resize

语法：window.onresize = function () {}
时机：当前页面可视窗口尺寸改变的时候触发(不管横向还是纵向，只要改变就会触发，一直改变一直触发)
常用：一般用来捕获横屏

window.onresize = function (){
    console.log('可视窗口尺寸在改变')
    var w = window.innerWidth
    if(w >= 768 ) alert("竖屏游戏体验更佳")
}

scroll

语法：window.onscroll = function () {}
时机：浏览器滚动条滚动的时候触发(不管横向还是纵向，只要改变就会触发，一直改变一直触发

window.onscroll = function () {
consolr.log("滚动中"}

浏览器卷去的尺寸（滚动条定位）

卷去的高度：
1. 语法：
  - document.documentElement.scrollTop
    - 当前页面有 DOCTYPE 标签的时候能获取到尺寸
  - document.body.scrollTop
    - 当前页面没有 DOCTYPE 标签的时候能获取到尺寸
2. 兼容
  var 自己定义一个变量 = document.documentElement.scrollTop || document.body.scrollTop
卷去的宽度
1. 语法：
  - document.documentElement.scrollLeft
    - 当前页面有 DOCTYPE 标签的时候能获取到尺寸
  - document.body.scrollLeft
    - 当前页面没有DOCTYPE标签的时候能获取到尺寸
2. 兼容：
  - var 自己的定义一个变量 = document.documentElement.scrollLeft || document.body.scrollLeft

//为了方便观看，把该代码书写在浏览器滚动事件内
widow.onscroll = function () {
	/*
		卷去的高度
console.log(document.documentElement.scrollTop)
		console.log(document.body.scrollTop)
	*/    
    var scrollTop = documentElement.scrollTop || document.body/scrolltop
    console.log(scrollTop)
    
    //卷去宽度
    //console.log(document.documentElement.scrollLeft)
    //console.log(document.body.scrollLeft)
    var scrollLeft = document.docunmentElement.scrollLeft || document.body.scrollLeft
    console.log(scrollLeft)
}

浏览器滚动

浏览器滚动到
1. 定位浏览器卷去的尺寸
2. 语法：window.scrollTo(参数)
参数方式1：传递数字
1. window.scrollTo(x,y)
  - x：横向滚动条位置
  - y：纵向滚动条位置
2. 注意：必须传递两个参数，一个会报错
3. 注意：只能进行瞬间定位，不能平滑滚动
参数方式2：传递对象
1. window.scrollTo({left:xxx,top,yyy})
2. 注意：可以只书写一个方向
3. 注意：默认是瞬间定位，如果的需要平滑滚动，设置对象内第三个成员 behavior:“smooth”

//1、把该代码写在button 按钮的点击事件内

btn.onclick = function () {
    //传递参数方式1：传递数字
   	//window.scrollTo(0,0)
    //传递参数方式2：传递对象
    //window.scrollTo({left:0,top:0})
    //实现平滑滚动
    window.scrollTop({left:0,top:0,behavior:"smooth"})
}

浏览器标签页

打开新的标签页

语法：window.open(“地址”)

openBtn.onclick = function(){
    //开启新的标签题页
    window.open("https://www.baidu.com")
}

关闭当前标签页

语法：window.close()

closeBtn.onclick = function () {
    //关闭当前标签页
    window.close()
}

浏览器的地址栏

浏览器的地址栏
- 在window下有一个成员叫做 location，是一个对象，记录的就是地址相关的信息
href 属性
1. 是一个读写的属性
2. 读：window.location.href
  - 得到：该地址栏

console.log(window.location.href)

写：window.location.href = “地址”

作用：修改当前地址栏地址，跳转页面

btn.onclick = function(){
    window.location.href='https://www.jd.com'
}

reload 方法

语法：window.location.reload()
作用：重新加载当前页面（就是刷新）

btn.onclick = fucntion(){
	window.loaction.reload()
}

扩展：浏览器的地址栏

https://www.cmx.com:443/a/b/c/index.html?a=100&b=200#abc

标题	说明
http(s)	传输协议
www.cmx.com	域名（为了找到了网络世界内的某一个电脑）
443	端口号（ 0 ~ 65535 ）
/a/b/c/index.html	地址(为了找到指定的文件)
?a=100&b=200	查询字符串（queryString）不影响页面的打开，给当前页面的一些信息

浏览器的历史记录

在window下有一个成员叫做history，是一个对象，里面记录的都是历史记录相关的操作信息
回退
1. 语法：window.history.back()
2. 作用：回退到上一条历史记录，等价于 ⬅ 按钮
前进：
1. 语法：window.history.forward()
2. 作用：前进到下一条历史记录，等价于 ➡ 按钮
跳转
1. 语法：window.history.go(参数)
  - 正整数：前进
  - 0：刷新
  - 负整数：回退

浏览器本地存储-Storage

浏览器本地存储 - storage
- storage：仓库
- storage 在浏览器分成两种
  1. localStorage 永久存储
  2. sessionStorage 会话存储（关闭浏览器页面就消失了）
特点：
1. 不管你存储的是什么内容，都会变成字符串
2. 只能存储字符串类型术数据
3. 存储大小：20MB 左右
4. 按照域名存储：哪一个域名存储的，哪一个域名使用（本地文件使用一个 file://）

localStorage 本地存储

设置：window.locatStorage.setItem(key,value)

window.localStorage.setItem('a',JSON.stringify({name:'jack'}))

window.localStorage.setItem('b',200)

window.localStorage.setItem("c",300)

获取：windoiw.localStorage.getItem(key)

var res = window.localStorage.getItem('a')
console.log(res)
console.log(typeof res)

删除：window.localStorage.removeItem(key)

btn.onclick = function(){
   //删除
    window.localStorage.removeItem("a")
}

清除：window.localStorage.clear()

btn.onclick() = function(){
    //清除
    window.localStorage.clear()
}

sessionStorage 会话存储

设置：window.sessionStorage.setItem(key,value)

window.sessionStorage.setItem('a', 100)

window.sessionStorage.setItem('b', 200)

window.sessionStorage.setItem('c', 300)

获取：window.sessionStorage.getItem(key)

var res = window.sessionStorage.getItem(”a)
console.log(res)

删除：window.sessionStorage.removeItem(key)

brn.onclick = function(){
    window.sessionStorage.removeItem('a')
}

清除：window.sessionStorage.clear()

btn.onclick = function(){
    window.sessionStorage.clear()
}

浏览器的本地存储 -cookie

特点：
1. 按照域名存储，
  - 哪一个域名使用
  - 必须把页面服务器打开才能使用
2. 存储大小
  - 4KB 左右
3. 存储格式
  - 只能是 “key=value;key2=value2;…”
4. 存储时效性
  - 默认是会话级别时效（关闭浏览器就会消失）
  - 可以手动设置过期时间
5. 操作性
  - 前端可以操作（JS）
  - 后端也可以操作（任何一个语言）
6. 请求自动跟随
  - 只要cookie 空间内有内容，那么当前页面发送的请求是可以自动携带的
如何在服务器启动页面
1. 简单借助 vscode 的插件来实现
2. 下载一个插件叫做 live server
3. 将来打开页面的时候，使用右键单击，选择open with live server
设置cookie
1. 语法：document.cookie = ‘key=value’
2. 注意：一次只能设置一条

document.cookie = 'a=100'

设置一条带有过期时间的 cookie
1. 语法：document.cookie = “key=value;expires=时间对象”
2. 说明：
  - 当你设置带有过期时间的cookie 的时候
  - 你给的时间对象不管是什么时候，都会当做世界标准时间使用
  - 例子：
    1. 你设置的时候是 16 : 34
    2. cookie 拿到 16 : 34 会当做世界标准时间使用
    3. 该 cookie 会在世界标准时间 16 : 34 过期，被自动删除
    4. 世界标准时间的 16 : 34 是北京时间的 00 : 34
3. 设置一条 30s 以后过期的 cookie
  - 拿到当前时间节点
  - 向前调整 8 个小时
  - 在向后顺延 30s 就可以了

var time = new Date()
var t = time.getTime() - 1000*60*60*8 + 1000 *30
//利用用这个时间戳，再次设置 time 这个时间对象去进行时间节点的定位
time.setTime(t) 
//设置cookie
document.cookie = "a=100;expires="+time //'key=value;expires=’+time

读取cookie

语法：document.cookie
得到：完整的cookie字符串

var c = document.cookie
//console.log(c) 
var obj = {}
c.split(";").forEach(function(item){
    var t = item.split("=")
    obj[t[0]] = t[1]
})
console.log(obj)

封装函数设置cookie

//  作业1: 封装函数设置 cookie
      // function setCookie( ... ) {}

      // // 将来使用的时候
      // //   设置一条 a=100 这样的 cookie, 过期时间就是 会话级别过期
      // setCookie('a', 100)
      // //   设置一条 b=200 这样的 cookie, 过期时间就是 30s 以后
      // setCookie('b', 200, 30)

      function setCookie(key, value, seconds) {
        var time = new Date()
        var t = time.getTime() - 1000 * 60 * 60 * 8 + 1000 * seconds

        time.setTime(t)
        return (document.cookie = `${key}=${value};expires=` + time)
      }
      var res = setCookie("name", "陈明旭", 20000)
      var res1 = setCookie("age", 22, 20000)
      console.log(res)
      console.log(res1)

封装函数获取cookie

 //   作业2: 封装函数获取 cookie
      //       function getCookie( ... ) {}

      //       将来使用的时候
      //       var res = getCookie()
      //       res 得到的就是一个对象, 里面包含所有的 cookie 内容
      function getCookie() {
        var c = document.cookie
        console.log(c)
        var obj = {}
        c.split("; ").forEach(function (item) {
          var t = item.split("=")
          obj[t[0]] = t[1]
        })
        return obj
      }
      var res2 = getCookie()
      console.log(res2)