前言

FreeCodeCamp是一个以“帮助人们免费学习编程”为主旨的非营利性组织，其网站收录了众多训练式题目。作为前端入门有较大的帮助。

英文版（源）地址：www.freecodecamp.org/

中文社区：chinese.freecodecamp.org/forum/t/top…

此系列博文为相关知识点记录，算是自己对前端入门的一个回顾。有空还是强烈建议去刷一遍原题+知识点

数据存储

在 JavaScript 和其他编程语言中，我们都可以以多种方式存储和访问数据。本节将教你如何使用数组（array），以及如何访问和复制数组中的信息。本节还将教你如何用点符号和方括号符号来操作和访问 JavaScript 对象（object）中的信息。在你完成本节之后，你应该掌握数组和对象的基本属性以及它们之间的区别，并且掌握如何选择它们来实现给定的目标。

开始

使用数组存储数据集合
- 所有数组都有一个长度（length）属性。你可以简单地使用Array.length方法来访问它。
使用方括号访问数组的内容
- 在一个数组结构中，其内部的每个元素都有一个与之对应的索引（index）。索引是该元素在数组中的位置，可被用于引用该元素。但需要注意的是，JavaScript 数组的索引是从0开始的（zero-indexed），即一个数组的第一个元素是在数组中的第 0 个位置，而不是第 1 个位置。
- 要从一个数组中获取一个元素，我们可以在一个数组变量名的后面加一个使用“方括号”括起来的索引。这叫做方括号符号（bracket notation）。
使用 push() 和 unshift() 添加项目到数组中
- 对一个数组调用这两个方法都可以将输入的元素插入到该数组中；push()方法将元素插入到一个数组的末尾，而unshift()方法将元素插入到一个数组的开头
使用 pop() 和 shift() 从数组中删除项目
- 使用pop()和shift()来移除输入的数组的第一个元素和最后一个元素，并将这两个被移除的元素赋值给对应的变量，使得返回的数组包含它们的值。
使用 splice() 删除项目
- splice()让我们可以从数组中的任意位置移除任意数量的连续的元素。
- splice()最多可以接受 3 个参数，但现在我们先关注前两个。splice()接收的前两个参数基于调用splice()数组中元素的索引。记住，数组的索引是从 0 开始的（zero-indexed），所以我们要用0来指示数组中的第一个元素。splice()的第一个参数代表从数组中的哪个索引开始移除元素，而第二个参数指示要从数组中删除多少个元素
- splice()不仅从被调用的数组中移除元素，还会返回一个包含被移除元素的数组：
使用 splice() 增加项目
- 除了移除元素，我们还可以利用它的第三个参数来向数组中添加元素。第三个参数可以是一个或多个元素，这些元素会被添加到数组中。这使我们能够便捷地将数组中的一个或一系列元素换成其他的元素

function htmlColorNames(arr) {
  // 请把你的代码写在这条注释以下
  arr.splice(0, 2, 'DarkSalmon', 'BlanchedAlmond')
  // 请把你的代码写在这条注释以上
  return arr;
}

使用 slice() 拷贝数组项目
- slice()并不修改数组，而是复制或者说提取（extract）给定数量的元素到一个新数组里，而调用方法的数组则保持不变。slice()只接受 2 个输入参数—第一个是开始提取元素的位置（索引），第二个是结束提取元素的位置（索引）。slice 方法会提取直到该索引的元素，但被提取的元素不包括该索引对应的元素
使用扩展运算符复制数组
- ES6 中又新引入了一个简洁且可读性强的语法展开运算符（spread operator），它能让我们方便地复制数组中的所有元素。展开语法是这样的：...

function copyMachine(arr, num) {
  let newArr = [];
  while (num >= 1) {
    // 请把你的代码写在这条注释以下
    newArr.push([...arr]);
    // 请把你的代码写在这条注释以上
    num--;
  }
  return newArr;
}

// 你可以修改这行代码来测试不同的输入：
console.log(copyMachine([true, false, true], 2));

组合使用数组和扩展运算符
- 展开运算符的另一个大用处是合并数组，或者将某个数组的所有元素插入到另一个数组的任意位置。用传统的语法我们也可以连接两个数组，但只能两个数组首尾相接。而展开语法能使下面的操作变得极其简单：

let thisArray = ['sage', 'rosemary', 'parsley', 'thyme'];

let thatArray = ['basil', 'cilantro', ...thisArray, 'coriander'];
// thatArray 现在等于 ['basil', 'cilantro', 'sage', 'rosemary', 'parsley', 'thyme', 'coriander']

使用 indexOf() 检查元素是否存在
- indexOf()。这个方法让我们可以便捷地检查某个元素是否存在于一个数组中。indexOf()方法接受一个元素作为输入参数，并返回该元素在数组中的位置（索引）；若该元素不存在于数组中则返回-1

