第七章：数组

最新推荐文章于 2024-05-21 14:17:29 发布

走在大前端的路上

最新推荐文章于 2024-05-21 14:17:29 发布

阅读量154

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/u012211003/article/details/119003422

版权

JavaScript学习笔记专栏收录该内容

18 篇文章 3 订阅

订阅专栏

数组的创建

//创建一个数组
let colors = new Array(); //Array []

//创建一个数组并指定长度
let colors = new Array(20); //Array(20)

//创建一个数组并赋值
let colors = new Array("red","blue","green");//Array(3)["red","blue","green" ]

在创建数组的时候，最好采用省略new操作符的形式，数组中可以存储不同类型的元素，如下：

let colors = [];
let colors = [20];
let colors = ["red","blue",1];

数组的元素的访问

let colors = ["red","blue","green"]
console.log(colors[0]); //显示第一项 "red"
colors[2] = "black"; //修改第三项
colors[3] = "brown"; //新增第四项
console.log(colors)   //(4) ["red", "blue", "black", "brown"]

① 通过方括号加索引值访问；

② 设置在索引值在范围内的其他值，可以替换指定位置的值；

③ 如果索引值超过了数组现有的项数，数组会自动增加到该索引值加1的长度，如代码中的新增第4项；

数组中添加元素

有以下几种方法：

① push(),将元素添加到数组的末尾：

let colors = [];
colors.push("red","blue");
console.log(colors); //["red","blue"]

② 索引值超过了数组现有的项数来添加。因为索引值是从0算起的，所以数组的长度总比索引值大1;

let colors = ["red","blue","green"];
colors[colors.length] = "black";
console.log(colors); //["red","blue","green","black"];

③ unshift(),将元素添加到数组的前端;

let colors = ["red","blue","green"];
colors.unshift("black");
console.log(colors); //["black","red","blue","green"];

④ splice() ，可以指定位置插入任意数组的项。至少需要三个参数：起始位置，0和要插入的项.当然也可以插入多项。

let arr = ["George","John","Thomas","James","Adrew","Martin"];
arr.splice(2,0,"William")
console.log(arr);
//["George","John","William","Thomas","James","Adrew","Martin"];

数组中删除元素

① arrayObj.pop(); 移除最后一个元素并返回该元素值；

let arr = ["George","John","William","Thomas"];
let deleteItem1 = arr.pop();
console.log(deleteItem1); //“Thomas”
console.log(arr); //["George", "John", "William"]

② arrayObj.shift(); 移除最前一个元素并返回该元素值，数组中元素自动前移；

let arr = ["George","John","William","Thomas"];
let deleteItem2 = arr.shift();
console.log(deleteItem2); //“George”
console.log(arr); //["John", "William", "Thomas"]

③ arrayObj.splice(start,length); 删除从指定位置start开始的指定数量length的元素，数组形式返回所移除的元素；

let arr = ["George","John","William","Thomas"];
let deleteItem3 = arr.splice(0,2);
console.log(deleteItem3); //["George", "John"]
console.log(arr); //["William", "Thomas"]

④ 指定数组的length小于它的长度

let arr = ["George","John","William","Thomas"];
arr.length = 2;
console.log(arr); //["George","John"]

数组中替换元素

array.splice(start,length,"otherValue") 传三个值，开始替换位置，替换的数量，替换后的值。

let arr = ["George","John","William","Thomas"];
let arr2 = ["George","John","William","Thomas"];

let deleteItem = arr.splice(0,1,"123"); //返回被替换的值
console.log(deleteItem); //["George"]
console.log(arr); // (4) ["123", "John", "William", "Thomas"]

let deleteItem2 = arr2.splice(0,2,"123","456"); //返回被替换的值.可以替换多个值
console.log(deleteItem2); //(2) ["George", "John"]
console.log(arr2); // ["123", "456", "William", "Thomas"]

数组的截取、合并和复制

① 截取数组： slice(start,end);

