JavaScript数组学习.md

博文参考
数组学习链接
数组方法面试题

数组

用来存储不定数量、不定类型的数据的有序集合容器，每一个值叫元素, 下标叫做索引。

一、数组的创建

字面量	Array构造函数	Array.of()	Array.from()
let a = [1，“a”]	let a = new Array(1，“a”)	let arr = Array.of(1, ‘a’)	let arr = Array.form(arrayLike)

1、字面量创建

var arr1 = [];   //创建一个空数组
var arr2 = [20];   // 创建一个包含1项数据为20的数组
var arr3 = ["lily","lucy","Tom"];   // 创建一个包含3个字符串的数组

2、使用 Array 构造函数

//1、无参构造
var arr1 = new Array();   //创建一个空数组

//2、带参构造
//1个参数，创建一个初始长度为指定数值的空数组
var arr2 = new Array(20);   // 创建一个包含20项的数组
//参数个数>=2,创建包含指定元素的数组
var arr3 = new Array("lily","lucy","Tom");   // 创建一个包含3个字符串的数组

3、Array.of 方法创建数组(es6 新增)

• Array.of()方法总会创建一个包含所有传入参数的数组，而不管参数的数量与类型。

let arr = Array.of(1, 'a');
console.log(arr, arr.length); //[ 1, 'a' ] 2

let arr1 = Array.of(3);
console.log(arr1.length);//1
console.log(arr1[0]);//3

4、Array.from 方法创建数组(es6 新增)

• 将一个类数组对象或者可遍历对象转换成一个真正的数组。

let arr = [1, 2, 'a', 'b', ]
let set = new Set(arr)
console.log(set)//Set { 1, 2, 'a', 'b' }
console.log(Array.from(set, item => item + 'a'), arr) // [ '1a', '2a', 'aa', 'ba' ] [ 1, 2, 'a', 'b' ]
//原数组不变

二、判断是否为数组的方法

var arr = [1, 2, 3];
//类数组对象：参数，jq对象，dom集合
var obj = {
    
    
    name: "张三",
    age: 66
}

//arr和obj都可以通过索引值来获取成员，如何判断他们谁是数组
//有四种方法
arr instanceof Array //true
obj instanceof Array //false

arr.constructor === Array //true
obj.constructor === Array //false

Object.prototype.toString.call(arr) === '[object Array]' //true
Object.prototype.toString.call(obj) === '[object Array]' //false

Array.isArray(arr); //true
Array.isArray(obj) //false

三、类数组

1、概念

• 拥有length属性，其它属性（索引）为非负整数（对象中的索引会被当做字符串来处理）;
• 不具有数组所具有的方法；
• 类数组是一个普通对象，而真实的数组是Array类型。

2、转换为真正的数组

• 类数组对象转换为真正数组

//该类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组
//类数组对象属性名可加引号，也可不加
let arrayLike = {
    
    
    0: 'tom', 
    1: '65',
    2: '男',
    3: ['jane','john','Mary'],
    'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','男',['jane','john','Mary']]

四、数组方法

数组方法	参数	用法	原数组
join(',')	可选。指定分隔符，若省略，默认逗号,作为分隔符	将数组各元素连接，返回一个分隔符连接的字符串	不变
concat(arrA,"a",...,arrayX)	必需。该参数可以是具体的值，可以是数组对象，可以是任意多个	连接两个或多个数组，返回一个新的拼接原数组+参数的数组。参数是数组，添加的是数组中的元素	不变
toLocaleString() toString()	-	将数组转换为字符串,返回字符串	不变
push(ele1,ele2,....,eleX)	ele1必需。要添加到数组的第一个元素,ele2可选。要添加到数组的第二个元素	将参数顺序添加到原数组尾部,返回数组长度	原数组改变
pop()	-	删除并返回数组的最后一个元素	原数组改变
unshift(ele1,ele2,....,eleX)	ele1必需。要添加到数组的第一个元素,ele2可选。要添加到数组的第二个元素	向数组的开头添加一个或更多元素，并返回新的长度	原数组改变
shift()	-	删除并返回数组的最后一个元素	原数组改变
slice(start,end)	start必需。end可选，截取到end前一位	返回选定的元素	不变
splice(起始下标, 删除的个数, 项1, 项2, 项3…)

