Sunny Sun - freeCodeCamp.org

最常用的 JavaScript 数组方法（含代码示例）

Sunny Sun — Tue, 19 Apr 2022 09:30:00 +0000

原文：JavaScript Array Methods Tutorial – The Most Useful Methods Explained with Examples，作者：Yogesh Chavan

如果你是一个想提升自身编程能力的 JavaScript 开发者，那你应该对最常用的 ES5 和 ES6+ 的数组方法很熟悉。

这些方法能使编程变得更简单，并让你的代码看起来整洁易读。

在这篇文章中，我们将探索一些最受欢迎并被广泛使用的数组方法。让我们开始吧。

Array.forEach 方法

Array.forEach 方法的语法如下：

Array.forEach(callback(currentValue [, index [, array]])[, thisArg]);

forEach 方法为数组中的每一项执行一次给定的函数。

请看以下代码：

const months = ['January', 'February', 'March', 'April'];

months.forEach(function(month) {
  console.log(month);
});

/* output

January
February
March
April

*/

这里是 CodePen 演示。

在这个 forEach 循环的回调函数中，数组中的每一项都自动作为第一个参数传到函数中。

与上面例子的效果相同的 for 循环代码如下：

const months = ['January', 'February', 'March', 'April'];

for(let i = 0; i < months.length; i++) {
  console.log(months[i]);
}

/* output

January
February
March
April

*/

这里是 CodePen 演示。

要记住的一点是，这个方法不返回任何值。

请看以下代码：

const months = ['January', 'February', 'March', 'April'];
const returnedValue = months.forEach(function (month) {
  return month;
});

console.log('returnedValue: ', returnedValue); // undefined

这里是 CodePen 演示。

注意 _forEach_ 只用于循环数组，执行操作或者打印日志。它并不返回任何值，即使在回调函数中明确的返回一个值（这意味着上个例子中返回的值是 undefined ）。

在上面的所有例子中，我们都只使用了回调函数的第一个参数。但回调函数还接收两个额外的参数，它们是：

index - 当前迭代元素的索引
array - 当前循环的原始数组

const months = ['January', 'February', 'March', 'April'];

months.forEach(function(month, index, array) {
  console.log(month, index, array);
});

/* output

January 0 ["January", "February", "March", "April"]
February 1 ["January", "February", "March", "April"]
March 2 ["January", "February", "March", "April"]
April 3 ["January", "February", "March", "April"]

*/

这里是 CodePen 演示。

根据不同的需求，你会发现 index 和array 这两个参数也很有用。

forEach 相比 for 循环的优点

使用 forEach 能让你的代码量更少，且更容易理解
使用 forEach 时，我们不需要记录数组中有多少可用元素，因此可以避免创建一个额外的计数器变量。
使用 forEach 循环更方便调试，因为循环数组没有额外的变量
在数组中所有元素都迭代完，forEach 循环会自动停止。

浏览器支持

IE9 版本及以上和所有现代浏览器
Edge12 版本及以上

Array.map 方法

数组的 map 方法是所有其他方法中最有用且使用最广泛的。

Array.map 方法的语法如下：

Array.map(function callback(currentValue[, index[, array]]) {
    // Return element for new_array
}[, thisArg])

map 方法为数组中的每个元素执行一次给定的函数，并且 返回一个转换过后的新数组。

请看以下代码：

const months = ['January', 'February', 'March', 'April'];
const transformedArray = months.map(function (month) {
  return month.toUpperCase();
});

console.log(transformedArray); // ["JANUARY", "FEBRUARY", "MARCH", "APRIL"]

这里是 CodePen 演示。

在上面的代码中，回调函数将每个元素转化成大写并且返回。

与上面例子的效果相同的 for 循环代码如下：

const months = ['January', 'February', 'March', 'April'];
const converted = [];

for(let i = 0; i < months.length; i++) {
 converted.push(months[i].toUpperCase());
};

console.log(converted); // ["JANUARY", "FEBRUARY", "MARCH", "APRIL"]

这里是 CodePen 演示。

使用 map 可以避免预先创建一个单独的 转换过的 数组来存储转换过的元素。因此使用 map 可以节省储存空间，也能让代码看起来更整洁，如下：

const months = ['January', 'February', 'March', 'April'];

console.log(months.map(function (month) {
  return month.toUpperCase();
})); // ["JANUARY", "FEBRUARY", "MARCH", "APRIL"]

这里是 CodePen 演示。

注意 map 方法返回一个与原数组长度一致的新数组。

forEach 与 map 方法的区别是 forEach 只用于循环，没有任何返回值。而 map 方法返回一个与原数组长度相同的新数组。

也要注意 map 并不改变原数组而是返回一个新的数组。

请看以下代码：

const users = [
  {
    first_name: 'Mike',
    last_name: 'Sheridan'
  },
  {
    first_name: 'Tim',
    last_name: 'Lee'
  },
  {
    first_name: 'John',
    last_name: 'Carte'
  }
];

const usersList = users.map(function (user) {
  return user.first_name + ' ' + user.last_name;
});

console.log(usersList); // ["Mike Sheridan", "Tim Lee", "John Carte"]

这里是 CodePen 演示。

这里通过使用对象数组和 map 方法，我们可以轻松生成一个姓和名组合的一维数组。

上面的代码中，我们使用 + 连接符连接两个值，但通常我们会使用 ES6 的模板字符串语法，如下：

const users = [
  {
    first_name: 'Mike',
    last_name: 'Sheridan'
  },
  {
    first_name: 'Tim',
    last_name: 'Lee'
  },
  {
    first_name: 'John',
    last_name: 'Carte'
  }
];

const usersList = users.map(function (user) {
  return `${user.first_name} ${user.last_name}`;
});

console.log(usersList); // ["Mike Sheridan", "Tim Lee", "John Carte"]

这里是 CodePen 演示。

如果你想得到数组中特定的数据，数组的 map 方法也是有用的，如下：

const users = [
  {
    first_name: 'Mike',
    last_name: 'Sheridan',
    age: 30
  },
  {
    first_name: 'Tim',
    last_name: 'Lee',
    age: 45
  },
  {
    first_name: 'John',
    last_name: 'Carte',
    age: 25
  }
];

const surnames = users.map(function (user) {
  return user.last_name;
});

console.log(surnames); // ["Sheridan", "Lee", "Carte"]

