web开发之-js数组常用方法

交互设计

  数组的访问,更改和遍历

  使用我们上一节课的index.js

  var arr = [1,2,3,4,5,6,7];//获取数组长度console.log(arr.length);//访问第二个元素console.log(arr[1]);//更改第二个元素arr[1] = 333;console.log(arr);//遍历数组for(var i=0;i<arr.length;i++){ console.log("我是第"+i+"个元素:"+arr[i]);}arr.forEach((item,index,array)=>{ console.log("数组的第"+index+"个值为"+item);})注:

  数组长度:数组变量名.length

  访问第i个元素:数组变量名[i]

  遍历元素:for,数组变量名.forEach,其中,forEach需要传递一个函数,item表示数组的值,index表示数组的索引,array表示的是数组

  concat合并数组

  我们使用concat可以合并多个数组,使用方法为:数组1.concat(数组2,数组3)

  var arr = [1,2,3,4,5,6,7];var arr1 = [8,9];var result = arr.concat(arr1);concat实现拷贝的两种方式:

  浅拷贝:

  var arr = [22,33,{name:"zsf"}];var arr1=arr.concat(); // 浅拷贝arr1[2].name="lisi";;console.log(arr);console.log(arr1);注:我们使用concat实现了数组的拷贝(复制),但是,当我更改新的拷贝数组的name值的时候,同时也更改了原始数组arr的name的值;这是因为,arr[2]是复杂类型,不是基本的类型,对于复杂类型只是拷贝了复杂类型的索引值;

  深拷贝:

  var arr = [22,33,{name:"zsf"}];var arr2 = JSON.parse(JSON.stringify(arr));arr2[2].name="wangwu";console.log(arr);console.log(arr2);注:这里我们使用提供的JSON方法来实现深拷贝;JSON.stringfy把数组转换成json的字符串,JSON.parse又把json字符串转换成数组;当我们更改深拷贝的数组的复杂类型的值时,并不会更改原始的复杂类型的值;

  拓展:json是我们开发中常用到的格式,可以使用类似对象的访问方式来进行访问,例如以上的arr2[2].name。

标签: 交互设计