数组方法的补充和增加

小码路飞

已于 2022-09-24 11:06:28 修改

阅读量214

点赞数 3

分类专栏：笔记文章标签：数组 javascript 前端

于 2022-04-12 10:05:54 首次发布

本文链接：https://blog.csdn.net/m0_60913515/article/details/124103927

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

new Array()

 // new Array(正整数) 就是数组的长度
 var arr = new Array(6)
 var arr = Array(6)
 console.log(arr)  // 返回的结果就是六个空的属性

arr.length

var arr = [1, 2, 3, 4];
// 只有数组的length属性时可读可写的
console.log(arr.length)
arr.length = 2
console.log(arr) // 返回的结果是 [1, 2]

push

var arr [1, 2, 3, 4, 5];
// 向数组内添加一个或者任意多个元素，并且返回这个数组的长度
var len = arr.push(4, 5, 6)
console.log(len) // 8
while(arr.push(0)<10)
console.log(arr) //[1, 2, 3, 4, 5, 4, 5, 6, 0, 0]

pop

var arr [1, 2, 3, 4, 5];
// 删除数组最尾部的一个元素，删除后返回被删除的元素
arr.pop() 
console.log(arr) // [1, 2, 3, 4]
while(arr.pop() !== 3);
console.log(arr) // [1, 2]
// 例子：
var arr = [
	{ id: 1001, name: "商品1", price: 1000, del: false },
    { id: 1001, name: "商品2", price: 1000, del: false },
    { id: 1001, name: "商品3", price: 1000, del: false },
    { id: 1001, name: "商品4", price: 1000, del: true },
    { id: 1001, name: "商品5", price: 1000, del: true },
]
while(arr.pop().del)
console.log(arr)
  // 0: {id: 1001, name: '商品1', price: 1000, del: false}
  // 1: {id: 1001, name: '商品2', price: 1000, del: false}
  // length: 2

unshift和shift

var arr [1, 2, 3, 4, 5];
arr.unshift(0); // 和push相同  但是向数组的最前面插入数据
console.log(arr) // [0, 1, 2, 3, 4, 5]
arr.shift() // 和pop相同 删除数组最前面的元素
console.log(arr) // [1, 2, 3, 4, 5]

slice

var arr = [1, 2, 3, 4, 5];
// 从第几个下标开始到第几个下标结束的数据获取放入一个新数组，并且将这个新数组返回
// 下标可以是负数
// 不改变原数组
var arr1 = arr.slice(2,4)
console.log(arr1) // [3, 4]
var arr2 = arr.slice(-3,-1)
console.log(arr2) // [3, 4]
// 复制数组 浅复制 如果需要对于原数组的数据进行保留，可以先复制一份然后再做处理
var arr1 = arr.slice()
arr.pop();
console.log(arr1) // [1, 2, 3, 4, 5]
console.log(arr) // [1, 2, 3, 4]

splice

var arr = [1, 2, 3, 4, 5];
// 从第一位开始删除两个元素，并且返回被删除的数组组成的新数组
var arr1 = arr.splice(1,2)
console.log(arr) // [1, 4, 5]
console.log(arr1) // [2, 3]
// 从第一位开始 不删除元素 插入-1和-2
var arr2 = arr.splice(1, 0, -1, -2)
console.log(arr) // [1, -1, -2, 4, 5] 因为上面的删除，所以arr默认为[1, 4, 5]
console.log(arr2) // [] 因为删除了0 个
// 替换，从下标一个开始删除两个元素，并且在这个位置插入-1和-2，并且返回被删除的两个元素组成的新数组
var arr3 = arr.splice(1, 2, -1, -2)
console.log(arr) // [1, -1, -2, 4, 5]
console.log(arr3) // [-1, -2]

forEach和map

// 不返回任何内容
// 不能得到新的内容
var arr1 = arr.forEach(function(item, index, arr){
	console.log(item,index,arr)
	// return 不使用
})

// 返回一个新数组
// 返回新数组，这个数组的长度与原数组等长
var arr1 = arr.map(function(item, index, arr){
	console.log(item, index, arr);
	// return 必须使用 return
})

forEach和map的例子

<ul></ul>

