JS数组
Posted luoxuw
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS数组相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> 1.使用构造函数创建数组 /* * 内建对象 * 宿主对象 * 自定义对象 * * 数组（Array） * - 数组也是一个对象 * - 它和我们普通对象功能类似，也是用来存储一些值的 * - 不同的是 1.普通对象是使用字符串作为属性名的，而数组时使用数字来作为索引操作元素 * - 索引： * 从0开始的整数就是索引 * - 数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据 */ //创建数组对象 var arr = new Array(); //使用typeof检查一个数组时，会返回object //console.log(typeof arr); /* * 向数组中添加元素 * 语法：数组[索引] = 值 */ arr[0] = 10; arr[1] = 33; arr[2] = 22; arr[3] = 44; /*arr[10] = 31; arr[100] = 90;*/ /* * 读取数组中的元素 * 语法：数组[索引] * 如果读取不存在的索引，他不会报错而是返回undefined */ //console.log(arr[3]); /* * 获取数组的长度 * 可以使用length属性来获取数组的长度(元素的个数) * 语法：数组.length * * 对于连续的数组，使用length可以获取到数组的长度（元素的个数） * 对于非连续的数组，使用length会获取到数组的最大的索引+1 * 尽量不要创建非连续的数组 */ /*console.log(arr.length); console.log(arr);*/ /* * 修改length * 如果修改的length大于原长度，则多出部分会空出来 * 如果修改的length小于原长度，则多出的元素会被删除 */ //arr.length = 10; /*arr.length = 2; console.log(arr.length); console.log(arr);*/ arr[4] = 50; arr[5] = 60; //向数组的最后一个位置添加元素 //语法：数组[数组.length] = 值; arr[arr.length] = 70; arr[arr.length] = 80; arr[arr.length] = 90; console.log(arr); 2.使用字面量来创建数组 //使用字面量来创建数组 //语法:[] //var arr = []; //console.log(typeof arr); //使用字面量创建数组时，可以在创建时就指定数组中的元素 var arr = [1,2,3,4,5,10]; //console.log(arr[3]); //使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作文构造函数的参数传递 //元素之间使用,隔开 var arr2 = new Array(10,20,30); //console.log(arr2); 区别: //创建一个数组数组中只有一个元素10 arr = [10]; //创建一个长度为10的数组, 一般不推荐使用该方法 arr2 = new Array(10); //console.log(arr2.length); //数组中的元素可以是任意的数据类型 arr = ["hello",1,true,null,undefined]; //也可以是对象 var obj = name:"孙悟空"; arr[arr.length] = obj; arr = [name:"孙悟空",name:"沙和尚",name:"猪八戒"]; //也可以是一个函数 arr = [function()alert(1),function()alert(2)]; //console.log(arr); //arr[0](); 调用函数 //数组中也可以放数组，如下这种数组我们称为二维数组 arr = [[1,2,3],[3,4,5],[5,6,7]]; console.log(arr[1]); [] : 数组定义 : 对象定义 3.数组的四个元素操作方法 //创建一个数组 var arr = ["孙悟空","猪八戒","沙和尚"]; /* * push() * - 该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度 * - 可以将要添加的元素作为方法的参数传递， * 这样这些元素将会自动添加到数组的末尾 * - 该方法会将数组新的长度作为返回值返回 */ var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精"); //console.log(arr); //console.log("result = "+result); 新的数组长度 /* * pop() * - 该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回 */ result = arr.pop(); /*console.log(arr); console.log("result = "+result);*/ /* * 数据长度=unshift() * - 向数组开头添加一个或多个元素，并返回新的数组长度 * - 向前边插入元素以后，其他的元素索引会依次调整 */ //console.log(arr); arr.unshift("牛魔王","二郎神"); console.log(arr); /* *数组元素= shift() * - 可以删除数组的第一个元素，并将被删除的元素作为返回值返回 */ result = arr.shift(); result = arr.shift(); console.log(arr); console.log("result = "+result); 4. forEach * 一般我们都是使用for循环去遍历数组， * JS中还为我们提供了一个方法，用来遍历数组 * forEach() * - 这个方法只支持IE8以上的浏览器 * IE8及以下的浏览器均不支持该方法，所以如果需要兼容IE8，则不要使用forEach * 还是使用for循环来遍历 */ //创建一个数组 var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"]; /* * forEach()方法需要一个函数作为参数 * - 像这种函数，由我们创建但是不由我们调用的，我们称为回调函数 * - 数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素 * 以实参的形式传递进来，我们可以来定义形参，来读取这些内容 * - 浏览器会在回调函数中传递三个参数： * 第一个参数，就是当前正在遍历的元素 * 第二个参数，就是当前正在遍历的元素的索引 * 第三个参数，就是正在遍历的数组对象 * */ arr.forEach(function(value , index , obj) console.log(value); ); 5. slice 和splice /* * slice() * - 可以用来从数组提取指定元素 * - 该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回 * - 参数： * 1.截取开始的位置的索引,包含开始索引 * 2.截取结束的位置的索引,不包含结束索引 * - 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素 * - 索引可以传递一个负值，如果传递一个负值，则从后往前计算 * -1 倒数第一个 * -2 倒数第二个 */ var result = arr.slice(1,4); result = arr.slice(3); result = arr.slice(1,-2); //console.log(result); /* * splice() * - 可以用于删除数组中的指定元素 * - 使用splice()会影响到原数组，会将指定元素从原数组中删除 * 并将被删除的元素作为返回值返回 * - 参数： * 第一个，表示开始位置的索引 * 第二个，表示删除的数量 * 第三个及以后。。 * 可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边 * */ arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"]; var result = arr.splice(3,0,"牛魔王","铁扇公主","红孩儿"); console.log(arr); //console.log(result); 6.数组去重练习 <script type="text/javascript"> //创建一个数组 var arr = [1,2,3,2,2,1,3,4,2,5]; //去除数组中重复的数字 //获取数组中的每一个元素 for(var i=0 ; i<arr.length ; i++) //console.log(arr[i]); /*获取当前元素后的所有元素*/ for(var j=i+1 ; j<arr.length ; j++) //console.log("---->"+arr[j]); //判断两个元素的值是否相等 if(arr[i] == arr[j]) //如果相等则证明出现了重复的元素，则删除j对应的元素 arr.splice(j,1); //当删除了当前j所在的元素以后，后边的元素会自动补位 //此时将不会在比较这个元素吧，我需要在比较一次j所在位置的元素 //使j自减 j--; //为了解决相邻元素重复而被跳过 7.数组的concat,sort,reverse,join方法 var arr = ["孙悟空","猪八戒","沙和尚"]; var arr2 = ["白骨精","玉兔精","蜘蛛精"]; var arr3 = ["二郎神","太上老君","玉皇大帝"]; /* * concat()可以连接两个或多个数组，并将新的数组返回 * - 该方法不会对原数组产生影响 */ var result = arr.concat(arr2,arr3,"牛魔王","铁扇公主"); /* * join() * - 该方法可以将数组转换为一个字符串 * - 该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回 * - 在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符 * 如果不指定连接符，则默认使用,作为连接符 */ arr = ["孙悟空","猪八戒","沙和尚","唐僧"]; result = arr.join("@-@"); /* * reverse() * - 该方法用来反转数组（前边的去后边，后边的去前边） * - 该方法会直接修改原数组 */ arr.reverse(); //console.log(arr); arr = ["b","d","e","a","c"]; /* * sort() * - 可以用来对数组中的元素进行排序 * - 也会影响原数组，默认会按照Unicode编码进行排序 */ arr.sort(); //arr.reverse(); /* * 即使对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序， * 所以对数字进排序时，可能会得到错误的结果。 * * 我们可以自己来指定排序的规则 * 我们可以在sort()添加一个回调函数，来指定排序规则， * 回调函数中需要定义两个形参, * 浏览器将会分别使用数组中的元素作为实参去调用回调函数 * 使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边 * - 浏览器会根据回调函数的返回值来决定元素的顺序， * 如果返回一个大于0的值，则元素会交换位置 * 如果返回一个小于0的值，则元素位置不变 * 如果返回一个0，则认为两个元素相等，也不交换位置 * * - 如果需要升序排列，则返回 a-b * 如果需要降序排列，则返回b-a */ arr = [5,4,2,1,3,6,8,7]; arr.sort(function(a,b) //前边的大 /*if(a > b) return -1; else if(a < b) return 1; else return 0; */ //升序排列 //return a - b; //降序排列 return b - a; ); console.log(arr); console.log(arr); 8. call和apply方法 function fun(a,b) console.log("a = "+a); console.log("b = "+b); //alert(this); var obj = name: "obj", sayName:function() alert(this.name); ; /* * call()和apply() * - 这两个方法都是函数对象的方法，需要通过函数对象来调用 函数名是函数对象 fun, fun()是函数的执行结果,即返回值 * - 当对函数调用call()和apply()都会调用函数执行 * - 在调用call()和apply()固定将一个对象指定为第一个参数 * 此时这个对象将会成为函数执行时的this * - call()方法可以将实参在对象之后依次传递 * - apply()方法需要将实参封装到一个数组中统一传递 * * - this的情况： * 1.以函数形式调用时，this永远都是window * 2.以方法的形式调用时，this是调用方法的对象 * 3.以构造函数的形式调用时，this是新创建的那个对象 * 4.使用call和apply调用时，this是指定的那个对象 */ //fun.call(obj,2,3);//a=2 b=3 //fun.apply(obj,[2,3]); //a=2 b=3 var obj2 = name: "obj2" ; //fun.apply(); //a=undefined b=undefined //fun.call(); //a=undefined b=undefined //fun(); //a=undefined b=undefined //fun.call(obj); //fun.apply(obj); //fun(); //obj.sayName.apply(obj2); // 调用obj2的对象 9. arguments 类(似)数组 /* * 在调用函数时，浏览器每次都会传递进两个隐含的参数： * 1.函数的上下文对象 this * 2.封装实参的对象 arguments * - arguments是一个类数组对象,它也可以通过索引来操作数据，也可以获取长度 * - 在调用函数时，我们所传递的实参都会在arguments中保存 * - arguments.length可以用来获取实参的长度 * - 我们即使不定义形参，也可以通过arguments来使用实参， * 只不过比较麻烦 * arguments[0] 表示第一个实参 * arguments[1] 表示第二个实参 。。。 * - 它里边有一个属性叫做callee， * 这个属性对应一个函数对象，就是当前正在指向的函数的对象 * */ function fun(a,b) //console.log(arguments instanceof Array); //console.log(Array.isArray(arguments)); //console.log(arguments[1]); //console.log(arguments.length); console.log(arguments.callee == fun); //true fun("hello",true); </script> </head> <body> </body> </html>
以上是关于JS数组的主要内容，如果未能解决你的问题，请参考以下文章