前端程序员需要了解的JavaScript，中卷，JavaScript-CSDN博客

本文链接：https://blog.csdn.net/qq_45163356/article/details/123760118

前言：这一卷主要讲js基本类型以及如何使用

序列化：序列化是将 json 转换为字符串，一般用来向其他语言传输使用。

反序列化：使用 JSON.parse 将字符串 json 解析成对象

简短总结：

数组总结：

对象总结;

欢迎阅读~

基本类型：

一：判断类型

let a = 1;
console.log(typeof a); //number

let c = [1, 2, 3];
console.log(typeof c); //object

需要声明的是 typeof判断数组的时候会是object，

需要判断是不是数组可以使用

console.log( a instanceof Array) 结果是布尔值

二：字符串

字符串定义：let content = ''

字符串拼接：建议使用模板字符串，${}里面放变量名，也可以放函数，js运算表达式
let year= '2022';
console.log(`今年是${url}年`);

模板字符串实例：

模板字符串里面的变量可以执行js函数

let lessons = [
	{title: '媒体查询响应式布局'},{title: 'FLEX 弹性盒模型'},{title: 'GRID 栅格系统'}
];

function template() {
  return `<ul>
      ${lessons.map((item)=>`
          <li>${item.title}</li>
      `).join('')}
  </ul>`;
}
document.body.innerHTML = template();

模板字符串之标签模板函数：

标签模板是提取出普通字符串与变量，交由标签函数处理

let lesson = 'css';
let web = 'ayi';
tag `访问${web}学习${lesson}前端知识`;    //调用了tag函数，传入了模板字符串参数，tag函数将参数分为了两种

function tag(strings, ...values) {
    console.log(strings); //["访问", "学习", "前端知识"]
    console.log(values); // ["ayi", "css"]
}

字符串身上的函数方法：

console.log("houdunren.com".length) 使用length属性可以获取字符串长度

a.toUpperCase()  将字符转换成大写格式
a.trim()  去掉空格
a.charAt(3)   获取索引为3的字符串值  也可以用【3】
a.slice()  这个截取最好用，含头不含尾，如果没有第二个参数，则直接截取到最后，-1是倒数的第一个
a.substr（） 这个截取方法，第二个参数指定获取字符数量
a.indexOf('o', 3);   从第3个字符向后搜索，查索引
a.lastIndexOf('o', 7)  从第7个字符向前搜索，反着来
a.includes('h', 11)  includes 字符串中是否包含指定的值，第二个参数指查找开始位置，返回布尔值
a.startsWith('o', 1)  是否是指定位置开始，第二个参数为查找的索引开始位置。返回布尔值
a.replace("houdunren", "hdcms")   字符串的替换操作，第一个可以使用正则匹配，第二个替换的可以写箭头函数

查找关键词实例：

const words = ["php", "css"];
const title = "我爱在后盾人学习php与css知识";
const status = words.some(word => {
  return title.includes(word);
});
console.log(status);

模糊电话号码案例：

let phone = "98765432101";
console.log(phone.slice(0, -3) + "*".repeat(3));

字符串删除：

之前的方法想的是转为数组之后再过滤，现在可以将要删除的值通过replace替换成空，需要用到正则匹配

字符串类型转换：

类型转换方法：

String（a）：转字符串
a.toString（):  转字符串
a.split("")  转为数组，以什么为分隔符，比如逗号啥的

json字符串方法：

JSON.stringify(obj)：对象转字符串形式的对象，这个专门用来针对对象的

JSON.parse(str)： json字符串对象转对象形式

三：布尔类型

let a = true

隐式转换

数据类型	true	false
String	非空字符串	空字符串
Number	非0的数值	0 、NaN
Array	数组不参与比较时	参与比较的空数组
Object	所有对象
undefined	无	undefined
null	无	null
NaN	无	NaN

当其他类型与boolean类型比较时，会将两边类型统一为数字1或0。

如果使用Boolean与数值比较时，会进行隐式类型转换 true转为1，false 转为0。

不比较的时候，则遵循隐式规则，尽量不要去与布尔值比对。

console.log(3 == true); //false
console.log(0 == false); //true

字符串在与Boolean比较时，两边都为转换为数值类型后再进行比较。

console.log(Number("houdunren")); //NaN
console.log(Boolean("houdunren")); //true
console.log("houdunren" == true); //false
console.log("1" == true); //true

四：Number

let a = 99

数值类型方法：

Number（a）：将参数转换为表示对象值的数字。如果该值无法转换为合法数字，则返回 NaN。
Number.isInteger(1.2)  判断是否为整数
a.toFixed()：指定返回的小数位数可以四舍五入，参数可传0，1，2，参数为指定保存的小数位
parseFloat（参数）：提取参数开始位置的浮点数
parseInt（a）： 解析字符串，只有字符串中的第一个数字会被返回,不符合返回nan

NaN值不可以进行比较，可以使用 Object.is 方法判断两个值是否完全相同

var res = 2 / 'houdunren';
console.log(Object.is(res, NaN));

五：Math

Math 对象提供了众多方法用来进行数学计算

数学方法：

Math.max(1, 2, 3)   取最大值
Math.min(1, 2, 3)   取最小值
Math.ceil(1.111); //2   向上整数
Math.floor(1.555); //1  向下整数
Math.round(1.5); //2   四舍五入
Math.random()    返回 0-1 的随机数（包括0但不包括1）

返回0~n的随机整数，不包括n

const number = Math.floor(Math.random() * n);

返回0~n的随机整数，包括n
const number = Math.floor(Math.random() * (n+1));

返回一段范围m-n内的随机整数，不包括n，公式min+Math.floor(Math.random()*(Max-min))
const number = Math.floor(Math.random() * (n - m)) + m;
console.log(number);

const number = Math.floor(Math.random() * (n - m + 1)) + m;
console.log(number);    这个是包含n的

上面这些可应用于随机点名，只要拿到数组的长度就好了
let stus = ['小明', '张三', '王五', '爱情'];
let pos = Math.floor(Math.random() * stus.length);
console.log(stus[pos]);

封装随机取值的函数：

 //在一个数组里随机取值
  function radomValue(Array, start = 1, end = Array.length) {
    start--;
    const index = start + Math.floor(Math.random() * (end - start));
    return Array[index]
  }
  console.log(radomValue([1, 2, 3])); //在这个数组里随机取值
  console.log(radomValue([1, 2, 3], 1, 2)); //第一个到第二个中间随机取值

求数组最大值，最简单的方法

let arr = [1,34,55,7]

const max = Math.max(...arr）

把数组解构就好了

六：Date

网站中处理日期时间是很常用的功能

方法	描述
Date()	返回当日的日期和时间。
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getFullYear()	从 Date 对象以四位数字返回年份。
getYear()	请使用 getFullYear() 方法代替。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。

获取当前年月日星期几几点几分几秒并打印//获取自定义格式的时间戳

 //获取当前年月日星期几几点几分几秒并打印
  function getTimer() {
    var date = new Date()
    var week = ['星期日', '星期一', '星期二', '星期三', '星	期四', '星期五', '星期六']
    var year = date.getFullYear()
    var month = date.getMonth() + 1
    var datee = date.getDate()
    var day = date.getDay()
    var time = year + '年' + month + '月' + datee + '日 	' + week[day]

    function getTimerr() {
      var time = new Date()
      var hour = time.getHours()
      hour = hour < 10 ? '0' + hour : hour
      var minute = t