javascript中的数组扩展(一)

 javascript中的数组扩展(一)

随着学习的深入,发现需要学习的关于数组的内容也越来越多,后面将会慢慢归纳,有的是对前面的强化,有些则是关于前面的补充。

一、数组的本质
    数组是按照次序排列的一组值,本质上,数组是一种特殊的对象
            console.log(typeof[1,2,3]);//object
    数组是对象但是对象不是数组
            var arr = [‘a‘,‘b‘,‘c‘,‘d‘,‘e‘];
            console.log(Array.isArray(arr));//true
            console.log(Array.isArray([]));//true
            console.log(Array.isArray({}));//false,空的对象不是数组
    数组的特性体现在,它的键名是按次序排列的一组整数。由于数组成员的键名是固定的,因此数组不用为每个元素指定键名,而对象的每个成员都要指定键名。
            var aa = [‘a‘,‘b‘,‘c‘];
            console.log(Object.keys(aa));//0,1,2
            var obj = {
                name1:‘a‘,
                name2:‘b‘,
                name3:‘c‘
            };
    数组是对象的特殊形式。在javascript中规定对象的键名一律为字符串,所以数组的键名也为字符串。
            var o = {
                1:‘one‘,
                2:‘two‘,
            }
            console.log(o[1]);//one
    在数组中:(非字符串的键名会被转为字符串,然户将其作为属性名来使用)
            var a = [‘a‘,‘b‘,‘c‘];
            console.log(a[‘0‘]);//a
            console.log(a[1]);//a
    但是在数组中要区分数组的索引和对象的属性名:所有的索引都是属性名,但只有在(0~2的32次方-2)之间的整数属性名才是索引
    当属组的属性不是(0~2的32次方-2)之间的整数时,只是数组的属性名,其明显特征是不改变数组数组长度
    注意:单独的数值不能作为标识符,数组的成员只能用方括号法表示
            var a = [1,2,3]    ;
            console.log(a[0]);//0
            console.log(a.0);//Uncaught SyntaxError: Unexpected number
    下面通过例子来区别索引和属性名
            var a = [1,2,3]    ;
            a[-1.23]=true;//属性名
            console.log(a.length);//3
            a[10] = 11;//索引
            console.log(a.length);//11
            a[‘abc‘] = ‘foodoir‘;//属性名
            console.log(a.length);//11

二、在谈到数组的本质的时候,我们不得不提数组检测的几种方法:            
        【typeof】   
            var arr = [1,2,3];
            console.log(typeof arr);//object,这个方法能很好的证明数组是对象
        【instanceof】
            var arr = [1,2,3];
            console.log(arr instanceof Array);//true
            var str = ‘abc‘;
            console.log(str instanceof Array);//false
            //扩充
            var str = ‘abc‘;
            str[0] = 1;
            str[1] = 2;
            str[2] = 3;
            console.log(str[1]);//b
            console.log(str.length);//3
            console.log(str instanceof Array);//false        
            var str = [];
            str[0] = 1;
            str[1] = 2;
            str[2] = 3;
            console.log(str[1]);//2
            console.log(str.length);//3
            console.log(str instanceof Array);//true
        【toString】
            var arr = [1,2,3];
            console.log(Object.prototype.toString.call(arr) === ‘[object Array]‘);//true
        【valueof()】

    方法返回数组本身
            var a = [1,2,3];
            console.log(a.valueOf());//1,2,3
            console.log(a.valueOf() instanceof Array);//true

三、关于数组的长度
   通用公式:数组长度 = 最大索引 + 1,再次强调:delete操作并不该变数组的长度
 关于数组长度的深度剖析
    1、当索引大于现有数组长度时,length属性的值将设置为索引值+1
            var a = [1,2,3];
            console.log(a.length);//3
            a[10] = 11;
            console.log(a.length);//11
    2、当length属性的设置小于当前长度时,将当前索引值大于设置的数组长度的元素从数组中删除
            var a = [1,2,3,4,5];
            a.length = 3;
            console.log(a);//1,2,3
            a.length = 0;
            console.log(a);//‘‘
            a.length = 10;
            console.log(a);//,,,,,,,,,,
            console.log(a[3]);//undefined
    3、将数组的长度设为大于当前的长度,实际上并没有想数组中添加新元素,只是在数组的尾部创建了一个空的区域(见上)
    4、将数组的length值设为不合法的值,我们来看结果
            [].length = -1;//Uncaught RangeError: Invalid array length
            [].length = Math.pow(2,32);//Uncaught RangeError: Invalid array length
            [].length = ‘abc‘;//Uncaught RangeError: Invalid array length
    5、那么问题来了,我们如何设置数组的长度不可修改呢?
        我们可以通过前面学习对象时的相关知识来解决
            var arr = [1,2,3];
            Object.defineProperty(arr,‘length‘,{
                writable:false,
            });
            console.log(arr.length);//3
            arr[4] = 4;
            console.log(arr.length);//3
            console.log(arr)//1,2,3  说明设置不可修改length属性成功了

