数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1.分类
基本(值)类型
-String:任意字符串
-Number:任意的数字
-Boolean:true/false
-Undefined:undefined
-Null:null
对象(引用)类型
-Object:任意对象
-Function:一种特别的对象(可以执行)
-Array:一种特别的对象(数值下标,内部数据是有序的)
2.判断
typeof:
可以判断:undefined/数值/字符串/布尔值/function
不能判断:null与object object和array
instanceof:
判断对象的具体类型
===:
可以判断:undefined/null
-->
<script type="text/javascript">
//1.基本
// typeof返回数据类型的字符串表达
var a
console.log(a,typeof a,typeof a==='undefined',a===undefined)//undefined 'undefined' true true
console.log(undefined==='undefined')
a=4
console.log(typeof a==='number')
a='atguigu'
console.log(typeof a==='string')
a=true
console.log(typeof a==='boolean')
a=null
console.log(typeof a)
//2.对象
var b1={
b2:[1,'abc',console.log],
b3:function (){
console.log('b3')
}
}
console.log(b1 instanceof Object,b1 instanceof Array)//true false
console.log(b1.b2 instanceof Array,b1.b2 instanceof Object)//true true
console.log(b1.b3 instanceof Function,b1,b3 instanceof Object)//true true
console.log(typeof b1.b2,'-------')//'object'
console.log(typeof b1.b3==='function')//true
console.log(typeof b1.b2[2]==='function')//true
/*
var obj={
name:'Tom',
age:12
}
function test(){
var a = 3
}
var arr=[3,'abc']
arr[1]
*/
</script>
</body>
</html>
相关问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1.undefined和null的区别?
-undefined代表定义未赋值
-null定义并赋值,只是值为null
2.什么时候给变量赋值为null?
-初始赋值,表明将要赋值为对象
-结束前,让对象称为垃圾对象(被垃圾回收器回收)
3.严格区别变量类型与数据类型
-数据的类型
基本类型
对象类型
-变量的类型(变量内存值的类型)
基本类型:保存就是基本类型数据
引用类型:保存的是地址值
-->
<script type="text/javascript">
//实例:实例对象
//类型:类型对象
function Person(name,age){//构造函数 类型
this.name=name
this.age=age
}
var p=new Person('tom',12)//根据类型创建的实例对象
// Person('jack',12)
//1.undefined和null的区别?
var a
console.log(a)//undefined
a=null
console.log(a)//null
//2.什么时候给变量赋值为null?
var b=null //初始赋值为null,表明将要赋值为对象
//确定对象就赋值
b=['atguigu',12]
//最后
b=null//让b指向的对象成为垃圾对象(被垃圾回收器回收)
//b=2
//3.严格区别变量类型与数据类型
var c=function (){
}
console.log(typeof c)//'function'
</script>
</body>
</html>
数据 变量 内存
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1.什么是数据?
-存储在内存中代表特定信息的‘东东’,本质上是0101....
-数据的特点:可传递,可运算
-一切皆数据
-内存中所有操作的目标:数据
算术运算
逻辑运算
赋值运算
运行函数
2.什么是内存?
-内存条通电以后产生的可存储数据的空间(临时的)
-内存产生和死亡:内存条(电路板)==>通电==>产生内存空间==>存储数据==>处理数据==>断电==>内存空间和数据都消失
-一块小内存的2个数据:
内部存储的数据(一般数据/地址数据)
内存地址值数据
-分配内存:声明变量和函数或创建对象时,JS引擎会自动为此分配一定大小的内存来存放对应的数据
-释放内存:清空内存中的数据,标识内存可以再分配使用(内存不释放就不能复用)
-自动释放:栈空间的局部变量
-垃圾回调器回调:堆空间的垃圾对象
-内存分类:
栈:全局变量/局部变量(空间较小)
堆:对象(空间较大)
3.什么是变量?
-可变化的量,由变量名和变量值组成
-每个变量都对应的一块小内存,变量名用来查找对应的内存,变量值就是内存中保存的数据
4.内存,数据,变量三者之间的关系?
-内存用来存储数据的空间
-变量是内存的标识
-->
<script type="text/javascript">
// 1.什么是数据?
var age=18
// 2.什么是内存?
console.log(age)
var obj={name:'Tom'}
console.log(obj.name)
function fn(){
var obj={name:'Tom'}
}
var a=3
var b=a+2
</script>
</body>
</html>
数据 变量 内存相关问题
相关问题(1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
问题: var a=xxx,a内存中到底保存的是什么?
-xxx是基本数据,保存的就是这个数据
-xxx是对象,保存的就是对象的地址值
-xxx是一个变量,保存的xxx的内存内容(可能是基本数据,也可能是地址值)
-->
<script type="text/javascript">
var a=3
a=function (){
}
var b='abc'
a=b
b={}
a=b
</script>
</body>
</html>
相关问题(2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
关于引用变量赋值问题
-两个引用变量指向同一个对象,通过一个变量修改对象内部数据,另一个变量看到的是修改之后的数据
-两个引用变量指向同一个对象,其中一个引用变量指向另一个对象,另一个引用变量依然指向前一个对象
-->
<script type="text/javascript">
/*
var obj1={name:'Tom'}
var obj2=obj1
obj1.name='Jack'
console.log(obj2.name)//'Jack'
*/
var obj1={name:'Tom'}
var obj2=obj1
obj2.age=12
console.log(obj1.age)//12
function fn(obj){
obj.name='A'
}
fn(obj1)
console.log(obj2.name)//A
var a={age:12}
var b=a
a={name:'BOB',age:13}
b.age=14
console.log(b.age,a.name,a.age)//14 BOB 13
function fn2(obj){
obj={age:15}
}
fn2(a)
console.log(a.age)
</script>
</body>
</html>
相关问题(3)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
问题:在js调用函数时传递变量参数时,是值传递还是引用传递
-理解1:都是值(基本/地址值)传递
-理解2:可能是值传递,也可能是引用传递(地址值)
-->
<script type="text/javascript">
var a=3
function fn(a){
a=a+1
}
fn(a)
console.log(a)
function fn2(obj){
console.log(obj.name)
}
var obj={name:'Tom'}
fn2(obj)
</script>
</body>
</html>
相关问题(4)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
问题:JS引擎如何管理内存
1.内存生命周期
-分配小内存空间,得到它的使用权
-存储数据,可以反复进行操作
-释放当前的小内存空间
2.释放内存
-局部变量:函数执行完自动释放
-对象:成为垃圾对象==>垃圾回收器回收
-->
<script type="text/javascript">
var a=3
var obj={}
obj=undefined
function fn(){
var b={}
}
fn()//b是自动释放的,b所指向的对象是在后面的某个时刻由垃圾回收器回收
</script>
</body>
</html>
对象(1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1.什么是对象?
-多个数据的封装体
-用来保存多个数据的容器
-一个对象代表显示中的一个事物
2.为什么要用对象?
-统一管理多个数据
3.对象的组成
-属性:属性名(字符串)和属性值(任意类型)组成
-方法:一种特别的属性(属性值是函数)
4.如何访问对象内部数据?
-.属性名:编码简单,有时不能用
-['属性名']:编码麻烦,通用
-->
<script type="text/javascript">
var p={
name:'Tom',
age:12,
setName:function (name){
this.name=name
},
setAge:function (age){
this.age=age
}
}
p.setName('Bob')
p['setAge'](23)
console.log(p.name,p['age'])
</script>
</body>
</html>
对象(2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
问题:什么时候必须用['属性名']的方式?
-1.属性名包含特殊字符:- 空格
-2.属性名不确定
-->
<script type="text/javascript">
var p={}
//1.给p对象添加一个属性:content-type:text/json
//p.content-type='text/json'//不能用
p['content-type']='text/json'
console.log(p['content-type'])
//2.属性名不确定
var propName='myAge'
var value=18
//p.propName=value//不能用
p[propName]=value
console.log(p[propName])
</script>
</body>
</html>
函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1.什么是函数?
-实现特定功能的n条语句的封装体
-只有函数是可以执行的,其他类型的数据不能执行
2.为什么要用函数?
-提高代码复用
-便于阅读交流
3.如何定义函数?
-函数声明
-表达式
4.如何调用(执行)函数?
-test():直接调用
-obj.test():通过对象调用
-new test():new调用
-test.call/apply(obj):临时让test称为obj的方法进行调用
-->
<script type="text/javascript">
/*
编写程序实现以下功能需求
1.根据年龄输出对应的信息
2.如果小于18,输出:未成年,再等等!
3.如果大于60,输出:算了吧!
4.其他,输出:刚好!
*/
function showInfo(age){
if(age<18){
console.log('未成年,再等等!')
} else if(age>60){
console.log('算了吧!')
}else{
console.log('刚好!')
}
}
showInfo(17)
showInfo(20)
showInfo(65)
function fn1(){//函数声明
console.log('fn1')
}
var fn2=function (){//表达式
console.log('fn2')
}
fn1()
fn2()
var obj={}
function test2(){
this.xxx='atguigu'
}
//obj.test2()//不能直接,根本就没有
test2.call(obj)//obj.test2()//可以让一个函数成为指定任意对象的方法进行调用
console.log(obj.xxx)
</script>
</body>
</html>
回调函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">测试点击事件</button>
<!--
1.什么函数才是回调函数?
-你定义的
-你没有调
-但他最终执行了
2.常见的回调函数有哪些?
-dom回调函数
-定时器回调函数
-ajax请求回调函数
-生命周期回调函数
-->
<script type="text/javascript">
document.getElementById('btn').onclick=function (){//dom事件回调函数
alert(this.innerHTML)
}
//定时器
//延时定时器
//循环定时器
setTimeout(function (){//定时器回调函数
alert('到点了')
},2000)
</script>
</body>
</html>
IIFE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1.理解
-全称:Immediately-Invoked Function Expression
2.作用
-隐藏实现
-不会污染外部(全局)命名空间
-->
<script type="text/javascript">
(function (){//匿名函数自调用
var a=3
console.log(a+3)
})()
var a=4
console.log(a);
(function (){
var a=1
function test(){
console.log(++a)
}
window.$=function (){//向外暴露一个全局函数
return{
test:test
}
}
})()
$().test()//1.$是一个函数2.$执行后返回的是一个对象
</script>
</body>
</html>
函数中的this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1.this是什么
-任何函数本质上都是通过某个对象来调用的,如果没有直接指定就是window
-所有函数内部都有一个变量this,它的值时调用函数的当前对象
2.如何确定this的值
-test():window
-p.test():p
-new test():新创建的对象
-p.call(obj):obj
-->
<script type="text/javascript">
function Person(color){
//console.log(this)
this.color=color;
this.getColor=function (){
//console.log(this)
return this.color;
};
this.setColor=function (color){
//console.log(this)
this.color= color;
};
}
Person("red");//this是谁 :window
var p=new Person("yellow");//this是谁:p
p.getColor();//this是谁:p
var obj={}
p.setColor.call(obj,"black");//this是谁:obj
var test=p.setColor;
test();//this是谁:window
function fun1(){
function fn2(){
console.log(this);
}
fun2();//this是谁:window
}
fun1();
</script>
</body>
</html>
分号问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1.js一条语句的后面可以不加分号
2.是否加分号是编码风格问题,,欸有应该不应该,只有自己喜欢不喜欢
3.在下面两种情况下不加分号会有问题
-小括号开头的前一条语句
-中括号开头的前一条语句
4.解决办法:在行首加分号
5.强有力的例子:vue.js库
6.知乎热议:https://www.zhihu.com/question/20298345
-->
<script type="text/javascript">
var a=3
console.log(a)
</script>
</body>
</html>
快捷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
File==>setting
-->
<script type="text/javascript">
console.log(3)
var arr=[1,3]
for(var i=0;i<arr.length;i++){
var item=arr[i]
}
</script>
</body>
</html>
Q.E.D.