Day38 对象、内置对象、DOM操作
1. 对象
1.1 是什么
现实生活中：万物皆对象，对象是一个具体的事物，一个具体的事物就会有行为和特征。
举例： 一辆车、一部手机、一台电脑、一张桌子
车是一类事物，门口停的那辆车才是对象。特征：红色、四个轮子，行为：驾驶、刹车
1.2 JS对象
JavaScript中的对象其实就是生活中对象的一个抽象。
JavaScript的对象是无序属性的集合。
其属性可以包含基本值、对象或函数。对象就是一组没有顺序的值。我们可以把JavaScript中的对象想象成键值对，其中值可以是数据和函数。
Class=”d1”
Key = value
对象的行为和特征
特征—属性
行为—方法
Tips：
事物的特征在对象中用属性来表示。
事物的行为在对象中用方法来表示。
1.3 对象创建方式
1.3.1 字面量方式
// 1 字面量
var person = {
name:'小南美',
age : 18,
sex : '女',
toString:function(){
console.log("姓名:"+this.name+" ,年龄:"+this.age+" ,性别:"+this.sex);
}
};
person.toString();
console.log(person.name);
1.3.2 New方式
// 2 new Object()
var person = new Object();
// 通过赋值的方式可以更改对象中属性的值也可以添加属性和值
person.name='小西北';
person.age=19;
person.xx = function(){
}
console.log(person.age);
person.xx();
1.3.3 工厂方式
// 3 工厂模式创建对象
function createPerson(name,age,sex){
var person = new Object();
person.name=name;
person.age=age;
person.sex=sex;
person.toString=function(){
console.log("姓名:"+this.name+" ,年龄:"+this.age+" ,性别:"+this.sex);
}
return person;
}
var person1 = createPerson("张三",19,'男');
var person2 = createPerson('李四',18,'女');
person1.toString();
person2.toString();
1.3.4 构造函数方式
// 4 构造函数
// 构造函数也是函数,一般首字母大写
function Person(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
this.toString=function(){
console.log("姓名:"+this.name+" ,年龄:"+this.age+" ,性别:"+this.sex);
}
}
var p1 = new Person("张三",19,'男');
var p2 = new Person('李四',18,'女');
p1.toString();
p2.toString();
1.4 对象遍历
var person = {
name:'张三',
age:18
};
console.log(person.name);
// 也可以通过这样的方式调用对象中的属性和值
console.log(person['name']);
// 遍历
for(i in person){
// i 是属性,并且是string类型
console.log(i);
console.log(person[i]);
}
// 对象属性不能重复
1.5 对象属性删除
// 删除age属性
delete person.age;
console.log(person);
1.6 This
JS中this的指向问题，有时会让人难以捉摸，随着学习的深入，我们可以逐渐了解。
函数内部的this几个特点：
- 函数在定义的时候this是不确定的，只有在调用的时候才可以确定
- 一般函数直接执行，内部this指向全局window
- 函数作为一个对象的方法，被该对象所调用，那么this指向的是该对象
- 构造函数中的this其实是一个隐式对象，类似一个初始化的模型，所有方法和属性都挂载到了这个隐式对象身上，后续通过new关键字来调用，从而实现实例化
2. 异常
2.1 是什么
当 JavaScript 引擎执行 JavaScript 代码时，会发生各种错误。可能是语法错误，通常是程序员造成的编码错误或错别字。可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。可能是由于来自服务器或用户的错误输出而导致的错误。当然，也可能是由于许多其他不可预知的因素。
2.2 Try…catch…
try 语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
JavaScript 语句 try 和 catch 是成对出现的。
在下面的例子中，我们故意在 try 块的代码中写了一个错字。catch 块会捕捉到 try 块中的错误，并执行代码来处理它。
function message() {
try {
console.log(a);
console.log(111111111);
} catch (err) {
console.log(2222222);
console.log("错误信息 : " + err.message);
}
}
message();
当try代码出现错误后,try中其余代码不再执行,直接执行catch
如果try中代码没有出错,则可以顺序执行完try中代码,catch中代码不执行
2.3 Finally
Finally是必须执行的语句
function message() {
try {
console.log(a);
console.log(111111111);
} catch (err) {
console.log(2222222);
console.log("错误信息 : " + err.message);
} finally {
console.log("不管怎么样,我都执行");
}
}
message();
2.4 Throw
throw 语句允许我们创建自定义错误。
正确的技术术语是：创建或抛出异常（exception）。
如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。
语法：throw exception
异常可以是 JavaScript 字符串、数字、逻辑值或对象。
本例检测输入变量的值。如果值是错误的，会抛出一个异常（错误）。catch 会捕捉到这个错误，并显示一段自定义的错误消息：
function myException(num) {
// 判断参数是否是数字
if (isNaN(num)) {
// 异常源点
throw "请输入数字";
// 下面语句不执行,因为throw有终止函数运行的功能
console.log(111111111);
} else {
console.log("输入的是个数字");
}
}
try {
myException("z");
console.log("没错");
} catch (err) {
console.log("错误信息 : " + err);
}
3. 内置对象
3.1 是什么
是一组常用的API,就是已经把功能都定义并实现好了,我们只需要进行函数调用即可
JavaScript中的对象分为4种：内置对象、浏览器对象、自定义对象、DOM对象。JavaScript 提供多个内置对象：Math/Array/Number/String/Boolean … …。对象只是带有属性和方法的特殊数据类型。学习一个内置对象的使用，只要学会其常用的成员的使用(通过查文档学习)。内置对象的方法很多，我们只需要知道内置对象提供的常用方法，使用的时候查询文档。
3.2 Math
Math对象不是构造函数，它具有数学常数和函数的属性和方法，都以静态成员的方式提供。
跟数学相关的运算来找Math中的成员(求绝对值，取整)。
(1)、常用属性
Math.PI 圆周率
(2)、常用方法
Math.random() 生成随机数
Math.floor() 向下取整
Math.ceil() 向上取整
Math.round() 取整，四舍五入
Math.abs() 绝对值
Math.max() 最大值
Math.min() 最小值
Math.sin() 正弦
Math.cos() 余弦
Math.pow() 求指数次幂
Math.sqrt() 求平方根
console.log(Math);
// 圆周率,并保留两位小数
console.log(Math.PI.toFixed(2));
// 随机数,大于等于0且小于1
console.log(Math.random());
// 向下取整
console.log(Math.floor(2.9));
// 向上取整
console.log(Math.ceil(2.1));
// 四舍五入
// console.log(Math.round(2.5));
console.log(Math.round(3.5));
// 最大值,最小值
console.log(Math.max(1,2,3,4,5,67));
console.log(Math.min(2,3,5,1));
// 指数次幂
console.log(Math.pow(3,4));
// 平方根
console.log(Math.sqrt(4));
// 随机生成范围的值
function getRandom(min,max){
// 随机数 * (最大 - 最小 +1) 结果 在+ 最小值
return Math.floor(Math.random()*(max-min+1)+min);
}
while(true){
var result = getRandom(1,10);
if(result == 10 ){
console.log(result);
break;
}
}
console.log("完事");
3.3 Date
创建Date实例用来处理日期和时间。Date 对象基于1970年1月1日（世界标准时间）起的毫秒数
(1)、创建日期对象
Date()是构造函数
var date = new Date();
(2)、日期原始值
getTime()：获取1970年1月1日至今的毫秒数
valueOf();原始值，获取1970年1月1日至今的毫秒数
(3)、获取日期指定部分
getMilliseconds()
getSeconds() // 返回0-59
getMinutes() // 返回0-59
getHours() // 返回0-23
getDay() // 返回星期几 0周日 6周6
getDate() // 返回当前月的第几天
getMonth() // 返回月份，从0开始
getFullYear() //返回4位的年份 如 2016
// 当前系统时间
var date = new Date();
console.log(date);
// 时间原点到当前系统时间的毫秒数
console.log(date.getTime());
console.log(date.valueOf());
// 年
console.log(date.getFullYear());
// 月 从0开始
console.log(date.getMonth()+1);
// 日
console.log(date.getDate());
// 星期 0是周日,1是周一
console.log(date.getDay());
// 时
console.log(date.getHours());
// 分
console.log(date.getMinutes());
// 秒
console.log(date.getSeconds());
// 格式化时间
function time(date){
var str ="";
var year = date.getFullYear();
var month = formatTime(date.getMonth()+1);
var day = formatTime(date.getDate());
var hours = formatTime(date.getHours());
var minutes = formatTime(date.getMinutes());
var seconds = formatTime(date.getSeconds());
str+= year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
return str;
}
console.log(time(date));
function formatTime(time){
// time = time >= 10 ? time : "0"+time;
if(time >= 10){
return time;
}else{
return "0"+time;
}
}
3.4 Array
3.4.1 创建方式
1、字面量方式
2、new Array()
// 创建方式
// 1 字面量
var arr1 = [1, 2, 3, 4, 5, null, "xxx"];
// 2 new Array
var arr2 = new Array(1, 2, 3, 4, 5, 6, "xxx");
// object
console.log(typeof arr1);
3.4.2 判断是否是数组
instanceof 如果返回true就是数组，false是非数组
Array.isArray() 如果返回true就是数组，false是非数组
valueOf() 返回数组对象本身
// 判断是否是数组 instanceof 和 Array.isArray()
// true
console.log(arr1 instanceof Array);
var obj = {};
// false
console.log(obj instanceof Array);
// true
console.log(Array.isArray(arr1));
3.4.3 栈操作(先进后出)
栈：表尾进行插入和删除操作的线性表。这一端被称为栈顶，相对地，把另一端称为栈底。向一个栈插入新元素又称作进栈、入栈或压栈，它是把新元素放到栈顶元素的上面，使之成为新的栈顶元素；从一个栈删除元素又称作出栈或退栈，它是把栈顶元素删除掉，使其相邻的元素成为新的栈顶元素
push() 添加元素
pop() 删除元素
// 栈操作(先进后出)
var arr1 = [1, 2];
// 尾部添加
arr1.push(3);
// 1,2,3
console.log(arr1);
// 尾部删除
arr1.pop();
// 1,2
console.log(arr1);
3.4.4 队列操作(先进先出)
shift() 删除元素
unshift() 添加元素
// 队列操作(先进先出)
var arr1 = [1, 2];
// 头部追加(插队)
arr1.unshift(3);
// 3,1,2
console.log(arr1);
// 头部删除
arr1.shift();
// 1,2
console.log(arr1);
3.4.5 排序和反转
// 排序
// sort只会按照每位的ASCII进行排序
var arr = [1, 2, 11, 10, 4];
arr.sort();
console.log(arr);
// 如果我们想按照数值大小排序,或者其他排序,需要自己编写排序
arr.sort(function (a, b) {
// a-b 升序 , b-a 降序
return a - b;
});
console.log(arr);
arr.sort((a, b) => b - a);
console.log(arr);
3.4.6 扩展-箭头函数
3.4.6.1 forEach
// forEach遍历
// 第一个参数是每位的数据,第二个参数是对应的索引
arr.forEach((item, index) => {
console.log(item + ":" + index);
});
arr.forEach(function (item, index) {
console.log(item + ":" + index);
});
3.4.6.2 Filter
// filter过滤,不符合条件的就不要了
// 不要偶数
var arr = [1, 2, 3, 4, 5, 6];
var arr1 = arr.filter((item, index) => {
if (item % 2 == 0) {
// 返回true说明要这个元素,就把该元素放到新数组中
// 若返回false,则说明不要该元素
return false;
} else {
return true;
}
});
console.log(arr1);
3.4.6.3 Map
// Map 更改数组
// 如果是偶数 就 +10 如果是 奇数 不变
var arr = [1, 2, 3, 4, 5, 6];
var arr1 = arr.map((item, index) => {
if (item % 2 == 0) {
// 返回什么,新数组中就是什么
return item + 10;
} else {
return item;
}
});
console.log(arr1);
3.4.7 常用方法
3.4.7.1 indexOf
判断某个元素在数组中出现的第一次的索引,如果没有,则返回-1
3.4.7.2 lastIndexOf
判断某个元素在数组中出现的最后一次的索引,如果没有,则返回-1
var arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];
// 1
console.log(arr.indexOf(2));
// -1
console.log(arr.indexOf(11));
// 6
console.log(arr.lastIndexOf(3));
3.4.7.3 Join
把数组转换为字符串
// 转换为字符串 逗号隔开 1,2,3,4,5,4,3,2,1
console.log(arr.join());
// 以 - 隔开
console.log(arr.join('-'));
3.4.7.4 合并数组
concat() 把参数拼接到当前数组、 或者用于连接两个或多个数组
var arr1 = [1, 2, 3];
var arr2 = [2, 3, 4];
// 合并两个数组 [1, 2, 3, 2, 3, 4]
var arr3 = arr1.concat(arr2);
console.log(arr3);
3.4.7.5 截取数组
slice(start,end) 1、从start开始截取元素，到end结束，包括start,不包括end,返回新数组，start,end是索引,
// 截取数组
var arr1 = [1, 2, 3, 4, 5, 6];
// 包含2 不包含4
var arr2 = arr1.slice(2, 4);
// [3, 4]
console.log(arr2);
splice() 1、从start开始截取元素，截取length个，,返回新数组，start是索引,length是个数
但是会删除原数组中截取出来的内容
console.log("-------------");
var arr = [1, 2, 3, 4, 5];
var arr1 = arr.splice(1, 3);
console.log(arr);
console.log(arr1);
3.4.8 清空数组
方式1 推荐
arr = []
方式2
arr.length = 0
方式3
arr.splice(0, arr.length)
3.5 包装类
为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型：String/Number/Boolean
3.6 String
字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串
1 字符方法
charAt() //获取指定位置处字符
charCodeAt() //获取指定位置处字符的ASCII码
str[0] //HTML5，IE8+支持 和charAt()等效
2 字符串操作方法
concat() //拼接字符串，等效于+，+更常用
slice(start,end) //从start位置开始，截取到end位置，end取不到
substring(start,end) //从start位置开始，截取到end位置，end取不到
substr(start,length) 从start位置开始，截取length个字符
indexOf() //返回指定内容在元字符串中的位置,如果没有，返回-1；(从前往后，检索到第一个就结束)
lastIndexOf() //返回指定内容在元字符串中的位置,如果没有，返回-1；(从后往前，检索到第一个就结束)
trim() //只能去除字符串前后的空白
大小写转换方法
toUpperCase() //转换大写
toLowerCase() //转换小写
search()//方法用于检索字符串中指定的子字符串，返回子字符串的起始位置
replace(old,new) //替换字符串替换字符串 new替换old
split() //分割字符串 返回的是一个数组。。数组的元素就是以参数的分割的
// 创建字符串对象
var str1 = "abcdefg";
var str2 = new String("asjdaksd");
// charAt : 获取对应索引上的值
console.log(str1.charAt(0));
// 字符串长度
console.log(str1.length);
// 拼接字符串 和 + 等价
console.log(str1.concat("123"));
// 截取 : 包含1但不包含5 , bcde
console.log(str1.slice(1, 5));
// 同上
console.log(str1.substring(1, 5));
// 截取 : 从1开始(包含) 截取4个
console.log(str1.substr(1, 4));
// 第一次出现的位置,没找到返回-1
console.log(str1.indexOf('g'));
// 最后一次出现的位置,找不到返回-1
console.log(str1.lastIndexOf('g'));
// 去除两边空格
// a f
console.log(" a f ".trim());
// 转大写
console.log(str1.toUpperCase());
// 转小写
console.log(str1.toLowerCase());
var str1 = "hello 你好吗";
// 替换
var str2 = str1.replace('你好吗', 'xxxx');
console.log(str2);
var str1 = "1,2,3,4";
// 以指定字符分割,返回字符串数组
var arr = str1.split(",");
console.log(arr);
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
