数组排序
一、reverse
反转数组顺序
let arr = [1, 4, 2, 9];
console.log(arr.reverse()); //[9, 2, 4, 1]
二、sort
sort每次使用两个值进行比较 Array.sort((a,b)=>a-b
返回负数 a 排在 b前面，从小到大
返回正数 b 排在a 前面
返回 0 时不动
默认从小于大排序数组元素
let arr = [1, 4, 2, 9];
console.log(arr.sort()); //[1, 2, 4, 9]
使用排序函数从大到小排序，参数一与参数二比较，返回正数为降序负数为升序
let arr = [1, 4, 2, 9];
console.log(arr.sort(function (v1, v2) {
return v2 - v1;
})); //[9, 4, 2, 1]
下面是按课程点击数由高到低排序
let lessons = [
{ title: "媒体查询响应式布局", click: 78 },
{ title: "FLEX 弹性盒模型", click: 12 },
{ title: "MYSQL多表查询随意操作", click: 99 }
];
let sortLessons = lessons.sort((v1, v2) => v2.click - v1.click);
console.log(sortLessons);
三、排序原理
let arr = [1, 5, 3, 9, 7];
function sort(array, callback) {
for (const n in array) {
for (const m in array) {
if (callback(array[n], array[m]) < 0) {
let temp = array[n];
array[n] = array[m];
array[m] = temp;
}
}
}
return array;
}
arr = sort(arr, function(a, b) {
return a - b;
});
console.table(arr);
循环遍历
一、for
根据数组长度结合for 循环来遍历数组
let lessons = [
{title: '媒体查询响应式布局',category: 'css'},
{title: 'FLEX 弹性盒模型',category: 'css'},
{title: 'MYSQL多表查询随意操作',category: 'mysql'}
];
for (let i = 0; i < lessons.length; i++) {
lessons[i] = `后盾人: ${lessons[i].title}`;
}
console.log(lessons);
二、forEach
forEach使函数作用在每个数组元素上，但是没有返回值。
下面例子是截取标签的五个字符。
let lessons = [
{title: '媒体查询响应式布局',category: 'css'},
{title: 'FLEX 弹性盒模型',category: 'css'},
{title: 'MYSQL多表查询随意操作',category: 'mysql'}
];
lessons.forEach((item, index, array) => {
item.title = item.title.substr(0, 5);
});
console.log(lessons);
三、for/in
遍历时的 key 值为数组的索引
let lessons = [
{title: '媒体查询响应式布局',category: 'css'},
{title: 'FLEX 弹性盒模型',category: 'css'},
{title: 'MYSQL多表查询随意操作',category: 'mysql'}
];
for (const key in lessons) {
console.log(`标题: ${lessons[key].title}`);
}
四、for/of
与 for/in 不同的是 for/of 每次循环取其中的值而不是索引。
let lessons = [
{title: '媒体查询响应式布局',category: 'css'},
{title: 'FLEX 弹性盒模型',category: 'css'},
{title: 'MYSQL多表查询随意操作',category: 'mysql'}
];
for (const item of lessons) {
console.log(`
标题: ${item.title}
栏目: ${item.category == "css" ? "前端" : "数据库"}
`);
}
使用数组的迭代对象遍历获取索引与值（有关迭代器知识后面章节会讲到）
const hd = ['rose', 'jeck'];
const iterator = hd.entries();
console.log(iterator.next()); //value:{0:0,1:'rose'}
console.log(iterator.next()); //value:{0:1,1:'jeck'}
这样就可以使用解构特性与 for/of 遍历并获取索引与值了
const hd = ["rose", "jeck"];
for (const [key, value] of hd.entries()) {
console.log(key, value); //这样就可以遍历了
}
取数组中的最大值
function arrayMax(array) {
let max = array[0];
for (const elem of array) {
max = max > elem ? max : elem;
}
return max;
}
console.log(arrayMax([1, 3, 2, 9]));
迭代器方法
一、keys
通过迭代对象获取索引
const hd = ["rose", "jeck"];
const keys = hd.keys();
console.log(keys.next());
console.log(keys.next());
获取数组所有键
"use strict";
const arr = ["a", "b", "c", "rose"];
for (const key of arr.keys()) {
console.log(key);
}
使用while遍历
let arr = ["rose", "jeck"];
while (({ value, done } = values.keys()) && done === false) {
console.log(value);
}
二、values
通过迭代对象获取值
const hd = ["rose", "jeck"];
const values = hd.values();
console.log(values.next());
console.log(values.next());
console.log(values.next());
获取数组的所有值
"use strict";
const arr = ["a", "b", "c", "rose"];
for (const value of arr.values()) {
console.log(value);
}
三、entries
返回数组所有键值对，下面使用解构语法循环
const arr = ["a", "b", "c", "rose"];
for (const [key, value] of arr.entries()) {
console.log(key, value);
}
解构获取内容（对象章节会详细讲解）
const hd = ["jeck", "rose"];
const iterator = hd.entries();
let {done,value: [k, v]} = iterator.next();
console.log(v);