var arr = [
            { site: "网易", url: "http://www.163.com" },
            { site: "腾讯", url: "http://www.qq.com" },
            { site: "淘宝", url: "http://www.taobao.com" },
            { site: "淘宝", url: "http://www.taobao.com" },
            { site: "京东", url: "http://www.jd.com" },
            { site: "百度", url: "http://www.baidu.com" },
       ]
     var ul = document.querySelector('ul')
     var str = ''
     arr.forEach(function(item){
		str += `
			<li>
				<a href='${item.url}'>
					${item.site}							
				</a>
			</li>
		`
	})
	ul.innerHTML = str
	
	// 有两个值的话 删除淘宝 会留下一个
	arr.forEach(function(item, index, list){
		if(item.site === '淘宝'){
			list.splice(index, 1)
		}
	})
	console.log(arr) // 只会删除一个




	// 获取价格并排序
	     var arr = [
            { id: 1001, name: "商品1", price: 1000, del: false },
            { id: 1001, name: "商品2", price: 1200, del: false },
            { id: 1001, name: "商品3", price: 1600, del: false },
            { id: 1001, name: "商品4", price: 1300, del: true },
            { id: 1001, name: "商品5", price: 1800, del: true },
        ]
        var arr1 = arr.map(function(item){
			return item.price;
		}).sort(function(a, b){
				return a - b
		})
		console.log(arr1) //[1000, 1200, 1300, 1600, 1800]

filter

    var arr = [
            { id: 1001, name: "商品1", price: 1000, del: false },
            { id: 1001, name: "商品2", price: 1200, del: false },
            { id: 1001, name: "商品3", price: 1600, del: false },
            { id: 1001, name: "商品4", price: 1300, del: true },
            { id: 1001, name: "商品5", price: 1800, del: true },
        ]
    //  filter filter会筛选出满足条件的内容组成的新数组
    // map 根据原数组的内容进行改变处理后返回原数组中每个对应位置的值
    var arr1 = arr.filter(function(item){
		return item.price>1200
	})
	console.log(arr1)
	// 0: {id: 1001, name: '商品3', price: 1600, del: false}
	// 1: {id: 1001, name: '商品4', price: 1300, del: true}
	// 2: {id: 1001, name: '商品5', price: 1800, del: true}

some和every

        var arr = [
            { id: 1001, name: "商品1", price: 1000, del: false },
            { id: 1001, name: "商品2", price: 1200, del: false },
            { id: 1001, name: "商品3", price: 1600, del: false },
            { id: 1001, name: "商品4", price: 1300, del: true },
            { id: 1001, name: "商品5", price: 1800, del: true },
        ]
        var bool = arr.some(function(item){ // 有一个满足就是true
			return item.price > 1000
		})
		console.log(bool) // true
		var bool = arr.every(function(item){ // 全部满足才是true
			return item.price > 900
		})
		console.log(bool)

reverse

arr.reverse // 反转数组

concat

	连接多个元素或者多个数组  并且返回这个新数组 原数组不改变 
	arr.concat()
	var arr =[1, 2, 3, 4]
	var arr1 = arr.concat(5, 6, 7)
	console.log(arr) // [1, 2, 3, 4]
	console.log(arr1) //  [1, 2, 3, 4, 5, 6, 7]
	var arr1 = arr.concat([6, 7, 8], [9, 10, 11], 12);
    console.log(arr1) // [1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12]

join

       var arr = [1, 2, 3, 4]
       var str = arr.join(".")
       console.log(arr) // [1, 2, 3, 4]
       console.log(str) // '1.2.3.4'

find

 var arr = [
        { id: 1001, name: "商品1", price: 1000, del: false },
        { id: 1001, name: "商品2", price: 1200, del: false },
        { id: 1001, name: "商品3", price: 1600, del: false },
        { id: 1001, name: "商品4", price: 1300, del: true },
        { id: 1001, name: "商品5", price: 1800, del: true },
  ]
	// 查找数组中的元素，返回这个元素，并且不继续向后查找
	var item = arr.find(function(item){
		return item.id === 1001
	})
	// 返回数组中查找到元素的下标，针对元素是引用类型
	var index = arr.findIndex(function(item){
		return item.name == '商品3'
	})
	console.log(index); // 2


	var arr = [1, 2, 3, 4]
	// 返回元素查找到索引下标，针对元素非引用类型
	var index = arr.indexOf(3)
	console.log(index) // 2

at

var arr = [1, 2, 3, 4, 5];
console.log(arr[arr.length-1]);// 5    // 可以获取到最后一位 但是不适合
// 获取下标第几项的元素，可以是负数 也就是可以获取最后第几位的元素
console.log(arr.at(-1)) // 5

copyWithin

// arr.copyWithin(复制目标数组中的位置，要复制从原数组中开始的位置，复制到原数组中结束的位置之前)
// 原数组发生改变 但是长度不会变
var arr = [1, 2, 3, 4, 5]
console.log(arr) // [1, 2, 3, 4, 5]
var arr1 = arr.copyWithin(2, 1, 3);
console.log(arr1)// [1, 2, 2, 3, 5]

var arr = ["a", "b", "c", "d", "e"]
arr.copyWithin(2, 0, 2);// ['a', 'b', 'a', 'b', 'a']
arr.copyWithin(2, 0) // ['a', 'b', 'a', 'b', 'a']

