目录
一、类的操作
二、数据类型
1、分类
2、判断
3.面试可能会问的问题
一、类的操作
先写一个基础页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类的操作</title>
<style>
.b1{
width: 100px;
height: 100px;
background-color: red;
}
.b2{
height: 200px;
background-color: paleturquoise;
}
</style>
</head>
<body>
<button id="btn01">点击按钮后修改box样式</button>
<br><br>
<div id="box" class="b1 b2"></div>
</body>
</html>用 JS修改box样式，有两种，way1每次都要重新加载，用类的方式修改box，只加载一次，性能好很多。
<script>
window.onload = function(){
/*
通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面
这样执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便
*/
var box = document.getElementById("box");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
// 修改box样式
//way1:
/* box.style.width = "200px";
box.style.height = "200px";
box.style.backgroundColor="yellow"; */
/*
way2:
我希望一行代码，可以同时修改多个样式
*/
// 修改box的class属性
/*
通过修改元素的class属性来间接修改样式
这样一来，只需修改一次就可以修改多个样式，
浏览器只需要重新渲染页面一次，性能较好，
并且这种方式，可以使得表现和行为进一步分离
*/
// 注意：这里用+=，是在原来类的基础上加上一个类，且新类前要有空格隔开
// box.className += " b2";
// 用函数修改box
// addClass(box,"b2");
// alert(hasClass(box,"okk"));
// removeClass(box,"b2")
toggleClass(box,"b2");
};
};
};
</script>定义上面调用到的函数，分别是类的，增、删、改、查（判断是否有这个类）；
// 定义一个函数，用来向一个元素中添加指定的class属性值
/*
参数：
obj 要添加class属性的元素
cn 要添加的class值
*/
function addClass(obj,cn){
if(!hasClass(obj,cn)){
obj.className += " "+cn;
}
};
/*
判断一个class中是否有指定的class属性值
参数：
obj 要添加class属性的元素
cn 要添加的class值
返回值：
有返回true，没有返回false
*/
function hasClass(obj,cn){
// 判断obj中有没有cn class
// 创建一个正则表达式,\b是单词边界表示b2独立存在
// var reg = /\bb2\b/;
// 注意：这里是\\b
var reg = new RegExp("\\b"+cn+"\\b");
return reg.test(obj.className);
};
// 删除一个元素中指定的class属性
function removeClass(obj,cn){
// 创建一个正则表达式
var reg = new RegExp("\\b"+cn+"\\b");
// 删除class，用空串代替class
obj.className = obj.className.replace(reg,"");
};
/* toggleClass用来切换一个类
如果元素中有该类，则删除
如果元素中没有该类，则添加
*/
function toggleClass(obj,cn){
// 判断obj中是否含有cn
if(hasClass(obj,cn)){
// 有，则删除
removeClass(obj,cn);
}else{
// 没有，则添加
addClass(obj,cn);
}基础JS到这里差不多了，开始高级一点的JS，也是从基础开始，刚好可以回顾复习一下，那我们从最基础的数据类型开始吧 ~
二、数据类型
1、分类
基本(值)类型
string 任意字符串
number 任意数字
boolean true/false
undefined undefined
null null
对象（引用）类型
一般对象：Object:任意对象
两种特殊对象：Funciton：可以执行
Array:有数值下标
2、判断
typeof
可以判断：undefined、数值、字符串、布尔值、function
不能判断：null和object（都返回object）,object和Array（都返回bject）
用法：typeod 元素名;
instanceof :instance:实例，判断对象的具体类型。
用法：A nstanceof B 判断A是不是B的一个实例，那么B是一个构造函数
一般是 A instanceof Functon/Object/Array
=== 全等 / （== 相等（会做数据转换，最好用全等））
可以判断：undefined null（因为他们都只有一个值，所以可以用===判断）
<script type="text/javascript">
// 1、基本
var a
/* console.log(a,typeof a);//undefined 'undefined'
console.log(typeof a === 'undefined',a===undefined);//true true
console.log(typeof a === undefined,typeof a === 'undefined');//false true,所以判断要加''
console.log(undefined==='undefined');//false
*/
/* a = 4;
console.log(typeof a === 'number');//true
a='first';
console.log(typeof a === 'string');//true
a=true;
console.log(typeof a==='boolean');//true
a=null;
console.log(typeof a,a===null);//object
*/
// 2、对象
var b1 = {
b2:[1,'abc',console.log],
b3:function(){
console.log('b3');
return function(){
return 'ook';
}
}
};
/* console.log(b1 instanceof Object);//true
console.log(b1 instanceof Array);//false
console.log(b1.b2 instanceof Array);//true
console.log(b1.b2 instanceof Object);//true
console.log(b1.b3 instanceof Function);//true
console.log(b1.b3 instanceof Object);//true
console.log(typeof b1.b3);//function
console.log(typeof b1.b3==='function');//true
*/
console.log(typeof b1.b2);//数组类型返回object
console.log(typeof b1.b2[2]==='function');//true
//执行函数console.log，加小括号
b1.b2[2](4);
//这里加2个括号，第一个括号表示执行b3这个函数，然后返回第二个函数，
// 这个时候b1.b3()表示第二个函数，执行它，再加小括号就可以，最后返回ook，用console.log输出
console.log( b1.b3()());//ook3.面试可能会问的问题
1.undefined 与 null 的区别？
undefined:表示定义了未赋值
null：表示定义并赋值了，只是值为null
2.什么时候给变量赋值为null？
初始赋值，表明将要赋值为对象
结束前赋值，让对象成为垃圾对象；
3.严格区别变量类型与数据类型？(了解即可)
数据的类型
基本类型
对象类型
变量的类型（JS是弱类型的语言，var是没有类型的，变量类型实际上是变量内存值的类型，）
基本类型：保存基本类型数据
引用类型：保存地址值
<script>
// 实例：全称实例对象
// 类型：类型对象
// 构建Person构造函数，构造函数类型：函数→对象；
function Person(name,age){
this.name = name;
this.age = age;
};
var p = new Person('Joy',12);//根据类型创建的实例对象
// 1.undefined 与 null 的区别？
var a;
console.log(a);//undefined
a = null;
console.log(a);//null
// 2.什么时候给变量赋值为null？
// 疑问，定义为null后用typeof检查，输出object
var b = null;//初始赋值为null，表明将要赋值为对象
b=['ook',12];
//最后
b=null//让b指向的对象成为垃圾对象（被垃圾回收器回收）,垃圾对象：没有变量（栈内存）指向（变量里存放它的地址）它（堆内村）的对象
// 3.严格区别变量类型与数据类型？
var c = function(){
}
console.log(typeof c)//function
</script>参考：
1.bilibili视频：尚硅谷JavaScript基础&实战|JS入门到精通全套完整版
