解构
Js的解构很灵活,参考
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator
数组解构
var arr = [1,2,3];
var newarr = ['a','b'];
console.log(newarr) //[ 'a', 1, 2, 3, 'b' ]
参数解构
function f(x,y,z){
console.log(x+y+z)
}
var args = [2,3,4]
f(...args)
数组解构
JS的数组解构非常强大.
const arr = [100,200,300];
let [x,y,z] = arr;
console.log(1,x,y,z)
//丢弃
const [,b,] = arr;
console.log(2,b);
//少于数组元素
const [d,e] = arr;
console.log(3,d,e);
//多于数组元素
const [m,n,o,p] = arr;
console.log(4,m,n,o,p); //多出来的元素是undefined
//可变变量
const [f,...args] = arr
console.log(5,f)
console.log(5,args);
//支持默认值
const [j=1,k,,,l=10] = arr
console.log(j,k,l);
结构时,需要提供对象的属性名,会根据属性名找到对应的值.没有找到的返回缺省值,没有缺省值就返回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=12] = arr;
console.log(g,h,i,j) // 1 [2,3] 4 12
const [k,...l] = arr;
console.log(k,l); // [[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)
数组的操作
方法 | 描述 |
---|---|
push(…items) | 尾部增加多个元素 |
pop() | 移除最后一个元素,并返回它 |
map | 引入处理函数来处理数组中每一个元素,返回新的数组 |
filter | 引入处理函数处理数组中每一个元素,此处理函数返回true的元素保留,否则该元素被过滤掉,保留的元素构成新的数组返回 |
foreach | 迭代所以元素,无返回值 |
const arr = [1,2,3,4,5]
arr.push(6,7);
console.log(arr);
arr.pop()
console.log(arr);
//map
const powerArr = arr.map(x => x*x); // 新数组
console.log(powerArr);
const newarr = arr.forEach(x => x+10); // 无返回值
console.log(newarr, arr);
narr = []
newArr = arr.forEach(x => narr.push(x+10));
console.log(newArr, narr);
console.log(arr.filter(x => x%2==0)) // 新数组
数组练习
有一个数组 const arr = [1, 2, 3, 4, 5]; ,要求算出所有元素平方值是偶数且大于10的平方值
//
console.log(arr.map(x => x * x).filter(x => x % 2 === 0).filter(x => x > 10));
// 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,ES5
console.log(Object.values(obj));
console.log(Object.entries(obj));
var obj = {
a:100,
b:200,
c:300
};
console.log(Object.keys(obj));
console.log(Object.values(obj));
console.log(Object.entries(obj));
var obj1 = Object.assign({},obj,
{a:1000,b:2000},//覆盖
{c:'abc'}, //覆盖
{c:3000,d:'python'}); //覆盖 新增
console.log(obj1)
// copy
var obj2 = new Object(obj1);
console.log(obj2)