STAY HUNGRY , STAY FOOLISH.

求知若饥，虚心若愚。

| ES6, JavaScript        浏览:

Array和Object

继续ES6的学习，重点会讲到一些没怎么使用的高阶函数。只讲Array和Object。

ES6

1.数组Array

1.转换一个像数组的对象到数组

1
2
3
4
5
6
7
/**
 * 如：NodeList转Array
 */
const divs = document.querySelectorAll('div');
Array.isArray(divs); //false
const node = Array.from(divs);
Array.isArray(node); //true

2.增删单个选项

1
2
3
4
5
6
7
8
9
10
/**
 * push、pop 从数组最后一个开始添加、删除
 * unshift、shift 从数组开头一个开始添加、删除
 */
let arr = [1, 2, 3];
arr.push(4);// arr [1, 2, 3, 4]
arr.pop();// arr [1, 2, 3]

arr.unshift(4); // arr [4, 1, 2, 3]
arr.shift(); // arr [1, 2, 3]

3.合并插入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
 * concat 合并两个或多个数组
 * join 数组链接成字符串
 * splice(startIndex, 0添加 非0删除个数, 添加的值)
 * 删除现有元素的内容，或插入现有元素的内容
 */
let a1 = [1, 2];
let a2 = [3, 4, 5];
let a3 = a1.concat(b2); // a3 [1, 2, 3, 4, 5]

let str = a3.join(); // str '1,2,3,4,5'
let str2 = a3.join(''); // str '12345'
 
let arr = [1, 2, 3];
arr.splice(1,0,4); // arr [1, 4, 2, 3]
arr.splice(0,1); // arr [4, 2, 3]

4.排序倒序

1
2
3
4
5
6
7
8
/**
 * sort 排序
 * reverse 倒序
 */
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
arr.sort(); // arr [1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9] error
arr.sort((a, b) => { return a - b });// arr [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] right
arr.reverse(); // arr [11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]

尽管上面的东西很多，但在做真实项目的时候，还是感觉功能很少，尤其是遇到JSON对象的数组。
下面来讲解Array的高阶函数：map、filter、reduce、find、findIndex、every、some。

5.遍历数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let items = [
	{
		name: '1',
	}, {
		name: '2',
	}, {
		name: '3'
	}
];
//bad 循环
for(let i = 0, len = items.length; i < len; i++){
	items[i]['selected'] = false;
}
//best 使用map(element, index, array)
items.map(element => element['selected'] = false);

6.过滤筛选

1
2
3
4
5
6
7
8
9
10
let items = [1, 2, 3, 4];
let nitems = [];
// bad循环过滤
for(let i = 0,len = items.length; i < len; i++){
	if (items[i] > 2) {
		nitems.push(items[i]);
	}
}
// best 使用filter(element, index, array)
nitems=items.filter(element => element > 2);

7.统计求和

1
2
3
4
5
6
7
8
let items = [1, 2, 3, 4];
//bad 循环
let count = 0;
for (let i = 0,len = items.length; i < len; i++) {
	count += items[i];
}
//best 使用reduce(accumulator, currentValue, currentIndex, array)
let count = items.reduce((memo, item, index) => { return memo + item });

8.查找某个选项的值或索引

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let items = [
	{
		name: '1',
		selected: false
	}, {
		name: '2',
		selected: true
	}, {
		name: '3',
		selected: false
	}
];
//bad 循环 不演示了

//best 使用find(element, index, array)、findIndex(element, index, array)
let item = items.find(element => element['selected']);
let itemIndex = items.findIndex(element => element['selected']);

9.检测所有元素或部分元素

1
2
3
4
5
6
7
8
9
10
let items = [1, 2, 3, 4, 5, 6];
//bad 循环 不演示了

//是否都大于5
//best 使用every(element, index, array)
let isAllOver5 = items.every(element => element > 5); //false

//是否有大于5
//best 使用some(element, index, array)
let isHasOver5 = items.some(element => element > 5); //true

10.复制数组

1
2
let items = [1, 2, 3, 4];
let itemsCopy = [...items]; // itemsCopy [1, 2, 3, 4]

2.Object

1.复制对象

1
2
3
4
5
6
7
8
9
10
let item = { title:'选项1', count:2 };
/*very bad*/
let copy1 = Object.assign(item,{selected:true});
/*bad*/
let copy2 = Object.assign({}, item,{selected:true});
/*good*/
let copy3 = {...item, selected:true };

let {title,...noTitle} = item;

2.获取对象键或值

1
2
3
4
5
6
7
let arr = [1, 2, 3];
let keys = Object.key(arr); // keys ["0", "1", "2"]
let values = Object.values(arr); // values [1, 2, 3]

let json = {name:"ww", age:24, gender:"mail"};
let jkeys = Object.keys(json); // jkeys ["name", "age", "gender"]
let jvalues = Object.values(json); // jvalues ["ww", 24, "mail"]

3.对象转数组

1
2
3
4
5
let arr = [1, 2, 3];
let arrs = Object.entries(arr); //arrs [["0",1], ["1",2], ["2",3]]

let json = {name:"ww", age:24, gender:"mail"};
let jarrs = Object.entries(json); //jarrs [["name","ww"], ["age",24], ["gender","mail"]]