Nodejs笔记--解构及数组对象操作

本文详细探讨了JavaScript中的解构技术,包括列表、参数、数组和对象解构,以及如何进行复杂的解构操作。同时,还介绍了数组和对象的各种操作,如计算数组元素平方值为偶数且大于10的平方值等实践练习。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

解构

JS的解构很灵活,参考
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator

列表解构

var parts = ['shoulder', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'] // 使用...解构
console.log(lyrics) // [ 'head', 'shoulder', 'knees', 'and', 'toes' ]

参数解构

function f(x, y, z) {
    console.log(x + y + z);
}
var arg = [3, 5, 6];
f(...arg); // 14

数组解构

JS的数组结构非常强大

const arr = [100, 200, 300];
let [x, y, z] = arr;
console.log(1, x, y, z); // 1 100 200 300

//丢弃
const [,b,] = arr;
console.log(2, b); // 2 200

// 少于数组元素
const [d, e] = arr;
console.log(3, d, e); // 3 100 200

// 多于数组元素
const [m, n, o, p] = arr;
console.log(4, m, n, o, p); // 4 100 200 300 undefined

//可变变量
const [f, ...args] = arr;
console.log(5, f); // 5 100
console.log(5, args); // 5 [ 200, 300 ]

//支持默认值
const [j=1, k,,,,l=20] = arr;
console.log(j, k, l); // 100 200 20

解构的时候,变量从左到右和元素对齐,可变参数放到最右边。
能对应到数据就返回数据,对应不到数据的返回默认值,如果没有默认值返回undefined。

对象解构

简单对象解构

const obj = {
    a:100,
    b:200,
    c:300
}

var {x, y, z} = obj;
console.log(x, y, z); // undefined undefined undefined

var {a, b, c} = obj; // key名称
console.log(a, b, c); // 100 200 300

var {a:m, b:n, c} = obj; // 重命名
console.log(m, n, c); // 100 200 300

var {a:M, c:N, d:D='JS'} = obj; // 缺省值
console.log(M, N, D) // 100 300 'JS'

解构时,需要提供对象的属性名,会根据属性名找到对应的值。没有找到的返回缺省值,没有缺省值则返回undefined。

复杂解构

嵌套数组

const arr = [1, [2, 3], 4];

const [a, [b, c], d] = arr;
console.log(a, b, c, d); //1 2 3 4

const [e, f] = arr;
console.log(e, f); //1 [ 2, 3 ]

const [g, h, i, j = 18] = arr;
console.log(g, h, i, j); //1 [ 2, 3 ] 4 18

const [k, ...l] = arr;
console.log(k, l); //1 [ [ 2, 3 ], 4 ]

对象

var data = {
	a:100,
	b:[
		{
			c:200,
			d:[],
			a:300
		},
		{
			c:1200,
			d:[1],
			a:1300
		},
	],
	c:500
}

var {a:m, b:[{a:n},{a:n1}]} = data;
console.log(m, n, n1) // 100 300 1300

数组的操作

方法描述
push(…items)尾部增加多个元素
pop()移除最后一个元素,并返回它
map引入处理函数来处理数组中每一个元素,返回新的数组
filter引入处理函数处理数组中每一个元素,此处理函数返回true的元素保留,否则该元素被过滤掉,保留的元素构成新的数组返回
foreach迭代所有元素,无返回值
const arr = [1, 2, 3, 4, 5];
arr.push(6, 7);
console.log(arr); // [ 1, 2, 3, 4, 5, 6, 7 ]
arr.pop();
console.log(arr); // [ 1, 2, 3, 4, 5, 6 ]

// map
const powerArr = arr.map(x => x * x); // 新数组
console.log(powerArr); // [ 1, 4, 9, 16, 25, 36 ]

//filter
const filterarr = arr.filter(x => x%2==0); // 新数组
console.log(filterarr); // [ 2, 4, 6 ]

//foreach
const newarr = arr.forEach(x => x+10);// 无返回值
console.log(newarr, arr); // undefined [ 1, 2, 3, 4, 5, 6 ]

narr = []
newArr = arr.forEach(x => narr.push(x+10));
console.log(newarr, narr); // undefined [ 11, 12, 13, 14, 15, 16 ]

练习:
有一个数组const arr = [1, 2, 3, 4, 5];,要求算出所有元素平方值是偶数且大于10的平方值

const arr = [1, 2, 3, 4, 5];

// 1
console.log(arr.filter(x => x%2===0).map(x => x*x).filter(x => x > 10)); // 先过滤减少迭代次数

// 2
s = Math.sqrt(10) // 10开方算一次
console.log(arr.filter(x => x > s && !(x % 2)).map(x => x*x))

// 3
let newarr = []
arr.forEach(x => {
	if (x>s && !(x%2)) newarr.push(x*x);
})
console.log(newarr);

对象的操作

Object的静态方法描述
Object.keys(obj)ES5开始支持。返回所有key
Object.values(obj)返回所有值,试验阶段,支持较差
Object.entries(obj)返回所有值,试验阶段,支持较差
Object.assign(target, …sources)使用多个source对象,来填充target对象,返回target对象
const obj = {
    a:100,
    b:200,
    c:300
};

console.log(Object.keys(obj)); // key
console.log(Object.values(obj)); // 值, 实验性
console.log(Object.entries(obj)); // 键值对, 实验性

// assign
var obj1 = Object.assign({}, obj,
    {a:1000, b:2000},  /*覆盖*/
    {c:'abc'},  /*覆盖*/
    {c:3000, d:'JS'}); /*覆盖,新增*/

console.log(obj1);

//copy
var obj2 = new Object(obj1);
console.log(obj2);

/*运行结果:
[ 'a', 'b', 'c' ]
[ 100, 200, 300 ]
[ [ 'a', 100 ], [ 'b', 200 ], [ 'c', 300 ] ]
{ a: 1000, b: 2000, c: 3000, d: 'JS' }
{ a: 1000, b: 2000, c: 3000, d: 'JS' }
*/
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值