这里是 CodePen 演示。

在上面的代码中，我们只把每个用户的姓提取出来，然后将它们存储在一个数组中。

我们还可以使用 map 生成一个动态内容如下：

const users = [
  {
    first_name: 'Mike',
    location: 'London'
  },
  {
    first_name: 'Tim',
    location: 'US'
  },
  {
    first_name: 'John',
    location: 'Australia'
  }
];

const usersList = users.map(function (user) {
  return `${user.first_name} lives in ${user.location}`;
});

console.log(usersList); // ["Mike lives in London", "Tim lives in US", "John lives in Australia"]

这里是 CodePen 演示。

注意在上面的代码中，我们并没有改变原始的 users 数组。我们创建了一个新的动态内容数组，因为 map 总是返回一个新的数组。

使用 map 方法的优点

可以在不改变原数组的同时快速生成一个新数组
可以基于每个元素生成一个动态内容的数组
可以快速提取数组中的任意一个元素
它能生成一个与原数组长度相同的数组

浏览器支持

IE9 版本及以上和所有现代浏览器
Edge12 版本及以上

Array.find 方法

Array.find 方法的语法如下：

Array.find(callback(element[, index[, array]])[, thisArg])

_find_ 方法返回数组中满足给定条件的 _第一个元素_的 _值_。

find 方法将 callback 函数作为第一个 argument 对象，并为数组中的每个元素执行 callback 函数。每个数组中的元素值都被作为第一个参数传到 callback 函数中。

设想我们有这样一个应聘者列表：

const employees = [
 { name: "David Carlson", age: 30 },
 { name: "John Cena", age: 34 },
 { name: "Mike Sheridan", age: 25 },
 { name: "John Carte", age: 50 }
];

我们想得到姓名是 John 的应聘者记录，在这种情况下，我们可以使用 find 方法，如下：

const employee = employees.find(function (employee) {
  return employee.name.indexOf('John') > -1;
});

console.log(employee); // { name: "John Cena", age: 34 }

这里是 CodePen 演示。

尽管列表中有 "John Carte" ，但 find 方法在第一次匹配后就会停止。因此它不会返回名为 "John Carte" 的这个对象。

与上例相同的 for 循环代码如下：

const employees = [
 { name: "David Carlson", age: 30 },
 { name: "John Cena", age: 34 },
 { name: "Mike Sheridan", age: 25 },
 { name: "John Carte", age: 50 }
];

let user;

for(let i = 0; i < employees.length; i++) {
  if(employees[i].name.indexOf('John') > -1) {
    user = employees[i];
    break;
  }
}

console.log(user); // { name: "John Cena", age: 34 }

这里是 CodePen 演示。

可以看到的是，使用普通的 for 循环会使代码量更大并且更难理解。但是使用 find 方法，我们可以通过容易理解的方式写出同样的代码。

find 方法的优点

我们可以不用写大量代码就快速找到任意一个元素
找到匹配元素后会立即停止循环，因此不用写额外的 break 语句

浏览器支持

除 IE 之外的所有现代浏览器
Edge 12 版本及以上

Array.findIndex 方法

Array.findIndex 方法的语法如下：

Array.findIndex(callback(element[, index[, array]])[, thisArg])

findIndex 方法返回数组中 满足给定测试条件 的第一个元素的索引。否则返回 -1，表示没有元素通过检测。

const employees = [
  { name: 'David Carlson', age: 30 },
  { name: 'John Cena', age: 34 },
  { name: 'Mike Sheridan', age: 25 },
  { name: 'John Carte', age: 50 }
];

const index = employees.findIndex(function (employee) {
  return employee.name.indexOf('John') > -1;
});

console.log(index); // 1

这里是 CodePen 演示。

这里我们得到的输出 1 就是名为 John 的第一个对象的索引。注意索引是从0开始的。

与上面例子的效果相同的 for 循环代码如下：

const employees = [
  { name: 'David Carlson', age: 30 },
  { name: 'John Cena', age: 34 },
  { name: 'Mike Sheridan', age: 25 },
  { name: 'John Carte', age: 50 }
];

let index = -1;

for(let i = 0; i < employees.length; i++) {
  if(employees[i].name.indexOf('John') > -1) {
    index = i;
    break;
  }
}

console.log(index); // 1

这里是 CodePen 演示。

使用 findIndex 的优点

能让我们不用写大量代码就快速找到元素的索引
找到匹配元素后会立即停止循环，因此不用写额外的 break 语句
我们也可以用 find 方法来找到索引，但是使用 findIndex 会更简单，且能避免额外创建变量来存储索引

浏览器支持

除 IE 之外的所有现代浏览器
Edge 12 版本及以上

Array.filter 方法

Array.filter 方法的语法如下：

Array.filter(callback(element[, index[, array]])[, thisArg])

filter 方法返回一个符合给定测试条件所有元素组成的 新数组 。

filter 方法将 callback 函数作为第一个 argument 对象，并为数组中的每一个元素执行该 callback 函数。数组中的每个元素值被作为第一个参数传递到 callback 函数中。

const employees = [
  { name: 'David Carlson', age: 30 },
  { name: 'John Cena', age: 34 },
  { name: 'Mike Sheridan', age: 25 },
  { name: 'John Carte', age: 50 }
];

const employee = employees.filter(function (employee) {
  return employee.name.indexOf('John') > -1;
});

console.log(employee); // [ { name: "John Cena", age: 34 }, { name: "John Carte", age: 50 }]

这里是 CodePen 演示。

从上面的代码里可以看出，使用 filter 方法能找出数组中所有符合特定检测条件的元素。

因此使用 filter ，在找到数组中符合条件的元素时也不会停止搜索其他满足条件的元素，之后会返回所有满足条件的元素。

find 与 filter 的主要区别在于 find 只返回数组中匹配的第一个元素，而 filter 返回数组中所有匹配元素。

注意 filter 方法返回的是一个数组，如果没有元素通过检测条件，将会返回一个空数组。

与上面例子的效果相同的 for 循环代码如下：

const employees = [
  { name: 'David Carlson', age: 30 },
  { name: 'John Cena', age: 34 },
  { name: 'Mike Sheridan', age: 25 },
  { name: 'John Carte', age: 50 }
];

let filtered = [];

