一.自定义对象
1.基本概念
万物皆是对象,对象是一个具体的事物。
(1)构成
对象的是由特征(属性),行为(方法)来构成。
(2)分类
自定义对象,内置对象,浏览器对象(前两个属于ECMAscript,最后一个属于js独有)
2.创建对象的三种方法
(1)字面量 { }创建对象
<script>
// var obj ={}; //创建一个空的的对象
var obj= {
uname: ‘张三‘, //对象属性
age:18, //对象属性
sex: ‘18‘,
say: function( ) {
console.log(‘hi~‘); //创建一个方法
}
}
</script>
注:
1.属性或者方法采用的是键值对的形式,中间用冒号隔开;
2.多个属性或者方法之间用逗号隔开;
3.创建方法 —— 冒号后面跟的是一个匿名函数
(2)利用关键字 new Object创建对象
<script>
var obj = new Object(); //创建一个空的对象
//添加属性
obj.uname = ‘张学友‘;
obj.sing = ‘李香兰‘;
//添加方法
obj.say = function() {
console.log(‘我是张学友‘);
}
</script>
注释:
用关键字new Object创建的对象,添加属性和方法要用等号直接赋值的方式添加。
(3)利用构造函数创建对象
1.把多个对象都有的属性和方法装到函数里面,这个函数称为构造函数。
2.可以重复使用一部分代码
语法
function Fun_name() {
this.属性=值;
this.方法=function(){}
}
<script>
//创建构造函数
function Star(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
this.sing = function(sang) {
console.log(sang);
}
}
//调用构造函数
var ldh = new Star(‘刘德华‘, ‘男‘, ‘18‘);
console.log(typeof(ldh)); //输出为object
//调用对象ldh属性和方法
console.log(ldh.name);
console.log(ldh.age);
console.log(ldh.sex);
ldh.sing(‘冷雨夜‘);
</script>
注:
1.构造函数的首字母要大写
2.构造函数不需要return就可以返回结果
3.调用构造函数前面要加 new
4.在构造属性和方法的前面要加this
(4)构造函数与对象
构造函数 :相当于一个类,抽象了对象的公共部分。
对象:通过关键字new来创建对象,称为实例化对象。
对象的本质:一组无序的相关属性和方法的集合。
(5)new和this的那点事
1.new在内存中创建一个新的空对象
2.让this指向这个新的对象
3.执行构造函数里面的代码,给这个新对象添加属性和方法
4.返回这个新对象(所以构造构造函数不需要return)
3.访问属性和方法
(1)访问属性
//方法一
console.log(obj.uname);
//方法二,属性名要用引号引起来
console.log(obj[‘uname‘]);
(2)调用方法
console.log(obj.say());
4.添加对象的属性和方法
function Obj(name,sex) {
this.name = name;
this.sex = sex;
}
var boy = new Obj(‘lc-snail‘,‘糙汉子‘)
//添加属性
boy[‘age‘]=‘3岁‘
//添加方法
boy[‘say‘] = function (value){
alert(value)
}
//调用新添加的方法
boy.say(‘hello word‘);
//调用新添加的属性
console.log(boy[‘age‘]);
5.遍历对象
(1)方法二
for...in
<script>
//创建一个对象
var obj = {
name: ‘snail_y‘,
age: 18,
sex: ‘男‘
}
//遍历<object>
for (var key in obj) {
console.log(key + ‘----‘ + obj[key]);
}
</script>
注:
key为属性名或者方法名
(2)方法二
Object.keys/values(obj)
<script>
//创建一个对象
var obj = {
name: ‘snail_y‘,
age: 18,
sex: ‘男‘,
say: function() {
console.log(‘hi~‘); //创建一个方法
}
}
console.log(Object.keys(obj))
console.log(Object.values(obj))
</script>
二.内置对象
js中分为三种: 自定义对象,内置对象,浏览器对象
内置对象指的是js自带的一些对象,这些对象供开发者使用,并且提供了一些常用的或者是最基本的功能(属性和方法)。
1.Math数学对象
Math数学对象,不需要new,直接调用就行
取最大值
console.log(Math.max(1,2,3)) //输出3
console.log(Math.max(1,2,‘我是调皮捣蛋字符串‘)) //输出NaN
取绝对值
Math.abs()
三个取整的方法
//Math.floor( ) 向下取整
Math.floor(1.999) //输出0
//Math.ceil( ) 向上取整
Math.ceil(0.555) //输出1
//Math.round() 四舍五入
Math.round(0.666) /输出1
获取一个随机数
Math.random() 获取 一个浮点型伪随机数字,在0(包括0)和1(不包括)之间。
function getRandom() {
return Math.random();
}
得到一个两数之间的随机整数(不含最大值,含最小值)
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min; //不含最大值,含最小值
}
得到一个两数之间的随机整数,包括两个数在内
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值,含最小值
}
更多方法和属性查看文档(https://developer.mozilla.org/zh-CN)
封装自己的数学对象
// //Math数学对象,直接调用就行
// console.log(Math.max(1,2,3)) //输出3
// console.log(Math.max(1,2,‘我是调皮捣蛋字符串‘)) //输出NaN
//利用对象封装自己的数学对象
var myMath = {
PI: 3.1415926,
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, 2, 3, 4));
2.日期对象
Date()是构造函数,需要用new实例化
//1.不带参数
var date = new Date();
console.log(date); //返回系统当前时间
//2.带参数
数字型 2019,10,18
字符串型 ‘2019-10-20 8:8:8‘
var date = new Date(‘2019-10-20 8:8:8‘);
console.log(date); //输出的是输入的时间
格式化日期
var date = new Date();
console.log(date.getFullYear());//返回年
console.log(date.getMonth() + 1); //月 会比当前月份少1
console.log(date.getDate()); //日
console.log(date.getDay()); //星期 返回的是0——6
console.log(date.Hours()); //时
console.log(date.getMinutes()); //分
console.log(date.getSeconds()); //秒
dmeo1——输出时分秒
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
var dates = date.getDate();
var day = date.getDay();
var arr = [‘星期天‘, ‘星期一‘, ‘星期二‘, ‘星期三‘, ‘星期四‘, ‘星期五‘, ‘星期六‘]
var arr_1 = arr[day];
console.log(‘今天是‘ + year + ‘年‘ + month + ‘月‘ + dates + ‘日‘ + arr_1)
//输出今天是2020年2月16日星期一
dmeo2——输出时分秒
function getTime() {
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(getTime());
时间戳
距离1970/1/多少毫秒
<script>
var date = new Date();
//方法一
console.log(date.valueOf()); //O是大写
//方法二
console.log(date.getTime());
//方法三
var date1 = +new Date(); //new后面没点
console.log(date1);
//方法四H5新增
console.log(Date.now());
</script>
倒计时
function counDown(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 ? d : ‘0‘ + d;
var h = parseInt(times / 60 / 60 % 24); //小时
h = h > 10 ? h : ‘0‘ + h;
var m = parseInt(times / 60 % 60); //分钟
m = m > 10 ? m : ‘0‘ + m;
var s = parseInt(times % 60); //秒
s = s > 10 ? s : ‘0‘ + s;
return d + ‘天‘ + h + ‘时‘ + m + ‘分‘ + s + ‘秒‘;
}
console.log(counDown(‘2020-3-16 18:59:00‘))
3.字符串对象
(1)简单数据类型的包装:
var temp = new String(‘andy‘);
//把临时变量的值给str
str=temp;
//销毁这个临时变量
temp= null;
包装后
var str = ‘andy‘;
console.log(str.lengtht); //只有复杂数据类型和对象才有属性和方法
注释:
1.只有对象才有方法和属性 ,复杂数据类型才有属性和方法。
2.简单的数据类型(String Number Boolean)包装为复杂数据类型
(2)字符串的不可变
重新赋值只是里面的值不可改变,虽然看上去可以改变内容但其实是内存地址变了,内存中新开辟了一个内存空间。
var str = ‘abc‘;
str = ‘hello‘;
console.log(str) //输出hello,但是原来的abc还在内存中,大量使用字符串会用效率问题。
(3)字符串查找
根据字符返回索引
如果未找到该值,则返回-1,如果找到,则返回第一次出现的索引。
indexOf(‘要查找的字符‘,开始的位置) //从前往后找,只返回第一个
lastindexOf( ) //从后往前找,只返回第一个
demo —— 查找某个字符,在字符串中出现的次数和出现的位置
var str = ‘abcdefgjklabcdeddeeac‘;
var index = str.indexOf(‘a‘);
var num = 0;
while (index !== -1){
console.log(index);
index = str.indexOf(‘a‘,index + 1);
num++
}
console.log(‘a‘ + ‘出现的次数为‘ + num);
根据索引返回字符
输出改索引位置的字符,如果指定的 index 值超出了该范围,则返回一个空字符串。
//方法一
charAt(index) //返回字符
//方法二
charCodeAr(index) //返回字符的ASCLL码
str[index] //HTML5新增
demo —— 返回字符串里面出现次数最多的值
var str = ‘aaaaasdfghjkklqwreeeryifnnbaaaddd‘;
var a = {};
for (var i = 0; i < str.length; {
var chars = str.charAt(i);//获取字符串的每一个字符
if(a[chars]) { //判断该字符是否存在对象中
a[chars]++; //,如果存在就+1
}else {
a[chars] = 1;//,如果不存在就赋值为1.
}
}
console.log(a)
var max = 0;
var ch = ‘‘;
for (var k in a) {
//k得到的是属性名
//a[k]得到的是属性值
if (a[k] > max) {
max = a[k];
ch = k;
}
}
console.log(‘出现次数最多的是‘ + ch);
(4)截取字符串
substr(开始位置,截取几个字符)
var str1 = ‘改革春风春‘;
console.log(str1.substr(2, 2)); //返回春风
(5)字符串的替换
replace(被替换的字符,替换字符)
注:只会替换字符串中第一个出现的字符
demo —— 替换字符串中所有的某个字符
var str1 = ‘aaaabbbbb‘;
while (str1.indexOf(‘b‘) !== -1) {
str1 = str1.replace(‘b‘, ‘a‘);
}
console.log(str1);
5.字符串转换为元组
split( ‘分隔符’)
var str = ‘red,blue,pink‘;
console,log(str.split(‘,‘) //输出 [‘red‘,‘blue‘,‘pink‘}
三.数据类型和堆,栈
1.简单数据类型和复杂数据类型
简单数据类型:
称为基本数据类型在存储时变量中存储的是值本身,因此又叫做值类型。如:string number boolean undefined nul
复杂数据类型:
在存储变量中存储的是地址(引用),因此又叫做引用数据类型,通过new关键字创建对象,如,Object Arrary,Date等
2.数据类型和堆,栈
简单数据类型,放到栈里面,存放的是值。
复杂数据类型放到堆里面,在栈里面放地址,地址指向堆里面的数据。