2.02.24数组API(截取2.02.23的内容)

2.02.24 数组API

1.数组API

1.概念

  • 对数组的进行操作的一些方法

2.常用API

  • Array.isArray(obj) 用于确定传递的值是否是一个 Array,返回布尔值。类似于isNaN()
Array.isArray([1, 2, 3]); // true
Array.isArray({foo: 123}); // false
Array.isArray("foobar"); // false
Array.isArray(undefined); // false
1.数组的插入与删除元素(会修改原数组)
  1. push push(参数列表)
  • 往数组尾部插入一个或多个元素,并返回该数组的新长度。会修改原数组
  • 语法:
var animals = ['pigs', 'goats', 'sheep'];
var count = animals.push('cows');
console.log(count); // 4
console.log(animals); // ["pigs", "goats", "sheep", "cows"]
  1. pop
  • 删除数组最后一个元素,返回删除的元素,此方法更改数组的长度。会修改原数组
  • 语法:
var plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];
console.log(plants.pop()); // "tomato"
console.log(plants); //  ["broccoli", "cauliflower", "cabbage", "kale"]
plants.pop();
console.log(plants); // ["broccoli", "cauliflower", "cabbage"]
  1. unshift unshift(参数列表)
  • 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组)。会修改原数组
  • 语法:
var array1 = [1, 2, 3];
console.log(array1.unshift(4, 5));// 5
console.log(array1); // [4, 5, 1, 2, 3]
  1. shift
  • 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。会修改原数组
  • 语法:
var array1 = [1, 2, 3];
const firstElement = array1.shift();
console.log(array1);// [2, 3]
console.log(firstElement);// 1
2.数组的裁切
  1. slice slice(start [, end] );
  • 返回数组的片段或子数组,从start开始到end(不包括end所对应的元素) 如果省略end参数,则截取到数组的最后一项。不会影响原数组
  • 语法:
var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2)); // ["camel", "duck", "elephant"]
console.log("animals => "+ animals); //  animals => ant,bison,camel,duck,elephant
console.log(animals.slice(2, 4)); // ["camel", "duck"]
console.log(animals.slice(1, 5)); //  ["bison", "camel", "duck", "elephant"]
console.log("" +animals.slice(-4, -2));//["bison", "camel"] 负数的话会倒着切,从最后一个元素为-1开始数起
  1. splice splice(start [,length [, 参数列表]]);
  • 数组裁切:从数组的start下标裁切,裁切length 个 元素。该方法会影响原数组,返回值为切下来的数组
  • 语法:
1.一个参数 只有一个参数,则作为开始下标,切到数组结束
var arr=["0李白","1赵云","2露娜","3典韦","4鲁班","5安琪拉","6牛魔王"];
var i =arr.splice(2);
console.log("i=> "+i);  //i=> 2露娜,3典韦,4鲁班,5安琪拉,6牛魔王
console.log("arr=> "+arr); //arr=> 0李白,1赵云

2.两个参数 由两个参数,第一个参数作为下标,第二个参数作为裁切的元素个数
var arr=["0李白","1赵云","2露娜","3典韦","4鲁班","5安琪拉","6牛魔王"];
var i =arr.splice(2,3);
console.log("i=> "+i);  //i=> 2露娜,3典韦,4鲁班
console.log("arr=> "+arr); //arr=> 0李白,1赵云,5安琪拉,6牛魔王

3.多个参数 如果有多个参数,用其他参数替换被切割的元素
var arr=["0李白","1赵云","2露娜","3典韦","4鲁班","5安琪拉","6牛魔王"];
var i =arr.splice(2,3,"妲己","小乔");
console.log("i=> "+i);  //i=> 2露娜,3典韦,4鲁班
console.log("arr=> "+arr); //arr=> 0李白,1赵云,妲己,小乔,5安琪拉,6牛魔王

var arr=["0李白","1赵云","2露娜","3典韦","4鲁班","5安琪拉","6牛魔王"];
var i =arr.splice(2,0,"妲己","小乔");
console.log("i=> "+i);  //i=> 
console.log("arr=> "+arr); //arr=> 0李白,1赵云,妲己,小乔,2露娜,3典韦,4鲁班,5安琪拉,6牛魔王

4.负数的情况
var arr=["0李白","1赵云","2露娜","3典韦","4鲁班","5安琪拉","6牛魔王"];
var i = arr.splice(-2,2);
console.log("i=> "+i);  //i=> 5安琪拉,6牛魔王
console.log("arr=> "+arr); //arr=> 0李白,1赵云,2露娜,3典韦,4鲁班

