参考链接:https://www.cnblogs.com/obel/p/7016414.html
JS中创建数组的方法:
方法一:使用Array构造函数
var arr1 = new Array(); //创建一个空数组
var arr2 = new Array(20); //创建一个包含20项的数组
var arr3 = new Array("lily", "tom", "pop"); //创建包含3个字符串的数组
方法二:使用数组字面量表示
var arr4 = []; //创建一个空数组
var arr5 = [20]; //创建一个包含1项的数组
var arr6 = ["lily","tom","pop"]; //创建包含3个字符串的数组
数组的原方法都是基于 Array.prototype
改变数组的方法:push pop unshift shift reverse(倒序) splice(开始的索引,长度,插入的值) sort(排序)
var a = [3,6,9,12,15]
a.push(18) //返回长度6
a.pop() //返回删除的那一项数据 18
a.unshift(21) //返回长度6
a.shift() //返回删除的那一项数据 21
a.reverse() //返回翻转后的数组 [15,12,9,6,3]
a.sort() //返回比较后的数组 如果都是数据需要借助 a-b 从小到大 b-a 从大到小
a = [3,6,9,12,15]
a.splice(1,1) //返回删除的那一项 [6] a 变成 [3,9,12,15]
a.splice(1,0,7) //返回空数组 [] a变成[3,7,9,12,15]
a.splice(1) //返回删除从当前索引到最后的项 [7,9,12,15] a变成[3]
不改变数组的方法:toString slice(开始索引,结束索引) join concat(两个数组链接) indexOf(从左到右第一次符合条件的索引) lastIndexOf(从右到左第一次符合条件的索引)
得有对象接收
var a = ['a','b','c','e']
var b = a.toString()
console.log(b)//返回 'a,b,c,d'
b = a.slice(1)
console.log(b) //返回 ['b','c','d']
b = a.slice(1,2)
console.log(b) //返回['b']
b = a.join()
console.log(b) // 'a,b,c,d'
b = a.join('-')
console.log(b) // 'a-b-c-d'
扩展方法:every some forEach map filter(浅拷贝,去重) reduce(第一个往最后一个) reduceRight(最后一个往第一个)
every每一项都满足条件才能返回true,否则返回false
var = this.productBox.every(function(el){
return el.price > 40
})
console.log(res) //每一项都大于40才能返回true
some 有一项满足条件就返回true,否则返回false
var = this.productBox.some(function(el){
return el.price > 40
})
console.log(res) //有一项都大于40才能返回true
forEach 查询每一项,也可以修改数组
this.productBox.forEach(function(item){
if(item.price > 20){
item.price = item.price - 10
}
})
console.log(JSON.stringify(this.productBox))
map
1、map() 方法返回一个新数组,新数组中的元素为原始数组中的每个元素调用函数处理后得到的值。
2、map() 方法按照原始数组元素顺序依次处理元素。
注意: map() 不会对空数组进行检测。
注意: map() 不会改变原始数组。
注意:函数的作用是对数组中的每一个元素进行处理,返回新的元素。
3、语法
map是数组的方法,有一个参数,参数是一个函数,函数中有3个参数
参数1:item必须。当前元素的值
参数2:index,可选。当前元素在数组中的索引值
参数3:arr可选。当前元素属于的数组对象
array.map(function(item,index,arr){})
var arr = [2,3,4,5]
var newarr = arr.map(function(item,index,array){
item = item * 2
return item
})
console.log(newarr) //[4,6,8,10]
filter 可以浅拷贝,也可以数组去重
var list = [1,2,3,2,4,3,4]
var res = list.filter(function(item,index,array){
return array.indexOf(item) === index
})
console.log(res) // [1,2,3,4]
reduce 累加 从左向右
var arr = [1,2,3,4]
var sum = arr.reduce(function(pre,cur,index,array){
console.log(pre,cur,index)
return pre + cur
})
console.log(arr,sum)
//1 2 1
// 3 3 2
// 6 4 3
//[1, 2, 3, 4] 10
reduceRight 累加 从右向左
var arr = [1,2,3,4]
var sum = arr.reduceRight(function(pre,cur,index,array){
console.log(pre,cur,index)
return pre + cur
})
console.log(arr,sum)
//4 3 2
// 7 2 1
// 9 1 0
//[1, 2, 3, 4] 10
js中赋值主要有两种赋值形式,一种是值引用,另一种是址引用(地址)。
一般对象赋值的时候,都是地址引用,所以在修改新对象的时候,其实修改了在内存区地址上的值。
为了达到值引用的效果,所以有 深度克隆的概念。
使用 call() 方法,改变this指向。参考链接:https://www.jianshu.com/p/aa2eeecd8b4f
深度克隆的代码
var arr = [{a:1},{a:2},{a:3}]
var newarr = cloneSun(arr)
function cloneSun(obj, target) {
var sunObj2 = target || {}; //继承传来的目标对象
var toStr = Object.prototype.toString;
for (var prop in obj) {
if (obj.hasOwnProperty(prop)) {
if (typeof obj[prop] !== 'object' && obj[prop] !== 'null') {
sunObj2[prop] = obj[prop];
} else {
sunObj2[prop] = toStr.call(obj[prop]) === '[object Object]' ? {} : [];
cloneSun(obj[prop], sunObj2[prop]);
}
}
}
return sunObj2
}