JavaScript 数据类型、面向对象编程
目录
- 数据类型
- 变量
- 类型转换
- 字符串常用方法
- 数值型常用方法
- 数组
- 数组的创建、赋值
- 数组常用方法
- 数组迭代
- 对象
- 对象的创建、使用
- 遍历对象
- 操作对象属性的2种方式
- 快速置空对象各个字段的值
- 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)); // numberconsole.log(Object.prototype.toString.call({})) // [object Object]
console.log(Object.prototype.toString.call([])) // [object Array]
变量
var i; //只声明未赋值,类型是undefinedvar j=10; //js的变量是弱类型的,根据值来确定变量类型j="ok"; //js变量的数据类型可变
变量标识符
- 可以包含英文字母A-Za-z、数字0-9、下划线_、美元符号$
- 不能以数字0-9开头
js区分大小写,username、userName是2个不同的变量
类型转换
显式转换
//转换为数值,常用于获取数值型输入框的值,在提交之前做一些处理、校验
var a;
a=Number("1.6"); //转换为数值,如果不能转换为数值,不会报错,转换结果是NaN,即Not a Number
a=parseInt("1.6"); //转换为整型,直接舍弃小数部分
a=parseFloat("1.6"); //转换为浮点型//转换为字符串
var b=1.4;
b=b.toString();
b=String(1.2);//转换为boolean
var c=Boolean(0);
隐式转换:自动完成类型转换
a=1.2+""; //字符串拼接。如果有一个加数是字符串,会自动将其它加数转换为字符串,再进行运算if(12=="12"){ //相等判断时,如果一方是字符串,会自动先将另一方转换为字符串,再进行判断console.log("true")
}
字符串常用方法
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()常结合正则表达式使用,注意正则表达式不引。
数值型常用方法
var n = 9.656;// 保留指定位数的小数,返回字符串
n.toFixed(0) //0即取整
n.toFixed(2) //保留2位小数// 保留指定位数(整数+小数),返回字符串
n.toPrecision(); //不指定默认保留全部位数
n.toPrecision(2); //保留2位数字
会自动四舍五入,位数不够时自动在末尾补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]);
js数组的长度会动态变化,指定的初始长度只是创建数组时预先分配空间,后续空间不够时会自动扩容。
js数组中的元素,类型可以不同,因为js是弱类型的,本身不太区分类型。
数组常用方法
var arr1=[1,2,3,4];//添加元素
arr1.unshift(10, 20); //在数组开头(第一个元素之前)添加1个或多个元素,返回添加后的数组长度
arr.push(5, 6); //在数组末尾添加1个或多个元素//删除元素
arr1.shift(); //删除并返回数组的第一个元素
arr1.pop(); //删除并返回数组的最后⼀个元素//连接数组
var arr2=[10,11,12];
var arr3=[20,21];arr1.concat(arr2); //不改变原数组,以新数组的形式返回
arr1.concat(arr2,arr3); //参数可以是一个或多个数组// 数组转字符串
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); //返回数组中第一次出现该元素的位置,如果数组中没有该元素,返回-1
arr1.indexOf("go", 0);
//第二个参数指定检索开始位置,可选,缺省时默认为0(从第一个元素开始)
arr1.indexOf("go");//先删除再在该位置插入元素,参数依次是:start 起始位置、deleteCount 要删除的元素个数、ele... 要添加的元素(个数可变),会添加在指定的起始位置之后
arr1.splice(1, 2, "go", "rust");
//只有2个参数,表示只删除,不插入,搭配 indexOf()可删除指定元素
arr1.splice(2, 1)
//第二个参数为0,表示不删除、只插入
arr1.splice(2, 0, 20, 30)
数组迭代
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);
});// ES6的箭头函数写法
arr.forEach(ele => {console.log(ele);
});
forEach不能使用break结束循环,建议只把forEach用于需要遍历完所有元素的迭代。
对象
对象的创建、使用
//直接创建
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);
创建对象之前不需要指定对象有哪些属性,创建对象时也不需要指定全部的属性,创建对象后可以 xxx.xxx 直接设置|访问属性,包括创建时没有设置过的属性,js 就是这么随心所欲。
对象的key只能是字符串,引不引都可以,都是作为字符串处理。
遍历对象
var user={"name":"chy","age":20}; // 使用for in遍历对象的键值对
for (item in user) {console.log(item); //item是keyconsole.log(user[item]); //获取对应的value。user.item会认为key是字符串"item",只能用[ ]
}
在ES6之前,变量无需声明,可以直接使用;在ES6中,变量必需先声明再使用
// ES6之前 临时变量item无需声明
for (item in user) {}// ES6中 临时变量item需要先声明,不然会报错 ReferenceError: item is not defined
for (let item in user) {}
操作对象属性的2种方式
//方式一、通过.来操作,只会把点号后面的属性名作为字符串常量处理
user.name //如果name是变量,也是作为字符串"name"来处理,不会替换为对应的值//方式二、通过[]来操作,[]中可以使用字符串常量,也可以使用变量
user["name"] //[字符串常量]var key="name";
user[key] //[变量]
如果属性名要使用变量的值,则使用方式二。
快速置空对象各个字段的值
Object.keys(user).forEach(key => user[key] = '');
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方法给成员变量赋值,完成成员变量的初始化,但还是不够方便
- 每次创建对象时都要添加成员,很麻烦
上面的方式基本不用,一般都是使用工厂函数
工厂函数
写法一
<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>
写法二有一个缺点:每个对象都会创建自身的方法,调用对象的成员方法时都是调用每个对象自身的方法,浪费资源、没必要。
用原型挂载方法后,创建对象时不再创建成员方法,同一个工厂创建的对象共用同一个原型,通过对象调用方法时,自动把对象挂载到原型上,调用原型上的方法,得到相应的结果。
所谓原型,类似于其它语言中的类,是对象的模板,公共部分。
等价判断
==不区分数据类型,空串、空格串、0、空数组[ ]、false都是==的,注意不包括空对象{ }、null。
===严格区分数据类型。
JavaScript 数据类型、面向对象编程相关推荐
- 了解使用JavaScript进行面向对象编程的基础(并增强您的编码…
by Kris Baillargeon 通过克里斯·拜伦 学习使用JavaScript进行面向对象编程的基础知识(并增强您的编码能力!) (Learn the basics of object-ori ...
- JavaScript 的面向对象编程
发现一个介绍JavaScript面向对象编程的文章,大家可以下下看看:http://pan.baidu.com/share/link?shareid=69566&uk=2802880612 本 ...
- JavaScript(四)——面向对象编程、BOM、DOM、表单验证、jQuery
文章目录 1. 面向对象编程 2. 操作BOM对象(重点) 3. 操作DOM对象(重点) 4. 操作表单(验证) 5. jQuery 1. 面向对象编程 (1) 原型对象 javascript.Jav ...
- javascript俄罗斯方块 面向对象编程(jQuery)(附带百度网盘链接)
这个俄罗斯方块游戏是通过javascript面向对象编程的方法编写,代码结构分为游戏类(Game.js),方块类(block.js),地图类(Map.js),方块形状对象类(blockjson.js) ...
- 用Javascript实现面向对象编程(封装,抽象,继承,多态)
OO的特点:封装.抽象.继承.多态. 封装:在 面向对象语言中,封装特性是由类来体现的,我们将现实生活中的一类实体定义成类,其中包括属性和行为(在Java中就是方法),就好像人类,可以具有 name, ...
- javascript OOP 面向对象编程
Pseudo-class declaration 原文地址:http://javascript.info/tutorial/pseudo-classical-pattern#pseudo-class- ...
- JavaScript [ 转 ] —— 面向对象编程(三):非构造函数的继承
作者:阮一峰 这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承". 今天是最后一个部分,介绍不使用构造函数实现"继承" ...
- JavaScript面向对象编程
自从有了Ajax这个概念,JavaScript作为Ajax的利器,其作用一路飙升.JavaScript最基本的使用,以及语法.浏览器对象等等东东在这里就不累赘了.把主要篇幅放在如何实现JavaScri ...
- JavaScript面向对象编程(1)-- 基础
自从有了Ajax这个概念,JavaScript作为Ajax的利器,其作用一路飙升.JavaScript最基本的使用,以及语法.浏览器对象等等东东在这里就不累赘了.把主要篇幅放在如何实现JavaScri ...
- JS(四)--JavaScript 面向对象编程
JavaScript 面向对象编程 一.JavaScript 面向对象编程 1.1..什么是面向对象编程 1.2.面向过程和面向对象的对比 1.3.JavaScript 中的对象? 1.3.1.属性和 ...
最新文章
- 标题 相机标定(Camera calibration)原理和步骤
- setstate是同步还是异步_【vert.x准备篇1】同步和异步,阻塞和非阻塞概念澄清
- 无限循环的ViewPager
- java网关限流_网关限流使用
- Qt文档阅读笔记-单元测试中构建标准检测程序(CPU、Linux性能、内存泄漏等)
- 最好用的营养计算机软件,营养计算器(标准版)
- Ubuntu18.04LTS+Anaconda+Tensorflow-GPU安装记录
- java变量类型概念_java变量类型
- pytorch总结(一)torch.nn模块使用详解
- PHP 错误与异常 笔记与总结(1)错误(Deprecated,Notice,Warning)
- A N EAR -D UPLICATE D ETECTION A LGORITHM T O F ACILITATE D OCUMENT C LUSTERING——有时间看看里面的相关研究...
- oracle jde开发,第一个JDE报表开发
- 如何复制他人csdn博客文章到自己博客下
- simulink模块名称显示设置_GUI界面实现批量修改Simulink模块参数名称
- 三星S6D1121主控彩屏(240*320*18bit,262K)驱动程序
- Linux 命令(217)—— iptables-restore 命令
- 揭秘:广告拦截软件如何赚钱?
- iOS 马甲版上架流程
- python暴力破解Zip文件,就是不讲道理
- 1043 幸运号码 数位dp
热门文章
- 学习笔记:医学图像配准简介—附voxelmorph模型
- LeetCode_589
- 微硬创新MODBUS转PROFINET RS485转PROFINET RS232转PROFINET网关在智慧灌溉及园林绿化项目中将卡片式超声波水表接入西门子1500 PROFINET网络配置方法
- jQuery放大镜 实现图片的放大
- 线性回归计算回归系数
- 索引是什么,有什么用,怎么用?
- Python 判断哪年哪月有几天
- android 太阳系布局,布局神秘的“诸神之城” 对应着太阳系与天狼星
- Form action defaulting to 'action' attribute's literal value.
- 基站查询接口,基站查询API