for(let i = 0; i < employees.length; i++) {
 if(employees[i].name.indexOf('John') > -1) {
   filtered.push(employees[i]);
 }
}

console.log(filtered); // [ { name: "John Cena", age: 34 }, { name: "John Carte", age: 50 }]

这里是 CodePen 演示。

使用 filter 方法的优点

可以让我们快速找到数组中所有匹配的元素
不管有没有匹配到，都会返回一个数组，因此可以避免写额外的 if 条件
可以避免创建一个额外的变量来存储过滤后的元素

浏览器支持

IE9 及以上和所有现代浏览器
Edge 12 及以上

Array.every 方法

Array.every 方法的语法如下：

Array.every(callback(element[, index[, array]])[, thisArg])

every 方法检测数组中的所有元素是否都通过给定的条件，并且返回一个布尔值 true 或者 false 。

假设有一个数字组成的数组，想检测是否数组中的每个元素都是正数，我们可以使用 every 方法来完成。

let numbers = [10, -30, 20, 50];

let allPositive = numbers.every(function (number) {
  return number > 0;
});
console.log(allPositive); // false 

numbers = [10, 30, 20, 50];

allPositive = numbers.every(function (number) {
  return number > 0;
});
console.log(allPositive); // true

假设有一个注册表格，你想在提交前检查是否所有必填项都已输入，就可以使用 every 方法来轻松检查表单的每一项。

window.onload = function () {
  const form = document.getElementById('registration_form');
  form.addEventListener('submit', function (event) {
    event.preventDefault();
    const fields = ['first_name', 'last_name', 'email', 'city'];
    const allFieldsEntered = fields.every(function (fieldId) {
      return document.getElementById(fieldId).value.trim() !== '';
    });

    if (allFieldsEntered) {
      console.log('All the fields are entered');
      // All the field values are entered, submit the form
    } else {
      alert('Please, fill out all the field values.');
    }
  });
};

这里是 CodePen 演示。

上面 every 方法的回调函数中，我们检查表单的每一项是否都不为空，并且返回一个布尔值。

在上面的代码中，如果回调函数中，fields 数组中的每一项都返回 true ，那 every 方法就返回 true 。

如果 fields 数组中任意一个回调函数返回 false 值， every 方法就会返回 false 结果。

使用 every 方法的优点

能让我们不用写大量代码就快速检测出是否所有元素都满足特定的标准

浏览器支持

IE9 及以上和所有现代浏览器
Edge 12 及以上

Array.some 方法

Array.some 方法的语法如下：

 Array.some(callback(element[, index[, array]])[, thisArg]

some 方法检测数组中是否至少有一个元素通过给定函数的检测条件，并且返回一个 true 或 false 的布尔值。

一旦找到第一个匹配元素，会立即返回 true ，如果没有，则会返回 false 。

假定有一个数字组成的数组，我们想检测数组中是否至少包含一个正数，就可以使用 some 方法来完成。

let numbers = [-30, 40, 20, 50];

let containsPositive = numbers.some(function (number) {
  return number > 0;
});
console.log(containsPositive); // true 

numbers = [-10, -30, -20, -50];

containsPositive = numbers.every(function (number) {
  return number > 0;
});
console.log(containsPositive); // false

这里有一些使用 some 方法的有用场景：

`Some` 方法示例 1

假设有一个应聘者的列表，我们想检查某个特定的应聘者是否在这个数组中，如果有的话，同时要得到在数组总的索引位置。

因此我们可以使用 some 方法同时得到这两个值，而不用分别单独使用 find 和 findIndex 方法。

const employees = [
  { name: 'David Carlson', age: 30 },
  { name: 'John Cena', age: 34 },
  { name: 'Mike Sheridon', age: 25 },
  { name: 'John Carte', age: 50 }
];

let indexValue = -1;
const employee = employees.some(function (employee, index) {
  const isFound = employee.name.indexOf('John') > -1;
  if (isFound) {
    indexValue = index;
  }
  return isFound;
});

console.log(employee, indexValue); // true 1

这里是 CodePen 演示。

`Some` 方法示例 2

forEach、map 和 filter 方法会将数组中的所有元素从头到尾执行一次。没有终止循环的方法，除非找到特定的元素。

在这种情况下，我们可以使用数组的 some 方法。 map、forEach 和 some 方法的回调函数传递的参数都相同。

第一个参数是当前值
第二个参数是当前索引
第三个参数是原始数组

如上面例 1 中看到的，一旦找到特定的匹配值， some 方法就会停止循环。

使用 some 方法的优点

能让我们不用写大量代码就快速检测是否有匹配一定标准的元素
能快速终止循环，这是上面其他循环方法没有的

浏览器支持

IE9 及以上和所有现代浏览器
Edge 12 及以上

Array.reduce 方法

Array.reduce 方法的语法如下：

Array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

reduce 方法对数组中的每个元素执行一个由你提供的 reducer 函数，将其结果汇总为单个返回值。

注意 reduce 方法的输出总是一个单一的值。它可以是一个对象、一个数字、一个字符串、一个数组等等，这取决于你想要 reduce 方法输出那种，但它总是一个单一的值。

如果你想求数组中所有数字的和，可以用 reduce 方法。

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce(function(accumulator, number) {
  return accumulator + number; 
}, 0);

console.log(sum); // 15

这里是CodePen 演示。

reduce 方法接收一个回调函数，参数为 accumulator, number, index 和 array 。在上面的代码中，我们只使用了 accumulator 和 number。

accumulator 包含数组中要用到的 initialValue 。initialValue 决定了 reduce 方法返回的数据类型。

number 是回调函数中的第二个参数，包含循环中的每个枚举值。

上面的代码中，我们提供了 0 作为 accumulator 的 initialValue 。因此回调函数第一次执行时，accumulator + number 是 0 + 1 = 1 ，返回值是 1。

下一次回调函数运行时，accumulator + number 是 1 + 2 = 3 （这里的 1 是上次迭代返回的值，2 是数组中下一个元素）。

下一次运行，accumulator + number 就是 3 + 3 = 6（这里的第一个 3 是上次迭代的返回值，下一个 3 是数组中下一个元素），并且这会持续到数组中的 numbers 不再迭代。

因此 accumulator 会保持上一次操作的值，就像一个静态变量。

上面的代码中，initialValue 的 0 并不是必须的，因为数组中的元素都是整数。

因此下面的代码同样可行：

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce(function (accumulator, number) {
  return accumulator + number;
});

console.log(sum); // 15

这里是 CodePen 演示。

这里的 accumulator 包含数组中的第一个元素，number 包含数组中的下一个元素（第一次迭代是 1 + 2 = 3 ，第二次迭代是 3 + 3 = 6 ，以此类推）。

但搞清楚 accumulator 的 initialValue 也是很有用的，因为这能让你更容易理解 reduce 方法的返回类型，并且得到正确类型的返回值。

请看以下代码：

const numbers = [1, 2, 3, 4, 5];

const doublesSum = numbers.reduce(function (accumulator, number) {
  return accumulator + number * 2;
}, 10);

console.log(doublesSum); // 40

这里是 CodePen 演示。

这里我们给数组中的每个元素乘以 2。我们给 accumulator 提供了一个 initialValue 为 10，因此 10 被加到总和结果中，如下：

[1 * 2, 2 * 2, 3 * 2, 4 * 2, 5 * 2] = [2, 4, 6, 8, 10] = 30 + 10 = 40

假设一个有 x 和 y 坐标的对象数组，你想得到 x 坐标的和，就可以使用 reduce 方法。

const coordinates = [
  { x: 1, y: 2 }, 
  { x: 2, y: 3 }, 
  { x: 3, y: 4 }
];

const sum = coordinates.reduce(function (accumulator, currentValue) {
    return accumulator + currentValue.x;
}, 0);

console.log(sum); // 6

这里是 CodePen 演示。

使用 reduce 方法的优点

使用 reduce 可以基于数组生成任何简单或者复杂类型的数据
它能记住循环中之前的返回值，因此可以避免创建一个保存历史值的全局变量

浏览器支持

IE9 及以上和所有现代浏览器
Edge 12 及以上

感谢阅读！

想要详细学习更多包括 let 和 const、promise、数组与对象解构、数组方法、async/await、import/export 等其他 ES6+ 的特性？

点击查看我的书：《掌握现代 JavaScript》。这本书为你学习 React 做准备，并且帮助你更好的掌握 JavaScript 和 React。

也可以通过我的免费课程 React Router 介绍来从头学习 React Router。

想要紧跟最新 JavaScript、React、Node.js 的内容？在 LinkedIn 上关注我。

CSS Flexbox 布局完全指南（含示例）

Sunny Sun — Wed, 24 Feb 2021 10:10:00 +0000

本文篇幅较长，如果需要的话，你可以在这里下载文章后离线阅读。

理解 Flexbox 最好的方式是什么？学好基础，再大量练习。这正是我们要在这篇文章中做的事情。

要注意的几点

这篇文章预设你是一名中级开发者，并且对 Flexbox 有点了解，不过......
如果你对 CSS 有些了解，完全不知道 Flexbox，我写了一篇综合指南（免费文章，阅读时间约为 46 分钟）。
如果你对 CSS 掌握得不是很好，我推荐你阅读 CSS 全面（实用）指南 (74 课时的付费课程)。
你不需要遵照这里列出的示例顺序。
Flexbox 只是一种布局的技巧，实际项目中涉及到的东西除了布局还有很多。
当你看到例如 div.ohans 的例子，这代表类名是 ohans的 div

例1: 如何用 Flexbox 制作一个影片集

使用 Flexbox 实现横向纵向排列比大多数人想象的要简单。

例如一个如下的简单标识文本：

main.gallery 里有十张图片。

假定 main.gallery 覆盖整个可见屏幕。

.gallery {   min-height: 100vh}

有关图片的快速标记

图片默认是一个 inline-block 元素，有宽高，通常排列在同一行（除了图片尺寸有限定，一行排不下的情况）。

起始点

把所有图片放在一起，上面的标识文本显示效果如下：

10 张图片本身的宽高尺寸保持不变，在需要的时候自动换行，很好;)