let fruits = ['apples', 'pears', 'oranges', 'peaches', 'pears'];

fruits.indexOf('dates') // 返回 -1
fruits.indexOf('oranges') // 返回 2
fruits.indexOf('pears') // 返回 1，即第一个出现的 'pears' 元素在数组中的索引为 1

使用 For 循环迭代数组的所有项

function greaterThanTen(arr) {
  let newArr = [];
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] > 10) {
      newArr.push(arr[i]);
    }
  }
  return newArr;
}

greaterThanTen([2, 12, 8, 14, 80, 0, 1]);
// 返回 [12, 14, 80]

创建复杂的多维数组
- 数组的一个强大的特性是，它可以包含其他数组，甚至完全由其他数组组成。我们已经在上一个挑战中看到了包含数组的数组，但它还算是比较简单的。数组中的数组还可以包含其他数组，数组中是可以嵌套任意层的数组的。从而数组可以被用来实现非常复杂的叫做多维（multi-dimensional）或嵌套（nested）数组。

let nestedArray = [ // 顶层，或第 1 层——最外层的数组
  ['deep'], // 数组中的数组，第 2 层
  [
    ['deeper'], ['deeper'] // 第 3 层嵌套的两个数组
  ],
  [
    [
      ['deepest'], ['deepest'] // 第 4 层嵌套的两个数组
    ],
    [
      [
        ['deepest-est?'] // 第 5 层嵌套的一个数组
      ]
    ]
  ]
];

将键值对添加到对象中
- 对象（object）本质上是键值对（key-value pair）的集合，或者说，一系列被映射到唯一标识符（叫做属性（property）或者键（key））的数据
数据结构基础：修改嵌套在对象中的对象
- 对象中也可以嵌套任意层的对象。对象的属性值可以是 JavaScript 支持的任意类型，包括数组和其他对象。
使用方括号访问属性名称
使用 delete 关键字删除对象属性
检查对象是否具有某个属性
- 个是hasOwnProperty()方法，另一个是in关键字。如果我们有一个users对象，它有一个Alan属性，我们可以用以下两种方式之一来检查该属性在对象中是否存在：

users.hasOwnProperty('Alan');
'Alan' in users;
// 都返回 true

使用 for...in 语句迭代对象
- 跟数组不同，对象中的键是无序的，因此一个对象中某个键的位置，或者说它出现的相对顺序，在引用或访问该键时是不确定的。

let users = {
  Alan: {
    age: 27,
    online: false
  },
  Jeff: {
    age: 32,
    online: true
  },
  Sarah: {
    age: 48,
    online: false
  },
  Ryan: {
    age: 19,
    online: true
  }
};

function countOnline(obj) {
  // 请把你的代码写在这条注释以下
  var count = 0;
  // console.log(users.Alan.online);
  for(let user in obj){
    console.log(obj[user]['online']);
    if(obj[user]['online']) count++;
  }
  return count;
  // 请把你的代码写在这条注释以上
}

// console.log(countOnline(users));

使用 Object.keys() 生成对象所有键组成的数组
- 还可以输入一个对象作为参数来调用Object.keys()方法，使其生成一个包含对象中所有键的数组。这会返回一个由对象中所有键的名称（字符串）组成的数组。再次说明，这个数组中的项的顺序是不确定的。
- 请你完成getArrayOfUsers函数，使其返回一个包含输入的对象的所有属性的数组。

let users = {
  Alan: {
    age: 27,
    online: false
  },
  Jeff: {
    age: 32,
    online: true
  },
  Sarah: {
    age: 48,
    online: false
  },
  Ryan: {
    age: 19,
    online: true
  }
};

function getArrayOfUsers(obj) {
  // 请把你的代码写在这条注释以下
  return Object.keys(obj);
  // 请把你的代码写在这条注释以上
}

修改存储在对象中的数组

请你看一下代码编辑器中我们提供的对象。user对象包含 3 个键。data对象包含 5 个键，其中一个包含一个friends数组。从这个例子你可以看到对象作为数据结构是多么的灵活。我们已经写了addFriend函数的一部分，请你完成这个函数，使其接受一个user对象，将friend参数中的名字添加到user.data.friends数组中并返回该数组。
let user = {
  name: 'Kenneth',
  age: 28,
  data: {
    username: 'kennethCodesAllDay',
    joinDate: 'March 26, 2016',
    organization: 'freeCodeCamp',
    friends: [
      'Sam',
      'Kira',
      'Tomo'
    ],
    location: {
      city: 'San Francisco',
      state: 'CA',
      country: 'USA'
    }
  }
};

function addFriend(userObj, friend) {
  // 请把你的代码写在这条注释以下
  userObj['data']['friends'].push(friend);
  return userObj['data']['friends'];
  // 请把你的代码写在这条注释以上
}

console.log(addFriend(user, 'Pete'));

FreeCodeCamp学习总结-数据存储部分

前言

数据存储

开始