fill

// fill改变原数组并且返回原数组 不产生新数组
var arr = Array(6);
var arr1 = arr.fill(1)
console.log(arr);//[1,1,1,1,1,1]

var arr = [1, 2, 3, 4, 5, 6]
var arr1 = arr.fill(1) // 覆盖原来的数组
console.log(arr) [1, 1, 1, 1, 1, 1]

var arr = [1, 2, 3, 4, 5, 6]
arr.fill(1, 3) // 从第三项开始填充
console,log(arr) // [1, 2, 3, 1, 1, 1]

var arr = [1, 2, 3, 4, 5, 6]
arr.fill(1, 3, -1)  // 从第三项开始 填充到倒数第一位
console,log(arr) // [1, 2, 3, 1, 1, 6]

fill随机颜色小例子

var str = "#"+ Array(6).fill(1).map(function(){
	return Math.floor(Math.random() * 16).toString(16)
}).join("")
console.log(str) // #加上随机颜色

// tips:为什么fill需要赋值为1？
// forEach map等方法数组中空元素不遍历 所以需要赋值为1
例：
	var arr = [1, , 2, , 3, , 4];
	arr.forEach(function(item, index){
		console.log(item,index) 
	})
	// ![这里下标就不是0 1 2 3 4](https://img-blog.csdnimg.cn/be09b69bce75458c9ebb0b88b7a21e38.png#pic_center)
// 因为空元素不被枚举 

