资讯专栏INFORMATION COLUMN

数组的使用总结— (js基础复习第2期)

zhigoo / 2549人阅读

摘要:前一个值,当前值,索引,数组对象产生新数组的迭代器方法类似,对数组的每个元素使用某个函数,并返回新数组和相似,传入一个返回值为布尔类型的函数。

1. 前言

数组真的是每天用了,但是有很多方法都是记不住,总是要百度查,很烦,所以才写了个数组使用总结,有什么不对的希望大家指出来。

2. 思路

先看看这些问题都记得很清楚么?

创建数组,怎么创建数组的

数组的构造方法Array有哪些方法?ES5 , ES6

ES6把类似数组对象转化成数组方法,ES5怎么把类似数组的对象转化成数组,原理

字符串和数组互相转换

数组的增删查改
增:从头部增,从尾部增, 从中间位置增加
删:从头部删,从尾部删,从中间位置删
查: indexOf(), indexOf 的不足,ES6 怎么查找指定的元素
改:哪些操作是对本数组的修改,哪些是创建新数组?

数组排序,配合sort方法

数组的迭代器方法
不产生新数组的迭代器方法
产生新数组的迭代器方法

$.each() 和 forEach 参数区别,如何跳出循环?

3. 整理 3.1 创建数组
var a = new Array(1,2,3);  //[1,2,3]
var b = new Array(4); //[,,,] 四个空值,不是undefined
var c = [5,6,7]; //[5,6,7]
3.2 Array 的构造函数有哪些方法?

ES5:isArray, 判断变量是否是数组

var a = [1,2,3];
Array.isArray(a); //true

ES6: Array.from ,Array.of

Array.from 将类似数组的对象(array-like object)和可遍历(iterable)的对象, 转为真正的数组
什么是类似数组的对象?类数组对象

总结:

表象:这种对象很像数组,对对象的读写和遍历操作和数组类似,但却不是数组

条件:只包含使用从零开始,且自然递增的整数做键名,并且定义了length表示元素个数的对象,我们就认为他是类数组对象。

常见的类数组对象:DOM 通过 document.querySelectorAll 获取的对象、函数的参数arguments

//定义数组和类数组对象
var arr = [1,2,3];
var obj = {0: 1, 1: 2, 2: 3, length: 3};
//元素读写操作
console.log(arr[0], obj[0])//1, 1
console.log(arr["length"], obj["length"])//1, 1
arr[0] = 9;
obj[0] = 9;
 
//遍历
for(var i = 0, len = arr.length; i < len; i++) {
    arr[i]....
}
for(var i = 0, len = obj.length; i < len; i++) {
    obj[i]....
}

什么是可遍历对象?

JavaScript 原有的表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Map和Set。
任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所有成员)

Array.from 使用:

let arrayLike = {
    "0": "a",
    "1": "b",
    "2": "c",
    length: 3
};

// ES5的写法
var arr1 = [].slice.call(arrayLike); // ["a", "b", "c"]

// ES6的写法
let arr2 = Array.from(arrayLike); // ["a", "b", "c"]

let namesSet = new Set(["a", "b"]);
Array.from(namesSet) //将可遍历对象转成数组 

Array.of :方法用于将一组值,转换为数组

Array.of(3, 11, 8) // [3,11,8]  
Array.of(3) // [3]  
Array.of(3).length // 1
3.3 ES6、ES5怎么把类似数组的对象转化成数组,原理

[].slice.call(arrayLike); //为什么能转化为数组
slice原理

3.4 字符串数组互相转化
    var s = "a,b,c,d";
    var arr1 = s.split(",");
    arr1; // ["a", "b", "c", "d"]
    var s2 = arr1.join(" ");
    s2;  //"a b c d"
    var s3 = arr1.toString(); 
    s3;  // "a,b,c,d"
    
3.5 数组的增删查改

从头部增,从尾部增, 从中间位置增加

头:
var arr = [4,5,6];
arr.unshift(3);  //5 注意,返回的是数组长度
arr;  // [3,4,5,6]
arr.unshit(1,2);   // unshit 不仅可以增加一个,还可以增加多个
arr; //[1,2,3,4,5,6]

