版权声明:署名,允许他人基于本文进行创作,且必须基于与原先许可协议相同的许可协议分发本文 (Creative Commons)
1. 解构
1.1. 数组的解构
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)
// b = 10 // 异常,b声明为const,不能改变
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) // 100
console.log(...args) // 200 300
const [j=1, k,,, l=10] = arr
console.log(6, j, k, l)
// 6 100 200 10 // j优先用100,1只是缺省值
解构的时候,变量是从左到右和元素对齐,可变参数要放到最后 ,能对应数据就返回数据,对应不到的数据就返回默认值,如果没有默认值,就返回defined。
const arr = [1, [2, 3 ], 4]
const [a, [b, c], d] = arr
console.log(a, b, c, d)
const [e, f] = arr
console.log(e, f) // 1 [ 2, 3 ]
const [g, h, i, j=10] = arr
console.log(g, h, i, j)
// 1 [ 2, 3 ] 4 10
const [k, ...l] = arr
console.log(k, l)
// 1 [ [ 2, 3 ], 4 ]
1.2 参数解构
function f(x, y, z){
console.log(x + y + z)
}
var args = [2, 3, 4]
f(...args)
1.3 对象的解构
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
console.log(a, b, c)
var {a:m, b:n, c} = obj
console.log(m, n, c)
var {a:M, c:N, d:D='python'} = obj
console.log(M, N, D)
// 100 300 'python'
注意:对象解构的时候,需要提供对象的属性名,会根据对象的属性名会找到对应的值,没有找到返回缺省值,没有缺省值,直接返回undefined。
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:p}]} = data // m, n, p你可以理解为前面变量的别名
console.log(m, n, p)
// 100 300 1300
在此先小小的补充常量的知识:
const a = 100
a = 200;
console.log(a)
我们知道在JS中,常量是不可变的,所以常量重新赋值,会直接抛异常。那么下面的代码会抛出异常吗?为什么?
const arr = [1, 2, 3, 4, 5]
arr.push(6, 7)
console.log(arr)
arr.pop()
console.log(arr)
上面的代码是没有抛出异常的,为什么定义一个常量数组,就可以在里面添加元素呢?常量不是不可以改变的吗?很简单,常量是不可改变的,但是我们定义的是常量数组,它的地址是没有改变的,改变的只是放在地址里的内容。好了,那我们来看一下数组的操作。
2.数组的操作
// map
const powerArr = arr.map(x => x * x) // 新数组
console.log(powerArr)
const new_arr = arr.forEach(x => x + 10) // 无返回值
console.log(new_arr, arr)
// undefined [ 1, 2, 3, 4, 5, 6 ]
narr = []
new_Arr = arr.forEach(x => narr.push(x + 10))
console.log(new_Arr, narr)
// undefined [ 11, 12, 13, 14, 15, 16 ]
console.log(arr.filter(x => x % 2 == 0)) // 新数组
// [ 2, 4, 6 ]
先来看一个小的练习:有一个数组const arr = [1, 2, 3, 4, 5],要求算出所有元素平方值是偶数且大于10的平方值。
// 方法1
const arr = [1, 2, 3, 4, 5]
console.log(arr.filter(x => x % 2 == 0).map(x => x * x).filter(x => x > 10))
// [ 16 ]
// 方法二
s = Math.sqrt(10)
console.log(arr.filter(x => x > s && !(x % 2)).map(x => x * x))
// 方法三
let new_arr = []
arr.forEach(x => {
if (x > s && !(x % 2)){
new_arr.push(x * x)
}
})
console.log(new_arr)
提供的几种方法,思想都是先过滤,效率相对高一些,还可以直接计算,然后过滤,但是数据量比较大的时候,效率就低不少。
3. 对象的操作
const obj = {
a: 100,
b: 200,
c: 300
}
console.log(Object.keys(obj))
console.log(Object.values(obj)) // 值,试验阶段
console.log(Object.entries(obj)) // 键值对,试验阶段
/*
[ 'a', 'b', 'c' ]
[ 100, 200, 300 ]
[ [ 'a', 100 ], [ 'b', 200 ], [ 'c', 300 ] ]
*/
// assign
var obj = {
a: 100,
b: 200,
c: 300
}
var l = Object.assign({}, obj,
{a: 1000, b: 2000}, // 覆盖
{c: 'abc'}, // 覆盖
{c: 3000, d: 'python'}) // 覆盖,新增
console.log(l)
// { a: 1000, b: 2000, c: 3000, d: 'python' }
// copy
var l2 = new Object(l)
console.log(l2)
// { a: 1000, b: 2000, c: 3000, d: 'python' }