JavaScript 数据类型、面向对象编程
文章目录
1、数据类型
- 基本数据类型
- 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]
2、变量
var i; //只声明未赋值,类型是undefined var j=10; //js的变量是弱类型的,根据值来确定变量类型 j="ok"; //js变量的数据类型可变
变量标识符
- 可以包含英文字母A-Za-z、数字0-9、下划线_、美元符号$
- 不能以数字0-9开头
js区分大小写,username、userName是2个不同的变量
3、类型转换
显式转换:
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
隐式转换:自动完成类型转换
a=1.2+""; //字符串拼接。如果有一个加数是字符串,会自动将其它加数转换为字符串,再进行运算 if(12=="12"){ //相等判断时,如果一方是字符串,会自动先将另一方转换为字符串,再进行判断 console.log("true") }
4、字符串常用方法
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)
js的字符串是不可变的,所有修改字符串的操作,都是以新串形式返回,原串不改变。
search()、indexOf()、lastIndexOf()、replace()常结合正则表达式使用,注意正则表达式不引。
5、数值型常用方法
var n = 9.656; // 保留指定位数的小数,返回字符串 n.toFixed(0) //0即取整 n.toFixed(2) //保留2位小数 // 保留指定位数(整数+小数),返回字符串 n.toPrecision(); //不指定默认保留全部位数 n.toPrecision(2); //保留2位数字
会自动四舍五入,位数不够时自动在末尾补0。返回的是字符串,不改变变量的值。
6、数组
数组的创建、赋值
// 直接创建
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]);
js数组的长度会动态变化,指定的初始长度只是创建数组时预先分配空间,后续空间不够时会自动扩容。
js数组中的元素,类型可以不同,因为js是弱类型的,本身不太区分类型。
7、数组常用方法
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);
8、数组迭代
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); });
9、对象
对象的创建、使用
// 直接创建 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);
对象的key只能是字符串,引不引都可以,都认为是字符串。
delete可以删除对象的属性,但删除不了变量,删除变量是把变量赋值为undefined
10、遍历对象
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",只能用[ ] }
11、js 面向对象编程
面向对象的3大特性:封装、继承、多态
<script> // 创建对象 var user=new Object(); // 添加成员变量 user.name="chy"; user.age=20; // 添加成员方法 user.getName=function(){ // 在对象内部访问成员变量、调用成员方法,需要使用对象名来操作,不能直接访问。因为现在是user.xxx在对象内部,所以也可以使用this表示当前对象 // return user.name; return this.name; } user.getAge=function(){ // return user.age; return this.age; } user.getInfo=function(){ // return user.name+" "+user.age; return this.name+" "+this.age; } console.log(user); // 在对象外部可以通过对象名,访问对象的成员变量、调用成员方法 console.log(user.name); console.log(user.info()); </script>
在js脚本中,对象的成员没有访问权限这一说法,在对象外部都可以访问对象的成员。
上面的写法有2个缺点
- 成员变量的值写死了,虽然可以写set方法,在使用对象时先调用set方法给成员变量赋值,完成成员变量的初始化,但还是不够方便
- 每次创建对象时都要添加成员,很麻烦
上面的方式基本不用,一般都是使用工厂函数
12、工厂函数
写法一
<script> function createUser(name,age){ // 创建对象 var user=new Object(); // 添加成员变量 user.name=name; user.age=age; // 添加成员方法 user.getName=function(){ // return user.name; return this.name; } user.getAge=function(){ // return user.age; return this.age; } user.getInfo=function(){ // return user.name+" "+user.age; return this.name+" "+this.age; } // 返回对象 return user; } // 创建对象 var user=createUser("chy",20); // 访问对象成员 console.log(user.name); console.log(user.getInfo()); </script>
由工厂函数自己创建、返回对象
写法二
<script> function createUser(name,age){ // 添加成员变量 this.name=name; this.age=age; // 添加成员方法 this.getName=function(){ return this.name; } this.getAge=function(){ return this.age; } this.getInfo=function(){ return this.name+" "+this.age; } } // 创建对象 var user=new createUser("chy",20); // 访问对象成员 console.log(user.name); console.log(user.getInfo()); </script>
由 new 工厂函数() 自动完成创建对象、返回对象两步,不用在工厂函数中手动创建、返回对象。
工厂函数相当于构造函数。在工厂函数内部,this表示创建的对象,成员变量要用this,不用this则使用的是形参,不是成员变量。
写法三 (推荐)
用原型挂载方法
<script> function createUser(name,age){ // 添加成员变量 this.name=name; this.age=age; } // 使用原型挂载策成员方法。工厂函数名.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>
写法二有一个缺点:每个对象都会创建自身的方法,调用对象的成员方法时都是调用每个对象自身的方法,浪费资源、没必要。
用原型挂载方法后,创建对象时不再创建成员方法,同一个工厂创建的对象共用同一个原型,通过对象调用方法时,自动把对象挂载到原型上,调用原型上的方法,得到相应的结果。
所谓原型,类似于其它语言中的类,是对象的模板,公共部分。
- 【JavaScript面向对象编程】20151229(函数,也是一种数据类型)
- 【JavaScript面向对象编程】20121224(基本数据类型)
- javascript 六种数据类型(一)
- 在javaScript中检测数据类型的几种方式
- JavaScript 基本数据类型和Object 转换
- JavaScript判断数据类型总结
- JavaScript数据类型转换
- JavaScript小白入门篇——直接量、变量、数据类型、运算符
- JavaScript 数据类型 详解
- 关于 JavaScript 数据类型判断
- JavaScript中的五种基本数据类型详解
- JavaScript 数据类型细致分析
- javascript 简单高效判断数据类型 系列函数 By shawl.qiu
- javascript中数据类型转换那些事
- 【JavaScript】数据类型
- JavaScript数据类型
- JavaScript数据类型--值类型和引用类型
- javascript学习之变量和数据类型
- 【Javascript学习笔记】7.数组数据类型 - Array
- javascript中的数据类型、Object与Function