以数组的形式返回被截取部分，不影响原数组，不包括end对应的项。如果省略end，则截取start之后的所有元素。只传0，相当于复制了数组。

let arr = ["George","John","William","Thomas"];
let getArray = arr.slice(1,3);
console.log(getArray);     //(2) ["John", "William"]
console.log(arr);     //(4) ["George", "John", "William", "Thomas"]

let getArray2 = arr.slice(1);
console.log(getArray2);       //(3) ["John", "William", "Thomas"]
console.log(arr.slice(0));    //(4) ["George","John","William","Thomas"]

② 数组的合并：arrayObj.concat(arrayObj2);

将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组，如果什么也不传，相当于复制数组。

let arr = ["George","John","William","Thomas"];
let arr2=["123","456"];
let arr3=arr.concat(arr2);
console.log(arr3);    
//(6) ["George", "John", "William", "Thomas", "123", "456"]

数组的字符串化

array.join();方法用于将数组字符串化，这个字符串将数组的每一个元素值连接在一起，中间

用传入的值隔开，返回字符串，原数组不变。

let arr = ["George","John","William","Thomas"];
console.log(arr.join(','));    //George,John,William,Thomas
console.log(arr.join('-'));    //同理，以-隔开
console.log(arr.join(' '));    //以空格隔开
console.log(arr);    //(4) ["George", "John", "William", "Thomas"]

数组的排序

reverse()反序，但这并不是将数组元素按照从大到小排序，而是将元素的位置翻转，会改变原数组；

sort()正排序，将数组中元素按照从小到大的顺序排序，返回排好序的数组，会改变原数组。

let arr = [1,5,8,9,6,3];
console.log(arr.reverse()); //[3, 6, 9, 8, 5, 1]
console.log(arr.sort()); //[1, 3, 5, 6, 8, 9]
console.log(arr.sort().reverse()); //[9, 8, 6, 5, 3, 1]

数组的高级用法

① 栈方法和队列

栈方法：栈是一种 LIFO （Last-In-First-Out（义同FILO，先进后出），后进先出）的数据结构，也就是最新添加的项最早被移除。而 栈中项的插入（叫做 推入）和移除（叫做弹出） ，只发生在栈顶。

ECMAScript 为数组专门提供了 push() 和 pop() 方法，以便实现类似栈的行为(会改变原数组)：

let colors = ["red", "blue"];
colors.push("brown");           // 添加另一项
colors[3] = "black";            // 添加一项
console.log(colors.length);     // 4
let item = colors.pop();        // 取得最后一项
console.log(item);              //"black"
console.log(colors);            //(3) ["red", "blue", "brown"]

队列方法：队列数据结构的访问规则是 FIFO （First-In-First-Out，先进先出）。队列在列表的末端添加项，从列表的前端移除项。结合使用 shift() 和 push() 方法，可以像使用队列一样使用数组(会改变原数组):

let colors = new Array();                //创建一个数组
let count = colors.push("red", "green"); //推入两项
console.log(count);                      //2
count = colors.push("black");            //推入另一项
console.log(count);                      //3
let item = colors.shift();               // 取得第一项
console.log(item);                       //"red"
console.log(colors);                     //(2) ["green", "black"]

② 数组的去重

数组的 indexOf() 方法返回在该数组中第一个找到的元素位置，如果它不存在则返回-1。

let arr = ['red', 'blue', 'green', 'blue'];
console.log(arr.indexOf("blue"));          // 1
console.log(arr.indexOf("black"));         // -1

方法1：遍历数组法

function unique(arr){
    let n = [];
    for(let i = 0; i < arr.length; i++){
    //如果当前数组的第i+1个元素已经保存进了临时数组，那么跳过，
    //否则把当前项push到临时数组里面
    if (n.indexOf(arr[i]) == -1){
        n.push(arr[i]);
        }
    }
    return n;
}
let testArry = [1,2,5,5,6];
console.log(unique(testArry)); //[1, 2, 5, 6]