四、前面介绍了遍历数组的三种方法:for、for/in、forEach,接下来我们针对这三种方法进行一下扩展
    for()循环
        当索引连续时,可以用for循环遍历
            var arr = [‘a‘,‘b‘,‘c‘,123];
            for(var i = 0 ; i<arr.length;i++){
                console.log(arr[i]);//a,b,c,123
            }
        补充:当索引连续时,也可以用while循环遍历数组
            var a = [1,2,3,4];
            var i = 0;
            while(i<a.length){
                console.log(a[i]);//1,2,3
                i++;
            }
            var j = a.length;
            while(j--){
                console.log(a[j]);//3,2,1
            }
        但是如数组为稀疏数组时,仍要使用for循环怎么办?
        此时应该给for循环增加一些条件
            var a = [1,,,,5,6];
            for(var i=0;i<a.length;i++){
                if(!(i in a)){
                    //console.log(typeof i);//number,注意:此时的返回值为number!!!
                    console.log(a[i]);//undefined
                }
            }
        前面是我自己踏进去的个坑,下面才是正确的解法,比较这二者的区别
            var a = [1,,,,5,6];
            for(var i=0;i<a.length;i++){
                if(!(i in a)) continue;
                //console.log(typeof i);//number,注意:此时的返回值为number!!!
                console.log(a[i]);//1,5,6
            }
    for/in循环
        从前面可以看出,在面对稀疏数组时,我们用for/in循环的话会方便很多
            var a = [1,,,,5,6];
            for(var i in a){
                console.log(a[i]);//1,5,6
            }
        由于for/in循环能够枚举继承的属性名,如添加到Array.prototype中的方法。由于这个原因,在数组上不应该使用for/in循环,除非使用额外的检测方法来过滤掉不想要的属性
            var a = [1,,,4];
            a.b = ‘b‘;
            a.c = -5;
            a.d = 7.8
            for(var i in a){
                console.log(a[i]);//1,4,b,-5,7.8
            }
        我们可以通过加判定条件来跳过不是非负整数的i
            var a = [1,,,4];
            a.b = ‘b‘;
            a.c = -5;
            a.d = 7.8
            for(var i in a){
                //console.log(typeof i);//String,注意:在前面用for循环中的for/in循环中typeof的返回值为number
                if(String(Math.floor(Math.abs(Number(i))))!==i) continue;
                console.log(a[i]);//1,4
            }
        下面我们通过前面对象的方法中的hasOwnProperty()函数来获取不是继承下来的属性
            var arr1 = [];
            arr1[1] = ‘x‘;
            arr1[22] = ‘y‘;
            arr1[333] = ‘z‘;
            for(var i in arr1){
                console.log(arr1[i]);//x,y,z
            }//这种方法遍历的是继承下来的属性,若不想遍历继承下来的属性可以用hasOwnProperty()函数
            for(var i in arr1){
                if(arr1.hasOwnProperty(i)){
                    console.log(arr1[i]);//x,y,z
                }
            }//这种方法遍历的不是继承下来的属性
    我们还可以通过forEach()方法来遍历数组
        语法:Array.forEach(function(value[,index[,array]]){函数体})
            var arr2 = [1,2,3,4,5,6];
            方法一:
            arr2.forEach(function(x){
                console.log(x);
            });1,2,3,4,5,6
            方法二:
            function Test(element,index,array){
                console.log(‘要处理的数组为:‘+array);
                console.log(‘索引:‘+index+‘--值为:‘+element);
            }
            arr2.forEach(Test);

五、类数组:拥有length属性和对应非负整数属性的对象叫类数组
            var obj = {};
            obj[0] = ‘a‘;
            obj[1] = ‘b‘;
            console.log(obj);//Object {0: "a", 1: "b"}
            console.log(obj.length);//undefined
            但是将{}换成[],这样是不是就很熟悉了
            var arr = [];
            arr[0] = ‘a‘;
            arr[1] = ‘b‘;
            console.log(arr);//["a", "b"]
            console.log(arr.length);//2
            前面那个带有{}的就是类数组,我们可以通过下面的例子来进一步了解它
            var a = {};
            var i = 0;
            while(i<10){
                a[i]=i*i;
                i++;
            }
            a.length = i;
            var total = 0;
            for(var j=0;j<a.length;j++){
                total += a[j];
            }
            console.log(total);//285
            有三个常见的类数组对象:arguments对象,DOM方法,字符串
            arguments对象
            function args(){
                return arguments;
            }
            var arrayLike = args(‘a‘,‘b‘);
            console.log(arrayLike[0]);//a
            console.log(arrayLike.length);//2
            console.log(arrayLike instanceof Array);//false
            DOM方法
            var elts = document.getElementsByTagName(‘div‘);
            for(var i=0;i<elts.length;i++){
                return true;
            }
            console.log(elts.length);//?
            console.log(elts instanceof Array);//false
            字符串
            console.log(‘abc‘[1]);//b
            console.log(‘abc‘.length);//3
            console.log(‘abc‘ instanceof Array);//false
            注意:字符串是不可变值,故把它们当作数组来看时,它们是只读的。push()、sort()、reverse()、splice()等方法会修改数组,它们在字符串上是无效的,且会报错。

