js JSON数组索引 js数组获取值索引

对数组的元素操作的简便用法

• data数据定义：numbers : [1,2,3,4,25,100,50,500]

filter(function(currentValue,index,arr), thisValue)

• currentValue: 遍历数组的当前值
• index：当前值得索引
• arr: 当前元素属于的数组对象

Arrays.filter():用于对数组进行遍历过滤，返回 true 则返回该原元素，否则过滤掉（返回为boolean类型，一般用来判断，对元素操作选用map，redurce）（用作判断返回元素数组的全值或部分值）

computed: {
        getLast(){
           return  this.numbers.filter(function (n) {
                return n<100
            })
        }
    },
//简写
	getLast(){
           return  this.numbers.filter(n => n<100)
        }   
//输出：[1,2,3,4,25]

   getLast(){
      return  this.numbers.filter((n,index,self) => {
          //当前值
          console.log(n);
          //当前值得索引
          console.log(index);
          //当前数组
          console.log(self);
          return true
          }

      )

map(function(currentValue,index,arr),thisValue)

• currentValue: 遍历数组的当前值
• index：当前值得索引
• arr: 当前元素属于的数组对象

Arrays.map():用于对数组进行遍历操作元素直接载入数组，不用经过判断返回true，直接通过定义的规则将结果载入（新生成的数值插入新数组）

getLast(){
           return  this.numbers.map((n,index,self) => {
               //当前值
               console.log(n);
               //当前值得索引
               console.log(index);
               //当前数组
               console.log(self);
               return n*index;
               }

           )
        }
//输出： 元素操作练习：[ 0, 2, 6, 12, 100, 500, 300, 3500 ]

reduce(function(prev,cur,index,arr){},init)

• arr：表示原数组
• prev：表示上一次调用回调时的返回值，或者初始值 init
• cur ：表示当前正在处理的数组元素
• index：表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1
• init ：表示初始值。

<div>总价：{{getTotal}}</div>

data:{
        //存入数据
        books:[
            {
                id:1,
                name:"计算机网络",
                price: 10,
                num:0
            },
            {
                id:2,
                name:"J2EE",
                price: 11,
                num:0
            },
            {
                id:3,
                name:"计算机组成原理",
                price: 120,
                num:0
            },
            {
                id:4,
                name:"计算机基础",
                price: 130,
                num:0
            }
        ],

getTotal() {
	//一般循环写法
            /*let all = 0;
            for(let i=0;i<this.books.length;i++){
                all+=this.books[i].price*this.books[i].num;
            }
                return all;
            }*/
    //reduce循环写法
           return this.books.reduce((previousValue,books) =>
                 previousValue + books.price * books.num
            , 0)
        },

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

data:{
        //存入数据
        books:[
            {
                id:1,
                name:"计算机网络",
                price: 10,
                num:0
            },
            {
                id:2,
                name:"J2EE",
                price: 11,
                num:0
            },
            {
                id:3,
                name:"计算机组成原理",
                price: 120,
                num:0
            },
            {
                id:4,
                name:"计算机基础",
                price: 130,
                num:0
            }
        ],

getTotal() {
            /*let all = 0;
            for(let i=0;i<this.books.length;i++){
                all+=this.books[i].price*this.books[i].num;
            }
                return all;
            }*/
            return this.books.forEach((n,index) =>{
                console.log('当前值:'+n.price);
                console.log('当前索引:'+index);

            })
           /*return this.books.reduce((previousValue,books) =>
                 previousValue + books.price * books.num
            , 0)*/
        },

splice(index,howmany,item1,…,itemX)

• index：操作数组的索引值（从哪里开始改）
• howmany：要删除多少个
• item1,…,itemX：要新增多少个

可对数组进行增删改查

• 增：homemany定义为0，在 index 处新增 item1

numbers : [1,2,3,4,25,100,50,500],
getLast(){
    this.numbers.splice(1,0,999);
    return this.numbers;
}
//输出： 元素操作练习：[ 1, 999, 2, 3, 4, 25, 100, 50, 500 ]

• 删：homemany定义为删除个数，在 index 处开始删除（只输入一个数的话，这个数为index，意味着从索引index处后面的元素全删）

numbers : [1,2,3,4,25,100,50,500],
getLast(){
    this.numbers.splice(1,1);
    return this.numbers;
}
//输出： 元素操作练习：[ 1, 3, 4, 25, 100, 50, 500 ]

• 改：原理是删除原有的再新增一个数在原来的位置

numbers : [1,2,3,4,25,100,50,500],
getLast(){
    this.numbers.splice(1,1,999);
    return this.numbers;
}
//输出： 元素操作练习：[ 1, 999, 3, 4, 25, 100, 50, 500 ]

sort(sortby) 排序数组

• sortby不定义时，不排序，返回乱序数组

数字排序

• 升序排序：在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
• 降序排序：在排序后的数组中 a 应该出现在 b 之后，则返回一个大于 0 的值。

<script>
    const points = [40, 100, 1, 5, 25, 10];
    //升序排序
    console.log(points.sort(function(a,b){return a-b}));    
    //输出：   (6) [1, 5, 10, 25, 40, 100]
    //降序排序
    console.log(points.sort(function(a,b){return b-a}));    
    //输出：   (6) [100, 40, 25, 10, 5, 1]
</script>

字母排序

const eng = ["a","b","e","y","p","u","c"];
console.log(eng.sort())
//输出：   (7) ["a", "b", "c", "e", "p", "u", "y"]

unshift() 数组开头添加元素，返回新长度

const points = [40, 100, 1, 5, 25, 10];
    console.log("添加返回数组长度："+points.unshift(30,60,90))
    console.log(points);

shift() 数组开头删除元素，返回首元素值

const points = [40, 100, 1, 5, 25, 10];
    console.log("返回被删除元素："+points.shift())
    console.log("数组："+points);

reverse() 颠倒数组中元素的顺序

const points = [40, 100, 1, 5, 25, 10];
    console.log("原数组："+points);
    console.log("改变后数组："+points.reverse());

slice(start,end)：截取数组start - end 范围内的元素

• start < 返回元素 <end

const points = [40, 100, 1, 5, 25, 10];
    console.log("原数组："+points);
    console.log("改变后数组："+points.slice(1,3));

concat(数组) ：合并数组

• 拼接到数组尾部

const points1 = [40, 100, 1, 5, 25, 10];
    const points2 = [999, 998, 997, 996, 995, 994];
    console.log(points1.concat(points2));
//输出：   40,100,1,5,25,10,999,998,997,996,995,994