05-JS基础(对象方法)
2019-02-12 本文已影响29人
Viarotel
javascript基础五
对象
JavaScript 中的所有事物都是对象：字符串、数值、数组、布尔、日期、数学和正则表达式、函数...
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。
对象,是封装了一些属性和方法的集合,是带有属性和方法的特殊数据类型
此外，JavaScript 允许自定义对象。
在JavaScript中 所有的对象都是函数 所有的函数也可以称为"对象"
创建对象的方法:
通过Object对象new创建:
var obj = new Object();
var obj1 = new Object();
// 对象是有方法和属性的 动态添加
obj.name = '张三';
obj.sex = 0;
obj.age = 20;
obj.say = function () {
// this ==> 在这里指向obj实例对象本身
alert(this.name);
}
obj1.name = '李四';
// 怎么用?
obj.say();
alert('手动弹出==>'+obj.name);
alert('手动弹出2==>'+obj1.name);
通过字面量形式创建对象:
// 通过字面量形式创建对象
//方法一:
var obj = {};//创造一个对象
// 添加属性和方法
obj.name = '张三';
obj.age = 20;
obj.say = function () {
alert(this.name+'的年龄为:'+this.age);
}
alert('手动弹出name:'+obj.name);
obj.say();
//方法二:
// 键值对 key:value key=value
// 这是zs的一个实例对象
var zs = {
name:'张三',
age:20,
sex:0,
run:function () {
alert('Hi , i can running...');
}
sing: function () {
alert('Hi i am '+ this.name);
}
};
alert('手动弹出属性为===>'+zs.name);
zs.say();
函数创造对象:
// 在js中 所有的对象都是函数 所有的函数也可以称为"对象"
// 此时 这个Human为手动创建的自定义构造函数对象
// 在js中 this的指向在调用前是不确定的.
function Human () {
this.name = '张三';
this.age = 20;
this.say = function () {
alert(this.name+'的年龄为:'+this.age);
}
}
// zs为通过Human创建的一个实例对象
var zs = new Human();
// 通过zs的实例对象调用的属性 和方法
alert('手动弹出name==>'+zs.name);
zs.say();
this指向问题:
-
this只出现在函数中
-
构造函数对象的this指向new出来的实例对象,即:==this指向调用者==.(面试)
-
注意:如果没有实例化构造函数直接调用,会导致this指向整体运行对象window,进而影响函数值被重置
//案例 // script 有一个整体的运行对象window对象 //而window对象作为网页js的默认运行环境,一般不写. //如果不通过new实例对象,那么this指向调用者 //直接调用Human()自定义构造函数对象导致: //this.name==>windows.this,即windows对象本身 //this.name被重新赋值变成张三 // this在调用之前 是不知道指向谁的 // 面试: 1. 构造函数对象的this指向new出来的实例对象 var name = '李四'; function Human () { this.name = '张三'; this.age = 20; this.say = function () { alert(this.name+'的年龄为:'+this.age); } } Human(); alert(name);//弹出张三.
new的作用:
- 开辟内存空间，存储新创建的对象（ new Object() ）
- 把this设置为当前对象
- 执行内部代码，设置对象属性和方法
- 返回新创建的对象 ==<面试重要>==
JSON和JS对象:
JSON （JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。
JSON 是 JavaScript 原生格式，JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。
它是一种严格的js对象的格式，JSON的属性名必须有双引号，如果值是字符串，也必须是双引号；
JSON 与 JS 对象的关系:
-
JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。
//这是一个对象，注意键名也是可以使用引号包裹的 var obj = {a: 'Hello', b: 'World'}; //这是一个 JSON 字符串，本质是一个字符串 var json = '{"a": "Hello", "b": "World"}'; -
JSON 和 JS 对象可以相互转换:
//js对象转换为JSON //要实现从对象转换为 JSON 字符串，使用 JSON.stringify() 方法： var json = JSON.stringify({a: 'Hello', b: 'World'}); console.log(json);//结果是 '{"a": "Hello", "b": "World"}' //JSON转换为JS对象:JSON实际上就是字符串 //要实现从 JSON 转换为对象，使用 JSON.parse() 方法： var obj = JSON.parse('{"a": "Hello", "b": "World"}'); console.log(obj);//结果是 {a: 'Hello', b: 'World'} -
JSON 和 JS 对象遍历:
-
在js中，for……in用于遍历一个对象的属性，把对象的属性名和属性值都提出来。
-
直接根据键获取值时，obj["name"]和obj.name两种方法均可以获取到值。
-
[ ]可以使用变量作为参数，在实际使用过程中非常灵活，比如可以写出很通用的代码，而不用考虑具体对象的结构，多用于for (var key in obj) {}。
//对象 var user = { name:'张三', age: 20 } // json类型对象 var userJson = { "name":"李四", "age":30 } //遍历 for(var i in user){ // console.log(i); name,age //xx.xx 这种形式 只能取原来具有的属性 //非常重要! xx.abc abc是变量,就必须通过 xx[abc] 形式取值 console.log('属性'+i+'==>'+user[i]); } for(var a in userJson){ console.log('属性'+a+'==>'+userJson[a]); } -
数组和字符串高阶API
数组的内置方法
将数组转换为字符串
toString()方法:
var arr = ["a","b","c","d"];
console.log(arr.toString()); //输出a,b,c,d
join()方法:
var arr = [1,3,5,6,7];
//join可以把数组转换为字符串.
//如果没有参数 默认逗号隔开
var str = arr.join('!');
console.log(str);//控制台输出1!3!5!6!7
翻转数组
-
reverse()方法:
//方法用于颠倒数组中元素的顺序。 //该方法会改变原来的数组，而不会创建新的数组。 var arr = [10,11,1,3,5,7,9]; console.log(arr.reverse()); //输出9,7,5,3,1,11,10
数组排序
sort() 方法:
该方法会改变原来的数组，而不会创建新的数组。
如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。
function sortNumber(a, b)
{
return a - b //正序,b - a 倒序也可以用reverse()
}
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr + "<br />")
document.write(arr.sort())
//输出结果为:
//10,5,40,25,1000,1
//1,10,1000,25,40,5
参数为arr.sort(sortNumber)时:
//基本数据类型:
function sortNumber(a, b)
{
return a - b
}
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr + "<br />")
document.write(arr.sort(sortNumber))
//输出结果为:
//10,5,40,25,1000,1
//1,5,10,25,40,1000
//复杂数据类型:
var users = [
{
name:'张胜男',
age:20,
height: 180
},
{
name:'李四',
age:22,
height: 170
},
{
name:'王五',
age:18,
height: 172
},
{
name:'赵六',
age:22,
height: 168
}
]
// 要求: 按照年龄和身高升序排列. 如果年龄相同,比较身高.
// 对象数组的多条件排序
users.sort(function (a,b) {
//比较年龄 排序
if(a.age==b.age){
return a.height - b.height;
}
return a.age-b.age;
});
console.log(users);//先按年龄升序,如果年龄相同也按升序排列
查找数组中某个值在数组中对应的位置(下标)
indexOf()方法:
//indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
//indexOf(a,b);
//a表示,要查找的元素
//b表示,开始查找的位置。如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回-1。如果参数中提供的索引值是一个负值，则将其作为数组末尾的一个抵消，即-1表示从最后一个元素开始查找，-2表示从倒数第二个元素开始查找 ，以此类推。 注意：如果参数中提供的索引值是一个负值，并不改变其查找顺序，查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0，则整个数组都将会被查询。其默认值为0.
var array = [2, 5, 9];
array.indexOf(2); // 0
array.indexOf(7); // -1
array.indexOf(9, 2); // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0
lastIndexOf() 方法:
//lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 b 处开始.
//lastIndexOf(a,b);
//a表示,被查找的元素。
//b表示,从此位置开始逆向查找。默认为数组的长度减 1，即整个数组都被查找。如果该值大于或等于数组的长度，则整个数组会被查找。如果为负值，将其视为从数组末尾向前的偏移。即使该值为负，数组仍然会被从后向前查找。如果该值为负时，其绝对值大于数组长度，则方法返回 -1，即数组不会被查找。
var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2);
// index is 3
index = array.lastIndexOf(7);
// index is -1
index = array.lastIndexOf(2, 3);
// index is 3
index = array.lastIndexOf(2, 2);
// index is 0
index = array.lastIndexOf(2, -2);
// index is 0
index = array.lastIndexOf(2, -1);
// index is 3
截取数组
slice()方法:
从当前数组中截取一个新的数组，不影响原来的数组
slice($1, $2)并非在原数组上操作，而是返回被切部分的副本。区间表示为[$1, $2)。$1是起始下标，$2是截止下标。slice(0)==>创建一个数组的clone(克隆)对象
svar arr = [1,2,3,4,5];
//截取一个数组 [)
var rs = arr.slice(1,3);
//从下标为2开始
var rs2 = arr.slice(2);
// 有什么用类? 注意!
// var rs3 = arr; // 还是同一个对象
// 一般用于数组clone
var rs3 = arr.slice(0); // 创建一个数组的clone(克隆)对象
console.log(rs); //[2 , 3]
console.log(rs2);//[3, 4, 5]
console.log(rs3);//[1, 2, 3, 4, 5]
splice()方法:
删除或替换当前数组的某些项目
splice($1, $2)直接在原数组上操作，返回被切掉的部分。区间表示为[$1, $1+$2-1]。$1是起始下标，$2是切多少个。
var arr = [1,3,5,7];
var arr2 = [1,2,3,4,5];
var arr3 = [1,2,3,4,5];
var arr4 = [1,2,3,4,5];
//从下标为2的位置开始 替换1位,替换为8
arr.splice(2,1,8); // 常用
arr2.splice(2,2,8);
arr3.splice(2,1,['a','b','c']); // 二维数组
arr4.splice(2,1,'a','b','c'); // 常用
console.log(arr); // [1, 3, 8, 7]
console.log(arr2); // [1, 2, 8, 5]
console.log(arr3); // [1, 2, Array(3), 4, 5]
console.log(arr4);// [1, 2, "a", "b", "c", 4, 5]
清空数组的方法
array.length = 0;
- 更直接,在方法内可以直接影响方法外的数组.
- length属性可以赋值，其它语言中length是只读
array=[];
- 更简便,但是不彻底,在方法内使用时,==不会影响方法外的数组==
字符串方法
获取某个字符在字符串中的位置
indexOf()
字符串中的字符被从左向右索引,首字符的索引（index）为 0。
指定值的第一次出现的索引; 如果没有找到 -1。
indexOf() 方法对大小写敏感！
"Blue Whale".indexOf("Blue"); // returns 0
"Blue Whale".indexOf("Blute"); // returns -1
"Blue Whale".indexOf("Whale", 0); // returns 5
"Blue Whale".indexOf("Whale", 5); // returns 5
"Blue Whale".indexOf("", 9); // returns 9 为空时遍历定义的数组长度
"Blue Whale".indexOf("", 10); // returns 10
"Blue Whale".indexOf("", 11); // returns 10 超过数组长度返回数组最大长度
lastIndexOf()
字符串中的字符被从左向右索引。首字符的索引（index）是 0，
最后一个字符的索引,返回指定值在调用该方法的字符串中最后出现的位置，如果没找到则返回 -1。
"canal".lastIndexOf("a") // returns 3
"canal".lastIndexOf("a",2) // returns 1
"canal".lastIndexOf("a",0) // returns -1
"canal".lastIndexOf("x") // returns -1
截取字符串
slice()
可提取字符串的某个部分，并以新的字符串返回被提取的部分。
提取后不影响原副本
var str="Hello happy world!"
//提取从位置 6 开始的所有字符：
document.write(str.slice(6));//happy world!
//提取从位置 6 到位置 11 的所有字符：
document.write(str.slice(6,11));//happy
substr()
方法返回一个字符串中从指定位置开始到指定字符数的字符。范围大
截取后不影响原副本
var str="Hello world!"
document.write(str.substr(3));//lo world!
document.write(str.substr(3,7))//lo worl
substring()
方法返回一个字符串中介于两个指定下标之间的字符。范围小
截取后不影响原副本
var str="Hello world!"
document.write(str.substring(3));//lo world!
document.write(str.substring(3,7));//lo w
连接字符串
concat()
用的比较少,一般用+号拼接字符串
var str1 = ' hello,world! ';
var str2 = 'abcdefdaf';
console.log(str1.concat(str2)); //拼接等同console.log(str1+str2);
获取指定位置的信息
charAt()
可返回指定位置的字符。
字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间，该方法将返回一个空字符串。
var str="Hello world!"
document.write(str.charAt(1));//e
charCodeAt()
返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。
charCodeAt() 与 charAt() 方法执行的操作相似，只不过前者返回的是位于指定位置的字符的编码，而后者返回的是字符子串。
var str="Hello world!"
document.write(str.charCodeAt(1));//101