时间: 2024-08-02 11:02:48

javascript中的数组扩展(一)的相关文章

JavaScript中的数组的学习

JavaScript中的数组的学习 数组的长度可变,数组的长度等于所有元素索引+1 同一个数组中的元素类型可以互不相同 访问数组元素时不会产生数组越界,访问未被赋值的数组元素时该元素的值为undefined. <!DOCTYPE html> <html> <head> <script type="text/javascript"> var a = [3,5,23]; var b=[]; var c = new Array(); b[0]

JavaScript中的数组详解

JavaScript中的数组 一.数组的定义 数组是值的有序集合,或者说数组都是数据的有序列表. 二.创建数组 [字面量形式] 1.空数组 var arr=[]; 2.带有元素的数组 var arr=[1,2,3,1,2]; 3.数组值可以是任意类型 var arr=[1,2.3,'foodoir',true,null,undefined,[1,2,3],{name:'foodoir',age:21}]; 注意: 1.数组字面量中的值不一定是常量,它们可以是任意表达式: 2.它可以包含对象字面量

前端开发:Javascript中的数组,常用方法解析

前端开发:Javascript中的数组,常用方法解析 前言 Array是Javascript构成的一个重要的部分,它可以用来存储字符串.对象.函数.Number,它是非常强大的.因此深入了解Array是前端必修的功课.周五啦,博主的心又开始澎湃了,明儿个周末有木有,又可以愉快的玩耍了. 创建数组 创建数组的基本方式有两种,一种字面量,另一种使用构造函数创建: var arr = [1,2,3]; //字面量的形式创建数组 值与值之间用英文逗号隔开 var arr1 = new Array(1,2

JavaScript中的数组创建

JavaScript中的数组创建 数组是一个包含了对象或原始类型的有序集合.很难想象一个不使用数组的程序会是什么样. 以下是几种操作数组的方式: 初始化数组并设置初始值 通过索引访问数组元素 添加新元素 删除现有元素 本文涵盖了数组的初始化以及设置初始值的操作.在JavaScript中要做到这一点的基本方法是使用数组字面量,例如[1, 5, 8]或是数组构造器new Array (1, 5, 8). 除了手动枚举之外,JavaScript还提供了更有趣更直接的数组创建方式.让我一起看看在Java

JavaScript中对数组和数组API的认识

JavaScript中对数组和数组API的认识 一.数组概念: 数组是JavaScript中的一类特殊的对象,用一对中括号“[]”表示,用来在单个的变量中存储多个值.在数组中,每个值都有一个对应的不重复的索引值.自动匹配索引值的数组称为索引数组,自定义索引值的数组称为关联数组(又叫哈希数组).以下均研究索引数组. 二.创建数组: 使用数组之前首先都要先创建并赋值给一个变量,创建数组有两种不同的方法. 1.调用构造函数Array()创建数组,索引数组索引值都从0开始 eg:var arr=New

JavaScript中的数组与伪数组的区别

在JavaScript中,除了5种原始数据类型之外,其他所有的都是对象,包括函数(Function). 5种原始数据类型: number boolean string null undefined 在这个前提下,咱们再来讨论JavaScript的对象. 1.创建对象 var obj = {}; //种方式创建对象,被称之为对象直接量(Object Literal) var obj = new Object(); // 创建一个空对象,和{}一样 更多创建对象的知识,参见<JavaScript权威

JavaScript 中Array数组的几个内置函数

本文章内容均参考<JavaScript高级程序设计第三版> 今天在看JavaScript书籍的时候,看到之前没有了解过的JavaScript中Array的几个内置函数对象,为了之后再开发工作中能方便查询,故编写此随笔.直接贴代码, function arrayEffect(){ var numbers = [1,2,3,4,5,6,7,8,9,10]; //------------------------------------ 支持浏览器版本 IE9+,Firfox 2+ ,Safair 3

javascript中常用数组方法详细讲解

javascript中数组常用方法总结 1.join()方法: Array.join()方法将数组中所以元素都转化为字符串链接在一起,返回最后生成的字符串.也可以指定可选的字符串在生成的字符串中来分隔数组的各个元素.如果不指定分隔符,默认使用逗号.案例如下: var a=[1,2,3]; a.join();//=> "1,2,3" 因为没有指定分隔符,默认为逗号. a.join("+");//=> "1+2+3" 指定分隔符为+ a.

(一)javascript中的数组index属性——获取数组的索引值

例如:要做到这样的效果 点击每个选项时,会显示不同的div. 我们的做法:在javascript中,先把所有的div的display设置为none,然后在根据当前的数组里的索引值进行一个显示div的过程. 下面的例子就是: 首先,把妙味课堂.妙味茶馆.苗味视频选项的div设置为display:none: 然后,早在之前就以前设置好了数组的索引值 btn[i].index=i; 于是当所有div都设置为display:none后,再把点击的那个div的display设置为block就可以了 con