JS基础二【JS】

JS

1.JS对象

1.1 对象（一个具体的事物）

在JS中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象。例如字符串，数值，数组，函数等。

1.2 创建对象的三种方式

1. 利用对象字面量创建对象 { }
   空对象：var obj = {};

var obj = {
	uname:'张三',
	age:18,
	sex:'男',
	sayHi:function(){
		console.log('hi~');
	}
}

注意：
（1）键值对，用冒号分隔
（2）多个属性或方法之间用逗号隔开
（3）方法冒号后面跟的是一个匿名函数
2. 使用对象
（1）调用对象的属性，我们采取 对象名.属性名

console.log( obj.uname );

（2）调用属性还有一种方法 对象名['属性名']

console.log( obj[‘age’] )

（3）调用对象的方法 sayHi 对象名.方法名()

obj.sayHi(); //千万别忘记小括号

3. 变量属性函数方法区别

变量和属性的相同点，他们都是用来存储数据的
var num = 10;
var obj = { age:18 };
变量和属性不同点:
变量：单独申明并赋值，使用的时候直接写变量名，单独存在
属性：在对象里面的不需要声明的，使用的时候必须是对象.属性名

函数和方法的相同点，都是实现某种功能
函数和方法的不同点：
函数是单独声明，并且调用的函数名()单独存在
方法在对象里面，调用的时候 对象.方法()

4. 利用 new Object 创建对象

var obj = new Object();
obj.uname = '张三';
obj.age = 18;
obj.sex = '男'；
obj.sayHi = function(){
	console.log('Hi~');
}

（1）利用等号赋值的方法，添加对象的属性和方法
（2）每个属性和方法之间用分号结束

console.log(obj.uname);
console.log(obj['sex']);
obj.sayHi();

2. 构造函数

就是我们把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面

2.1 利用构造函数创建对象

格式：

function 构造函数名（）{  
	this.属性 = 值;
	this.方法 = function(){
	}
}

例：

function Star(uname,age,sex){
	this.name = uname;
	this.age = age;
	this.sex = sex;
}
var ldh = new Star('刘德华',18,'男');
console.log(typeof ldh);//object (因为有this)

注意：
（1）构造函数名首字母大写
（2）我们构造函数不需要return 就可以返回结果
（3）我们调用构造函数必须使用new
（4）我们只要new Star()，调用函数就创建一个对象{ldh}
（5）属性和方法之间必须添加this

2.2 构造函数和对象

（1）构造函数：泛指的某一大类
（2）对象：特指的是一个具体的事物
（3）利用构造函数创建对象的过程我们也称为对象的实例化

2.3 new 关键字执行过程

（1）new 构造函数可以在内存中创建一个空的对象
（2）this 就会指向刚才创建的空对象
（3）执行构造函数里面的代码，给新对象添加属性和方法
（4）返回这个新对象，所以构造函数里不需要return

2.4 遍历对象

格式： for（变量 in 对象）{}；
例：

for(var k in obj){
	console.log(k); //k变量输出的是属性名
	console.log(obj[k]);//obj[k]得到的是属性值

2.5 JS内置对象

1. 查文档（MDN 或 WC3）
2. Math对象 不是构造函数，不需要new来调用，直接使用

console.log(Math.PI);
console.log(Math.max(1,99,3));//99
console.log(Math.max(1,99,'pink'));//NaN
console.log(Math.max());//-Infinity

3. 日期对象

日期对象是一个构造函数，必须使用new关键字来调用创建对象

 // Date() 日期对象  是一个构造函数  必须使用new 来调用创建我们的日期对象
        var arr = new Array(); //创建一个数组对象
        var obj = new Object(); //创建一个对象实例
        // 1. 使用Date 如果没有参数 返回当前系统的当前时间
        var date = new Date();
        console.log(date);
        // 2. 参数常用的写法  数字型 2019，10，01  或者是 字符串型 '2019-10-1 8:8:8'
        var date1 = new Date(2019,10,1);
        console.log(date1);//返回的是11月  不是10月
        var date2 = new Date('2019-10-1 8:8:8');
        console.log(date2);

3.1 格式化日期年月日

方法名	说明
getFullYear()	获取当年
getMonth()	获取月份（0-11月）date.getMonth()+1
getDate()	获取当天日期
getDay()	获取星期几（周日0-周六6）
getHours()	获取当前小时
getMinutes()	获取当前分钟
getSeconds()	获取当前秒数

（1）格式化日期

var date = new Date();
        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]);
       

（2）格式化时分秒

 //要求封装一个函数返回当前的时分秒  格式 08：08：08
        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());

3.2 获取Date总的毫秒数

// 获得Date总的毫秒数，不是当前时间的毫秒数，而是距离1970年1月1日过了多少毫秒
// 1. 通过valueOf() getTime()
var date = new Date();
console.log(date.valueOf());
console.log(date.getTime());
// 2. 简单写法(最常用)
var date1 = +new Date();
console.log(date1);
// 3. H5新增的
console.log(Date.now());

3.3 倒计时案例（重点）

d = parseInt(总秒数/60/60/24)；
h = parseInt(总秒数/60/60%24)；
m = parseInt(总秒数/60%60)；
s = parseInt(总秒数/60)；