var arr=["0李白","1赵云","2露娜","3典韦","4鲁班","5安琪拉","6牛魔王"];
var i = arr.splice(-2,-2);
console.log("i=> "+i);  //i=> 
console.log("arr=> "+arr); //arr=> 0李白,1赵云,2露娜,3典韦,4鲁班,5安琪拉,6牛魔王
3.查找元素(不会影响数组)
  1. indexOf indexOf(要查找的元素[,指定下标]);
  • 从数组中查找指定元素,找得到返回下标,找不到返回-1 ,给了指定下标就从指定下标开始查找元素,该方法不会影响原数组。如果提供的索引值为负数,则将其作为距数组末尾的偏移量。注意:如果提供的索引为负数,则仍然从前向后搜索数组。 (与string的API不一样,stringAPI中,索引值为负数,等价于索引值=0)
  • 语法:
    var arr = ["貂蝉", "王昭君", "貂蝉", "大乔", "小乔", "西施"];
    console.log("arr =>", arr);
    // 1 indexOf(要查找的元素[, 指定下标])  从数组中查找指定元素, 找得到返回下标, 找不到返回-1
    // 从数组中, 查找"小乔", 找得到返回下标
    var i = arr.indexOf("小乔");
    console.log("i =>", i);     // i => 4
    // 从数组中, 查找"司马懿", 找不到返回-1
    var j = arr.indexOf("司马懿");
    console.log("j =>", j);     //j => -1
    console.log("arr =>"+ arr);  //arr =>貂蝉,王昭君,貂蝉,大乔,小乔,西施

    // 2 如果指定下标(可以为负数), 则从指定的下标开始 从前往后查找元素
    i = arr.indexOf("貂蝉", 3);  
    console.log("i =>", i);//  i => -1 

  1. lastIndexOf lastIndexOf(要查找的元素[,指定下标]);
  • 从后往前在数组中查找指定元素,找得到返回下标,找不到返回-1 ,给了指定下标就从指定下标开始从后往前在查找元素。该方法不会影响原数组。如果提供的索引值为负数,则将其作为距数组末尾的偏移量。注意:如果提供的索引为负数,则仍然从前向后搜索数组。 (与string的API不一样,stringAPI中,索引值为负数,等价于索引值=0)
  • 语法:
    var arr = ["貂蝉", "王昭君", "貂蝉", "大乔", "小乔", "西施"];
    console.log("arr =>", arr);
    // 1 lastIndexOf(要查找的元素[, 指定下标]); 从后往前在数组中查找指定元素, 找得到返回它在数组中的下标, 找不到返回-1
    // 从后往前, 在数组中, 查找"王昭君", 找得到返回它在数组中的下标
    var i = arr.lastIndexOf("王昭君");
    console.log("i =>", i);      // i => 1
    // 从后往前, 在数组中, 查找"司马懿", 找不到返回-1
    var j = arr.indexOf("司马懿");
    console.log("j =>", j);     //j => -1

    // 2 如果指定下标, 则从指定的下标开始, 从后往前查找指定元素
    i = arr.lastIndexOf("小乔", 3);
    console.log("i =>", i);     //i => -1

    // 3 从后找与从前找的区别
    i = arr.indexOf("貂蝉")
    j = arr.lastIndexOf("貂蝉")
    console.log("i =>", i);  // i => 0
    console.log("j =>", j);  // j => 2

4.其他
  1. sort([回调函数])
  • 方法用原地算法对数组的元素进行排序,并返回排序后的数组。 他会影响原数组
  • 他可以给一个回调函数作为参数,回调函数用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序。如果指明了回调函数,那么数组会按照调用该函数的返回值排序。
    • 回调函数:把函数作为参数传递,这样的函数就是回调函数
  • 语法:
var months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);// ["Dec", "Feb", "Jan", "March"]

var months = ['March', 'Jan', 'Feb', 'Dec'];
var i=months.sort();
console.log(i);// ["Dec", "Feb", "Jan", "March"]

var array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);//[1, 100000, 21, 30, 4]

var array2 = [1, 30, 4, 21, 100000];
array1.sort(function (a, b) {
  return a - b; 
  // a > b 返回值大于零 a放在后面
  // a < b 返回值小于零 a放在前面
  // 该函数保证数字小的排在前面 实现 数字数组升序排列
});
console.log(array2); // [1,4,21,30, 100000]


var array3 = [1, 30, 4, 21, 100000];
array1.sort(function (a, b) {
  return b - a; 
  // a > b 返回值小于零 a放在前面
  // a < b 返回值大于零 a放在后
  // 该函数保证数字大的排在前面从而实现数字数组降序序排列
});
console.log(array3); // [100000, 30, 21, 4, 1]

//复杂数据结构:
    var data = [
        {name:"学生1",score:90},
        {name:"学生2",score:60},
        {name:"学生3",score: 80},
        {name:"学生4",score:70},
        {name:"学生5",score:85}
    ];
    //比如:取出学生2的分数?
    // data[1].score ;// 60
    
    //思考一下:如何根据学生分数进行排序?
    data.sort( function(a,b){
        return a.score - b.score;
    })
    console. log(data);
    
    //可以通过下面的做法打乱数组顺序:
    var arr = [10, 30,40, 50, 60,70];
    arr.sort (function(){
        //根据随机小数和0.5相减的结果作为条件打乱原数组arr的顺序。
        //每一次输出的数组顺序都不一样
        return Math.random() - 0.5;
    })
    //控制台输出
    console.log("arr => "+ arr);

  1. join(参数)
  • join(连接符)数组连接成字符串 有返回值 不会影响原数组
  • 语法:
