JavaScript 数据类型面向对象编程

Posted 2020-12-10 dasdfdfecvcx

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 数据类型面向对象编程相关的知识，希望对你有一定的参考价值。

数据类型
变量
类型转换
字符串常用方法
数值型常用方法
数组
数组的创建、赋值
数组常用方法
数组迭代
对象
对象的创建、使用
遍历对象
js 面向对象编程
工厂函数

数据类型

基本数据类型

string 单双引均可
number 数值型
boolean
null
undefined 未定义（已声明、未赋值）
复杂数据类型：object。object又可细分为以下2种

Array 数组
Object 对象
检测数据类型的两种?法

typeof(xxx) 复杂数据类型显示为object
Object.prototype.toString.call(xxx) 专用于检测复杂数据类型（引用类型），会显示object具体的类型（Object、Array）
console.log(typeof("")); // string
console.log(typeof(1)); // number

console.log(Object.prototype.toString.call({})) // [object Object]
console.log(Object.prototype.toString.call([])) // [object Array]
1
2
3
4
5

变量

var i; //只声明未赋值，类型是undefined

var j=10; //js的变量是弱类型的，根据值来确定变量类型

j="ok"; //js变量的数据类型可变
1
2
3
4
5
变量标识符

可以包含英文字母A-Za-z、数字0-9、下划线_、美元符号$
不能以数字0-9开头
js区分大小写，username、userName是2个不同的变量

类型转换

显式转换：

var a;

// 转换为数字
a=Number("1.6"); // 转换为数字
a=parseInt("1.6"); //转换为整型，直接舍弃小数部分
a=parseFloat("1.6"); //转换为浮点型

a=Number("xyz"); //如果不能转换为数字，不会报错，转换结果是NaN，即Not a Number
console.log(a); //NaN

var b=1.4;

// 转换为字符串
b=b.toString();
b=String(1.2);

// 转换为boolean
var c=Boolean(0); //0是false，非0是true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
隐式转换：自动完成类型转换

a=1.2+""; //字符串拼接。如果有一个加数是字符串，会自动将其它加数转换为字符串，再进行运算

if(12=="12"){ //相等判断时，如果一方是字符串，会自动先将另一方转换为字符串，再进行判断
console.log("true")
}
1
2
3
4
5
6

字符串常用方法

var str = "hello";

str.length //获取字符串长度

str.indexOf("he") //返回首次出现的位置，下标
str.lastIndexOf("he") //indexOf是从前往后找，lastIndexOf是从后往前找，返回的都是索引（正数），未找到则返回-1
str.indexOf("he",2) //2个方法均可指定检索的起始位置

str.search("he") //search的作用和indexOf相同，但不能指定检索的起始位置

// 以下3个方法均用于返回子串

// [start,end)，缺省end时默认提取到末尾
str.slice(2,3) //可使用负数索引。但低版本IE（<9.0)不支持负数索引
str.substring(2,3) //不能使用负数索引

// (start,length)，第二个参数是提取长度
str.substr(2,1)

// 替换子串。不改变原串，以新串的形式返回
str.replace("he", "He") //默认只替换第一个匹配到的，区分大小写
str.replace(/he/i, "He") //正则表达式，i不区分大小写。注意正则表达式不引
str.replace(/he/g, "He") //g替换所有匹配
str.replace(/he/ig, "He") //i、g可一起使用

// 连接1个或多个字符串，以新串形式返回，不改变原串
str.concat(" ","js")

// 去除2端的空白符
str.trim()

// 转换为全大|小写
str.toUpperCase()
str.toLowerCase()

// 返回指定位置上的字符
str.charAt(2)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
js的字符串是不可变的，所有修改字符串的操作，都是以新串形式返回，原串不改变。

search()、indexOf()、lastIndexOf()、replace()常结合正则表达式使用，注意正则表达式不引。

数值型常用方法

var n = 9.656;

// 保留指定位数的小数,返回字符串
n.toFixed(0) //0即取整
n.toFixed(2) //保留2位小数

// 保留指定位数（整数+小数），返回字符串
n.toPrecision(); //不指定默认保留全部位数
n.toPrecision(2); //保留2位数字
1
2
3
4
5
6
7
8
9
10
会自动四舍五入，位数不够时自动在末尾补0。返回的是字符串，不改变变量的值。

数组

数组的创建、赋值

// 直接创建
var arr1=[]; //创建空数组
var arr2=[1,2,3,4]; //创建数组并初始化

// 使?构造函数创建
var arr3 = new Array(); //创建空数组
var arr4 = new Array(2); //创建?个初始长度为10的数组。如果参数个数=1，该参数是数组的初始长度
var arr5 = new Array(1,2,3,4); //如果参数个数>1，参数是数组元素