现在，看下 Flexbox 的效果:

.gallery {    display: flex }

现在，图片的默认属性已经发生改变。它们从 inline-block 元素变成了 flex-items.

由于 .gallery 里的 Flexbox 布局，里面的图片会被压缩排列在一行内，而且它们会被纵向拉伸成这样：

图片都被纵向拉伸，并且挤在一行内，不能更丑 :(

这就是由于 Flexbox 布局的默认展示方式:

1. 将所有的子元素压在一行内，不换行。

这并不适用于图片库，因此我们可以这样改变：

.gallery {    flex-wrap: wrap}

这样所有的元素会在适当的位置换行成多行排列。

因为 wrap 值的改变，现在图片换行排列

2. 现在图片有换行，但是仍然被纵向拉伸。我们当然不想要这样变形的布局。

stretch 显示是因为 flex 里默认的 align-items 值。

align-items: stretch

我们可以改成这样：

.gallery {  ...  align-items: flex-start}

这样图片不会拉伸，而是保持它们默认的宽和高。

如下所示，它们会在纵向保持首部对齐。

现在图片都没有变形。这才是我们在使用 Flexbox 之前想要的效果

现在我们就有了使用 Flexbox 的强大图片集。

使用 Flexbox 的优点

此刻 Flexbox 似乎没展现出什么优势，图片还是像使用 Flexbox 之前一样。

除了能得到一个免费的响应式图片集外，使用 Flexbox 的另一个优势就是它的对齐选项。

还记得 flex 容器 .gallery 设定的样式 flex-direction: row justify-content: flex-start 和 align-items: flex-start.

如下所示，改变默认值，我们就可以立马改变图片库的布局。

.gallery {   ...   justify-content:center;}

图片在水平方向上完美居中

如上所示，这会让图片水平居中。

.gallery {   ...   justify-content:center;   align-items: center;}

再进一步，我们可以让图片完美居中对齐（无论是水平还是垂直）

如上所示，这可以让图片在 .gallery 内水平和垂直都居中。

你可以通过 Flexbox 的布局方式随意选择你想要的对齐选项。

也可以在 CodePen查看 Flexbox 图片库的实时布局效果。

例 2：如何通过 Flexbox 布局卡片

卡片在网上很流行，无论是Google, Twitter 还是 Pinterest，每个网站都在使用卡片。

卡片是一种在弹性容器内组合相关信息的页面设计方式，视觉上很像一种玩的卡片。

有很多使用卡片的优秀案例，其中一个常用的就是臭名昭著的价格表。

价格表模型

让我们来建一个。

标识文本

我们给每个卡片设定一个如下的标识：

这里有至少 3 个卡片，我们把这些卡片包在 div.cards里

现在已经有了一个父元素。在这个例子中，父元素充满整个视图。

.cards {   min-height: 100vh}

建立 Flexbox 布局

下面的代码块新建了一个在 .cards 里面的 Flexbox 布局样式。

.cards {  display: flex;  flex-wrap: wrap}

如果你还记得上一个例子， flex-wrap 可以让 flex-items 元素换行。

由于子元素排列需要更大的宽度，所以子元素不能在父元素内排列时就会换行。

接下来我们给 .card 元素一个初始宽度。

使用 Flexbox 如下布局:

.card {  flex: 0 0 250px}

这个样式将 flex-grow 和 flex-shrink 的值设为 0， flex-basis 值为 250px。

这时，卡片会在页面的起始处对齐，并且竖向排列。

卡片首部对齐

这有时可能满足你的使用需求，但大部分情况下，都不行。

Flex 容器的默认值

上面的布局效果是由于 flex 容器的默认布局设置。

卡片在页面内靠左上角对齐，因为 justify-content 的值默认为 flex-start 。

同时，卡片垂直拉伸充满整个父元素的高度，因为 align-items 的默认值是 stretch 。

改变默认值

我们可以通过改变 Flexbox 提供的默认值来达到更好的效果。

看下面几个例子：

align-items: flex-start; justify-content: center

align-items: flex-end; justify-content: center

align-items: center; justify-content: center

你可以在CodePen看最终的效果。

例 3：如何使用 Flexbox 创建网格布局

在这个例子中，我们要探讨整体的 CSS 框架概念，这是很重要的一点。

什么是网格布局？

网格是用来构建内容的一系列水平垂直相交引导线。

一系列水平垂直相交引导线

如果你对 Bootstrap 这样的 CSS 框架比较熟悉，那你之前一定使用过网格布局。

你所掌握的内容可能不一样，但这个例子会涵盖不同的网格布局类型。

我们先来看第一种，基本网格布局

基本网格布局

一组列宽度相同的基础网格

这些网格有以下特点：

网格单元格平均布局并充满整行。
单元格高度一致。

使用 Flexbox 很容易实现这个效果，看下面这个标识文本：

每个 .row 都是自己的 flex 容器。

.row 里的每个元素也就是 flex 元素，所有的 flex 元素都平均分布在一行中。

根据设计，无论有 3 个子元素

  1/3
  1/3
  1/3

6 个子元素

或是 12 个子元素，都是没影响的

解决方案

达到这个效果只需要两步：

新建一个 Flexbox 布局文本：

.row {   display: flex;}

2. 扩大每个 flex-item 元素，让它们以相同比例均匀的布满整行：

.row_cell {   flex: 1}

就是这样

方案解释

flex: 1

flex 是 flex-grow 、 flex-shrink 和 flex-basis 三个不同 Flexbox 属性的缩写。

flex: 1 只有 1 的值，这个值代表的是flex-grow 属性。

而 flex-shrink 和 flex-basis 则分别设置为 1 和 0。

flex: 1  === flex: 1 1 0

有确定大小的网格元素

有时候你需要的效果并不是同样大小的水平网格布局。

你可能想要一个元素是其他的两倍，或者几分之一。

水平网格布局中的元素是其他的两倍或三倍

实现方式很简单。

对于这些有确定大小的网格元素，只需要加一个这样的修饰符类：

.row_cell--2 {   flex: 2}

加上这个类，可以看到第一个 div 子元素代码如下：

  2x
  1/3
  1/3

加上 .row__cell--2 类名的元素会是其他默认元素的两倍大小。

一个占可用空间 3 倍的元素：

.row_cell--3 {
flex: 3
}

有确定对齐方式的网格元素

多亏了 Flexbox 布局，我们不需要给每个元素设置特定的对齐值。你可以给任何一个元素设定不同的对齐方式。

通过下面的修饰符类，可以达到这样的效果：

.row_cell--top {  align-self: flex-start}

这可以让特定的元素在 row 内靠顶部对齐。

应用.row\_cell — top 类可以让特定的元素在 `row` 内靠顶部对齐

你一定有在标识文本中给特定元素加上这个类。看文本中第一个 div 子元素：

下面是其他可选的对齐方式：

.row_cell--bottom {  align-self: flex-end}

给特定的元素加上.row\_cell — bottom 类会让它在 `row` 内靠底部对齐

.row_cell--center {  align-self: center}

给特定的元素加上.row\_cell — center 类会让它在 `row` 内居中对齐

行内对齐

像特定的元素可以对齐一样，行内子元素也可以整体对齐。

可以使用下面的修饰符类达到这样的效果：

.row--top {   align-items: flex-start}

一行上的三个元素都靠顶部对齐

需要注意的一个重点是，修饰符类 .row--top 一定要被加在 row 或是父元素 flex-container 上。

其他的对齐选项见下：

.row--center {   align-items: center}

整行的三个元素都居中对齐

.row--bottom {   align-items: flex-end}

整行的三个元素都靠底部对齐

嵌套网格

只需要简单的设置，rows（行元素）就可以嵌套布局。

一行内有两个元素，其中一个是另一个的两倍大小。一行三个元素居中嵌套排列在较大的元素里

你可以在 created here查看最终的布局效果。

例 4：如何使用 Flexbox 构建网站布局

社区通常不建议整个网站布局都使用 Flexbox。

虽然我赞同这个观点，但是我也认为在特定的情况下你可以不用考虑这么多。

我能给到最重要的一点建议是：

在你需要的时候使用 Flexbox 布局

我会在下面的例子中解释这点。

圣杯布局

有什么网站布局方式比“圣杯布局”更经典呢？

圣杯布局 — 头部, 页脚和 3 个其他的容器

有两种 Flexbox 方式可以实现这种布局。

第一种是用 Flexbox 来实现布局。把 header, footer, nav, article 和 aside 都放在一个 flex-container 容器里。

我们开始吧。

标识语言

看下下面这个基本的标识语言：

  Header
      Article
    Nav
    Aside
  
  Footer

其中，圣杯布局遵循了一个特殊的规则，这个规则启发了上面的标识语言：

中间的那列 article 应该在 nav 和 aside 两个侧边栏之前显示出来。

居中布局且先显示在页面上

建立一个 Flexbox 格式文本

body {   display: flex}

因为子元素应该从顶部到底部布局，所以我们要改变 Flexbox 的默认方向。

body { ... flex-direction: column}

1. header 和 footer 要有固定的宽度

header,footer {  width: 20vh /*可以使用像素单位，例如200px*/}

2.main 要填满 flex-container 中剩下的部分。

main {   flex: 1}

你一定没忘记， flex: 1 代表 flex-grow: 1 , flex-shrink: 1和 flex-basis: 0。

这可以让 `main` “变大” 填满剩下的可用空间

此刻，我们要开始考虑 main 中的 article, nav和 aside 三个部分。

把 main 设成一个 flex-container ：

main {  display: flex}

给 nav 和 aside 以固定的宽度：

nav,aside {  width: 20vw}

然后确保 article 填满剩下的可用空间：

article {   flex: 1}

现在 `"article"` 填满剩下的可用空间

现在还需要做一件事。

把 flex-items 重新排序这样 nav 会展示在第一位：

nav {  order: -1}

最终效果 https://codepen.io/ohansemmanuel/full/brzJZz/

order 属性用来重新排序 flex-items 的位置。

容器中所有 flex-items 都会以 增大的 order 值排列， flex-item 中 order 值最小的会排列在最前面。
所有的 flex-items 元素默认 order 值都是 0。

圣杯布局 (另一种布局方式)

之前的方式是把 flex-container 作为一个整体的容器。这个布局非常依赖 Flexbox。

我们来了解一种更为“理智”的方法。首先再来看下最终要达到的效果：

圣杯布局

header 和 footer 可以被当做块状元素。在没有任何干预的情况下，它们会在从顶部到底部，填满父级元素。

  Header
      Article
    Nav
    Aside
  
  Footer

使用这种方法，唯一需要作为 flex-container 的就是 main 元素。

使用这个方法有个缺点就是你要自己计算 main 的高度。 main 应该填满除 header 和 footer.外的空间。

main {  height: calc(100vh - 40vh);}

上面的代码块使用 CSS 中的 calc 来计算 main.的高度。

不管怎样， main 的高度都要等于 calc(100vh — 头部的高度 — 页脚的高度 ).

在之前的解决方案中， header 和 footer 都有一个固定的高度，接下来再通过同样的方法计算 main 的高度。

你可以在 actual results here 中查看最终效果。

两列网页布局

两列布局很常见，这也可以用 Flexbox 轻松实现。

包含边栏和主内容的两列布局

看下以下标识文本：

sidebar main

先建一个 Flexbox 格式文本：

body { display: flex;}

给 aside 一个固定的宽度：

aside { width: 20vw}

最后，确保 main 填满剩下的可用空间：

main { flex: 1}

这样就差不多可以了。

例5：使用 Flexbox 布局媒体对象

媒体对象随处可见。从 tweets 到 Facebook 上的发贴, 大部分页面设计似乎都会选择媒体对象。

Tweet 和 Facebook 上的发帖示例

看下下面这个标识文本：

Header

你应该已经猜到了， .media 会使用 Flexbox 布局：

.media { display: flex}

container 中的 flex-items 默认是在 flex-container 中垂直拉伸，填满可用高度。

确保 .media-body 填满剩下的可用空间：

.media-body { flex: 1}

左边的盒子拉伸填满可见屏幕，媒体主体在媒体对象（白色部分）内横向填满剩下的空间

我们来调整下拉伸的盒子模型。

.media { ... align-items: flex-start}

弹性项目在媒体对象中从起点对齐。现在图片保持默认大小，没有变形拉伸:)

