JavaScript数据类型学习笔记分享


Posted in Javascript onSeptember 01, 2016

本文实例为大家讲解JavaScript数据类型的相关资料,供大家参考,具体内容如下

1.引用类型
引用类型的值是引用类型的一个实例,引用类型是一种数据结构,用于将数据和功能组织在一起,也常被叫做类。
对象时某个特定引用类型的实例,新对象是使用new操作符后跟一个构造函数来创建的,构造函数本身就是函数,是出于创建新对象的目的而定义的。

 var person = new Object();

2.Object类型
(1)Object类型对于应用程序中存储和传输数据来说,是非常理想的选择。
(2)Object类型实例创建方式:
使用new加Object构造函数。

<script type="text/javascript">
      var person = new Object();
      person.name = "peter";
      alert(person.name);
 </script>

使用对象字面量的表示方法。

var dog = {
        name:"kity",
        age:3,
        eye:bigEyes
      };

这种创建方法,由一对花括号开始,前面是变量名,后面是冒号,再是属性值,可以有多个属性,但是每个属性之间必须使用逗号分隔,最后一个属性一般是不加逗号的。其中属性名也可以是字符串。如果花括号里面不写东西,那么只可以定义包含默认属性和方法的对象。

一般来说,访问对象属性使用点表示法,在javascript中使用方括号[]来访问对象的属性。在使用[]时,应该将要访问的属性以字符串的形式放在[]中。

 alert(person["name"]);
    alert(person.name);

前者可以通过变量访问属性。
如果属性名中包含会导致语法错误的字符,属性名使用的是关键字或保留字,也可以使用方括号。
除非必须使用变量来访问属性,否则我们建议使用点表示法。

3.Array类型
javascript中的数组是有序列表,它可以保存任意类型的数据,这是和其他语言数组的最大区别,而且它的数组的大小是可以动态调整的。
(1)创建数组的基本方式:
使用Array构造函数,可以给他传值(数组的大小或者数组的内容)

var student = new Array();
  var student = new Array(10);
  var student = new Array("peter","merry","bob");

(2)使用数组字面量的表示方法,数组字面量由一对包含数组项的方括号表示,多个数组之间用逗号隔开。
(3)在读取和设置数组的值时,使用方括号和对应值基于0的数字索引。
数组的长度保存在length属性中,这个属性值可以返回0或者更大的数值。可以通过设置length属性的值,从数组的末尾删除或者增加新的项。

var colors = ["red","blue","green"];
  colors.length = 2;//数组长度变成了2,green被移除
  alert(colors[2]);//此时访问会返回undefined,alert(colors[1]);会返回blue

如果将Length属性设置为大于数组项目的值,则新增的每一项都会返回undefined值。

var colors = ["red","blue","green"];
  colors.length = 5;
  alert(colors[4]);

利用length属性在数组末尾增加项。

var colors = ["red","blue","green"];
  alert(colors[colors.length]="black");

(4)数组最多可以包含4294967295个项
(5)检测数组
使用Array.isArray()方法,它可以最终确定该值是不是数组,而且不管他是在哪个全局执行环境中创建的。

if(Array.isArray){
    //operates 
  }

(6)转换方法
所有对象都具有toLocaleString(),toString()和valueOf()方法,其中,调用数组的toString()方法会返回由数组中每个值得字符串形式拼接而成的一个以逗号分隔的字符串。valueOf()会返回数组。
当调用toLocaleString()方法时,会创建一个数组值得以逗号分隔的字符串,与前面的不同是,为了取得每一项的值,调用的是每一项的toLocaleString()方法,而不是toString()方法。

<script type="text/javascript">
      var person1 = {
        toString : function(){
          return "peter";
        },
        toLocaleString :function(){
          return "mary";
        }
      };
      var person2 = {
        toString: function(){
          return "26";
        },
        toLocaleString:function(){
          return "18";
        }
      };
      var person = [person1,person2];
      alert(person);
      alert(person.toString());
      alert(person.toLocaleString());
    </script>

使用join()方法可以用不同的分隔符来构建这个字符串,join()方法只接收一个参数,用作分隔符的字符串,然后返回包含所有数组项的字符串。如果不给join()方法传入任何值,或者传入undefined,使用逗号作为分隔符。如果数组中的某一项的值是null或undefined,那么该值在join(),toString(),toLocaleString()和valueOf()方法返回的结果中以空字符串表示。

<script type="text/javascript">
      var person1 = {
        toString : function(){
          return "peter";
        },
        toLocaleString :function(){
          return "mary";
        }
      };
      var person2 = {
        toString: function(){
          return "26";
        },
        toLocaleString:function(){
          return "18";
        }
      };
      var person = [person1,person2];
      alert(person);
      alert(person.toString());
      alert(person.toLocaleString());
      alert(person.join("*"));
      alert(person.join("--"));
    </script>