尾:
arr.push(7); //7, 返回数组长度
arr; // [1,2,3,4,5,6,7] 
arr.push(8,9);  //9, push也可以添加多个
arr; // [1,2,3,4,5,6,7,8,9]  

中间
splice(起始索引,需要删除的元素个数,想要添加进数组的元素)

var arr2 =  [1,2,3,7,8,9];
arr2.splice(3,0,4,5,6);
arr2; //[1, 2, 3, 4, 5, 6, 7, 8, 9]

从头部删,从尾部删,从中间位置删

var arr = ["a","b","c","d","e"]
arr.shift();  // "a", 被删除的元素
arr; //["b", "c","d","e"]
arr.pop(); //"e", 返回被删除的元素
arr; // ["b","c","d"]
arr.splice(1,1);  // ["c"]  返回,被删除元素组成的数组!!!
arr; // ["b","d"]

indexOf(), indexOf 的不足,ES6 怎么查找指定的元素

indexOf : 如果目标数组包含该参数,就返回第一个与参数相同元素的的索引,如果不包含,返回 -1

var arr = ["a", "b", "c"];
arr.indexOf("b"); //1

indexOf 不足:
一是,不够语义化,它的含义是找到参数值的第一个出现位置,所以要去比较是否不等于-1,表达起来不够直观。

二是,它内部使用严格相等运算符(===)进行判断,这会导致对NaN的误判

   ES6:  
   includes: 返回一个布尔值,表示某个数组是否包含给定的值
   ```
   [1, 2, 3].includes(2)     // true
   [1, 2, 3].includes(4)     // false
   [1, 2, NaN].includes(NaN) // true
   ```
  
   find: 用于找出第一个符合条件的数组成员,参数是一个回调函数
   和filter 不同,返回所有符合添加的数组成员
   ```
   [1, 4, -5, -2].find((n) => n < 0)  // -5
   [1, 4, -5, -2].filter((n) => n < 0) //[-5, -2]
   ```
   
   findIndex: 返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
   ```
   [1, 5, 10, 15].findIndex(function(value, index, arr) {
     return value > 9;
   }) // 2
   ```
   

哪些操作是对本数组的修改,哪些是创建新数组?

splice: 修改会影响原数组
concat: 不会影响原数组

    var a = [1,2,3,4];
    var b = [5,6];
    a.concat(b); 
    a; //[1,2,3,4];

3.6 数组排序,配合sort方法
//顺序修改
var arr = [1,11,2,22,3,33];
arr.reverse(); //[33, 3, 22, 2, 11, 1]

//大小排序:
arr.sort(); //[1, 11, 2, 22, 3, 33]  
//sort 方法默认按照字典顺序对元素进行排序

arr.sort(function(a, b) {
    return  a - b;
});
arr;  //[1, 2, 3, 11, 22, 33]
3.7 数组的迭代器方法
不产生新数组的迭代器方法  
1. forEach
2. every 
3. some
4. reduce

forEach,接受一个函数作为参数,对数组的每一个元素使用该函数

    var arr = [1, 2, 3];
    arr.forEach(function(value, index){
        console.log(value * value);
    })

every, 接受一个返回值为布尔类型的函数,对数组中每一个元素使用该函数,如果所有元素,该函数均返回true,则函数返回true

    var arr = [1, 2, 3];
    var arrIsEven = arr.every(function(value){
        return value % 2 == 0;
    });
    arrIsEven;  //false
    

some, 接受一个返回值为布尔类型的函数,对数组中每一个元素使用该函数,只要有一个元素使得该函数返回true,则函数返回true

    var arr = [1, 2, 3];
    var arrIsEven = arr.some(function(value){
        return value % 2 == 0;
    });
    arrIsEven; //true
    

reduce, 接受一个函数,返回一个值。迭代数组的所有项,然后构建一个最终返回的值。reduce() 方法从数组的第一项开始,逐个遍历到最后,而reduceRight() 则从数组的最后一项开始,从前遍历到第一项。

//前一个值,当前值,索引,数组对象
reduce(prev, cur, index, arr)

var  nums = [1, 2, 3, 4, 5];
var sum = nums.reduce(function(prev, cur, index, arr) {
    console.log("prev", prev); //1 3 6 10
    console.log("cur", cur); // 2 3 4 5 
    return prev + cur;
})
sum; //15
产生新数组的迭代器方法
1. map
2. filter

