JavaScript基础
对象
什么是对象? ☞现实世界:万事万物皆对象。 ☞对象也是一个容器,数据可以实现一一对应的关系且可以实现保存多条 ☞对象:任何一个具体的事物都称为对象,必须是一个具体的事物(手机,汽车不是对象,属于一类对象) ◆ 对象是由特征(名词)【属性】和行为(动词)【方法】 ☞程序中的对象:对现实对象的抽象 ☞ 总结: 1.程序中的对象: ✔ 对象必须有对应的属性【描述对象的特点,在程序中一般使用名词描述】 ✔ 对象必须有行为动作方法 【方法用来描述具体对象的行为动作,一般方法使用动词】 2.对象容器的组成: ✔ 都是由一个一个的键值对组成的. 键: 值 ✔ 键在对象中有两部组成, 一个叫属性,一个叫方法 ✔ 属性:用来保存数据基本特征 ✔ 方法:用来保存一个匿名函数的,方法就是用来实现功能的.表示的是一种能力
通过字面量创建对象
☞ 通过字面量方式创建对象 var 变量名 = { key: value, key: value, key: functon () { } }; 总结: 1.创建对象,必须要确定具体的事物 2.创建对象,必须要确定对象有哪些属性【特征】或者方法【动作,行为】 3.如果一次想要输出多个对象,那么可以将每一个对象放到一个数组中。 4.通过字面量定义的对象,对象中都是以键值对形式保存数据的 5.如果有多条件属性,那么键值对之间使用逗号隔开, 最后一个键值对的逗号可以省略 6.对象中的属性名和方法名都是自定义的 ☞ 访问对象属性 (对象.属性 | 对象['属性名']) ☞ 访问对象方法 (对象.方法名) 注意: 1.如果通过 对象['属性名'] 访问对象的属性时候,必须保证使用字符串格式 ☞ 函数:独立存在的函数 ☞ 方法:属于对象的函数(匿名函数)
通过Object创建对象
☞ var 变量 = new Object(); 1.Object 是一个构造函数 2.通过new调用构造函数 ☞ 添加属性: 对象变量.属性名 = 值; ☞ 添加方法: 对象变量.方法名 = function () { }
工厂方式创建对象
1. 创建多个游戏对象 2. 例如: function create ( name, age, height ) { var Ob = new Object() Ob.name = name; Ob.age = age; Ob.height = height; Ob.eat = function () { } return Ob; }
自定义构造函数创建对象
☞ 使用帕斯卡命名法 (每个单词首字母大写) ☞ 例如: function CreateHero ( name, age, height ) { this.name = name; this.age = age; this.height = height; }
new 关键字执行过程
- 在内存中创建一个空对象
- this指向创建的对象
- 执行函数
- 返回当前对象
注意:
- 在构造函数中,默认的返回值就是当前创建的对象
### this关键字
- 普通函数中的this 指向Window
- 在方法中的this 指向当前方法所属的对象
- 在构造函数的this 指向创建的对象
总结:
构造函数谁调用函数,this就指向谁遍历对象删除对象属性 ☞ 通过 for in 遍历对象的成员 ☞ 遍历对象中的属性 ☞ 遍历对象中的值
检测对象的数据类型
对象 instanceof 构造函数
对象总结
1. 程序中的对象: 在程序中对具体事物的抽象
2. 对象的基本的组成: 属性【描述对象特征特点】 | 方法 【描述对象行为动作功能】
3. 创建对象方式:
✔ 字面量方式
var obj = {
key : 值,
key : function () {
}
}
✔ 通过构造函数
var obj = new Object();
obj.自定义属性名 = 值;
obj.自定义方法名 = function () {
}
✔ 工厂模式创建对象(本质就是对第二种方式的封装,创建多个对象)
function people (name) {
var obj = new Object();
obj.自定义属性名 = name;
return obj
}
var zs = people('zs');
✔ 自定义构造函数创建对象(确定对象的类型)
function People (name) {
this.自定义属性名 = name;
}
var zs = new People('zs');
4. 对象的基本操作
✔ 获取对象的属性或方法
1. 对象.自定义属性名 || 对象['属性名']
2. 对象.自定义方法名()
5. 判断对象的具体类型
对象名称 instanceOf 构造函数
其他扩展部分
简单数据类型在内存中的存储
☞ 简单数据类型(值类型) 存储在内存的 栈 上
☞ Number String Boolean Null Undefined
复杂数据类型在内存中的存储
☞ 复杂数据类型(引用类型) 存储在内存的 堆 上
☞ Object | Array | 函数
简单数据类型作为函数的参数在内存存储
☞ 分析案例代码
function fn ( a, b ) {
a = a+1;
b = b+1;
console.log( a );
console.log( b );
}
var x = 10;
var y = 5;
fn(x, y);
console.log( x, y ); 思考:x , y 的值是多少?
复杂数据类型作为函数的参数在内存存储
☞
function Person ( name, age ) {
this.name = name;
this.age = age;
this.sayHi = function () {
console.log( "你好" );
}
}
var p1 = new Peron( "张三", 18 );
function getperson ( person ) {
person.name = "李四";
}
getperson( p1 );
console.log( p1.name );
思考: p1 的name值是什么?
案例
☞
function Person ( name, age ) {
this.name = name;
this.age = age;
this.sayHi = function () {
console.log( "你好" );
}
}
var p1 = new Person(" 张三 ", 18);
function getperson ( person ) {
person.name = "李四";
person = new Person("王五",20);
console.log(person.name);
}
getperson(p1);
console.log(p1.name); 思考: p1.name 输出的结果是什么?
☞ 数组作为参数
function getary ( ary ) {
ary[0] = -1;
}
var newary = [1,2,3];
getary( newary );
console.log( newary[0] );
内置对象介绍
☞ JavaScript组成: ECMAScript | DOM | BOM
☞ ECMAScript: 变量,函数,数据类型,流程控制,内置对象。。。
☞ js中的对象: 自定义对象,内置对象,浏览器对象(不属于ECMAScript)
☞ Math对象,Array对象,Date对象。。。。
☞ 通过查文档学习内置对象 MDN (https://developer.mozilla.org/zh-CN/docs/Web/JavaScript)
MDN介绍
MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
Math对象
☞ Math.round() 四舍五入(小数如果小于0.5,返回小于当前数字的整数,如果小数部分大于0.5返回大于当前数字的一个整数)
☞ Math.abs() 取绝对值(返回当前数字的绝对值,正整数)
☞ Math.max() 返回一组数中的最大值 (可以设置多个参数,返回其中最大值,参数不可以是数组)
☞ Math.min() 返回一组数中的最小值 (可以同时设置多个参数,与最大值效果一样)
☞ Math.sin(x) 返回一个正弦的三角函数 ( 注意: x 是一个以弧度为单位的角度)
☞ Math.cos(x) 返回一个余弦的三角函数 (注意: x 参数是一个以弧度为单位的角度)
☞ Math.pow(x,y) 返回x的y次幂
静态成员和实例成员
☞静态成员:
1. 不需要通过构造函数创建对象且能访问对象中的属性或方法
☞实例成员:
1. 首先必须通过构造函数创建对象
2. 通过构造函数创建对象并访问的属性或方法[实例成员]
数组对象
☞ 判断变量是不是一个数组 Array.isArray(ary) //存在浏览器兼容 (H5)中的新方法
☞ 清空数组方式:
✔ 给数组赋值为null
✔ 给数组赋值为空
✔ 可以将数组的长度设置为0
数组中常用的方法
☞ 栈方法
ary.push() //在数组的结束位置添加值
ary.pop() //从数组的末尾开始取值(删除值)
☞ 队列(先进先出)
ary.shift() //从数组的开始位置取值(删除值)
ary.unshift(number) //在数组的开始位置添加值
☞ 翻转方法
ary.reverse() // 翻转数组
☞ join方法()
ary.join('=')//将数组中的值以字符串的形式输出
☞ indexOf()、lastIndexOf()
备注:
1. 可以设置一个参数,代表找对应的值
2. 可以设置两个参数,代表从指定位置处开始找
例如: ary.indexOf('a') 在数组中从前向后找a,找到返回对应的位置,找不到返回-1
ary.lastIndexOf('a') 在数组中从后向前找a,如果找到返回对应的位置,找不到返回-1
字符串
-
特性
☞ 不可变性 在定义字符串类型的变量时候,每次修改字符串的值得时候,都会在内存中重新开启空间,之前的值还保留 ☞ 注意: 尽量不要大量的拼接字符串
-
方法
☞ 字符方法 1. charAt(index) //获取指定位置处的字符 2. str[index] //获取指定位置的字符 (H5中的方法) ☞ 字符串方法 1. concat() //拼接字符串 等效于 + 2. slice(strat,end) //从指定位置开始,截取字符串到结束位置,end值取不到 3. substring(start,end) //从指定位置开始,截取字符串到结束位置, end值取不到 4. substr(start,length) //从指定位置开始,截取length长度个字符 ☞ 位置方法 1. indexOf(字符) //返回字符在字符串中的位置 2. lastIndexOf(字符) //从后往前找,只找第一个匹配的字符 ☞ 去除空白 trim() //只能去除字符串前后空白 ☞ 大小写转换法 toLocaleUpperCase() //转化为大写 toLocaleLowerCase() //转化为小写 ☞其他 replace(a,b) // 用b替换a split() // 以一个分割符,将一个字符串串分割成一个数组
如有不足,请多指教,
未完待续,持续更新!
大家一起进步!