就是这样。

画报媒体对象

画报媒体对象是图片在媒体对象的另一边（右边）

创建画报媒体对象不需要改变 html 元素的顺序。

只需要让弹性项目像这样重新排序：

.media-object { order: 1}

这样图片就会排列在 .media-body 和 media-heading 之后。

媒体对象的嵌套

你甚至可以不改变已有的 CSS 样式来继续用嵌套布局媒体对象。

Header Header

可以了！

媒体对象在其中嵌套布局

字符码媒体对象

我们不用只拘泥于图片。

在不改变已经写好的 CSS 样式情况下，你可以用字符码来代替图片。

? Header

我在那里放了一个 emoji 表情。

带有 emoji 表情的媒体对象

上面用一个包含适当表情的编码来代替 img 。你可以在这里获取更多的emoji表情。

HTML实体媒体对象

你也可以使用如下的 html实体。

☎ Header

这里使用的html实体是 ☎ ，效果如下：

html实体, ☎

你可以在 CodePen查看这些例子的效果。

例 6：如何使用Flexbox建立表单元素

现在很难找到没有一两个表单的网站了。

表格输入框，前后加其他元素

看下面这段标识文本：

… …

这个例子展示了输入框与按钮或是文字的结合，我们仍可以用 Flexbox 轻松解决。