方法2：数组下标判断法（与方法一类似）

function unique(arr){
    let n = [arr[0]]; //结果数组
    //从第二项开始遍历
    for(let i = 1; i < arr.length; i++) {
    //如果当前数组的第i项在当前数组中第一次出现的位置不是i，
    //那么表示第i项是重复的，忽略掉。否则存入结果数组
    if (arr.indexOf(arr[i]) == i){
        n.push(arr[i]);
        }
    }
    return n;
}
let testArry = ["hello",2,5,5,6,"hello"];
console.log(unique(testArry)); //["hello", 2, 5, 6]

方法3：给传入数组排序，排序后相同值相邻，然后遍历时新数组只加入不与前一值重复的值。

function unique(arr){
    // 按从小到到排序
    arr.sort();
    let re = [arr[0]];
    for(let i = 1; i < arr.length; i++){
        if( arr[i] !== re[re.length-1]) {
            re.push(arr[i]);
        }
    }
    return re;
}
let testArry = ["hello",2,5,5,6,"hello"];
console.log(unique(testArry)); //[2, 5, 6, "hello"]

方法4：对象属性法。

function unique(arr){
    let arr1 = [];
    let obj = {};
    for(let i = 0;i <arr.length; i++){
        if(!obj[arr[i]]){
            obj[arr[i]] = arr[i];
            arr1.push(arr[i]);
        }
    }
    return arr1;
}
let testArry = ["hello",2,5,5,6,"hello"];
console.log(unique(testArry)); //(4) ["hello", 2, 5, 6]

③ 迭代方法

ECMAScript5为数组定义了5个迭代方法。

forEach 遍历数组一次 ，可以使用三个参数：数组对象、元素索引以及数组本身 ；

let testArry = ["hello",2,5,6];
let arr = [];
testArry.forEach(
    function (item, index) {
        if(item > 4){
            arr.push(item);
        }
});
console.log(arr);    //[5, 6]

every() 返回一个布尔值(true或false)，判断数组所有项是否符合指定函数的条件，符合为true，反之为false（在第一个不符合处就会中断并返回）；

let testArry = [10,8,5,6];
let isBiggerThan7 = testArry.every(
    function(ele, index, arr){
        return (ele >= 7);
    }
); //false
let isSmallerrThan10 = testArry.every(
    function(ele,index,arr){
        return (ele <= 10);
    }
); //true

some() 返回一个布尔值(true或false)，判断每个数组项是否符合指定函数的条件，只要有任何一项返回为true，就会返回true;

let testArry = [10,8,5,6];
let isBiggerThan7 = testArry.some(
    function(ele,index,arr){
        return (ele >= 7);
    }
); //true

filter() 每个数组项调用指定的函数，条件为true的将返到一个新数组中，相当于是筛选数组里面的内容;

let testArry=[10,8,5,6];
let BiggerThan7 = testArry.filter(
    function(ele,index,arr){
        if(ele >= 7){
        return true;
        }
    }
);
console.log(BiggerThan7); //[10, 8]
console.log(testArry);    //[10, 8, 5, 6]

map() 每个数组项调用指定的函数，返回每次函数调用的结果组成一个新数组。用法基本和forEach一样，但是有个区别，forEach没有返回值，map有返回值；

let testArry = [10, 8, 5, 6];
let newArry1 = testArry.map(
       function(ele,index,arr){
        if(ele >= 7){
            return ele;
        }else{
            return false;
        }
    }
);
console.log(newArry1); //[10, 8, false, false]

④ 归并方法

ECMAScript5 有2个归并数组的方法：reduce() 和 reduceRight() 。

reduce():从第一项开始逐个遍历到最后。它接收两个参数 array.reduce(callback, initialValue)， callback 函数接受4个参数：之前值(previous)、当前值(current)、索引值(index)以及数组本身(array)。 initialValue可选，表示初始值。若指定，则当作最初使用的previous值；如果缺省，则使用数组的第一个元素作为previous初始值，同时current往后排一位。