map: 类似forEach,对数组的每个元素使用某个函数,并返回新数组

 var arr = [1, 2, 3];
 var arr2 = arr.map(function(value, index){
    return (value * value);
 })
 arr2; //[1, 4, 9]
 arr;  //[1, 2, 3]

filter: 和every相似,传入一个返回值为布尔类型的函数。和every不同的是,对数组中的所有元素应用改函数,将返回返回为true的元素,添加新数组,返回新数组

 var arr = [1, 2, 3];
 var arr2 = arr.filter(function(value){
    return value % 2 == 0;
 })
 arr2; //[2]
 arr;  //[1, 2, 3]
3.8 $.each() 和 forEach 参数区别,如何跳出循环?

$.each 是 jQuery的方法,forEach 是js 数组原生方法 ,
value 和 index 顺序是反的,很气!每次都要百度!

$.each 用return false
forEach 无法在所有元素都传递给调用的函数之前终止遍历,没有办法中止 forEach 循环。如果要中止,可使用 Array.every 或Array.some,或 try catch

  $.each([1,2,3,4], function(index, value ){
      if( value == 3) {
          return false;  
      }
      console.log( value ); //1 2 3
  })
 
  
    var flag = true;
    [1,2,3,4].forEach(function(value, index) {
        if( value != 3 && flag) {
            console.log(value);
        }
        else {
            flag = false;
        }
    })
    
    try {
        [1,2,3].forEach(function(i) {
            if(i === 2) throw new Error();
            console.log(i);
        });
    } catch(e) {
    }
    
    
    [1,2,3].some(function(i) {
        if(i == 2) return true;
        console.log(i);
    });
4. 参考

类数组对象
slice原理
forEach如何跳出循环

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/99258.html

相关文章

  • 判断是否是数组几种方法— (js基础复习1)

    摘要:如果网页中包含多个框架,那实际上就存在两个以上不同的全局执行环境,从而存在两个以上不同版本的构造函数。如果你从一个框架向另一个框架传入一个数组,那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的构造函数。 1. 首先,typeof肯定是不行的 对于一些基本类型,typeof是可以判断出数据类型,但是判断一些引用类型时候,不能具体到具体哪一种类型 再来复习一下typeof的...

    supernavy 评论0 收藏0
  • 【重温基础21.高阶函数

    摘要:欢迎您的支持系列目录复习资料资料整理个人整理重温基础篇重温基础对象介绍重温基础对象介绍重温基础介绍重温基础相等性判断重温基础闭包重温基础事件本章节复习的是中的高阶函数,可以提高我们的开发效率。 本文是 重温基础 系列文章的第二十一篇。 今日感受:想家。 本人自己整理的【Cute-JavaScript】资料,包含:【ES6/ES7/ES8/ES9】,【JavaScript基础...

    wua_wua2012 评论0 收藏0
  • 即将立秋《课多周刊》(2)

    摘要:即将立秋的课多周刊第期我们的微信公众号,更多精彩内容皆在微信公众号,欢迎关注。若有帮助,请把课多周刊推荐给你的朋友,你的支持是我们最大的动力。课多周刊机器人运营中心是如何玩转起来的分享课多周刊是如何运营并坚持下来的。 即将立秋的《课多周刊》(第2期) 我们的微信公众号:fed-talk,更多精彩内容皆在微信公众号,欢迎关注。 若有帮助,请把 课多周刊 推荐给你的朋友,你的支持是我们最大...

    ruicbAndroid 评论0 收藏0
  • 即将立秋《课多周刊》(2)

    摘要:即将立秋的课多周刊第期我们的微信公众号,更多精彩内容皆在微信公众号,欢迎关注。若有帮助,请把课多周刊推荐给你的朋友,你的支持是我们最大的动力。课多周刊机器人运营中心是如何玩转起来的分享课多周刊是如何运营并坚持下来的。 即将立秋的《课多周刊》(第2期) 我们的微信公众号:fed-talk,更多精彩内容皆在微信公众号,欢迎关注。 若有帮助,请把 课多周刊 推荐给你的朋友,你的支持是我们最大...

    MRZYD 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<