新建一个 Flexbox 格式文本：

.form { display: flex}

确保输入框填满可用空间：

.form__field { flex: 1}

最后，你可以按照你喜欢的方式在前后放入文字或者按钮。

.form__item { ... }

你可以在 CodePen里看到这个例子的完整效果。

例 7：如何使用 Flexbox 来创建一个手机 App 布局

在这个例子中，我会带你一起来打造一个如下的手机应用布局：

我们将通过 Flexbox 建立的手机应用布局

不过这个例子有点不同。

我会解释用代码建立手机布局的过程，你可以尝试完成。

这是一个让你熟练的方式。

第一步

剥离出 iPhone 的页面布局，我们得到下面这个：

骨架屏布局

第二步

将主体部分定义成一个 flex-container

将格式化文本建立成一个弹性容器

第三步

flex-container 默认的 flex-direction 属性是 row。在这个例子中，我们要把它变成 column 。

改变 3 个子元素也就是 flex-items 的默认布局方向

第四步

给元素 1 和元素 3 一个固定的高度 height: 50px.

第五步

元素 2 要有一个填满可用空间的高度。使用flex-grow 或是简写的 flex 写法 flex: 1. 。

第六步

最后，像之前的例子一样，把每个块状元素当成一个媒体对象。

把内容块当成媒体对象

按照上面的六个步骤可以成功建立一个手机应用布局。

