Array 数组对象 · 2021 web前端工程师

[TOC] # 5.1数组对象的创建创建数组对象的两种方式 ●字面量方式 ~~~ var arr [1,2,3]; console .1og(arr[0]); ~~~ ●new Array（）（new 构造函数）（括号里面起码要**2个或2个以上的数才是数组**） ~~~ // var arr1 = new Array(); //创建了一个空的数组 // var arr1 = new Array(2); //这个2表示数组的长度为2里面有2个空的数组元素 var arr1 = new Array(2, 3); //等价于[2,3] 这样写表示里面有2个数组元素是2和3 console.log(arr1); ~~~ ## //翻转数组 ~~~ function reverse(arr) { // 第一种判断数组方法 // if (arr instanceof Array) { // 第二种判断数组方法 if (Array. isArray(arr)) { var newArr =[]; for (var i = arrlength-1;i>=0;i--){ newArr[newArr .length] = arr[i ] ; } //返回值函数必备 return newArr ; } else { return 'error 这个参数要求必须是数组格式[1,2,3]' } } console.log(reverse([1, 2, 3])); console.log(reverse(1, 2, 3)); ~~~ ## //检测是否为数组 ### // (1) instanceof 运算符它可以用来检测是否为数组 ~~~ var arr = [ ]; var obj = { }; console.log(arr instanceof Array); console.log(obj instanceof Array); ~~~ ### // (2) Array. isArray(参数); H5新增的方法 ie9以上版本支持 ~~~ var arr = [ ]; var obj = { }; console.log(Array.isArray(arr)); console.log(Array.isArray(obj)); ~~~ # 5.3添加删除数组元素的方法 | 方法名 | 说明 | 返回值 | | --- | --- | --- | | push(参数.... ) | 末尾添加一个或多个元素,注意修改原数组 | 并返回新的长度 | | pop() | 删除数组最后一个元素，把数组长度减1 无参数、修改原数 | 返回它删除的元素的值 | | unshift(参数1....) | 向数组的开头添加一个或更多元素,注意修改原数组 | 并返回新的长度 | | shift() | 删除数组的第一个元素，数组长度减1无参数、修改原数组 | 并返回第一个元素的值 | ## //添加删除数组元素方法 ## 1\. （数组前面添加）push() 在我们数组的末尾添加一个或者多个数组元素 ~~~ var arr = [1, 2, 3]; // arr.push(4, ' pink' ); // (2) push() 参数直接写数组元素就可以了 console.log(arr.push(4, ' pink' )); // (3) push完毕之后，返回的结果是新数组的长度 console.log(arr); ~~~ // (1) push是可以给数组追加新的元素 // (2) push() 参数直接写数组元素就可以了 // (3) push完毕之后，返回的结果是新数组的长度 // (4) 原数组也会发生变化 ## 2\. （数组前面添加）unshift 在我们数组的开头添加一个或者多个数组元素 ~~~ var arr = [1, 2, 3]; arr.unshift('red', ' purple'); //直接应用数组前面添加 console.log(arr.unshift('red', ' purple')); console.log(arr); ~~~ // (1) unshift是可以给数组前面追加新的元素 // (2) unshift() 参数直接写数组元素就可以了 // (3) unshift完毕之后，返回的结果是新数组的长度 // (4) 原数组也会发生变化 ## 3.（删除数组最后一个）pop()它可以删除数组的最后个元素 ~~~ var arr = [1, 2, 3]; arr.pop(); //直接应用删除数组最后一个 console.log(arr.pop()); // (3) pop完毕之后，返回的结果是删除的那个元素 console.log(arr); ~~~ // (1) pop是可以删除数组的最后一个元素记住一次只能删除一个元素 //(2)pop()没有参数 // (3) pop完毕之后，返回的结果是删除的那个元素 // (4) 原数组也会发生变化 ## 4.（删除数组第一个） shift() 它可以删除数组的第一个元素 ~~~ var arr = [1, 2, 3]; arr.shift(); //直接应用删除数组第一个 console.log(arr.shift()); // (3) shift完毕之后，返回的结果是删除的那个元素 console.log(arr); ~~~ // (1) shift是可以删除数组的第一个元素记住次只能删除一个元素 // (2) shift() 没有参数 // (3) shift完毕之后，返回的结果是删除的那个元素 // (4) 原数组也会发生变化 # 5.4数组排序（重点排序） | 方法名 | 说明 | 是否修改原数组 | | --- | --- | --- | | reverse() | 颠倒数组中元素的顺序，无参数 | 该方法会改变原来的数组返回新数组 | | sort() | 对数组的元素进行排序 | 该方法会改变原来的数组返回新数组 | ## // 1.翻转数组（顺序翻转） ~~~ var arr = ['pink', 'red', 'blue']; arr .reverse( ) ; console .1og(arr); ~~~ ### // 2.数组排序(冒泡排序) （顺序倒序） ~~~ var arr1 = [13, 4, 77, 1, 7]; arr1. sort(function(a, b) { // return a - b;升序的顺序排列 return b - a; //降序的顺序排列 }); console.log(arr1); ~~~ # 5.5数组索引方法. | 方法名 | 说明 | 返回值 | | --- | --- | --- | | indexOf() （左往右查找） | 数组中查找给定元素的第一个索引 | 如果存在返回索引号如果不存在，则返回-1. | | lastlndexOf() （右往左查找） | 在数组中的最后一个的索引， | 如果存在返回索引号如果不存在，则返回-1。 | ## //返回数组元素索引号方法 indexOf(数组元素)| 作用就是返回该数组元素的索引号从前面开始查找 //它只返回第个满足条件的索引号 //它如果在该数组里面找不到元素，则返回的是-1 ~~~ // var arr = ['red', ' green', 'blue', 'pink', 'blue']; var arr =['red', ' green', ' pink']; console.log(arr.indexOf( 'blue')); ~~~ ## //返回数组元素索引号方法 lastIndexOf(数组元素) 作用就是返回该数组元素的索引号从后面开始查找 ~~~ var arr = ['red', 'green', 'blJe', 'pink', 'blue']; console.log(arr.lastIndexOf('blue')); // 4 ~~~ # 5.6数组转换为字符串 | 方法名 | 说明 | 返回值 | | --- | --- | --- | | toString() | 把数组转换成字符串，逗号分隔每一项 | 返回一个字符串 | | join('分隔符') | 方法用于把数组中的所有元素转换为一个字符串。 | 返回一个字符串 | ## //数组转换为字符串 ### // 1. toString() 将我们的数组转换为字符串 ~~~ var arr = [1, 2,3]; console.log(arr . toString()); //1,2,3 ~~~ ### // 2. join(分隔符) ~~~ var arr1 = [ ' green', ' blue'，'pink']; console.log(arr1.join()); // green, blue, pink console.log(arr1.join('-')); // green-blue- pink console.log(arr1.join('&')); // green&blue&pink ~~~ # 数组与数组相连接 | 方法名 | 说明 | 返回值 | | --- | --- | --- | | concat() | 连接两个或多个数组不影响原数组 | 返回一个新的数组 | | slice() | 数组截取slice(begin, end) | 返回被截取项目的新数组 | | splice() | 数组删除splice(第几个开始,要删除个数) | 返回被删除项目的新数组注意，这个会影响原数组 | slice()和splice()目的基本相同,建议同学们重点看下splice() # 6案例: 筛选数组有一个包含工资的数组\[1500, 1200, 2000, 2100, 1800\] ,要求把数组中工资超过2000的删除,剩余的放到新数组里面 ~~~ var arr = [1500, 1200， 2000, 2100, 1800]; var newArr = [] ; for (var i = 0; i < arr.length; i++) { if (arr[i] < 2000) { // newArr [newArr .length] = arr[i]; newArr.push(arr[i]); //新数组.功能（添加数组） } } console. log(newArr); ~~~ # 5.数组对象（重点） ## 6案例:数组去重(重点案例) 有一个数组\['c', 'a', 'z', 'a', 'x'， 'a', 'x',‘c'，'b'\] ,要求去除数组中重复的元素。 ## 案例分析 ①目标:把旧数组里面不重复的元素选取出来放到新数组中,重复的元素只保留一个,放到新数组中去重。 ②核心算法:我们遍历旧数组,然后拿着I旧数组元素去查询新数组,如果该元素在新数组里面没有出现过,我们就添加,否则不添加。 ③我们怎么知道该元素没有存在?利用新数组.indexOf(数组元素)如果返回时-1就说明新数组里面没有改元素 ~~~ 旧数组['c', 'a’，、z'， 'a'，'x'， 'a', 'x'，‘c'，'b' ] 新数组[] ~~~ ### 实验代码利用新数组. index0f(数组元素) 如果返回时- 1就说明新数组里面没有改元素 //封装一个去重的函数unique独无二的 ~~~ function unique(arr) { var newArr = [] ; for (var i = 0; i < arr.length; i++) { if (newArr.indexOf(arr[i]) === -1) { newArr.push(arr[i]); } } return newArr ; } // var demo = unique(['c', 'a',' z' ,'a', 'x', 'a', 'x', 'c', 'b']) var demo = unique(['blue', ' green', ' blue ']) // 使用声明变量名 = 函数名 [ 参数] console.log(demo); // 输出变量名 ~~~