合并数组e

@sudo

已于 2022-03-30 12:53:43 修改

阅读量293

点赞数

分类专栏： front _end 文章标签：前端

于 2022-03-23 13:51:36 首次发布

本文链接：https://blog.csdn.net/IDpangpengcheng/article/details/123684310

版权

front _end 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

const arr1=[1,2,3]
const arr2=[4,5,6]

arr.push(arr2)  
此时arr为   [1,2,3,[4,5,6]]

const newArr = [...arr1, ...arr2]  //此时为 [1,2,3,4,5,6]
把两个数组合成一个大数组用   [...数组1 , ...数组2]  旧数据在前,新数组在后

	// 合并数组的第二种方法
		let ary1 = [1, 2, 3];
		let ary2 = [4, 5, 6];
		ary1.push(...ary2);
		console.log(...ary1) // 1 2 3 4 5 6
		console.log(ary1) //  [1, 2, 3, 4, 5, 6]

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>扩展运算符</title>
</head>
<body>
	<div>1</div>
	<div>4</div>
	<div>3</div>
	<div>6</div>
	<div>2</div>
	<div>5</div>
	<script type="text/javascript">
	

		// 合并数组的第二种方法
		let ary1 = [1, 2, 3];
		let ary2 = [4, 5, 6];
		ary1.push(...ary2);
		console.log(...ary1) // 1 2 3 4 5 6                
		console.log([...ary1]) //  [1, 2, 3, 4, 5, 6]     在...ary1的外面套上中括号可以变成数组使用

		console.log(ary1) //  [1, 2, 3, 4, 5, 6]
		
		// 利用扩展运算符将伪数组转换为真正的数组  
		//  伪数组没有push方法，伪数组转换成真数组的原因是 		// 利用数组对象里面的方法

		var oDivs = document.getElementsByTagName('div');
		console.log(oDivs) // HTMLCollection(6) [div, div, div, div, div, div]
		var ary = [...oDivs];  //把伪数组转换真数组
		ary.push('a'); //利用了数组对象里面的方法
		console.log(ary); //  [div, div, div, div, div, div, 'a']
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script type="text/javascript">
    console.log(1, 2, 3, 4, 5, 6) // 1 2 3 4 5 6


    let ary = [1, 2, 3, 4, 5, 6]; //  ... ary     ...数组名 可以直接取到   1 2 3 4 5 6  无逗号
    console.log(...ary) // 1 2 3 4 5 6

    //  扩展运算符可以用来合并数组
    let ary1 = [1, 2, 3]
    let ary2 = [4, 5, 6]
    let newAry = [...ary1, ...ary2]
    console.log(newAry) // [1, 2, 3, 4, 5, 6]


    let ary3 = [1, 2, 3]
    let ary4 = [4, 5, 6]
    ary3.push(...ary4) //往arr3里面push   合并数组
    console.log(ary3) //  [1, 2, 3, 4, 5, 6]



    let ary5 = [1, 2, 3]
    let ary6 = [4, 5, 6]
    ary5.push(ary6)
    console.log(ary5) //  [1, 2, 3, Array(3)]
    console.log(ary5[3]) //  [4, 5, 6]
    console.log(ary5[3][0]) //  4
    console.log(ary5[3][1]) //  5
    console.log(ary5[3][2]) //  6

  </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Set</title>
	<!-- Set是数据结构 -->
	<!-- ES6提供的新的数据结构Set，它类似数组，但是成员的值都是唯一的，没有重复的值 -->
	<!-- Set本身是一个构造函数，用来生成Set数据结构 -->
	<!-- const s1 = new Set(); -->
	<!-- Set函数可以接收一个数组作为参数，用做初始化 -->
	<!-- 	const s5 = new Set(['a', 'b', 'c']); -->
</head>

<body>
	<script type="text/javascript">
		const s1 = new Set();
	  console.log(s1)  //  Set(0) {size: 0} 
		console.log(s1.size) // 0   //size获取数据的个数 类似数组的长度
		console.log("-------------------------");

		const s2 = new Set(["a", "b"]);
		console.log(s2.size) //2   
		console.log("-------------------------");


		const s3 = new Set(["a", "a", "b", "b"]); //利用set数据结构可以做数组去重
		console.log(s3.size) // 2 默认去重，会把重复的值过滤掉
		console.log(s3)   // Set(2) {'a', 'b'}
		console.log(...s3) // a b
		const ary = [...s3];
		console.log(ary) // ['a', 'b']
		console.log("-------------------------");


		// const s4 = new Set();
		// 向set结构中添加值 使用add方法
		// s4.add('a').add('b');
		// console.log(s4.size)

		// 从set结构中删除值 用到的方法是delete
		// const r1 = s4.delete('c');
		// console.log(s4.size)
		// console.log(r1);

		// 判断某一个值是否是set数据结构中的成员 使用has
		// const r2 = s4.has('d');
		// console.log(r2)

		// 清空set数据结构中的值 使用clear方法
		// s4.clear();
		// console.log(s4.size);

		// 遍历set数据结构 从中取值
		// Set结构的实例与数组一样，也拥有forEach()方法，用于对每个成员执行某种操作,没有返回值
		const s5 = new Set(['a', 'b', 'c']);
		s5.forEach(value => {
			console.log(value)
			// a
			// b
			// c
		})
		const ac = []
		s5.forEach(item => {
			if (item === 'a' || item === 'c') {
				ac.push(item)
			}
		})
		console.log(ac); //  ['a', 'c']
		console.log('=========================')


		var shuzu = [...s5]   //set要转换为数组才能使用数组里面的方法
		console.log(shuzu) //  ['a', 'b', 'c']
		var ca = shuzu.filter(item => {
			if (item === 'a' || item === 'c') { 
				return item
			}
		})
		console.log(ca) // ['a', 'c']
		console.log('=========================')




		let set = new Set(['red', 'green', 'blue']);
		let arr = [...set]; //这样之后就可以利用数组里面的方法了
		console.log(arr);  //  ['red', 'green', 'blue']
		// ['red', 'green', 'blue']  
		let xinary  = arr.filter(item=>  item)
		console.log(xinary);  //  ['red', 'green', 'blue']
	</script>
</body>

</html>

const s4 = new Set();
  console.log(s4)   // Set(0) {size: 0}
		// 向set结构中添加值 使用add方法
		s4.add('a').add('b');
		console.log(s4.size)  // 2
    console.log("========================");

		// 从set结构中删除值 用到的方法是delete
		const r1 = s4.delete('c');   // delete()的返回值是一个布尔值，删除成功就是true否则就是false
		console.log(s4.size)  // 2
		console.log(r1);   // fasle 表示删除失败
    console.log("========================");


		// 判断某一个值是否是set数据结构中的成员 使用has
		const r2 = s4.has('d');  // has()  返回的是一个布尔值，返回true就是有这个元素，返回false就是没有这个元素
		console.log(r2)  // false
    console.log("========================");


		// 清空set数据结构中的值 使用clear方法
		s4.clear();  //  clear() 没有返回值
		console.log(s4.size);  // 0