码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript的数组的基本方法

时间:2020-06-12 01:16:22      阅读:80      评论:0      收藏:0      [点我收藏+]

标签:||   相对   instance   浅拷贝   字符   红色   index   join   ascii   

一、检测是否为数组

// 方式一  ES3 适用于只有一个全局环境
value instanceof Array
// 方式二 ES5语法
Array.isArray()
例子
let arr=[1,‘hello’]
console.log(arr instanceof Array)  // true
console.log(Array.isArray(arr))  //true

二、数组转换成字符串

  toLocaleString(),toString(),valueOf()  三者是所有对象都具有的方法。toLocaleString(),toString()能把数组的每一项用‘,’隔开,拼接成字符串

let arr=[1,hello]
console.log(arr.toLocaleString()) // 1,hello
console.log(arr.toString()) //1,hello
console.log(arr.valueOf()) //[1,‘hello‘]
alert(arr.valueOf())  //1,hello

        上面红色字中用console.log与alert 结果不同的原因在于:alert()接收的是字符串参数,后台会调用toString()方式,把原先获得的结果为[1,2]转化为1,2

join()->可以使用不同的分隔符来分割这个字符串

console.log(arr.join())     //  1,hello
console.log(arr.join(||)) //  1||hello

三、数组项的增删

1.栈方法(push与pop)->原则是先进后出

let arr=[1,hello]
//push() 可接受任意个参数,把他们从数组的末尾逐个插入,并修改长度
console.log(arr.push(1,a)) // 长度为4
console.log(arr) //[1, "hello", 1, "a"]

//pop() 数组最末项出栈,长度减1,返回出栈的值
console.log(arr.pop()) // 出栈的是‘a‘
console.log(arr) //[1, "hello", 1]

2.队列方式(shift->队列首部减,push->队列尾部加,unshift->队列首部加)

let arr=[1,hello]
//unshift() 可接受任意个参数,把他们从数组的首尾插入,并修改长度
console.log(arr.unshift(first,a)) //4
console.log(arr) //["first", "a", 1, "hello"]

 //shift() 数组最首项移除,长度减1,返回移除的值
 console.log(arr.shift()) // ‘first‘
console.log(arr) //["a", 1, "hello"]

四、重排序方法

1.reverse 反转数组

let arr=[1,2,4,a,b]
console.log(arr.reverse()) // ["b", "a", 4, 2, 1]

2.sort  默认是按升序排列数组

let arr=[1,2,4,10,22,a,b]
console.log(arr.sort()) // [1, 10, 2, 22, 4, "a", "b"]

从上面的例子可看出,sort()排序的结果不是我们理想的,那是为什么???

原因是sort()方法会调用每个数组项的toString(),因此最后变成了字符串之间的比较,如‘10’<‘2‘,字符串比较是一位一位比较的,因为ASCII码比较中,1排在2前面1<2,所以‘10’<‘2‘

为了解决这种不理想的方式,我们可以让sort接收一个比较函数作为参数,我们通过这个函数,可以实现我们理想的样子,还可以实现升序和降序

        let arr=[1,21,4,3,10,22,a,c,b]
        //  升序
        function aseCompare(a,b){
             if(a>b){
                 return 1;
             }else if(a<b){
                 return -1;
             }else{
                 return 0
             }
        }
        
        // 若数组比较的只有数组,没有字符串可以以下简略的写法,因为字符串进行比较无效
        function simpleAscCompare(a,b){
            return a-b
        }
        
        // 降序 第一种只需把a>b 的返回值改为负的,a<b 的返回值改为正的
        //     第二种 把a-b改为b-a

        // console.log(arr.sort(aseCompare)) //[1, 3, 4, 10, 21, 22, "a", "b", "c"] 
        console.log(arr.sort(simpleAscCompare))  //[1, 3, 4, 10, 21, 22, "a", "c", "b"]

分析上面函数

   aseCompara(a,b)>0,b会排在a的前面

   aseCompara(a,b)<0,b会排在a的后面

   aseCompara(a,b)>0,位置相对不变

五、操作方法

 1.concat()  基于当前数组所有项创建新的数组

    let arr=[1,21,a,b]
    console.log(arr.concat(hello,33)) // [1, 21, "a", "b", "hello",33]
    console.log(arr) // [1,21,‘a‘,‘b‘]

 2. slice()   基于当前的数组创建一个或多个项的新数组

    let arr=[1,21,a,b,22,jdk]