function countDown(time){
            var nowTime = +new Date();//返回的是当前时间总的毫秒数
            var inputTime = +new Date(time);//返回的是用户输入时间的总的毫秒数
            var times = (inputTime - nowTime) / 1000;//times就是剩余时间总的秒数
            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;2
            return d + '天' + h + '时' + m + '分' + s + '秒';
        }
        console.log(countDown('2023-2-3 18:00:00'));

4. 数组对象

4.1 创建数组的两种方式

（1）利用数组字面量

var arr = [1, 2, 3];
console.log(arr[0]);//1

（2）利用 new Array()

var arr1 = new Array();
var arr1 = new Array(2);//这个2表示数组长度为2，里面有2个空的数组元素
var arr1 = new Array(2, 3);//等价于[2, 3],这样写表示里面有2个数组元素是2和3

4.2 检查是否为数组的方法

（1）instanceof 运算符；用来检测是否为数组
（2）Array.isArray(参数)； H5 新增方法

// 1. instanceof运算符
console.log(arr instanceof Array);  // true
console.log(obj instanceof Array);  // false
// 2. Array.isArray(参数)   --H5新增的方法
console.log(Array.isArray(arr));    // true
console.log(Array.isArray(obj));    // false

4.3 添加删除数组元素的方法

（1）push() 使用方法：

arr.push('red')

• 在数组末尾添加一个或多个数组元素
• 参数直接写数组元素
• push完毕之后，返回结果是新数组的长度
• 原数组也会发生变化

（2）unshift() 使用方法：

arr.unshift('red');

• 在数组开头添加一个或多个数组元素
• 参数直接写数组元素
• unshift完毕之后，返回结果是新数组的长度
• 原数组也会发生变化

（3）pop() 使用方法：

arr.pop();

• 可以删除数组最后一个元素，一次只能删除一个
• pop里面不能跟参数
• pop完毕之后，返回结果是删除的那个元素
• 原数组也会发生变化

（4）shift() 使用方法：

arr.shift();

• 可以删除数组第一个元素，一次只能删除一个
• shift里面不能跟参数
• shift完毕之后，返回结果是删除的那个元素
• 原数组也会发生变化

4.4 翻转数组

arr.reverse();

4.5 冒泡排序

//数组排序（冒泡排序）
        var arr1 = [13, 4, 77, 1, 7];
        arr1.sort(function(a, b){
            return a - b; //升序的顺序排列
            return b - a; //降序的顺序排列
        })
        console.log(arr1);

4.6 获取数组索引方法

（1）indexOf()
若有多个，则返回第一个元素的索引号
若找不到该元素，则返回的是-1
（2）lastIndexOf()
从后往前查找，如果找到，返回最后一个元素的索引

4.7 数组去重

核心算法: 遍历数组，然后拿着旧数组元素去查询新数组，如果该元素在新的数组里面没有出现过，我们就添加，否则不添加。

 // ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b']
        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(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b']);
        console.log(demo);

4.8 数组转换为字符串

// 1. toString()
var arr = [1, 2, 3];
console.log(arr.toString());    // 1,2,3
// 2. join(分隔符)
var arr1 = ['riki', 'daniel', 'oscar', 'kazuma', 'mika'];
console.log(arr1.join(''));   // rikidanieloscarkazumamika

5. 字符串对象

5.1 基本包装类型

基本包装类型就是把简单数据类型包装成了复杂数据类型，这样基本数据类型就有了属性和方法。有String，Number和Boolean。

5.2 根据字符返回位置

（1）str.indexOf(‘要查找的字符’，[起始的位置])

// str.indexOf('要查找的字符',[起始位置])
var str = '你肯定能懂我的意思都不用我怎么说';
console.log(str.indexOf('我'));
console.log(str.indexOf('我', 6));   //从索引号是3的位置开始查找

// 查找字符串"asdfaasadf"中所有a出现的位置及次数
var str = 'asdfaasadf';
var num = 0;
var index = str.indexOf('a');
while (index !== -1) {
    num++;
    console.log(index);
    index = str.indexOf('a', index + 1);
}
console.log('次数：' + num);

5.3 根据位置返回字符

（1）charAt(index)根据位置返回字符串

var str = 'andy';
console.log(str.charAt(3));//y

（2）charCodeAt(index)返回指定位置字符的ASCII码

var str = 'rikimaru';
console.log(str.charCodeAt(5));//97 a的ASCII码值

（3）str[index]H5新增

var str = 'rikimaru';
console.log(str[5]);

5.4 字符串操作方法

（1）concat('字符串1'，'字符串2'，...) 连接

var str = 'andy';
console.log(str.concat('red'));//andyred

（2）substr('截取的起始位置','截取几个字符') 截取

var str = '改革春风吹满地';
console.log(str.substr(2,2));//春风

（3）replace('被替换的字符','替换为的字符') 替换字符串

var str = 'andy';//只会替换第一个字符
console.log(str.replace('a','b'));//bndy

例：有一个字符串 ‘abcoefoxyozzopp’ 要求把里面多有的o替换成*

var str1 = 'abcoefoxyozzopp';
while(str1.indexOf('o') !== -1){
	str1 = str1.replace('o', '*');
}
console.log(str1);

（4）split('分隔符') 字符转换为数组；join() 把数组转换为字符串

var str2 = 'red, pink, blue';
console.log(str2.split(','));//["red","pink","blue";