let testArry = [10,8,5,6];
let result = testArry.reduce(
    function(previous, current, index, array){
    return previous + current;
});
console.log(result); //29，其实做的就是累加操作，也可做累乘操作

reduceRight(): 从数组的最后一项开始，遍历到数组的第一项。用法同reduce基本一样，只是开始的位置从右边第一位开始，区别仅此而已。

let testArry = [10,8,5,6];
let initialValue = 10;
let result = testArry.reduceRight(
    function(previous, current, index, array){
        return previous + current;
});
console.log(result); //29，还是累加操作

let result1 = testArry.reduceRight(
    function(previous, current, index, array){
        return previous + current;
},initialValue);
console.log(result1); //39，加上initialValue的值

es6新增加的数组方法

① Array.from()

Array.from方法用于将两类对象转为真正的数组： 类似数组的对象 (array like object)和可遍历(iterable)的对象 (包括es6新增的数据结构Set和Map)。

需要注意以下三点：

-- 任何有length属性的对象，都可以通过Array.from方法转为数组。

-- 传参为类数组对象就是类似数组结构的对象，比如key值为数字

-- Array.from是通过key作为下标并且参照length属性大小来填充元素的。当没有合适的元素插入时就会插入undefined补位。

let a = Array.from('hello');
console.log(a);    // ['h', 'e', 'l', 'l', 'o']

// 没有传length，结果返回了一个空数组，验证了第一个注意点
let obj = {"name":"yh","age":"18","sex":"男"}
console.log(Array.from(obj));     //[]

// 有传length,但不是类数组,返回三个undefined, 验证了第二个，第三个注意点
let obj2 = {"name":"yh","age":"18","sex":"男",length: 3};
console.log(Array.from(obj2)); //[undefined, undefined, undefined]

// 有传length,并且对象是类数组
let obj3 = {"0":"yh","1":"18","2":"男",length: 3}
console.log(Array.from(obj3)); //["yh", "18", "男"]

// key值不从0起,验证了注意点3
let obj4 = { "1":"yh","2":"18","3":"男",length: 3};
console.log(Array.from(obj4)); //[undefined, "yh", "18"]

② Array.of(); Array.of方法用于将一组值，转换为数组。

let a = Array.of(3, 9, 10);
let b = Array.of(3);
console.log(a); //[3, 9, 10]
console.log(b); //[3]
console.log(b.length); //1

这个方法其实和普通的创建数组的方法没有太大区别，需要特别注意的就是当参数只有一个时：

let a = Array(3,9,10);
let b = Array(3);
console.log(a);         //[3, 9, 10]
console.log(b);         //(3) [empty × 3]
console.log(b.length);  //3

③ find() 和 findIndex()

数组实例的 find方法，用于找出第一个符合条件的数组成员，它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

数组实例的 findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。类似于indexOf() 。

let array = [3, 9, 10, 15, 6, 20];
let fn = array.find(
    function(value,index,arr){
        return value > 10;
    }
);
console.log(fn); //15 当找到第一个值的时候，就会停止继续查找

let fn2 = array.find(
    function(value,index,arr){
        return value > 30;
    }
);
console.log(fn2); //undefined

let fn3 = array.findIndex(
    function(value,index,arr){
        return value>10;
    }
);
console.log(fn3); //3，返回的时满足条件的第一个元素的下标

let fn4 = array.findIndex(
    function(value,index,arr){
        return value>30;
    }
);
console.log(fn4); //-1

④ fill()

fill() 方法使用给定值，填充一个数组，fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置，该方法可应用于前面提到的数组元素的替换。

let array = ['a','b','c'];
array.fill(7); //所有元素替换成7
console.log(array); //[7, 7, 7]

let array2 = ['a','b','c','d','e'];
array2.fill(7,1,3); //下标为 1和2的元素替换成7
console.log(array2); //["a", 7, 7, "d", "e"]