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 相关文章推荐
javascript concat数组累加 示例
Sep 03 Javascript
JavaScript的单例模式 (singleton in Javascript)
Jun 11 Javascript
3款实用的在线JS代码工具(国外)
Mar 15 Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 Javascript
四种参数传递的形式——URL,超链接,js,form表单
Jul 24 Javascript
js HTML5 Canvas绘制转盘抽奖
Sep 13 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
Vue组件开发技巧总结
Mar 04 Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
vue 如何使用递归组件
Oct 23 Javascript
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
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
PHP Reflection API详解
2015/05/12 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
基于Vuejs框架实现翻页组件
2020/06/29 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
python实现自动更换ip的方法
2015/05/05 Python
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
Python实现一个优先级队列的方法
2020/07/31 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
致1500米运动员广播稿
2014/02/07 职场文书
《可爱的动物》教学反思
2014/02/22 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
服装店员工管理制度
2015/08/07 职场文书
2016年清明节寄语
2015/12/04 职场文书
干部理论学习心得体会
2016/01/21 职场文书