一. JavaScript对象定义
1. 关键词 new创建对象
var obj1 = new Object();
obj1.name = '旺财';
obj1.age = 7;
obj1.eat = function(){
console.log('翔');
}
console.log(obj1);
2. 工厂类来创建对象
function getObjectFromFactory(name1,size1,color1){
var obj = new Object();
obj.name = name1;
obj.size = size1;
obj.color = color1;
return obj;
}
var result = getObjectFromFactory('阿迪王',42,'green');
console.log(result);
var result1 = getObjectFromFactory('361',42,'yellogreen');
console.log(result1);
3. 构造方法创建对象
- 在堆内存中开辟了一个空间,存储该对象
- this指向的是当前的实例对象
- this.属性的方式给当前对象添加属性或者方法
- 不需要return,直接将对象返回
- 构造函数会直接将对象给变量，而不是通过return返回的
-
构造器的定义
- 严格意义上来说 构造器的名字 首字母必须大写
- 构造器是不需要写返回值的
- 一个函数是不是构造器 并不是取决于函数名字的首字母是否大写, 而是取决于是否在前面加new
function Animal(name,age){
this.name = name;
this.age = age;
}
var dog = new Animal('hotdog', 8);
dog.say = function() {
console.log('wangwang');
}
console.log(dog);
var cat = new Animal('啵啵',2);
console.log(cat);
-
3.1 构造器情况1
function Dog(name,age) {
this.name = name;
this.age = age;
}
var dog = new Dog('大黄',8);
dog.color = 'black'; // 这里是给dog(大黄)添加颜色
dog.eat = function(){ // 给dog添加方法
console.log('翔');
}
console.log(dog);
var dog1 = new Dog('欢欢',14);
console.log(dog1);
-
3.2 构造器情况2
- 如果构造函数中 写了return返回的是基本数据类型 那么还是返回的是对象
- 如果构造函数中 写了return返回的是引用数据类型 那么返回是引用数据类型
function Panda(name,age){
this.name = name;
this.age = age;
// return 111;
return [1,2,3];
}
var p = new Panda('花花',4);
console.log(p);
-
内建JavaScript构造器
JavaScript 提供用于原始对象的构造器：
var x1 = new Object(); // 一个新的 Object 对象
var x2 = new String(); // 一个新的 String 对象
var x3 = new Number(); // 一个新的 Number 对象
var x4 = new Boolean(); // 一个新的 Boolean 对象
var x5 = new Array(); // 一个新的 Array 对象
var x6 = new RegExp(); // 一个新的 RegExp 对象
var x7 = new Function(); // 一个新的 Function 对象
var x8 = new Date(); // 一个新的 Date 对象
Math() 对象不再此列。Math 是全局对象。new 关键词不可用于 Math。
4. 对象字面量创建对象
- 创建对象最简单的方法, 可以在一条语句中定义和创建对象。
名:值对 也称 键值对
var person = {name:"red romance", age:18, color:"yellow"};
也可折行书写:
var person = {
name:"red romance",
age:18,
color:"green"
};
二. JavaScript对象属性
-
属性指的是与 JavaScript 对象相关的值。
-
JavaScript 对象是无序属性的集合。
-
属性通常可以被修改、添加和删除
2.1 定义JavaScript的属性
-
对象的属性是由
键值对组成的 -
每个键值对，键和值之间用
：分隔 name：'zs' -
所有的键都被称作是这个对象的属性，值叫做属性值
-
对象的属性，本质上都是字符串，只不过大部分属性是可以省略引号不写的；少数情况会出现不符合命名规范的,就必须带引号
- eg：'man-type':'渣男马' //这个属性名必须使用引号；属性名不符合命名规范就得带引号
var obj = {
name:'张三',
'age':34,
gender:'female',
"height":175,
eat:function(){
console.log('吃货~');
},
'character-type':'渣男'//这个属性名必须使用引号；属性名不符合命名规范就得带引号
};
2.2 属性的增和改
通过简单的赋值，向已存在的对象添加新属性。
假设 person 对象已存在 - 那么可以为其添加新属性：
-
属性添加的点语法
-
obj.weight = 90;有则更改，无则添加
-
-
中括号语法
-
obj['weight'] = 100;有则更改，无则添加
-
var person = {name:'张三'};
（1）当变量不符合命名规范的时候 不能使用点语法 需要使用中括号语法
person.man-type = "渣男"; // 报错
// 中括号中的变量 必须要加引号
person['man-type'] = '渣男';
// console.log(person);
（2）当属性的值是一个变量的时候 那么就要使用中括号语法
var a = "gender";
// person.a = "男";
person[a] = '男';
console.log(person);
2.3 属性的删除
delete 关键词从对象中删除属性：
delete obj.age;delete obj['character-type'];delete obj[a];- delete 关键词会同时删除属性的值和属性本身。
- 删除完成后，属性在被添加回来之前是无法使用的。
- delete 操作符被设计用于对象属性。它对变量或函数没有影响。
2.4 属性的查询
var person = {name:"red romance", age:18, color:"yellow"};
-
objectName.propertyeg: person.age
-
-
objectName["property"]eg: person["age"]
-
-
objectName[expression]eg: x = "age"; person[x]
-
2.5 for..in语句遍历对象属性
for (var i in object) {
要执行的代码
}
var person = {name:"Barry", age:18};
for(var i in person) {
console.log(i,person[i]);
}
2.6 属性的特殊情况说明
- 当有重复的变量出现的时候 后面的属性会覆盖之前的属性
后来者居上
var person = {name:'张三',age:18,name:'李四'};
console.log(person); // 李四
三. JavaScript对象方法
-
3.1 创建以及访问对象方法
// 方法的定位
var monkey = {name:'孙悟空',
age:500,
fly:function(){
console.log('小西天');
}
};
// 方法的调用
monkey.fly(); // 小西天
console.log(monkey.fly); /* ƒ (){
console.log('宜春职业技术学院');
}
*/
-
3.2 this关键字
this是一个内置的变量，this经常在函数/方法的内部去使用，this在函数外部统统代表的是window，this本质上是一个对象，this这个变量当中存储的是一个对象的地址，this主要代表的是这个函数的执行者或者说调用者是谁。
-
this的使用场合
- (1) 在script标签中 this代表的是window对象
- (2) 在普通函数中 this代表的是window对象
- (3) 在构造函数中this代表的是 创建出来的那个对象
说明:
构造函数当函数用又分为多种情况去使用：当普通函数用和当构造函数用
任何的函数都可以当普通函数用也可以当构造函数用
就看你调用函数的时候有没有加new 加了就是把函数当构造函数用，没加还是当普通函数用
函数是普通函数还是构造函数并不是定义说了算，而是调用说了算；
function Animal(name,age){
this.name = name;
this.age = age;
console.log(this);
}
new Animal('春春',5); // Animal(name,age)
var obj = new Animal('春春',5); // Animal(name,age)
console.log(obj); // Animal(name,age)
// console.log(this); // window
- (4) 在方法内部的this 代表的是方法的调用者
- (5) 在事件回调函数中 this代表的是事件源
- (6) 在call和apply方法中 this代表的是第一个参数
-
字符串的内建方法
1. toUpperCase 小写转大写
2. toLowerCase 大写转小写
var str1 = 'abcdefg';
console.log(str1.toUpperCase()); // ABCDEFG
var str2 = "ABCDEFG";
console.log(str2.toLowerCase()); // abcdefg
3. charAt 根据下标来找到对应的字符
var str3 = 'abcd';
console.log(str3.charAt(0)); // a
console.log(str3.charAt(1)) // b
4. charCodeAt 找到对应索引位置的字符的Unicode码
5. fromCharCode 根据字符的Unicode码找到
// (4) charCodeAt
var str4 = 'abcdef原♥安';
console.log(str4.charCodeAt(6),str4.charCodeAt(8)); // 21407 9829 23433
// (5) fromCharCode
console.log(String.fromCharCode(21407)); // 原
console.log(String.fromCharCode(23433)); // 安
6.indexOf 从原串当中找指定的子串，求出子串下标位置
- 参数：1. 指定的一个子串 2. 起始位置从哪开始查找 默认是从左边第一个开始往右
- 返回值：返回对应的子串下标，如果没有找到返回-1
var str6 = 'abcdefga';
console.log(str6.indexOf('a')); // 0
console.log(str6.indexOf('a',1)); // 7
// 当找不到对应的字符的时候 返回的是-1
console.log(str6.indexOf('j'));
// 特殊情况：当传递了一个空的字符串的时候 会返回的是0
console.log(str6.indexOf('')); // 0
7. lastIndexOf 和 indexOf 类似，只不过这个是从右往左查
var str7 = 'abcdefga';
console.log(str7.lastIndexOf('a')); // 7
console.log(str7.lastIndexOf('a',6)); // 0
// console.log(str7.lastIndexOf('')); //字符串长度
8. concat 字符串拼接
var str8 = 'hello';
console.log(str8.concat('world')); // helloworld
9. localeCompare 比较大小
还是使用的是ASCII码
如果原串大返回1
如果原串小返回-1
如果相等返回0
var str9 = '123';
console.log(str9.localeCompare('2'));//-1
console.log(str9.localeCompare('1'));//1
console.log(str9.localeCompare('123'));//0
10. slice 截取字符串 [ 左闭右开区间 )
- 功能：从原串当中截取指定位置（索引）的字符串，形成新串
- 参数：指定起始位置和结束位置,位置可以是负数，包含起始位置的但是不包含结束位置的
参数也可以只写一个，代表起始位置，结束位置不写代表一直到字符串结束- 返回值：返回截取的字符串
var str10 = 'abcdefg';
// a.左闭右开区间 左包含右不包含
console.log(str10.slice(2,5)); // cde
// b.从下标2开始 到结束
console.log(str10.slice(2)); // cdefg
// c.负数从右往左查 依然执行的是从左往右书写 左闭右开
console.log(str10.slice(-5,-2)); // cde
11. substr 截取字符串
- 功能：从原串当中截取的字符串，形成新串
- 参数：指定起始位置和长度，位置也可以是负数，
如果只写一个起始位置，一直截取到末尾- 返回值：返回截取的字符串
var str11 = 'abcdefg';
console.log(str11.substr(2,3)); // cde
console.log(str11.substr(2)); // cdefg
console.log(str11.substr(-5,3)); // cde
12. substring 截取字符串
- 功能：从原串当中截取的字符串，形成新串
- 参数：指定两个位置，两个位置不能是负数，方法会自动的根据位置大小决定起始和结束位置, 不包含结束位置的那个字符
- 返回值：返回截取的字符串
var str12 = 'abcdefg';
console.log(str12.substring(2,5)); // cde
console.log(str12.substring(2)); // cdefg
13. split 切割字符串
- 功能：以指定字符为间隔（切割点）将字符串转化为数组
- 参数：可以不写，那么整个字符串作为数组的一个元素
可以是空串，那么每个字符都会成为数组的一个元素
可以是指定的字符串，会以这个字符串为切割点去切割，
如果没有这个切割点，和不传一样- 返回值：返回生成的数组
var str13 = '1#2#3';
console.log(str13.split('#')); // ['1', '2', '3']
console.log(str13.split()); // ['1#2#3']
console.log(str13.split(''));['1', '#', '2', '#', '3']
14. toString 转换字符串
- 功能:把一个对象转化为字符串
- 参数：无
- 返回值：就是自己，是个新串
var str14 = 'hello';
console.log(str14.toString() === str14); // true
es6新增方法
15. includes(str) 判断是否包含指定的字符串
var str15 = 'abcdefg';
console.log(str15.includes('c')); // true
16. startsWith(str) 判断是否以指定字符串开头
var str16 = 'hello';
console.log(str16.startsWith('a')); // false
console.log(str16.startsWith('he')); // true
17. endsWith(str) 判断是否以指定字符串结尾
var str17 = 'hello';
console.log(str17.endsWith('o')); // true
18. repeat 重复指定次数
var str18 = '张三';
console.log(str18.repeat(2)); // 张三张三
网友评论