1. js object
对象是由属性和方法组成的。 属性:事物的特征。 方法:事物的行为。
1.1 创建对象
三种方式:字面量;new Object;构造函数。
字面量创建对象
<!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
>
<script
>
var obj
= {
uname
: '张三疯',
age
: 18,
sex
: '男',
sayHi
: function() {
console
.log('hi~');
}
}
console
.log(obj
.uname
);
console
.log(obj
['age']);
obj
.sayHi();
</script
>
</head
>
<body
>
</body
>
</html
>
变量、属性、函数、方法的区别
// 1.变量和属性的相同点 他们都是用来存储数据的
var num = 10;
var obj = {
age: 18,
fn: function() {
}
}
function fn() {
}
console.log(obj.age);
// console.log(age);
// 变量 单独声明并赋值 使用的时候直接写变量名 单独存在
// 属性 在对象里面的不需要声明的 使用的时候必须是 对象.属性
// 2. 函数和方法的相同点 都是实现某种功能 做某件事
// 函数是单独声明 并且调用的 函数名() 单独存在的
// 方法 在对象里面 调用的时候 对象.方法()
new object创建对象
<script
>
var obj
= new Object();
obj
.uname
= '张三疯';
obj
.age
= 18;
obj
.sex
= '男';
obj
.sayHi = function() {
console
.log('hi~');
}
console
.log(obj
.uname
);
console
.log(obj
['sex']);
obj
.sayHi();
</script
>
利用构造函数创建对象
// 我们为什么需要使用构造函数
// 就是因我们前面两种创建对象的方式一次只能创建一个对象
// 因为我们一次创建一个对象,里面很多的属性和方法是大量相同的 我们只能复制
// 因此我们可以利用函数的方法 重复这些相同的代码 我们就把这个函数称为 构造函数
// 又因为这个函数不一样,里面封装的不是普通代码,而是 对象
// 构造函数 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面
<script
>
function Star(uname
, age
, sex
) {
this.name
= uname
;
this.age
= age
;
this.sex
= sex
;
this.sing = function(sang
) {
console
.log(sang
);
}
}
var ldh
= new Star('刘德华', 18, '男');
console
.log(ldh
.name
);
console
.log(ldh
['sex']);
ldh
.sing('冰雨');
var zxy
= new Star('张学友', 19, '男');
console
.log(zxy
.name
);
console
.log(zxy
.age
);
zxy
.sing('李香兰')
</script
>
1.2 构造函数和对象
<script
>
function Star(uname
, age
, sex
) {
this.name
= uname
;
this.age
= age
;
this.sex
= sex
;
this.sing = function(sang
) {
console
.log(sang
);
}
}
var ldh
= new Star('刘德华', 18, '男');
console
.log(ldh
);
</script
>
1.3 new关键字执行
<script
>
function Star(uname
, age
, sex
) {
this.name
= uname
;
this.age
= age
;
this.sex
= sex
;
this.sing = function(sang
) {
console
.log(sang
);
}
}
var ldh
= new Star('刘德华', 18, '男');
</script
>
1.4 遍历对象
<script
>
var obj
= {
name
: 'pink老师',
age
: 18,
sex
: '男',
fn
: function() {}
}
for (var k
in obj
) {
console
.log(k
);
console
.log(obj
[k
]);
}
</script
>
参考: 代码 视频
2. 内置对象
js对象分为:自定义对象;内置对象;浏览器对象; 内置对象就是js语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能。 js提供多个内置对象:math;date;array;string等。
2.1 学会查文档
MDM/W3C
2.2 Math对象
概述
Math 是一个内置对象,它拥有一些数学常数属性和数学函数方法。Math 不是一个函数对象。 Math 用于 Number 类型。它不支持 BigInt。 文档
<script
>
console
.log(Math
.PI);
console
.log(Math
.max(1, 99, 3));
console
.log(Math
.max(-1, -10));
console
.log(Math
.max(1, 99, 'pink老师'));
console
.log(Math
.max());
</script
>
封装自己的数学对象
<script
>
var myMath
= {
PI: 3.141592653,
max
: function() {
var max
= arguments
[0];
for (var i
= 1; i
< arguments
.length
; i
++) {
if (arguments
[i
] > max
) {
max
= arguments
[i
];
}
}
return max
;
},
min
: function() {
var min
= arguments
[0];
for (var i
= 1; i
< arguments
.length
; i
++) {
if (arguments
[i
] < min
) {
min
= arguments
[i
];
}
}
return min
;
}
}
console
.log(myMath
.PI);
console
.log(myMath
.max(1, 5, 9));
console
.log(myMath
.min(1, 5, 9));
</script
>
绝对值
console
.log(Math
.abs(1));
console
.log(Math
.abs(-1));
console
.log(Math
.abs('-1'));
console
.log(Math
.abs('pink'));
取整
console
.log(Math
.floor(1.1));
console
.log(Math
.floor(1.9));
console
.log(Math
.ceil(1.1));
console
.log(Math
.ceil(1.9));
console
.log(Math
.round(1.1));
console
.log(Math
.round(1.5));
console
.log(Math
.round(1.9));
console
.log(Math
.round(-1.1));
console
.log(Math
.round(-1.5));
随机数
<script
>
console
.log(Math
.random());
function getRandom(min
, max
) {
return Math
.floor(Math
.random() * (max
- min
+ 1)) + min
;
}
console
.log(getRandom(1, 10));
var arr
= ['张三', '张三丰', '张三疯子', '李四', '李思思', 'pink老师'];
console
.log(arr
[getRandom(0, arr
.length
- 1)]);
</script
>
案例
<script
>
function getRandom(min
, max
) {
return Math
.floor(Math
.random() * (max
- min
+ 1)) + min
;
}
var random
= getRandom(1, 10);
while (true) {
var num
= prompt('你来猜? 输入1~10之间的一个数字');
if (num
> random
) {
alert('你猜大了');
} else if (num
< random
) {
alert('你猜小了');
} else {
alert('你好帅哦,猜对了');
break;
}
}
</script
>
2.3 date对象
文档 Date() 日期对象 是一个构造函数 必须使用new 来调用创建我们的日期对象
<script
>
var arr
= new Array();
var obj
= new Object();
var date
= new Date();
console
.log(date
);
var date1
= new Date(2019, 10, 1);
console
.log(date1
);
var date2
= new Date('2019-10-1 8:8:8');
console
.log(date2
);
</script
>
日期格式化
<script
>
var date
= new Date();
console
.log(date
.getFullYear());
console
.log(date
.getMonth() + 1);
console
.log(date
.getDate());
console
.log(date
.getDay());
var year
= date
.getFullYear();
var month
= date
.getMonth() + 1;
var dates
= date
.getDate();
var arr
= ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day
= date
.getDay();
console
.log('今天是:' + year
+ '年' + month
+ '月' + dates
+ '日 ' + arr
[day
]);
</script
>
<script
>
var date
= new Date();
console
.log(date
.getHours());
console
.log(date
.getMinutes());
console
.log(date
.getSeconds());
function getTimer() {
var time
= new Date();
var h
= time
.getHours();
h
= h
< 10 ? '0' + h
: h
;
var m
= time
.getMinutes();
m
= m
< 10 ? '0' + m
: m
;
var s
= time
.getSeconds();
s
= s
< 10 ? '0' + s
: s
;
return h
+ ':' + m
+ ':' + s
;
}
console
.log(getTimer());
</script
>
获得Date总的毫秒数
<script
>
var date
= new Date();
console
.log(date
.valueOf());
console
.log(date
.getTime());
var date1
= +new Date();
console
.log(date1
);
console
.log(Date
.now());
</script
>
倒计时案例
<script
>
function countDown(time
) {
var nowTime
= +new Date();
var inputTime
= +new Date(time
);
var times
= (inputTime
- nowTime
) / 1000;
var d
= parseInt(times
/ 60 / 60 / 24);
d
= d
< 10 ? '0' + d
: d
;
var h
= parseInt(times
/ 60 / 60 % 24);
h
= h
< 10 ? '0' + h
: h
;
var m
= parseInt(times
/ 60 % 60);
m
= m
< 10 ? '0' + m
: m
;
var s
= parseInt(times
% 60);
s
= s
< 10 ? '0' + s
: s
;
return d
+ '天' + h
+ '时' + m
+ '分' + s
+ '秒';
}
console
.log(countDown('2019-5-1 18:00:00'));
var date
= new Date();
console
.log(date
);
</script
>
2.4 数组对象
创建数组
<script
>
var arr
= [1, 2, 3];
console
.log(arr
[0]);
var arr1
= new Array(2, 3);
console
.log(arr1
);
</script
>
检测数组
<script
>
function reverse(arr
) {
if (Array
.isArray(arr
)) {
var newArr
= [];
for (var i
= arr
.length
- 1; i
>= 0; i
--) {
newArr
[newArr
.length
] = arr
[i
];
}
return newArr
;
} else {
return 'error 这个参数要求必须是数组格式 [1,2,3]'
}
}
console
.log(reverse([1, 2, 3]));
console
.log(reverse(1, 2, 3));
var arr
= [];
var obj
= {};
console
.log(arr
instanceof Array);
console
.log(obj
instanceof Array);
console
.log(Array
.isArray(arr
));
console
.log(Array
.isArray(obj
));
</script
>
数组元素的操作
<script
>
var arr
= [1, 2, 3];
console
.log(arr
.push(4, 'pink'));
console
.log(arr
);
console
.log(arr
.unshift('red', 'purple'));
console
.log(arr
);
console
.log(arr
.pop());
console
.log(arr
);
console
.log(arr
.shift());
console
.log(arr
);
</script
>
筛选数组
<script
>
var arr
= [1500, 1200, 2000, 2100, 1800];
var newArr
= [];
for (var i
= 0; i
< arr
.length
; i
++) {
if (arr
[i
] < 2000) {
newArr
.push(arr
[i
]);
}
}
console
.log(newArr
);
</script
>
数组排序
<script
>
var arr
= ['pink', 'red', 'blue'];
arr
.reverse();
console
.log(arr
);
var arr1
= [13, 4, 77, 1, 7];
arr1
.sort(function(a
, b
) {
return b
- a
;
});
console
.log(arr1
);
</script
>
索引
<script
>
var arr
= ['red', 'green', 'pink'];
console
.log(arr
.indexOf('blue'));
var arr
= ['red', 'green', 'blue', 'pink', 'blue'];
console
.log(arr
.lastIndexOf('blue'));
</script
>
去重
<script
>
function unique(arr
) {
var newArr
= [];
for (var i
= 0; i
< arr
.length
; i
++) {
if (newArr
.indexOf(arr
[i
]) === -1) {
newArr
.push(arr
[i
]);
}
}
return newArr
;
}
var demo
= unique(['blue', 'green', 'blue'])
console
.log(demo
);
</script
>
数组转为字符串
<script
>
var arr
= [1, 2, 3];
console
.log(arr
.toString());
var arr1
= ['green', 'blue', 'pink'];
console
.log(arr1
.join());
console
.log(arr1
.join('-'));
console
.log(arr1
.join('&'));
</script
>
2.5 字符串对象
包装
<script
>
var str
= 'andy';
console
.log(str
.length
);
var temp
= new String('andy');
str
= temp
;
temp
= null;
</script
>
不可变性
<script
>
var str
= 'andy';
console
.log(str
);
str
= 'red';
console
.log(str
);
var str
= '';
for (var i
= 1; i
<= 1000000000; i
++) {
str
+= i
;
}
console
.log(str
);
</script
>
根据字符返回位置
<script
>
var str
= '改革春风吹满地,春天来了';
console
.log(str
.indexOf('春'));
console
.log(str
.indexOf('春', 3));
</script
>
查找字符串中某个字符出现的次数
<script
>
var str
= "oabcoefoxyozzopp";
var index
= str
.indexOf('o');
var num
= 0;
while (index
!== -1) {
console
.log(index
);
num
++;
index
= str
.indexOf('o', index
+ 1);
}
console
.log('o出现的次数是: ' + num
);
</script
>
根据位置返回字符
<script
>
var str
= 'andy';
console
.log(str
.charAt(3));
for (var i
= 0; i
< str
.length
; i
++) {
console
.log(str
.charAt(i
));
}
console
.log(str
.charCodeAt(0));
console
.log(str
[0]);
</script
>
统计出现最多的字符和次数
<script
>
var o
= {
age
: 18
}
if (o
['sex']) {
console
.log('里面有该属性');
} else {
console
.log('没有该属性');
}
var str
= 'abcoefoxyozzopp';
var o
= {};
for (var i
= 0; i
< str
.length
; i
++) {
var chars
= str
.charAt(i
);
if (o
[chars
]) {
o
[chars
]++;
} else {
o
[chars
] = 1;
}
}
console
.log(o
);
var max
= 0;
var ch
= '';
for (var k
in o
) {
if (o
[k
] > max
) {
max
= o
[k
];
ch
= k
;
}
}
console
.log(max
);
console
.log('最多的字符是' + ch
);
</script
>
其他方法
<script
>
var str
= 'andy';
console
.log(str
.concat('red'));
var str1
= '改革春风吹满地';
console
.log(str1
.substr(2, 2));
</script
>
<script
>
var str
= 'andyandy';
console
.log(str
.replace('a', 'b'));
var str1
= 'abcoefoxyozzopp';
while (str1
.indexOf('o') !== -1) {
str1
= str1
.replace('o', '*');
}
console
.log(str1
);
var str2
= 'red, pink, blue';
console
.log(str2
.split(','));
var str3
= 'red&pink&blue';
console
.log(str3
.split('&'));
</script
>
3. 简单和复杂数据类型
简单类型又叫作基本数据类型或者值类型,复杂类型又叫作引用类型。
值类型:在存储时变量中存储的是值本身。string; number; boolean; undefined; null。引用类型:在存储时变量中存储的仅仅是地址(引用),因此叫作引用数据类型。通过new关键字创建的对象。
<script
>
var timer
= null;
console
.log(typeof timer
);
</script
>
3.1 堆和栈
但是js中是没有堆栈概念的。
3.2 内存分配
3.3 简单类型传参
<script
>
function fn(a
) {
a
++;
console
.log(a
);
}
var x
= 10;
fn(x
);
console
.log(x
);
</script
>
a++后: 简单数据类型之间,是直接把值传给了对方,所以他们之间不会有影响。
3.4 复杂数据类型传参
<script
>
function Person(name
) {
this.name
= name
;
}
function f1(x
) {
console
.log(x
.name
);
x
.name
= "张学友";
console
.log(x
.name
);
}
var p
= new Person("刘德华");
console
.log(p
.name
);
f1(p
);
console
.log(p
.name
);
</script
>
有一个p的变量指向了这个复杂数据类型。