我们生活中的每一个事物都是一个对象,比如一片树叶、一只狗、一个人等等都可以是对象,在JavaScript当中,对象则指的是一组无序的相关属性和方法的集合,有字符串、数值、函数等等…总的来讲对象由属性和方法构成:
有时候我们需要保存一系列人的信息时,变量和数组不好表达,我们就要用到对象,js中对象的表达结构更加清晰,每一条信息都会详细说明是什么,有什么内容:
// name: '郑三',
// gender: '男',
// age: 35;
在JavaScript中,现阶段我们创建对象的方式有三种:
对象字面量:就是 {} 里面包含了这个对象的所有属性和方法:
var person = {
name: '郑三',
age: 36,
gender: '男',
sayHi: function() {
console.log('你好');
}
}
console.log(person.name);
console.log(person['age']);
person.sayHi();
注意:在调用对象的方法时千万别忘记加小括号。
var person = new Object();
person.name = '郑三';
person.age = 36;
person.gender = '男';
person.sayHi = function() {
console.log('你好');
}
前面两种方法一次只能创建一个对象,我们可以利用函数的方法,重复这些相同的代码,我们把这个函数称为构造函数,构造函数就是把我们对象中相同的属性和方法抽象出来封装到函数里面,具体使用方法如下:
// function 构造函数名() {
// this.属性 = 值;
// this.方法 = function() {}
// }
// new 构造函数名();
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
var zs = new Person('郑三', 36, '男'); // 返回结果是一个对象
console.log(zs.name);
console.log(zs['gender']);
注意:构造函数是抽象了对象的公共部分,并封装到函数里,而对象特指一个,通过 new 关键字创建对象的过程我们称为对象实例化。
new关键字的执行过程:
利用for in 遍历我们的对象:
var person = {
name: '郑三',
age: 36,
gender: '男',
}
for (var k in person) {
console.log(k); // 输出变量k得到的是属性名
console.log(person[k]); // person[k] 得到的是属性值
}
js中有三种对象,分别为自定义对象、内置对象、浏览器对象,前两种为js基础,属于ECMAScript,第三种为浏览器独有,内置对象就是指JS语言自带的一些对象,提供了一些必要的属性和方法,方便了我们的开发。学习内置对象的使用,我们可以通过MDN / W3C查询文档
MDN:http://developer.mozilla.org/zh-CN/
学习对象方法:
Math对象具有数学常数和函数的属性和方法,跟数学运算有关的可以使用Math中的成员,比如绝对值、最大值、取整等…
// 绝对值
console.log(Math.abs(-34));
console.log(Math.abs('-34')); // 隐式转换,把字符串型转换为数字型
// 取整
// 1 Math.floor() 向下取整 往小取
console.log(Math.floor(4.2)); // 4
console.log(Math.floor(4.9)); // 4
// 2 Math.ceil() 向上取整 往大取
console.log(Math.ceil(4.2)); // 5
// 3 Math.round() 四舍五入
console.log(Math.round(4.2)); // 4
console.log(Math.round(-1.5)); // -1
更多方法可以查阅文档进行学习
Date对象是一个构造函数,必须使用new来调用我们创建的日期对象
// 1.使用Date 如果没有参数,则返回系统当前的时间
var time = new Date();
console.log(time);
// 2.参数一般写成数字型或者字符串型
var time1 = new Date(2023, 12, 4);
console.log(time1); // 返回的是2月4号
var time2 = new Date('2023-1-4 10:08:23');
console.log(time2);
数组对象可以通过字面量或者 new Array() 进行创建
// 1.利用字面量创建数组
var arr = [3, 5, 6];
console.log(arr[1]);
// 2.利用new Array()
var arr1 = new Array(); // 创建了一个空的数组
var arr2 = new Array(2); // 创建一个长度为2的数组
var arr3 = new Array(2, 3); // 两个数组元素 2 和 3
1 利用 instanceof 运算符,它可以检测是否为数组
var arr = [1, 6, 7];
console.log(arr instanceof Array); // true
2 利用 Array.isArray(参数);
var arr = [1, 6, 7];
console.log(Array.isArray(arr));
添加元素:
删除元素:
(1) 翻转数组 使用 reverse() 可以对数组进行翻转:
var person = ['tom', 'mike', 'mary'];
person.reverse();
console.log(person); // 结果为['mary', 'mike', 'tom']
(2) 冒泡排序 sort() 方法用原地算法对数组进行排序,并且返回数组:
var arr = [1, 4, 3, 7];
arr.sort();
console.log(arr);
注意 sort() 方法单用只对部分数有效,比如个位数,但出现两位及以上很难实现排序,我们可以在sort中加入一个函数实现排序:
var arr = [14, 414, 334, 74];
arr.sort(function(a, b) {
// return a - b; // 升序排列
return b - a; // 降序排列
});
console.log(arr);
要实现数组转换为字符串我们可以使用两个方法:
var arr = [4, 5, 8, 9];
console.log(arr.toString()); // 4,5,8,9
var colorArr = ['pink', 'bule', 'yellow'];
console.log(colorArr.join()); // pink,bule,yellow
console.log(colorArr.join('-')); // pink-bule-yellow
数组方法很多,建议大家查阅文档进行学习。
对象、复杂数据类型才有属性和方法,要让简单数据类型拥有属性方法,就可以把简单数据类型包装成复杂数据类型:
var str = 'tom'; // 这是个简单数据类型
console.log(str.length); // 简单数据类型拥有length属性是进行了包装
// 上述两行代码的内部操作
// var temp = new String('andy'); 第一步,把简单数据类型包装为复杂数据类型
// str = temp; 第二步,把临时变量值给 str
// temp = null; 最后,销毁临时变量
字符串本身不会因为方法而改变,方法等操作完成会返回一个新的字符串,查找字符位置用到两个常用方法:
方法名 | 解释 |
---|---|
indexOf(‘查找的字符’,起始位置) | 返回查找字符在字符串中的位置,如没有找到返回-1,起始位置可选 |
lastIndexOf() | 从后往前查找,找第一个匹配的字符 |
var str = '我亦无他,唯手熟尔。有心栽花花不开,无心插柳柳成荫';
console.log(str.indexOf('无')); // 2
console.log(str.indexOf('无', 3)); // 指定从索引号为 3 的位置向后查找,结果为 18
案例:统计a在字符串中出现的位置以及次数
var str = 'asdgbnhaasgtasa';
var index = str.indexOf('a');
var num = 0; // 初始次数为零
while (index !== -1) { // 判断是否找到a
console.log(index);
index = str.indexOf('a', index + 1); // 实现索引加一操作,继续向下查找
}
console.log('a出现的次数为' + num);
根据索引位置也可以返回字符,主要有以下方法:
方法 | 解释 |
---|---|
charAt(索引号) | 根据所提供的索引号返回字符 |
charCodeAt(索引号) | 返回相应索引号字符的ASCII码值 |
str[索引号] | H5新增,通过索引号返回字符 |
var str = 'result';
console.log(str.charAt(2)); // s
console.log(str.charCodeAt(2)); // 返回相应索引号字符的ASCII码值,结果为115
console.log(str[1]); // e
方法名 | 解释说明 |
---|---|
concat(str1,str2,…) | 将多个字符串进行拼接,作用相当于+ |
substr(‘‘要截取的起始位置’’,“截取的字符长度”) | 从起始位置(索引号)开始截取指定的字符串长度(length) |
slice(开始位置,结束位置) | 从开始位置取到结束位置前一个,结束位置不取(都为索引号) |
replace(‘被替换的字符’,‘新字符’) | 将新字符替换掉被替换的字符,这种方法只会替换一个符合条件的字符 |
split(‘分隔符’) | 将字符转换为数组 |
var str = 'come';
var str1 = '三人行,必有我师焉';
var str2 = 'came';
var colorStr = 'pink, black, blue';
console.log(str.concat(' ', 'on'));
console.log(str1.substr(4, 4));
console.log(str1.slice(0, 8));
console.log(str2.replace('a', 'o'));
console.log(colorStr.split(','));
执行结果如下: