资讯专栏INFORMATION COLUMN

JS数组

Carl / 2584人阅读

摘要:如果没有符合条件的成员,则返回返回查找到的该成员该方法与类似,对数组中的成员依次执行函数,直至找到第一个返回值为的成员,然后返回该成员的索引。

摘要

最近学习了JS数组的基础知识,在这里呢总结一下,包括js数组的属性与方法,js数组常常遇到的一些问题,小编通过查阅一些网上的知识,把关于数组的东西进行了罗列,希望各位大神多多指点!

数组属性

length
length属性表示数组的长度,即其中元素的个数。
JavaScript数组的length属性是可变的,当length属性被设置得更大时,整个数组的状态事实上不会发生变化,仅仅是length属性变大;当length属性被设置得比原来小时,则原先数组中索引大于或等于length的元素的值全部被丢失。

prototype
返回对象类型原型的引用。prototype 属性是 object 共有的。
一般用来给数组实例添加方法。

constructor
表示创建对象的函数。
说明:constructor 属性是所有具有 prototype 的对象的成员。constructor 属性保存了对构造特定对象实例的函数的引用。

基本操作

创建数组

// 数组实例的创建
var arr = [];//创建空数组
var arr = [1,"{1,2}","string"];//创建一个数组并赋值
var arr = new Array(); //创建一个空数组 []
var arr = new Array(5); //创建一个length为5的数组 [undefined, undefined, undefined, undefined, undefined]
var arr = new Array(1,2,3,4,5); //创建数组并赋值 [1,2,3,4,5]
var arr = Array.of(7);       // 创建数组并赋值 [7] 
var arr = Array.of(1, 2, 3); // 创建数组并赋值 [1, 2, 3]

检测数组

//判断一个对象是不是数组
var arr = [1,8,9];
/*
方法一  instanceof是Java、php的一个二元操作符(运算符),和==,>,<是同一类东西,它的作用是判断其左边对象是否为其右边类的实例,返回boolean类型的数据
 */
if(arr instanceof Array){}

/*
 方法二   prototype 属性使您有能力向对象添加属性和方法
*/
if(Object.prototype.toString.call(arr) == "[object Array]")}{}
//方法三 这种是最常用的方法
if(Array.isArray(arr)){}
/*
    方法四    constructor 属性返回对创建此对象的数组函数的引用,Construction代表类中的一个构造方法,这个方法封装了类的定义
*/
if(arr.constructor == Array){}
数组方法

① isArray()

Array.isArray(obj) 检测对象是否 Array(数组) ,是则返回true,否则为false。

② from()

Array.from(arrayLike, mapFn, thisArg)
该方法从一个类似数组或可迭代对象创建一个新的数组实例。参数 arrayLike 是想要转换成真实数组的类数组对象或可遍历对象。mapFn是可选参数,如果指定了该参数,则最后生成的数组会经过该函数的加工处理后再返回。thisArg是可选参数,为执行 mapFn 函数时 this的值。

所谓类似数组的对象,本质特征只有一点,即必须有length属性。因此,任何有length属性的对象,都可以通过Array.from方法转为数组。见下面的小例子:

var  arrayLike = {
    0: "a",
    1: "b",
    2: "c",
    length: 3
 }
var  arrayLike2 = {length: 3}
var  str = "abcd"

var  newArray = Array.from(arrayLike) //["a", "b", "c"]
var  newArray2 = Array.from(arrayLike2) // [undefined, undefined, undefined]
var  newArray3 = Array.from(str) // ["a", "b", "c", "d"]
console.log(newArray);
console.log(newArray2);
console.log(newArray3);

③ of();

Array.of(item,.....) 该方法用于创建数组实例。该方法用于替代 Array() 或 new Array()。Array.of() 和 Array 构造函数之间的区别在于处理整数参数:Array.of(7) 创建一个具有单个元素 7 的数组,而 Array(7) 创建一个包含 7 个 undefined 元素的数组。
eg:
var a1 = Array(7);
var a2 = Array(1,2,12);
var a3 = Array.of(7);
var a4 =Array.of(1,2,12);
console.log(a1);
console.log(a2);
console.log(a3);
console.log(a4);

数组实例方法

数组的转换
① 数组转换成字符串 Array.join(separator);.

把数组转换成字符串,先把数组中的每个元素转换成字符串,然后再用 separator 分隔符把它们链接在一起,separator 分隔符默认是逗号 “,”,要想做到无间隔链接,可以使用空字符串作为 separator:见下面的例子:

var arr = [1,2,3,4,5]
//默认符号 ","
var a1 = arr.join();//1,2,3,4,5
//自定义符号“ | ”
var a2=arr.join("|") //"1|2|3|4|5"
// 没有符号,用空字符串
var a3=arr.join("") //12345
console.log(a1);
console.log(a2);
console.log(a3);

② 字符串转换成数组 a.split();

var arr = [1,2,3,4,5]
//arr 转换成字符串并赋值给 a
var a = arr.join();
// 再把 a 转换成 数组,并用“ , ”隔开
var b = a.split(",");
console.log(b);

栈方法 (push pop)

Array.push(item......)将一个或多个新元素添加到数组结尾,并返回数组新长度
var arr = ["Orange","Apple"];
var a = arr.push("banana","Mango");
console.log(a);//返回数值长度为  4
Array.pop() 移除最后一个元素并返回该元素值。
var arr = ["Orange","Apple"];
var a = arr.pop();
console.log(a);// 移除最后一个元素 返回最后一个值Apple

队列方法 (unshift shift)

Array.unshift(item...);将一个或多个新元素添加到数组开始,数组中的元素自动后移,返回数组新长度。
var arr = ["Orange","Apple"];
var a = arr.unshift("banana");
console.log(a);//   返回新数组的长度为  3
Array.shifit();移除最前一个元素并返回该元素值,数组中元素自动前移.如果这个数组是空的,它会返回undefined。shift 通常比 pop 慢的多。
var arr = ["Orange","Apple","banana"];
var arr1 = [];
var a1 = arr1.shift();
var a2 = arr.shift();
console.log(a1);//  空数组返回undefined
console.log(a2);//   移除第一个元素,并返回该元素  Orange

重排序方法(reverse, sort)

Array.reverse() 颠倒数组的顺序
var arr = ["Orange","Apple","banana"];
var a = arr.reverse();
console.log(a);

Array.sort() 给数组排序, 默认升序。 sort 默认会将数组内容视为字符串来排序,所以对数字排序时默认的排序规则会错的离谱,看下面的例子是怎么错的:

var arr = [2,4,10,6,8,20];
var a = arr.sort();
console.log(a);

解决这种按照字符串来排序的方法就是给sort带入个比较函数来替代原来默认的比较方法,比较方法接受两个参数,如果两个参数相等则返回0,如果第一个参数应该排在前面则返回一个负数,如果第二个参数应该排在前面则返回一个正数:

var arr = [2,4,10,6,8,20];
var a = arr.sort(function(a,b){
    return a-b;
});
console.log(a);

操作方法 ( concat, slice, splice, copyWithin, fill )

Array.concat(arr);该方法产生一份 arr的潜复制,并将多个数组(也可以是字符串,或者是数组和字符串的混合)附加在其后连接为一个数组,返回连接好的新的数组。
var a = [1,2,3];
var b = ["string"];
var arr = a.concat(b);
console.log(arr);

Array.slice(start,end)   截取数组 ,如果没有  end  ,则输出  start
之后的所有元素,这里遵循数学上的思想(左闭右开),意思就是不包括 end --------[ )
var a = [1,2,3];
var b = ["string"];
var arr = a.concat(b);
var arr1 = arr.slice(1, 3);
console.log(arr1);

Array.splice(start,deleteCount,item...),该方法从 数组 中移除一个或多个元素,并将新的 item插入至移除元素的开始位置, 参数 start 是移除元素的开始位置,deleteCount 是要移除的元素的个数,item是要被插入的元素。它返回一个包含被移除元素的数组。

① 添加新的元素

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    //在第三个元素的位置插入新的元素
    fruits.splice(2,0,"Lemon","Kiwi");
    console.log(fruits);

② 删除某个元素并添加新的元素

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
   //先移除从第二个位置开始后面的两个元素,并把新的元素添加到第二个位置
    fruits.splice(1,2,"Lemon")
    console.log(fruits);

Array.copyWithin(target,start,end)  
target必须有的,复制到指定目标的索引位置(开始替换数据的位置),start可选,元素复制的起始位置,end 停止复制的索引位置,默认为 Array.length 返回值是数组
    var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
    //复制数组的前面两个元素到第三和第四个位置上,这里也遵循左闭右开的思想,也就是 strat=0,end=2 这样理解  [0,2)
        fruits.copyWithin(2, 0, 2);
        console.log(fruits);

Array.fill(value,start,end) 
fill()方法用于将一个固定值替换数组的元素,value是必选的,start可选,开始填充的位置,end可选,表示停止填充位置(默认为Array.length),返回的是数组
 var  a = [1,2,3,4,6];
   console.log(a.fill(5,2,4) );

位置方法 (indexOf, lastIndexOf, includes)

Array.indexOf(item,start)
item是必须要查找的元素,start 可选,规定在字符串中开始检索的位置,合法取值为 0 到 array.length-1 ,如果没有这个值,则从首字符开始查找,返回值为Number
var arr = ["Banana", "Orange", "Apple", "Mango", "Kiwi"];
var a =  arr.indexOf("Orange");
 console.log(a);//返回值为  1
Array.lastIndexOf(item,start)
和indexOf 类似 唯一区别就是他是倒着数,strat的默认值为 array.length-1 ,注意该方
法在比较查找项与数组中每一项时,会使用全等操作符(===),也就是要求查找的项必须严格相等
        var arr = ["Banana", "Orange", "Apple", "Mango", "Kiwi"];
        var a =  arr.lastIndexOf("Kiwi");
         console.log(a);//返回值为  4
Array.includes(searchElement, fromIndex)
includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false.
fromIndex可选。从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length +fromIndex 的索引开始搜索。默认为 0。
 var  arr =  ["Banana", "Orange", "Apple", "Mango", "Kiwi"];
 var  a = arr.includes("Apple",-2);//如果为fromIndex为负值,则数组的总长度  arr.length + fromIndex   就为当前我们要从这个位置开始检索的位置
console.log(a);//   返回  false

迭代方法 (every, some, filter, forEach, map, find, findIndex, entries, keys, values)

Array.every(function(currentValue,index,arr), thisValue)
这个方法用于检索数组中所有的元素是否满足某个条件,若满足,则返回true ,剩余元素不用继续检测,否则为false
           var  arr = [18,16,17,20];
            var a = arr.every(function(item){
                return  item > 18;
            });
            console.log(a);//返回false
Array.some(function(currentValue,index,arr), thisValue)
这个方法用于检索数组中的元素是否满足某个条件,若有一个满足,则返回true ,剩余元素不用继续检测,都不满足返回false
           var  arr = [18,16,17,20];
            var a = arr.some(function(item){
                return  item > 18;
            });
            console.log(a);//返回 true
Array.filter(function(currentValue,index,arr), thisValue)
对数组中的每一项运行给定函数,返回该函数会返回 true 的项组成的数组
           var  arr = [18,16,17,20];
            var a = arr.filter(function(item){
                return  item > 17;
            });
            console.log(a);//返回 一个检索过后的新数组

Array.forEach(function(currentValue, index, arr), thisValue)

对数组中的每一项运行给定函数,这个方法的返回值为undefined;

array.map(function(currentValue,index,arr), thisValue)
对数组中的每一项运行给定函数,返回每次函数调用组成的数组
           var  arr = [4,16,25,36];
            var a = arr.map(function(item){
                return  Math.sqrt(item);
            });
            console.log(a);//返回数组元素的平方根

Array.find(function(currentValue, index, arr),thisValue)
该方法对数组所有成员依次执行函数,直到找出第一个返回值为 true 的成员,然后返回该成员。如果没有符合条件的成员,则返回 undefined
           var  arr = [4,16,25,36];
            var a = arr.find(function(item){
                return  item == 25;
            });
            console.log(a);//返回查找到的该成员  25 
Array.findIndex(function(currentValue, index, arr), thisValue)
该方法与 Arr.find() 类似,对数组中的成员依次执行 函数,直至找到第一个返回值为 true 的成员,然后返回该成员的索引。如果没有符合条件的成员,则返回 -1
           var  arr = [4,16,25,36];
            var a = arr.findIndex(function(item){
                return  item == 25;
            });
            console.log(a);//返回查找到的该成员的索引值  2
            
Array.entries()

Array.keys()

Array.values()

这三个方法都返回一个新的Array Iterator对象,可以用for...of循环进行遍历,区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历

归并方法(reduce, reduceRight)

Array.reduce(function(total, currentValue, currentIndex, arr),
initialValue)
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值
            var  arr = [12,20,10];
            var a = arr.reduce(function(total,item){
                return  total+item;
            });
            console.log(a);//返回和的结果为  42
reduceRight() 方法的功能和 reduce() 功能是一样的,不同的是 reduceRight()
从数组的末尾向前将数组中的数组项做累加
            var  arr = [12,20,10];
            var a = arr.reduceRight(function(total,item){
                return  total+item;
            });
            console.log(a);//返回和的结果为  42

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

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

相关文章

  • PHP: array数组常用API

    摘要:语法数组删除数组的最后一项语法数组在数组的最末添加一项语法数组删除数组的首项语法数组在数组的首部添加一项案例分析 1:数组的指针操作: 语法:current(数组) 当前指针指向的单元值(默认是第零个)语法 next(数组) 当前指针往下移动一帧语法 prev(数组) 当前指针往前移动一个指针语法 end(array) 将当前指针移动到最后一项语法 ...

    Cheriselalala 评论0 收藏0
  • 16道初级脚本算法,你要挑战一下吗?

    摘要:设置首字母大写算法挑战返回一个字符串确保字符串的每个单词首字母都大写,其余部分小写。确认末尾字符算法检查一个字符串是否以指定的字符串结尾。删除数组中特定值算法挑战删除数组中的所有的假值。 在w3cschool上看到了这些初级算法题目,自己先尝试做了一下,不会的也会查看一下别人的借鉴一下思路,更多的帮助自己熟悉字符串和数组方法的应用.如果您有更好的解法,可以指出来还有中级算法题目和后面的...

    kumfo 评论0 收藏0
  • 细说JS数组

    摘要:数组元素的读写使用访问数组元素时,将索引转换为字符串,然后将其作为属性名一样使用。第一个参数应该在前只展开一层数组元素不变,返回注意,只拼接第一层结构。 此乃犀牛书(第七章 数组)读书笔记,又结合了ES6中数组的扩展部分做的知识梳理。精华部分就是手工绘制的两张数组总结图了。灵活运用数组的各种方法是基本功,是基本功,是基本功,重要的事情说三遍。好了,正文从下面开始~ 数组的基本概念 什么...

    starsfun 评论0 收藏0
  • JavaScript30秒, 从入门到放弃之Array(六)

    摘要:从数组索引为开始删除元素,直到对数组元素运用指定方法为为止。对两个数组的元素分别调用指定方法后,返回以运行结果为判定基准的并集,并集是原始数组元素的并集而不是运行结果的并集。 原文地址:JavaScript30秒, 从入门到放弃之Array(六)博客地址:JavaScript30秒, 从入门到放弃之Array(六) 水平有限,欢迎批评指正 tail Returns all elem...

    Freeman 评论0 收藏0
  • 《JavaScript Dom编程艺术》读书笔记(一)

    摘要:下面这条语句将导致语法错误变量名允许包含字母数字美元符号和下划线但第一个字符不允许是数字。可以把一些布尔值存入一个数组,还可以把一组数值存入一个数组甚至可以把这种数据类型混在一起存入一个数组数组元素还可以是变量这将把数组的第一个元素赋值为。 执行Javascript的方式 第一种方式是将JS代码放到 < head > 标签中的 < script > 标签之间: ...

    lewinlee 评论0 收藏0
  • 《JavaScript Dom编程艺术》读书笔记(一)

    摘要:下面这条语句将导致语法错误变量名允许包含字母数字美元符号和下划线但第一个字符不允许是数字。可以把一些布尔值存入一个数组,还可以把一组数值存入一个数组甚至可以把这种数据类型混在一起存入一个数组数组元素还可以是变量这将把数组的第一个元素赋值为。 执行Javascript的方式 第一种方式是将JS代码放到 < head > 标签中的 < script > 标签之间: ...

    yeooo 评论0 收藏0

发表评论

0条评论

Carl

|高级讲师

TA的文章

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