重学js
javascript数据类型
1.值（key,value都存储在栈中）
基本类型
undefined 未定义
String 字符串
Number 数字
Boolean 布尔
Symbol 符号
2.引用类型
栈中存储 内存地址
堆中存储 实际的值
Array 数组
Object 对象
null 空
Function 函数
typeof
1.引用类型
函数 Function
其他 Object
2.
undefined 未定义
String 字符串
Number 数字
Boolean 布尔
Symbol 符号
两个案例进行理解
<!DOCTYPE html>
<html lang="zh">
<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></title>
</head>
<body>
<script>
// javascript 数据类型 值类型(基本数据类型) 引用类型（复杂数据类型）
// 值类型 key value 都存储在栈内存中
// var a = 100; // 栈 key a value 100
// var b = a; // 栈 key b value 100
// a = 200; // 栈 key a value 200
// console.log(b);//100
// 引用类型 数据存储在两个地方 栈 和堆
// 栈 key 名称 value 内存地址
// 堆 key 内存地址 value 实际的值
var a = {age:20}; //栈 key a value a的内存地址
//堆 key 地址 value 实际的值
var b = a; //栈 key b value a的内存地址
a.age = 21; // 习惯的a在堆中 实际的值21
console.log(b.age) // b 和a在栈执行同一个内存地址 21
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<script>
// 类型 隐式转换（自动转换）
// 字符串与任意类型拼接 都会变成字符串
/* var a = 100;
var b = "10";
alert(a+b);//"10010" */
/* var a = true;
var b = "10";
alert(a+b);//"true10" */
// 任意类型取反都会变成布尔类型
// alert(!0) 数字转换为布尔类型 非0 都是true
// alert(!""); 字符串转换为布尔值 非空都是true
// 算术运算符与其他类型运算都会尝试转换为数字
// alert(false*1) true会被转换为1 false被转换为0
// alert(2*"123abc")
// 字符串换行为数字如果字符串都为数字则会转换成numberr类型 ，否则被转换为NaN
// alert(typeof NaN);
</script>
</body>
</html>
隐式转换
1.转布尔
非空字符串 转布尔 为 true
空字符串转布尔为 fasle
2.转字符串
都会转换为字符串
3.转数字
true 1 false 0
数字点会被转换为数字类型
否则 NaN
条件值
1.&&
var a = true&&88 //88
var a = false&&88 //false
var a = “” &&false //""
2.||
var a = false || 88;//88
var b= 15||88;//15
var b=""||false //false
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<script>
// == 代表 值是否相等
// === 值和类型相当
// 正常情况下都应该使用===
{}=={}
[] == []
// null == undefined
// null === undefined
// null == null
// null === null
// NaN == 0
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<script>
// falsely变量 !! 变量结 === fasle
// !!0
// !!""
// !!undefined
// !!null
// !!NaN
// !!false
// if 进行判断是最终看是否为truely 或者 falely变量
var a ="";
if(a){
alert("条件成立");
}
</script>
</body>
</html>
浏览器窗口和滚动条
// wrap.clientWidth显示区域的宽
// wrap.offsetWidth 边框+滚动条+显示区域宽
// wrap.scrollWidth 内容实际的宽
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.wrap{
height: 200px;
width: 820px;
background-color: #f0f0f0;
white-space: nowrap;
overflow: auto;
scroll-behavior: smooth;
}
.wrap::-webkit-scrollbar{ display: none;}
.inner{
width: 220px;
height: 100px;
background-color: gray;
display: inline-block;
}
.inner:nth-of-type(2n){
background-color: orange;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
<div class="inner">5</div>
<div class="inner">6</div>
</div>
<script>
// 获取到wrap
var wrap = document.querySelector(".wrap");
// wrap 宽度
// wrap.clientWidth显示区域的宽
// wrap.offsetWidth 边框+滚动条+显示区域宽
// wrap.scrollWidth 内容实际的宽
var w = wrap.offsetWidth;
// wrap 滚动条的位置
// var sl = wrap.scrollLeft;
// 某个inner元素距wrap左侧的距离
var inner = document.querySelector(".inner:nth-of-type(4)");
// 目标：单击哪个元素，滚动到最左侧
var inners = document.querySelectorAll(".inner");
for(let i=0;i<inners.length;i++){
inners[i].onclick = function(){
wrap.scrollLeft=inners[i].offsetLeft-w/2+inners[i].offsetWidth/2;
}
}
</script>
</body>
</html>
prototype实例的公用方法和属性
代码案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>prototype实例的公用方法和属性</title>
</head>
<body>
<script>
// 构造函数
function Person(name,age){
this.name = name;//this指向函数的实例
this.age = age;
}
// 定义所有类的实例的公用方法say
Person.prototype.say = function(){
alert(`大家好！我的名字是${this.name}今年${this.age}岁了。`);
}
// prototype 所有构造函数的实例的公用方法和属性
// 类的实例
var p1 = new Person("mumu",20);
var p2 = new Person("曾庆林",30);
// new 实例化对象
var p3 = Person("love",50);
// 直接调用得到函数的返回值 默认undefiend
</script>
</body>
</html>