var arr = [1, , 2, , 3, undefined , 4];
// for(var i = 0; i< arr.length; i++){
//	if(arr[i] !== undefined) console.log(arr[i])			
//} 这种方法不行
**if（key in obj）判断某个数组中某个元素是不是空元素 **
for(var i = 0; i<arr.length; i++){
	if(i in arr) console.log(arr[i]);
}
console.log(arr.length) // 7
arr.forEach(function(item,index){
	console.log(item,index)
})
![在这里插入图片描述](https://img-blog.csdnimg.cn/15b6e94c3a3140188ce5cc57abdf6a63.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP56CB6Lev6aOe,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

flat()数组扁平化

var arr = [
	[1,2,3],[4,5,6],[7,8,9],
]
// 将多维数组转换成一维数组叫做数组扁平化
// 根据扁平化数组 并且返回新数组 不改变原数组
var arr1 = arr.flat(1);
console.log(arr1) // [1, 2, 3, 4, 5, 6, 7, 8, 9]


var arr = [
	[1, 2, [3, 4, [5, 6]]], 7, 8
]
var arr1 = arr.flat(3) // 里面的数字代表的是扁平化几层
console.log(arr1) // [1, 2, 3, 4, 5, 6, 7, 8]

// 利用递归函数来写
var arr = [
	[1, 2, [3, 4, [5, 6]]], 7, 8
]

        function flat(source, target) {
            if (!target) target = [];
            for (var i = 0; i < source.length; i++) {
                // 如果这个元素是数组
                if (Array.isArray(source[i])) {
                    flat(source[i], target)
                } else {
                    // 如果这个元素不是数组
                    target.push(source[i])
                }
            }
            return target;
        }
        var arr1 = flat(arr);
        console.log(arr1);

flatMap

        var arr = [
            [1, 2, 3],
            [4, 5, 6],
            [7, 8, 9],
            11, 12
        ]
       var arr1 = arr.flatMap(function(item){
			return item
		})
		console.log(arr1)//[1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 12]

flatMap 和 map连用的案例

var arr = [
            [1, 2, 3],
            [4, 5, 6],
            [7, 8, 9],
            11, 12
]
var arr1 = arr.flatMap(function(item){
	if(Array.isArray(item)){
		return item.map(function(t){
			return t + 10
	})
	}else{
		return item + 10
	}
})
console.log(arr1) // [11, 12, 13, 14, 15, 16, 17, 18, 19, 21, 22]

includes

var arr = [1, 2, 3, 4, 5];
// 判断元素在数组中是否存在
console.log(arr.includes(7))// false
        const LEFT = "left",
            TOP = "top",
            RIGHT = "right",
            BOTTOM = "bottom";
        var direction = ""
        window.addEventListener("keydown", keyHandler);

        function keyHandler(e) {
            if (![37, 38, 39, 40].includes(e.keyCode)) return;
            switch (e.keyCode) {
                case 37:
                    direction = LEFT;
                    break;
                case 38:
                    direction = TOP;
                    break;
                case 39:
                    direction = RIGHT;
                    break;
                case 40:
                    direction = BOTTOM;
                    break;
            }
        }

reduce

// 归并
// reduce(函数，初始值)
// 函数(value,item,index,arr)
// 如果没有初始值，就把数组的第0项作为value值，并且从第一项开始遍历
// 如果有初始值，value就是初始值，并且从第0项开始遍历
// 在使用reduce是，return返回的结果将作为下次遍历时的value值
// value 有初始值 就是初始值 没有初始值 就是数组的第0项
// item 数组内的数据数值
// index 索引下标
// arr 这个数组

reduce的累加效果

var arr = [1, 2, 3, 4, 5];
var sum = arr.reduce(function(value,item,index,arr){
	return value + item
},100)
console.log(sum) // 115

reduce的push

var arr = [1, 2, 3, 4, 5];
var sum = arr.reduce(function(value,item){
	if(!Array.isArray(value)){
		arr[arr.length] = value
		return arr
	} 
	return value
},6)
console.log(sum) // [1, 2, 3, 4, 5, 6]

reduce的map

var arr = [1, 2, 3, 4, 5];
var arr1 = arr.reduce(function(value,item){
	value.push(item + 10)
	return value
},[])
console.log(arr1) // [11, 12, 13, 14, 15]

reduce的some和every

some

var arr = [1, 2, 3, 4, 5]
var bool = arr.reduce(function(value,item){
	if(item < 3) valur = true
	return value
},false)
console.log(bool) // true

every

var arr = [3, 4, 5, 6, 7]
var bool = arr.reduce(function(value,item){
	if(item < 3) return false
	return value
},true)
console.log(bool) // true

reduce的filter

var arr = [3, 4, 5, 6, 7, 8];	
var arr1 = arr.reduce(function(value,item){
	if(item > 3) value.push(item)
	return value
},[])
console.log(arr1) // [6, 7, 8]

reduce的find和findIndex

find

var arr = [
    { id: 1001, name: "商品1", price: 1000, del: false },
    { id: 1001, name: "商品2", price: 1200, del: false },
    { id: 1001, name: "商品3", price: 1600, del: false },
    { id: 1001, name: "商品4", price: 1300, del: true },
    { id: 1001, name: "商品5", price: 1800, del: true },
]
var item = arr.reduce(function(value item){
	if(item.price === 1600) value = item
	return value
},null)
console.log(item) // {id: 1001, name: '商品3', price: 1600, del: false}

findIndex

var arr = [
    { id: 1001, name: "商品1", price: 1000, del: false },
    { id: 1001, name: "商品2", price: 1200, del: false },
    { id: 1001, name: "商品3", price: 1600, del: false },
    { id: 1001, name: "商品4", price: 1300, del: true },
    { id: 1001, name: "商品5", price: 1800, del: true },
]
var index = arr.reduce(function(value,item,index){
	if(item.price === 1600) value = index
	return value
},-1)
console.log(index) // 2

利用reduce书写一个随机颜色

var color = Array(6).fill(1).reduce(function(value){
	return value + Math.floor(Math.random()*16).toString(16)
},"#")
console.log(color) // #随机颜色

利用reduce动态渲染页面的小案例

<ul></ul>

var arr = [
    { site: "网易", url: "http://www.163.com" },
    { site: "腾讯", url: "http://www.qq.com" },
    { site: "淘宝", url: "http://www.taobao.com" },
    { site: "淘宝", url: "http://www.taobao.com" },
    { site: "京东", url: "http://www.jd.com" },
    { site: "百度", url: "http://www.baidu.com" },
]
document.querySelector('ul').innerHTML = arr.reduce(function(value,item){
	return value + `<li><a href = "${item.url}"> ${item.site} </a></li>`
},"")

利用reduce来判断字符串字符出现的次数

var str = "asdasdasffdgasasdasfgdfasd"
var o = str.split("").reduce(function(value,item){
	if(!value[item]) value[item] = 0
	value[item]++
	return value
},{})
console.log(o) // {a: 7, s: 7, d: 6, f: 4, g: 2}

将对象转换为数组

var obj = { a: 1, b: 2, c:3, d:4 }
// 将对象中的key转换为数组
var arr1 = Object.keys(obj)
console.log(arr1) // ['a', 'b', 'c', 'd']
// 将对象中所有的值转换为数组
var arr2 = Object.values(obj)
console.log(arr2) // [1, 2, 3, 4]

小例子

var obj = { a: 1, b: 2, c:3, d:4 }
var sum = Object.values(obj).reduce(function(value,item){
	return value + item
})
console.log(sum) // 10

小码路飞

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
数组方法的补充和增加

数组方法的补充和增加 // new Array(正整数) 就是数组的长度 var arr = new Array(6) var arr = Array(6) console.log(arr) // 返回的结果就是六个空的属性var arr = [1, 2, 3, 4];// 只有数组的length属性时可读可写的console.log(arr.length)arr.length = 2console.log(arr) // 返回的结果是 [1, 2]var arr [1, 2, 3
复制链接

扫一扫