var arr = ["俄罗斯","乌克兰","三个方向","高达"];
console.log("arr => " + arr); //arr => 俄罗斯,乌克兰,三个方向,高达
// (1) join() 把数组的每一项连接成字符串,默认以逗号作为连接符
var i = arr.join();
console.log("i =>", i); //i => 俄罗斯,乌克兰,三个方向,高达
// (2) join("连接符") 用连接符把数组的每项连接成字符串
var j = arr. join("--");
console.log("j =>",j);  //j => 俄罗斯--乌克兰--三个方向--高达
console.log("arr => " + arr); //arr => 俄罗斯,乌克兰,三个方向,高达

  1. reverse()
  • 反转 有返回值,返回被反转过后的新数组 会影响原数组
  • 语法:
var arr= [1,2,1,3,8];
var i = arr.reverse();
console.log(arr); // [8, 3, 1, 2, 1]
console.log(i); // [8,3,1, 2,1]
  1. concat()
  • 连接一个或多个数组 有返回值,会返回连接后的新数组 不影响原数组
  • 语法:
    var arr1 = ["甲", "乙", "丙", "丁"];
    var arr2 = ["辰", "巳", "午", "未"];
    var arr3 = ["临", "兵", "斗", "者"];

    var i=arr1.concat(arr2);
    console.log("arr1 => " +arr1);  //arr1 => 甲,乙,丙,丁
    console.log("i => " +i); //i => 甲,乙,丙,丁,辰,巳,午,未

    i=arr1.concat(arr2,arr3,"不","知","到"); 
    console.log("i => " +i); //i => 甲,乙,丙,丁,辰,巳,午,未,临,兵,斗,者,不,知,到
5.数组的枚举
  1. forEach( fn(数组项, 下标,原数组) )循环数组
  • 没有返回值 不影响原数组 参数为一个函数(回调函数)
  • 语法:
   var arr = ["g","z","2","2", "0", "5"];
    console.log("arr =>",arr);
    var res = arr.forEach( function (v, i, arr) {
        // console.log("v =>",v); // 数组的每一项   控制台返回:v => g v => z v => 2 v => 2 v => 0 v => 5
        // console.log("i =>", i);//数组的下标    控制台返回:i => 0 i => 1 i => 2 i => 3 i => 4 i => 5
        console.log("arr =>", arr); //原数组  控制台打印6次 ['g', 'z', '2', '2', '0', '5']
    })
    console. log(res); //undefind
    console.log("arr =>",arr);//['g', 'z', '2', '2', '0', '5']
  1. filter( fn(数组项,下标,原数组) )过滤
  • 有返回值 不影响原数组 参数为一个函数(回调函数)
  • 过滤函数:在回调函数中做测试, 测试通过(返回 true)的被保留,不通过的不保留,返回保留下来的元素组成的新数组
  • 语法:
    var arr = [3, 60, 5, 19, 33, 42];
    console.log("原数组 =>", arr);
    var i = arr.filter( function(v, i, arr){
        // 过滤的逻辑,这里写一切你想要的逻辑
        if(v % 2 == 0){
            // 返回true的元素 表示通过测试, 会被保留下来
            return true;
        }
    } )
    console.log("arr =>", arr); // [3, 60, 5, 19, 33, 42]
    console.log("i =>", i); // [60, 42]
  1. map( fn(数组项,下标,原数组) )映射
  • 有返回值 不影响原数组 参数为一个函数(回调函数)
  • 映射函数: 用数组的每一项, 在回调函数中做处理, 返回处理过后的新数组
  • 语法:
    var arr = [3, 60, 5, 19, 33, 42];
    var i = arr.map( function(v,i,arr){
        // 映射的逻辑,这里写一切你想要的逻辑
        return v*2;
    })
    // 返回被处理后的新数组
    console.log(i);[6, 120, 10, 38, 66, 84]

2.理解回调函数

  • 回调函数:把函数作为参数传递,这样的函数就是回调函数
  • 要知道函数作为参数传过去,函数本身不会运行,要等接受该函数参数的方法去调用该函数,该函数才会生效
    // 自己封装一个forEach函数
    //封装myForEach(数组,回调函数)
    function myForEach(array, fn){
        for(var i=0; i<array.length; i++){
            fn(array[i], i, array);
        }
    }

    // 调用方法
    myForEach(arr, function(a,b,c){
        console.log(a);
        console.log(b);
        console.log(c);
    })
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值