数组方法详解链接

slice() 按照条件查找出其中的部分元素，原数组不变。
splice() 对数组进行增删改，原数组改变。
includes() 判断一个数组是否包含一个指定的值，返回true/false

find() 返回匹配的值
findIndex() 返回匹配位置的索引

indexOf() 检测当前值在数组中第一次出现的位置索引
lastIndexOf() 检测当前值在数组中最后一次出现的位置索引

sort() 对数组的元素进行排序
reverse() 对数组进行倒序

fill() 方法能使用特定值填充数组中的一个或多个元素

every() 判断数组中每一项都是否满足条件，原数组不变。
some() 判断数组中是否存在满足条件的项，原数组不变。
filter() “过滤”功能，原数组不变。
forEach() ES5 及以下循环遍历数组每一项，原数组不变。
map() ES6 循环遍历数组每一项，原数组不变。

copyWithin() 用于从数组的指定位置拷贝元素到数组的另一个指定位置中

flat()、flatMap() 扁平化数组
entries() 、keys() 、values() 遍历数组

   let a = Array.prototype.hasOwnProperty("indexOf");
   console.log("a");//true
   //hasOwnProperty("成员名"):判断对象是否包含某个属性，如果包含则返回true，如果不包含，则返回false;

indexOf() 、lastIndexOf(）

indexOf

• arr.indexOf(searchElement[, fromIndex])
  searchElement 要查找的项
  fromIndex 可选，开始搜索的索引

返回可以在数组中找到给定元素的第一个索引；如果不存在，则返回-1。

   let arr = [1, 2, 3, 4, 1];
   console.log(arr.indexOf(1));     //0
   console.log(arr.lastIndexOf(1)); //4
   
   let array = [2, 9, 9];
   array.indexOf(2);     // 0
   array.indexOf(7);     // -1
   array.indexOf(9, 2);  // 2
   array.indexOf(2, -1); // -1
   array.indexOf(2, -3); // 0

   let numbers = [2, 5, 9, 2];
   numbers.lastIndexOf(2);     // 3
   numbers.lastIndexOf(7);     // -1
   numbers.lastIndexOf(2, 3);  // 3
   numbers.lastIndexOf(2, 2);  // 0
   numbers.lastIndexOf(2, -2); // 0
   numbers.lastIndexOf(2, -1); // 3

1、join()

用于把数组中的所有元素转换一个字符串。原数组不变。
元素是通过指定的分隔符进行分隔的。默认使用逗号，作为分隔符

• 转成字符串，并分隔

   var arr = [1, 2, 3];
   let a = arr.join()
   console.log(arr.join(), typeof a, a instanceof Array); // 1,2,3 string false
   console.log(arr.join("-")); // 1-2-3
   console.log(arr); // [1, 2, 3]（原数组不变）

• 实现重复字符串

   function repeatString(str, n) {
    
    
       //一个长度为n+1的空数组用string去拼接成字符串,就成了n个string的重复
       return new Array(n + 1).join(str);
   }
   console.log(repeatString("abc", 3));   // abcabcabc
   console.log(repeatString("Hi", 5));   // HiHiHiHiHi

2、concat()

连接两个或多个数组

   var arr = [1,3,5,7];
   var arrCopy = arr.concat(9,[11,13]);
   console.log(arrCopy);   //[1, 3, 5, 7, 9, 11, 13]
   console.log(arr);   // [1, 3, 5, 7](原数组未被修改)
   var arrCopy2 = arr.concat([9,[11,13]]);
   console.log(arrCopy2);   //[1, 3, 5, 7, 9, Array[2]]
   console.log(arrCopy2[5]);   //[11, 13]

3、toLocaleString() 和 toString()

将数组转换为字符串

const array1 = [22, 3, 31, 12];
const str = array1.toLocaleString();
const str1 = array1.toString();

console.log(str, array1); // 22,3,31,12  [ 22, 3, 31, 12 ]
console.log(str1); // 22,3,31,12

4、push() 、pop()

push() 向数组的末尾添加新元素
pop() 删除数组的最后一项
shift() 删除数组的第一项
unshift() 向数组首位添加新元素

push()	pop()
从数组末尾向数组添加元素，可添加一个或多个元素	删除数组的最后一个元素
返回数组长度	返回删除的元素

5、unshift() 、shift()

unshift()	shift()
从数组开头向数组添加元素，可添加一个或多个元素	删除数组的开头一个元素
返回数组长度	返回删除的元素

6、slice()

返回从原数组中指定开始下标到结束下标之间的项组成的新数组，不改变原数组。

• 一个参数， slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。

• 两个参数，该方法返回起始和结束位置之间的项，但不包括结束位置的项。

• 当出现负数时，将负数加上数组长度的值来替换该位置的数

let arr = [1,3,5,7,9,11];//[1, 3, 5, 7, 9, 11](原数组没变)
let arrCopy = arr.slice(1);//[3, 5, 7, 9, 11]
let arrCopy2 = arr.slice(1,4);//[3, 5, 7]
let arrCopy3 = arr.slice(1,-2);//相当于arr.slice(1,4)
let arrCopy4 = arr.slice(-4,-1);//相当于arr.slice(2,5)[5, 7, 9]

7、splice()

删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容,若无删除, 返回一个空数组。此方法会改变原数组

• arr.splice(起始下标, 删除的个数, 项1, 项2, 项3…);

let arr = [1, 2, 3];
let arr1 = arr.splice(2, 0, "a");
console.log(arr, arr1); //[ 1, 2, 'a', 3 ] []

let arr = [1, 2, 3];
let arr1 = arr.splice(1, 2, "a");
console.log(arr, arr1); //[ 1, 'a' ] [ 2, 3 ]

includes()

includes(searchvalue, start) ,返回要查找的元素在数组中的位置，找到返回true，否则false

searchvalue 必需，要查找的字符串。
start 可选，设置从那个位置开始查找，默认为 0。

   let numbers = [1, 2, 3, , 5, '4', 3, 2, 1];
   console.log(numbers.includes(4)) // false

filter()

1.含义

过滤方法，返回符合条件的元素–新的数组形式。不改变原数组。
博客参考

2.用法案例

• 点击某个li就删除该li

   <ul>
       <li v-for="(item, i) in list" :key="i" @click="del(i)">
           {
    
    {
    
     item.name }}-{
    
    {
    
     item.age }}
       </li>
   </ul>
   
   list: [{
    
     name: "zs", age: 12 },{
    
     name: "ls", age: 33}]

   del(index) {
    
    
       this.list=this.list.filter((item, idx) => {
    
    
           return idx !== index;//不等于 保留 ,等于 就移除掉  filter--return true返回一个新数组
      });
   }

• 列表查询分数，显示查询值
  

find()

1.含义

类似于filter方法，但返回第一个符合条件的元素。filter返回一个数组，find返回一个object。

2.用法案例

• 找出符合条件的对象

   const students = [
       {
    
     name: 'Sunshine', score: 50 },
       {
    
     name: 'Elon', score: 40 },
       {
    
     name: 'Jack', score: 30 },
   ];
   //返回name长度为4的第一个对象
   const foundedOne = students.find(stu=>stu.name.length === 4);
   console.log(foundedOne);//{ name: 'Elon', score: 40 }
   //由结果可见，虽然elon和jack都符合条件，但只返回了elon。

2.用法案例

sort()

对数组的元素进行排序,排序顺序可以是字母或数字，并按升序或降序。默认按字母升序。原数组被改变。

   var arr1 = ["a", "d", "c", "b"];
   console.log(arr1.sort());   // ["a", "b", "c", "d"]
   arr2 = [13, 24, 51, 3];
   console.log(arr2.sort());   // [13, 24, 3, 51]
   console.log(arr2);   // [13, 24, 3, 51](原数组被改变)

sort()可接收一个比较函数作为参数，以便指定哪个值位于哪个值的前面。

• 比较函数接收两个参数
  • 若第一个参数位于第二个之前则返回一个负数
  • 若两个参数相等则返回 0
  • 若第一个参数位于第二个之后则返回一个正数

   function compare(value1, value2) {
    
    
       if (value1 < value2) {
    
    
           return -1;
       } else if (value1 > value2) {
    
    
           return 1;
       } else {
    
    
           return 0;
       }
    }
   arr2 = [13, 24, 51, 3];
   console.log(arr2.sort(compare));   // [3, 13, 24, 51]

reverse()

将数组元素反向排列，原数组被改变。

   var arr = [13, 24, 51, 3];
   console.log(arr.reverse());   //[3, 51, 24, 13]
   console.log(arr);   //[3, 51, 24, 13](原数组改变)

Array.from方法

Array.from()方法

将一个类数组对象或者可遍历对象转换成一个真正的数组

• 将Set结构的数据转换为真正的数组

let arr = [1, 2, 'a', 'b', ]
let set = new Set(arr)
console.log(set)//Set { 1, 2, 'a', 'b' }
console.log(Array.from(set, item => item + 'a'), arr) // [ '1a', '2a', 'aa', 'ba' ] [ 1, 2, 'a', 'b' ]
//原数组不变

• Array.from还可接受第二个参数，类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组

let arr = [12,45,97,9797,564,134,45642]
let set = new Set(arr)
console.log(Array.from(set, item => item + 1)) 
// [ 13, 46, 98, 9798, 565, 135, 45643 ]

• 将字符串转换为数组：

let str = 'hello world!';
let newStr = [...str]
console.log(Array.from(str));//[ 'h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd', '!' ]
console.log(newStr);//[ 'h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd', '!' ]

五、数组的应用

1.数组去重

①使用Array.from ②使用…扩展运算符

   const set = new Set([1, 1, 2, 2, 3, 3]);
   console.log(set);//Set { 1, 2, 3 }
   console.log(Array.from(set)); //[ 1, 2, 3 ] 将Set结构的数据转换为真正的数组
 
   let arr = [12,43,23,43,68,12];
   let item = [...new Set(arr)];
   console.log(item);//[12, 43, 23, 68]

③使用indexOf ④使用filter

   let arr = ['a', 1, 2, 3, "a", "b", 2];
   let newArr = [];
   //使用indexOf
   function getArr(arr) {
    
    
       for (let i = 0; i < arr.length; i++) {
    
    
           if (newArr.indexOf(arr[i]) === -1) {
    
    
               newArr.push(arr[i]);
           }
       }
       console.log(newArr);
   }
   getArr(arr);//[ 'a', 1, 2, 3, 'b' ]
   //使用filter
   function getArr(arr) {
    
    
       let result = arr.filter((item, i, arr) => {
    
    
          return arr.indexOf(item) == i;//true，返回符合条件的新数组形式
       })
       console.log(result);
   }
   getArr(arr); //[ 'a', 1, 2, 3, 'b' ]

数组方法练习

代码题

1、查找数组元素位置

   function indexOf(arr, item) {
    
    
       if(Array.prototype.indexOf){
    
    // 判断浏览器是否支持indexOf方法
           return arr.indexOf(item);
       }else{
    
    
           for(var i=0;i<arr.length;i++){
    
    
               if(arr[i]===item){
    
    
                   return i;
               }
           }
      }
      return -1;
   }

2、添加元素(末尾添加)

   let arr = [1, 2, 3];
   console.log(arr, arr.concat(['add', 'b'])); //[ 1, 2, 3 ] [ 1, 2, 3, 'add', 'b' ]

   console.log(arr, [...arr, "add"]); //[1, 2, 3][1, 2, 3, 'add']

   let creatArr = arr.slice(0);
   creatArr.push('add');
   console.log(arr, creatArr) //[ 1, 2, 3 ] [ 1, 2, 3, 'add' ]

3、移除数组中的元素(返回原数组)

   let arr = [1, 2, 3, 2, 2, 6, 8];

   function del(item) {
    
    
       for (let i = 0; i < arr.length; i++) {
    
    
           if (arr[i] == item) {
    
    
               arr.splice(i, 1);
               i--;
           }
       }

       return arr
   }
   let a = del(2)
   console.log(a) //[ 1, 3, 6, 8 ]

4、移除数组中的元素(返回新的数组)

   let arr = [1, 2, 3, 2, "aa", "b", "aa"];

   function del(value) {
    
    
      return arr.filter((item, i) => {
    
    
           return item !== value;
      })
   }
   let result = del("aa");
   console.log(arr, result); //[ 1, 2, 3, 2, 'aa', 'b', 'aa' ] [ 1, 2, 3, 2, 'b' ]