// slice(a,b) 可接收两个参数a,b;a表示要返回项的起始位置(索引),b表示结束位置(索引)->不返回此项 console.log(arr.slice(0)) // [1,21,‘a‘,‘b‘,22,‘jdk‘] console.log(arr.slice(0,3)) //[1, 21, "a"] console.log(arr.slice(null,3)) //[1, 21, "a"] console.log(arr) // [1,21,‘a‘,‘b‘,22,‘jdk‘]

 3.splice()  对原数组的一些增删改,返回数组,该数组是包含从原数组中删除的项

        let arr=[1,21,a,b,22,jdk]
        // 删除 splice(a,b) a->要删除项的起始位置 b->删除的项数
        console.log(arr.splice(0,2))  // [1, 21]
        console.log(arr)  // ["a", "b", 22, "jdk"]

        // 插入 splice(a,b,c) a->起始位置 b->删除的项数为 0  c->要插入的项
        console.log(arr.splice(1,0,blue))  // []  没有删除任何项,所以为[]
        console.log(arr)  // ["a", "blue", "b", 22, "jdk"]

        // 替换 splice(a,b,c)   a->起始位置 b->删除的项数 c->要插入的项
        // 在索引2的位置,删除1项,在替换进去‘red‘,‘school‘
        console.log(arr.splice(2,1,red,school)) //["b"]
        console.log(arr) // ["a", "blue", "red", "school", 22, "jdk"]
        // 在索引0的位置,删除3项,在替换进去‘three‘
        console.log(arr.splice(0,3,three)) //["a", "blue", "red"]
        console.log(arr) //["three", "school", 22, "jdk"]

七、位置方法

indexOf()   

lastIndexOf()     

let arr=[1,21,a,15,7,10,a]

//indexOf(a,b) lastIndexOf(a,b)  a->要查找的项,b->查找起点的索引值
console.log(arr.indexOf(a)) //2 从左往右方向查,查询到结果,返回其索引值
console.log(arr.indexOf(a,3)) // 6 从索引值3开始查到
console.log(arr.lastIndexOf(a)) //6  从右往左方向查
console.log(arr.indexOf(sss)) //-1  查询不到,返回-1

   var person={name:"hello"}
   var people=[{name:"hello"}]
   var morePeople=[person]
   console.log(people.indexOf(person)) //-1
   console.log(morePeople.indexOf(person)) //0
   // 上面例子问题 比较的是对象的问题,people中的{name:“hello”}与person是两个对象,JavaScript只能访问对象的引用,也就是对象的内存地址,所以他们本质上内存地址不一样,也是是两个不同的对象,即使值时一样的

八、迭代方法

1.every()  ->参数给定一个函数,数组的每一项都符合函数里的条件,则返回true ,反之为false

        let arr=[1,21,15,7,10,2,4]
        let arr1=[1,a,null,15,7,10,2,4]
        let everyResult=arr.every(function(item,index,array){
            return (typeof item)==="number"
        }) 
        let everyResult1=arr1.every(function(item,index,array){
            return (typeof item)==="number"
        }) 
        console.log(everyResult) //true
        console.log(everyResult1) //false

2.some()  ->参数给定一个函数,数组的有一项都符合函数里的条件,则返回true ,反之为false

     let arr=[1,a,null,15,7,10,2,4]
        let someResult=arr.some(function(item,index,array){
            return (typeof item)==="number"
        }) 
        console.log(someResult) //true

3.filter()->过滤出符合函数的数组项,然后组成数组返回

        let arr=[1,a,null,15,7,10,2,4]
        let filterResult=arr.filter(function(item,index,array){
            return (typeof item)==="number"
        }) 
        console.log(filterResult) // [1, 15, 7, 10, 2, 4]

4.map()->数组的每一项都要经过函数的调用,然后每次的调用结果组成数组

    let arr=[1,21,15,7,10,2,4]
    let mapResult=arr.map(function(item,index,array){
            return item*2
     }) 
    console.log(mapResult) // [2, 42, 30, 14, 20, 4, 8]

九、其他

includes()  // 判断一个数组是否包含一个指定的值,返回true/false

let arr=[1,a,null,15,7,10,2,4]
// includes(a,b) a->需要查找的元素 b->从该索引值开始查找 console.log(arr.includes(15)) // true console.log(arr.includes(a)) // true console.log(arr.includes(a,3)) // false

 Array.from()   从类似数组或者可迭代对象(Map对象,Set对象)创建一个新的浅拷贝的数组实例

console.log(Array.from(foo)) //["f", "o", "o"]

console.log(Array.from(new Set([1,1,3,4,22,a,foo,a,22]))) //[1, 3, 4, 22, "a", "foo"]
  
const map=new Map([[1,a],[2,b],[2,c],[3,4]])
console.log(Array.from(map)) //[[1,‘a‘],[2,‘c‘],[3,4]]

reduce() 按顺序从左往右 迭代数组的所有项,构建一个最终的返回值

     let arr=[1,5,3,6,2,4]
     // 第一次执行回调 pre=1,cur=2,curIndex=1
     let result=arr.reduce(function(pre,cur,curIndex,array){
         console.log(pre:+pre+,index:+curIndex+,cur:+cur+,result:+(cur-pre))
          return cur-pre
     })
     console.log(result) //9
技术图片

 

JavaScript的数组的基本方法

标签:||   相对   instance   浅拷贝   字符   红色   index   join   ascii   

原文地址:https://www.cnblogs.com/Jeanchjy/p/13094770.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!