// 数组元素的赋值、获取
arr5[0]=10;
console.log(arr5[0]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
js数组的长度会动态变化，指定的初始长度只是创建数组时预先分配空间，后续空间不够时会自动扩容。

js数组中的元素，类型可以不同，因为js是弱类型的，本身不太区分类型。

数组常用方法

var arr1=[1,2,3,4];

// 元素的添加、删除
arr1.shift(); //删除并返回数组的第一个元素
arr1.pop(); //删除并返回数组的最后?个元素
arr1.unshift(0); //在数组开头（第一个元素之前）添加一个元素，返回添加后的数组长度

// 连接数组
var arr2=[10,11,12];
var arr3=[20,21];

arr1.concat(arr2); //不改变原数组，以新数组的形式返回
arr1.concat(arr2,arr3); //参数可以是一个或多个数组
console.log(arr1);

// 数组转字符串
arr1.join(); //连接数组元素，返回字符串
arr1.join("_"); //可指定连接符，缺省时默认为逗号

// 字符串转数组
var str="c c++ java";
str.split(); //不指定切割福，默认整个字符串作为一个元素，["c c++ java"]
str.split(" "); //指定切割符，["c","c++","java"]
str.split(" ",2); //指定数组中要保留的元素个数，["c","c++"]，不指定时默认全部保留

// 数组反序，原数组改变
arr1.reverse();

//元素排序，原数组改变
arr1.sort(); //默认按ASCII码值升序排列，逐字符比较，eg. [21,204] => [204,21]，第一个字符相同，第二个：1的ASCII码比0大
arr1.sort(function(a,b){ //自定义排序方式
// return a-b; //按数值大小升序排列
return b-a; //按数值大小降序排列
});

/*
获取数组片段，以新数组形式返回，原数组不变
[start,end)，2个参数均为数组下标，均可以使用负数，-1表示最后一个元素，-2表示倒数第二个元素
start必需，end可选，缺省end默认到末尾
*/
arr1.slice(1,3);

/*
参数：start，deleteCount,ele...
从1（下标）开始，删除2个元素，并把后面的参数（可选，个数可变）作为数组元素填充到删除之处
*/
arr1.splice(1,2,"go","rust");

/*
返回指定元素在数组中第一次出现的位置（下标），如果数组中没有该元素，返回-1；如果有多个匹配，只返回第一个
第二个参数指定检索开始位置，可选，缺省时默认为0（从第一个元素开始）
*/
arr1.indexOf("go",0);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

数组迭代

var arr = [45, 4, 9, 16, 25];

// 使用for循环迭代数组
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}

// 使用forEach迭代数组。参数依次表示元素、索引、数组本身
arr.forEach(function(ele,index,arr){
console.log(index+"-----"+ele);
});
1
2
3
4
5
6
7
8
9
10
11
12

对象

对象的创建、使用

// 直接创建
var obj1={}; //创建空对象
var obj2={name:"chy",age:20}; //创建对象并初始化

// 使?构造函数创建
var obj3=new Object();
var user=new Object({name:"chy",age:20});

// 获取属性的值
console.log(user.name);

// 设置属性的值，如果key不存在则为添加，如果key已存在则为更新
user.name="zhangsan";

//删除属性（键值对）
delete(user.name);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
对象的key只能是字符串，引不引都可以，都认为是字符串。

delete可以删除对象的属性，但删除不了变量，删除变量是把变量赋值为undefined

遍历对象

var user={"name":"chy","age":20};

// 使用for in遍历对象的键值对
for (item in user) {
console.log(item); //item是key
console.log(user[item]); //获取对应的value。user.item会认为key是字符串"item"，只能用[ ]
}
1
2
3
4
5
6
7

js 面向对象编程

面向对象的3大特性：封装、继承、多态

上面的写法有2个缺点

成员变量的值写死了，虽然可以写set方法，在使用对象时先调用set方法给成员变量赋值，完成成员变量的初始化，但还是不够方便
每次创建对象时都要添加成员，很麻烦
上面的方式基本不用，一般都是使用工厂函数

工厂函数

写法一

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
由工厂函数自己创建、返回对象

写法二

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
由 new 工厂函数() 自动完成创建对象、返回对象两步，不用在工厂函数中手动创建、返回对象。

工厂函数相当于构造函数。在工厂函数内部，this表示创建的对象，成员变量要用this，不用this则使用的是形参，不是成员变量。

写法三（推荐）
用原型挂载方法

// 使用原型挂载策成员方法。工厂函数名.prototype.方法名
createUser.prototype.getName=function(){
return this.name;
}

createUser.prototype.getAge=function(){
return this.age;
}

createUser.prototype.getInfo=function(){
return this.name+" "+this.age;
}

// 创建对象
var user=new createUser("chy",20);

// 访问对象成员
console.log(user.name);
console.log(user.getInfo());

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
写法二有一个缺点：每个对象都会创建自身的方法，调用对象的成员方法时都是调用每个对象自身的方法，浪费资源、没必要。

用原型挂载方法后，创建对象时不再创建成员方法，同一个工厂创建的对象共用同一个原型，通过对象调用方法时，自动把对象挂载到原型上，调用原型上的方法，得到相应的结果。

所谓原型，类似于其它语言中的类，是对象的模板，公共部分。
————————————————
原文链接：https://blog.csdn.net/chy_18883701161/article/details/106088219

http://www.sina.com.cn/mid/search.shtml?q=%e6%9d%8f%e5%bd%a9%e5%a8%b1%e4%b9%90%e5%b9%b3%e5%8f%b0%e7%9a%84%e5%bc%80%e6%88%b7%e6%b3%a8%e5%86%8c%e6%89%a378100501
http://www.sina.com.cn/mid/search.shtml?q=%e6%9d%8f%e5%bd%a9%e5%b9%b3%e5%8f%b0%e7%9a%84%e5%bc%80%e6%88%b7%e6%b3%a8%e5%86%8c%e6%89%a378100501
http://www.sina.com.cn/mid/search.shtml?q=%e6%9d%8f%e5%bd%a9%e7%9a%84%e5%bc%80%e6%88%b7%e6%b3%a8%e5%86%8c%e6%89%a378100501

以上是关于JavaScript 数据类型面向对象编程的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript面向对象

javaScript面向对象编程指南笔记

JavaScript面向对象

javaScript面向对象-模块化-面相关对象编程——行走的方块案例

web前端（15）—— JavaScript的数据类型，语法规范2

面向对象编程思想