數(shù)組排序
一再登、reverse
反轉(zhuǎn)數(shù)組順序
let arr = [1, 4, 2, 9];
console.log(arr.reverse()); //[9, 2, 4, 1]
二尔邓、sort
sort每次使用兩個值進(jìn)行比較 Array.sort((a,b)=>a-b
返回負(fù)數(shù) a 排在 b前面晾剖，從小到大
返回正數(shù) b 排在a 前面
返回 0 時不動
默認(rèn)從小于大排序數(shù)組元素
let arr = [1, 4, 2, 9];
console.log(arr.sort()); //[1, 2, 4, 9]
使用排序函數(shù)從大到小排序锉矢，參數(shù)一與參數(shù)二比較梯嗽，返回正數(shù)為降序負(fù)數(shù)為升序
let arr = [1, 4, 2, 9];
console.log(arr.sort(function (v1, v2) {
return v2 - v1;
})); //[9, 4, 2, 1]
下面是按課程點擊數(shù)由高到低排序
let lessons = [
{ title: "媒體查詢響應(yīng)式布局", 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);
循環(huán)遍歷
一沽损、for
根據(jù)數(shù)組長度結(jié)合for 循環(huán)來遍歷數(shù)組
let lessons = [
{title: '媒體查詢響應(yīng)式布局',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使函數(shù)作用在每個數(shù)組元素上，但是沒有返回值绵估。
下面例子是截取標(biāo)簽的五個字符炎疆。
let lessons = [
{title: '媒體查詢響應(yīng)式布局',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 值為數(shù)組的索引
let lessons = [
{title: '媒體查詢響應(yīng)式布局',category: 'css'},
{title: 'FLEX 彈性盒模型',category: 'css'},
{title: 'MYSQL多表查詢隨意操作',category: 'mysql'}
];
for (const key in lessons) {
console.log(`標(biāo)題: ${lessons[key].title}`);
}
四国裳、for/of
與 for/in 不同的是 for/of 每次循環(huán)取其中的值而不是索引形入。
let lessons = [
{title: '媒體查詢響應(yīng)式布局',category: 'css'},
{title: 'FLEX 彈性盒模型',category: 'css'},
{title: 'MYSQL多表查詢隨意操作',category: 'mysql'}
];
for (const item of lessons) {
console.log(`
標(biāo)題: ${item.title}
欄目: ${item.category == "css" ? "前端" : "數(shù)據(jù)庫"}
`);
}
使用數(shù)組的迭代對象遍歷獲取索引與值（有關(guān)迭代器知識后面章節(jié)會講到）
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'}
這樣就可以使用解構(gòu)特性與 for/of 遍歷并獲取索引與值了
const hd = ["rose", "jeck"];
for (const [key, value] of hd.entries()) {
console.log(key, value); //這樣就可以遍歷了
}
取數(shù)組中的最大值
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());
獲取數(shù)組所有鍵
"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());
獲取數(shù)組的所有值
"use strict";
const arr = ["a", "b", "c", "rose"];
for (const value of arr.values()) {
console.log(value);
}
三亿遂、entries
返回數(shù)組所有鍵值對，下面使用解構(gòu)語法循環(huán)
const arr = ["a", "b", "c", "rose"];
for (const [key, value] of arr.entries()) {
console.log(key, value);
}
解構(gòu)獲取內(nèi)容（對象章節(jié)會詳細(xì)講解）
const hd = ["jeck", "rose"];
const iterator = hd.entries();
let {done,value: [k, v]} = iterator.next();
console.log(v);