想要更专业？

免费下载我的 CSS 网格布局参考手册，还可以免费获得两节优质的响应式 Flexbox 课程！

点击免费获得免费的 CSS 网格布局手册 + 两节优质的课程！

现在去领

原文：The Ultimate Guide to Flexbox — Learning Through Examples，作者：Emmanuel Ohans

网站布局和设计指南，零基础也能看懂！

Sunny Sun — Thu, 16 Apr 2020 06:16:00 +0000

如果你想兼职为客户搭建网站，或只是建立自己的作品集，那么你可能面临这样的难题：

在没有任何网站设计技巧的情况下，如何建立一个网站？

有以下方案可供你选择：

你可以雇一个网站设计师——不过设计师或者说好的设计师收费不低。
你也可以在 Fiverr，Upwork, 猪八戒等等平台找一个收费低的设计师——但是你也知道这是有风险的。
或者你可以直接从网上下载一个免费甚至是高级的主题模板——不过通常这并不能满足你的所有要求

还有个方法是自己学习一些设计和布局网站的技巧，然后打造出自己的前端展现效果。

不过在你成为一名出色的设计师之前，不妨阅读一下这篇文章。当然了，如果你想制作复杂的网站，那还是得找一位专业设计师和你搭档。

但是我也相信你可以学会如何设计简单的网站，这可以应对大部分小企业的网站需求。

这个方法包括：

了解网站视觉呈现的基础
调查现有网站设计以获得灵感和想法

以上两点正是我用来建立自己网站的技巧。当然，这只是一个很简单的设计，不是特别精致。但是通常简单的设计就可以满足你的需求。

只要你掌握了设计布局网站的基础，就可以建立自己的网站或是兼职给客户定制。

当然，你可以从每一次网站设计过程中积累经验。随着技能的提升，你将可以创造出越来越复杂的设计。

以下是这个过程中的关键步骤：

确定网站的基础内容
规划网站布局
整合设计
完成作品

每一步都需要调查支撑——浏览其他网站看看他们是怎么做的，然后将其中好的部分复用到你自己的网站中。

需要重点提醒的是：我并不是鼓励你去抄袭别人的样式或者图片。（最重要的是，简单的复制粘贴并不能提升你的技能。）

我的观点是从别人优秀的作品中获得创意灵感，再创造出相似的设计。

确定网站的基础内容

在你选择颜色或是字体之前，先回答以下几个关于网站的常见问题：

1. 这个网站是用来推广哪种业务的？

披萨店？摄影工作室？还是书店？网站推广对于任何商业都是有用的，因此你可以任意选择。

我们这次选择推广名叫 Central Coffee 的虚拟咖啡店。因为人们都喜欢喝咖啡，对不对？

2. 这个网站要包含什么样的页面？

网页通用页面包括主页、关于我们、联系我们和有关公司产品的介绍。

确定页面构造最好的方法就是先做一个简单的在线调查。

调查现有网站

选择3-4个相似行业的网站，观察网站都包含哪些页面。

注意网站是如何设计的并记录下来：

网站包含哪些页面，
网站整体样式是怎样的，
导航和搜索的便捷性，
还有其他你感兴趣的方面。

Theme Forest 是一个寻找示例网站很好的地方，上面有大量免费和高级的网站模板以及主题。如果你有关注最流行的主题，就会知道他们通常是好设计的典范。

下面是一个我找到的咖啡店示例：

The7

页面：
单页网站包含以下模块：主页、关于我们、地址、价格、菜单、新闻、媒体报道、博客

样式：
现代简洁，高质图片

导航：
便捷导航

这些是我从“芝加哥的咖啡店” 研究中找到的一些网站：

The Wormhole Coffee

页面：
主页、博客、地址/联系方式、工作机会

样式：
偏现代风，店铺照片走复古风

导航：
并不很容易看出这是一家咖啡店，网站导航有点难度

Caffe Streets

页面：
单页网站，模块包含：主页、咖啡（关于我们）、菜单、烘焙、时间机器（果汁）以及联系表格

样式：
现代简约风（方格布局）

导航：
我很喜欢固定下拉菜单的设计，点击每个菜单可以看到相应的内容。

Build Coffee

页面：
单页网站，模块包括：主页、关于我们、营业时间、地址、网上商城、餐饮、活动以及联系方式

样式：
简约风，白底文字中间穿插全幅图片

导航：
很容易导航

Sawada Coffee

页面：
主页、关于我们、食品饮料、媒体报道、联系方式及营业时间、餐厅以及招聘信息

样式：
主要为图片，文字较少

导航：
导航不太容易找-我差点没注意到右边角落的侧边栏

记录下对自己网站有用的点

浏览了一些咖啡店网站之后，我们更清楚他们的相似点，心中也大致了解哪些对我们有用哪些用处不大。

基于以上调查，你可以记下对自己网站有用的点。

我认为即将建立的 Central Coffee 网站，是包含以下模块的简约风单页网站：

头部导航栏
主页
关于我们
菜单
地址/联系方式
页脚

规划网站布局

此刻我们已经勾画出这个网站有了的大致框架，接下来就是确定各个页面或者模块需要填充的内容。我们最终确定的布局也可以被称为“线框图”。

现在我们还没给这个线框图具体的设计，也就是字体、颜色或者照片都不确定。我们只需要大致清楚需要填充什么类型的内容，或是他们在页面中的位置。这更像是现阶段的结构图或是蓝图。

头部导航

我喜欢 Seven Coffee 和 Caffe Streets 的顶部导航栏。

不过这两个网站的 logo 都是居中的，我喜欢设置为靠左，首先是 logo，然后是其他部分。

这是桌面版本，对于平板电脑和手机，可以默认在顶部排列 logo 和侧边栏。

点击侧边栏，从右边展示收缩导航菜单。

主页

因为这是单页网站，“主页”就是一进入网站时在屏幕上看到的部分。我喜欢 Seven Coffee 网站店名下的小标签设计。

这里可以是一张背景图片（像是 Build Coffee）上面有文字，这样的布局同时适用于电脑和手机端。

关于我们

所有的网站的都会有简短的关于我们模块，有些是图片介绍。我准备放一段关于咖啡店的介绍文字以及一些店内环境照片，这样可以吸引用户来店里看看。

菜单

每家网站都有不同的菜单：

