JavaScript 5—数组
基本概念
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* 内建对象 宿主对象 自定义对象 数组(Array) 数组也是一个对象 它和我们普通对象功能类似，也是用来存储一些值的 不同的是普通对象是使用字符串作为属性名的， 而数组时使用数字来作为索引操作元素 索引: 从0开始的整数就是索引 数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据 */ //创建数组对象 var arr = new Array(); console.log(arr); //使用typeof检查一个数组时，会返回object console.log(typeof arr); /* 向数组中添加元素 语法：数组[索引] = 值 如果读取不存在的索引，他不会报错而是返回undefined */ arr[0] = 10; arr[1] = 33; console.log(arr); console.log(arr[1]); console.log(arr[111]); /* 获取数组的长度 可以使用length属性来获取数组的长度(元素的个数) 语法：数组.length 对于连续的数组，使用length可以获取到数组的长度(元素的个数) 对于非连续的数组，使用1ength会获取到数组的最大的索引+1 尽量不要创建非连续的数组 */ console.log(arr.length); console.log(arr); /* 修改length 如果修改的length大于原长度，则多出部分会空出来 如果修改的1ength小于原长度，则多出的元素会被删杀 */ arr.length = 10; console.log(arr); arr.length = 2; console.log(arr); //向数组的最后-一个位置添加元素 //语法:数组[数组.length] = 值; arr[arr.length] = 70; console.log(arr); arr[arr.length] = 80; console.log(arr); </script> </head> <body> </body> </html>
数组字面量
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //使用字面量来创建数组 //语法:[] //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.1og(arr2); //创建-一个数组数组中只有一个元素10 arr = [10]; //创建一个长度为10的数组 arr2 = new Array(10); console.log(arr2); //console.1og(arr2.1ength); //数组中的元素可以是任意的数据类型 arr = ["hello", 1, true, null, undefined]; //也可以是对象 var obj = { name: "孙悟空" }; arr[arr.length] = obj; console.log(arr); //也可以是一个函数 arr = [function () { alert(1) }, function () { alert(2) }]; console.log(arr); //数组中也可以放数组，如下这种数组我们称为二维数组 arr = [[1, 2, 3], [3, 4, 5], [5, 6, 7]]; console.log(arr[1]); </script> </head> <body> </body> </html>
数组的基本方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //创建一个数组 var arr = ["孙悟空", "猪八戒", "沙和尚"]; /* push() 该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度 可以将要添加的元素作为方法的参数传递， 这样这些元素将会自动添加到数组的末尾 该方法会将数组新的长度作为返回值返回 */ var result = arr.push("唐僧", "蜘蛛精", "白龙马"); console.log(arr); console.log("result = " + result); /* pop() 该方法可以删除数组的最后一个元素，并将删除的元素作为返回值返回 */ arr.pop(); console.log(arr); arr.pop(); console.log(arr); var result = arr.pop(); console.log(arr); console.log("result = " + result); /* unshift( ) 向数组开头添加一个或多个元素，并返回新的数组长度 向前边插入元素以后，其他的元素索引会依次调整 */ console.log(arr); arr.unshift("牛魔王", "二郎神"); console.log(arr); /* shift() 可以删除数组的第一个元素，并将被删除的元素作为返回值返回 */ arr.shift(); console.log(arr); var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"]; /* slice() 可以用来从数组提取指定元素 该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回 参数: 1.截取开始的位置的索引，包含开始索引 2.截取结束的位置的索引，不包含开始索引 第二个参数可以省略不写，此时回截取从开始索引往后的所有元素 索引可以传递一个负值，如果传递一个负值，则从后往前计算 -1 倒数第一个 -2 倒数第二个 */ arr.slice(0, 2); console.log(arr); /* splice() -可以用于删除数组 中的指定元素 -使用splice( )会影响到原数组，会将指定元素从原数组中删除 并将被删除的元素作为返回值返回 参数: 第一个，表示开始位置的索引 第二个，表示删除的数量 第三个及以后。 可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边 */ var result = arr.splice(3, 0, "红孩儿"); //console.1og(arr); console.log(result); var arr = ["孙悟空", "猪八戒", "沙和尚"]; var arr2 = ["白骨精", "玉兔精", "蜘蛛精"]; var arr3 = ["二郎神", "太上老君", "玉皇大帝"]; /* concat()可以连接两个或多个数组，并将新的数组返回 该方法不会对原数组产生影响 */ var result = arr.concat(arr2, arr3, "牛魔王", "铁山公主"); console.log(result); /* join() 该方法可以将数组转换为一个字符串 该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回 在join()中可以指定一 个字符串作为参数，这个字符串将会成为数组中元素的连接符 如果不指定连接符，则默认使用,作为连接符 */ arr = ["孙悟空", "猪八戒", "沙和尚"]; result = arr.join("@-@"); console.log(result); /* reverse() 该方法用来反转数组(前边的去后边，后边的去前边) 该方法会直接修改原数组 */ arr.reverse(); console.log(arr); arr = ["b", "d", "e", "a", "c"]; /* sort() 可以用来对数组中的元素进行排序 也会影响原数组，默认会按照Uni code编码进行排序 */ arr.sort(); // arr.reverse(); console.log(arr); /* 即使对于纯数字的数组，使用sort( )排序时，也会按照Uni code编码来排序， 所以对数字进排序时，可能会得到错误的结果 我们可以自己来指定排序的规则 我们可以在sort()添加一个回调函数，来指定排序规则， 回调函数中需要定义两个形参， 浏览器将会分别使用数组中的元素作为实参去调用回调函数 使用哪个元素调用不确定，但是肯定的是在数组中a-定在b前边 浏览器会根据回调函数的返回值来决定元素的顺序， 如果返回一个大于0的值，则元素会交换位置 如果返回一个小于0的值，则元素位置不变 如果返回一个0，则认为两个元素相等，也不交换位置 如果需要升序排列，则返回a-b 如果需要降序排列，则返回b-a */ arr = [3, 4, 11, 2, 5]; arr.sort(); console.log(arr);//11,2,3,4,5 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);//2,3,4,5,11 </script> </head> <body> </body> </html>
遍历
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //创建一个数组 var arr = ["孙悟空", "猪八戒", "沙和尚"]; //所谓的遍历数组，就是将数组中所有的元素都取出来 for (var i = 0; i < arr.length; i++) { console.log(arr[i]); } /* 一般我们都是使用for循环去遍历数组， JS中还为我们提供了一个方法，用来遍历数组 forEach( ) 这个方法只支持IE8以上的浏览器 IE8及以下的浏览器均不支持该方法，所以如果需要兼容IE8，则不要使用forEach 还是使用for循环来遍历 forEach()方法需要一个函数作为参数 像这种函数，由我们创建但是不由我们调用的，我们称为回调函数 数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素 以实参的形式传递进来，我们可以来定义形参，来读取这些内容 浏览器会在回调函数中传递三个参数: 第一个参数，就是当前正在遍历的元素 第二个参数，就是当前正在遍历的元素的索引 第三个参数，就是正在遍历的数组 */ arr.forEach(function (value, index, obj) { console.log("value = " + value); console.log("index = " + index); console.log("obj = " + obj); }); </script> </head> <body> </body> </html>
删除重复元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <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.1og(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--; } } } </script> </head> <body> </body> </html>
转载请注明出处：https://www.cnblogs.com/stu-jyj3621
浙公网安备 33010602011771号