(7)栈方法
栈就是数据结构中的栈,他的特点就是先进后出,而且所有的操作只发生在栈顶,javascript提供了push()和pop()方法,可以实现类似于栈的行为。
push()可以接收任意数量的参数,并且逐个添加到数组的末尾,并返回修改后数组的长度。
pop()方法可以从数组末尾移除最后一项,减少数组的lengthh值,然后返回移除的顶。
(8)队列方法
队列的数据结构特点是先进先出,队列在列表末端添加项,从列表的前端移除项。
push()可以向数组的末端添加项,shift()可以移除数组中的第一个项,并返回该项,数组长度减1;unshift()可以在数组前端添加任意个项并返回新数组的长度。
(9)重排序方法
reverse()会反转数组的顺序
默认情况下,sort()按照升序排列数组项(最小值位于最前面,最大值位于最后面,为了实现排序,sort()方法会调用每个数组项的toString()转型方法,然后比较得到的字符串,来确定如何排序)。sort()可以接收一个比较函数作为参数,比较函数接收两个参数,如果第一个参数应该位于第二个之前,返回一个负数,如果两个参数相等则返回0,如果第一个参数应该位于第二个之后返回一个正数。
reverse()和sort()方法的返回值都是经过排序之后的数组。
(10)操作方法
concat()可以基于当前数组中的所有项创建一个新数组。
slice()可以基于当前数组中一个或多个项创建一个新数组,slice()可以接收一个或两个参数,要返回项的起始和结束位置,。参数为一个时,会返回该参数指定位置开始到当前数组末尾的所有项;如果有两个参数,返回起始和结束位置之间的项,但是不包括结束位置的项。
splice()方法:主要用于向数组的中部插入项
删除:可以删除任意数量的项,只需要指定2个参数,要删除的第一项的位置和要删除的项数。
插入:可以向指定位置插入任意数量的项,只需提供三个参数,起始位置和0和要插入的项。
替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定3个参数,起始位置,要删除的项数和要插入的任意数量的项,插入项数不必与删除的项数相等。
splice()总会返回一个数组,该数组中包含从原始数组中删除的项(如果没有删除任何项,则返回一个空数组)。
(11)位置方法
这两个方法都可以接收两个参数,要查找的项和表示查找起点位置的索引,都返回要查找的项在数组中的位置,或在没有找到的情况下返回-1,在比较第一个参数与数组中的每一项时,会使用全等操作符,要查找的项必须严格相等。
indexOf():从数组的开头开始向后查找
lastIndexOf():从数组的末尾开始向前查找。
(12)迭代方法
javascript为数组提供了5个迭代方法,每个方法都接收两个参数:要在每一项运行的函数和(可选的)作用域对象(影响this的值),传入这些方法中的函数会接收三个参数:数组项的值,该数组中的位置和数组对象本身。
every():对数组中每一项运行给定函数,如果该函数对每一项都返回true,则返回true.
filter():对数组中每一项运行给定函数,返回该函数会返回true的项组成的数组
forEach():对数组中每一项运行给定函数,这个方法没有返回值
map():对数组中每一项运行给定函数,返回每次函数调用的结果组成的数组
some():对数组中每一项运行给定函数,如果该函数对任一项返回true,则返回true.
上面的方法都不会修改数组中的包含值。
every()和sum()都用于查询数组中的项是否满足某个条件
(13)缩小方法
下面的两个方法都会迭代数组的所有项,然后构建一个最终返回的值。都接收两个参数:一个在每一项上调用函数和(可选的)作为缩小基础的初始值。传给这两个方法接收4个参数:前一个值,当前值,项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项,第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数是数组的第二项。
reduce():从数组的第一项开始,逐个遍历到最后。可以执行求数组中所有值得和的操作。

<script type="text/javascript">
      var values=[1,2,3,4,5];
      var sum = values.reduce(function(prev,cur,index,array){
        return prev + cur;
      });
      alert(sum);
  </script>

reduceRight():从数组最后一项开始,向前遍历到第一项。可以执行求数组中所有值得和的操作。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery实现的图片切换焦点图整理
Dec 07 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 Javascript
JSON取值前判断
Dec 23 Javascript
基于jquery实现发送文章到手机的代码
Dec 26 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
bootstrap datepicker限定可选时间范围实现方法
Sep 28 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
js实现文字超出部分用省略号代替实例代码
Sep 01 #Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 #Javascript
在web中js实现类似excel的表格控件
Sep 01 #Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 #Javascript
AngularJs 指令详解及示例代码
Sep 01 #Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
Sep 01 #Javascript
JS实现列表的响应式排版(推荐)
Sep 01 #Javascript
You might like
PHP之短标签开启设置
2013/06/17 PHP
PHP扩展开发入门教程
2015/02/26 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
详谈javascript异步编程
2016/02/21 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
利用n工具轻松管理Node.js的版本
2017/04/21 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
9个JavaScript日常开发小技巧
2020/10/06 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
Python六大开源框架对比
2015/10/19 Python
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
python 实现生成均匀分布的点
2019/12/05 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
python实现手势识别的示例(入门)
2020/04/15 Python
加拿大床上用品、家居装饰、厨房和浴室产品购物网站:Linen Chest
2018/06/05 全球购物
店长助理岗位职责
2013/12/13 职场文书
中式餐厅创业计划书范文
2014/01/23 职场文书
感恩教育月活动总结
2014/07/07 职场文书
2014年小学教导处工作总结
2014/12/19 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL
nginx静态资源的服务器配置方法
2022/07/07 Servers