关于js如何提取json中数组赋值给js数组以及遍历

JavaScript017

关于js如何提取json中数组赋值给js数组以及遍历,第1张

var json={"a":"aaa","b":{"c":"ccc","d":[{"e":"01","g":"kkkk"},{"e":"07","g":"lllll"},{"e":"05","g":"xxxxx"},{"e":"03","g":"kkkk"}]}}

var arr=[]

for(var i=0i<json.b.d.lengthi++){

    arr[i]=json.b.d[i].e+"-"+json.b.d[i].g

}

console.log(arr)

js/json 数组的操作

1、数组的创建

var arrayObj = new

Array() //创建一个数组

var arrayObj = new

Array([size]) //创建一个数组并指定长度,注意不是上限,是长度

var arrayObj = new Array([element0[,

element1[, ...[, elementN]]]]) 创建一个数组并赋值

要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以将元素存储在规定长度以外的,注意:这时长度会随之改变。

2、数组的元素的访问

var testGetArrValue=arrayObj[1]

//获取数组的元素值

arrayObj[1]= "这是新值"//给数组元素赋予新的值

3、数组元素的添加

arrayObj. push([item1 [item2 [. . .

[itemN ]]]])// 将一个或多个新元素添加到数组结尾,并返回数组新长度

arrayObj.unshift([item1 [item2 [. . .

[itemN ]]]])// 将一个或多个新元素添加到数组开始,数组中的元素自动后移,返回数组新长度

arrayObj.splice(insertPos,0,[item1[,

item2[, . . .

[,itemN]]]])//将一个或多个新元素插入到数组的指定位置,插入位置的元素自动后移,返回""。

4、数组元素的删除

arrayObj.pop()//移除最后一个元素并返回该元素值

arrayObj.shift()

//移除最前一个元素并返回该元素值,数组中元素自动前移

arrayObj.splice(deletePos,deleteCount)

//删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返回所移除的元素

5、数组的截取和合并

arrayObj.slice(start, [end])

//以数组的形式返回数组的一部分,注意不包括 end 对应的元素,如果省略 end 将复制 start 之后的所有元素

arrayObj.concat([item1[, item2[, . . .

[,itemN]]]])//将多个数组(也可以是字符串,或者是数组和字符串的混合)连接为一个数组,返回连接好的新的数组

6、数组的拷贝

arrayObj.slice(0)

//返回数组的拷贝数组,注意是一个新的数组,不是指向

arrayObj.concat()

//返回数组的拷贝数组,注意是一个新的数组,不是指向

7、数组元素的排序

arrayObj.reverse()

//反转元素(最前的排到最后、最后的排到最前),返回数组地址

arrayObj.sort()//对数组元素排序,返回数组地址

8、数组元素的字符串化

arrayObj.join(separator)

//返回字符串,这个字符串将数组的每一个元素值连接在一起,中间用 separator 隔开。

toLocaleString 、toString

、valueOf:可以看作是join的特殊用法,不常用.

近日在写一个新功能的时候,其实没有很难,数据交互有一点复杂,发灰度之后,自测出一个小bug,虽然整体上似乎无伤大雅,但是发现了就犯强迫症想要解决,仔细debug了一晚上+一上午,甚至把自己组件拆分,数据传递的逻辑都重新理了一遍,实在没发现什么问题,一直看断点,数据在某一个阶段没有按照理想的状态变化,但是一直没明白是为什么,原本没往深浅拷贝的方面去想,一直纠结于各个组件之间的state的变化等等,最后突然灵光了一把,原来是这么小的错误,可把我愁了半天。就是某onchange函数中 把state里的数组赋值给新的变量,新的变量对数组做了一些操作,但却把state里面原本的值也修改了 (这是之前一直没发现的),正好其他地方state里的此数组是需要修改的,所以整体上似乎没产生什么影响,但在那个onchange函数里就改变了,会影响第一次渲染之后的再次渲染数据显示有错误。解决了也是终于舒畅了~特此记录,一定要重视对象的深浅拷贝!!一不小心就用错了酿成大祸!

 js中储存对象都是存引用地址,所以浅拷贝会导致两个变量指向同一块内存地址。数组的赋值其实相当于给了索引,改变其中一个变量其他的引用其他都会改变。如下为浅拷贝

// var a = [1,2,3]

// var b = a  //此步不是赋值,而是将a的引用赋给b,所以改变b也会改变a

// b[0]=4

// a为[4,2,3]

// b为[4,2,3]

总的来说 :原始参数(比如一个具体的数字)被作为值传递给函数,如果被调用函数改变了这个参数的值,这样的改变不会影响到全局或调用函数。但当你传递一个对象(js里数组也是对象)到一个函数,如果在函数里面改变了这个参数的内容,那么这个改变在外部是可见的,也就是会影响到全局。

深拷贝数组的方法:

(1)slice函数,newArr = arr.slice(0)

(2)concat函数,newArr = [].concat(arr,arr2,...)

(3)assign函数(对象),newObj = object.assign({},obj)

但以上三种方式都是对对象第一层的深拷贝,第二层之后还是浅拷贝,要实现多维数组的深拷贝可以用:

newArr = JSON.parse(JSON.stringify(arr))