Seven Coffee 的菜单是一个价格表
Caffe Streets 只有商品清单
Build and Sawada 提供的是 PDF 版本菜单的外部链接

我个人不喜欢在手机上浏览网站的时候还需要下载个 PDF 文件，因此我准备提供带有图片的简易食品饮料菜单。

地址/联系方式

我想把地址、营业时间和联系方式放在页面底部。用户习惯从网站顶部开始滚动到底部，这样把有行动诉求的放在底部，当他们浏览完所有内容想着接下来的行动时，这些内容可以促进他们采取行动，特别是看到咖啡店的路线指引。

页脚

页脚部分很小，只有小块的版权信息。

完整框架

下面是我用免费在线工具 Mockflow 创建的电脑和手机版本的完整网页框架。在这个网站上创建首个项目是免费的，之后如果你还需要创建模板，就需要付费。Mockflow 很好上手，我也很喜欢这种素描风格，挺有趣的。

确定基础设计规范

再提醒一下，我们不是要制作一个很详细很漂亮的网站。不过我们也需要掌握一些基础，像是：

色彩方案

简单来说，色彩方案就是用于网站的不同颜色，就像是绘画、装修自己的家一样。通常你会大面积使用像是灰色白色的中性色调，再结合一两种明亮重点的颜色以突出重要的部分，例如链接和按钮。

如果你需要一些色彩灵感，可以尝试 sample color palettes 这样的画布。

而对于我们的网站 Central Coffee，我将使用 Canva 链接中的 Fall Collection——这是个基于棕色的暖色调。

我试图营造舒适怀旧的咖啡店风格。

字体

回到之前提到的网站，其中大部分网站都使用无衬线字体（这种字体没有衬线，或是像打印出来的文字）。

对于大部分文字内容，我会选择简单的字体，对于标题和提要则使用好看加粗的字体。

你可以通过 Google Fonts 找到适用于你网站的免费字体，但是尽量不要选择太多，因为不同的字体、字重和样式都会增加网站的加载时间。

图片/照片

选择一种适合网站商业类型的样式。对于咖啡店来说，你通常会选择吸引人的照片，像是体现灯光柔和、复古舒适的店内环境以及人们在店内轻松交谈以及店内的食品饮料的图片。

你也可以从免费的设计网站上找到适合你网站的配图和 logo，例如：

建立网站

现在我们已经有了展示各个部分布局的线框图，也有关于前端样式的设计指南。

因为我们没有可以给出详细 PSD 的设计师，所以可以直接对照着之前建造的框架来开始编写我们的网站。

我通常编写网站前端的步骤如下：

建立网站文件
构建文件结构
让任务跑起来（我用的是 Gulp）
为每个模板建立单独的 HTML 文件

接下来对于每个 HTML 文件进行以下步骤：

创建基础 HTML 元素的框架
一个个编写页面元素
为每个元素加入 css 样式，首先要确保每块内容的正确布局
检查页面在浏览器中的展示，并继续修改优化

确保你的网页是响应式的

在编写网站时，应该确保你的样式在电脑、平板以及手机上展现的样式是差不多的。

你可以在电脑上检查不同浏览器的显示样式，而对于手机端，你也可以使用谷歌浏览器的开发者工具来模拟不同手机设备的显示效果。

要知道模拟工具不会百分百模拟出你实际在手机或是平板上看到的效果，因此最终还是要在真机上检查实际显示效果。

有以下网站可供模拟移动设备调试：

Responsinator.com （免费）
Screenfly by Quirktools （免费）
Browserstack （收费）——Browserstack 可以让你在真机上调试效果。

作品完成!

这张是完成后的 Central Coffee 网站截图

你也可以通过 on my Github.io page 自己检查下网站效果。

以上就是我在没有聘请设计师的情况下自己设计建立的网站。

希望这篇文章对你有用。如果你有任何想法也可以在下方评论区留言。

想浏览更多内容?

◾️ 可以在我的博客 Coder-Coder.com.上阅读更多类似这样的对你有帮助的文章。
◾️ 在 Instagram 和 Twitter 上关注我!
◾️ 在我的Youtube频道 my YouTube channel 查看编码指导。

原文：https://www.freecodecamp.org/news/how-to-layout-and-design-a-website-without-any-design-skills-86d94e40b55a/ ，作者：Jessica Chan

Sunny Sun - freeCodeCamp.org

最常用的 JavaScript 数组方法（含代码示例）

Array.forEach 方法

forEach 相比 for 循环的优点

浏览器支持

Array.map 方法

使用 map 方法的优点

Array.find 方法

find 方法的优点

Array.findIndex 方法

使用 findIndex 的优点

Array.filter 方法

使用 filter 方法的优点

Array.every 方法

使用 every 方法的优点

浏览器支持

Array.some 方法

Some 方法示例 1

Some 方法示例 2

使用 some 方法的优点

浏览器支持

Array.reduce 方法

使用 reduce 方法的优点

浏览器支持

感谢阅读！

CSS Flexbox 布局完全指南（含示例）

要注意的几点

例1: 如何用 Flexbox 制作一个影片集

有关图片的快速标记

起始点

使用 Flexbox 的优点

例 2：如何通过 Flexbox 布局卡片

标识文本

建立 Flexbox 布局

Flex 容器的默认值

改变默认值

例 3：如何使用 Flexbox 创建网格布局

什么是网格布局？

基本网格布局

解决方案

方案解释

有确定大小的网格元素

有确定对齐方式的网格元素

行内对齐

嵌套网格

更多网格布局

例 4：如何使用 Flexbox 构建网站布局

圣杯布局

标识语言

圣杯布局 (另一种布局方式)

两列网页布局

例5：使用 Flexbox 布局媒体对象

Header

画报媒体对象

媒体对象的嵌套

Header

Header

字符码媒体对象

Header

HTML实体媒体对象

Header

例 6：如何使用Flexbox建立表单元素

例 7：如何使用 Flexbox 来创建一个手机 App 布局

第一步

第二步

第三步

第四步

第五步

第六步

想要更专业？

网站布局和设计指南，零基础也能看懂！

确定网站的基础内容

调查现有网站

The7

The Wormhole Coffee

Caffe Streets

Build Coffee

Sawada Coffee

记录下对自己网站有用的点

规划网站布局

`Some` 方法示例 1

`Some` 方法示例 2