FreeCodeCamp学习总结-JavaScript部分

597 阅读11分钟

前言

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

英文版(源)地址:www.freecodecamp.org/

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

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

JS

JavaScript 是一门所有现代 Web 浏览器都支持的高级编程语言。它跟你之前可能学过的 HTML 和 CSS 一样,也是 web 的一种核心技术。本节会介绍 JavaScript 编程中的一些基本概念,从变量和算术运算讲到对象和循环。 //过于简单的就不写了

  • 给代码添加注释
  • 声明变量
    • JavaScript 提供七种不同的数据类型,它们是undefined(未定义), null(空),boolean(布尔型),string(字符串),symbol(符号),number(数字),和object(对象)。
    • var xxx;
  • 使用赋值运算符存储值
    • 赋值过程是从右到左进行的。在将值分配给运算符左侧的变量之前,将解析=运算符右侧的所有内容。
  • 使用赋值运算符初始化变量
  • 理解未初始化的变量
    • 当 JavaScript 中的变量被声明的时候,程序内部会给它一个初始值undefined。当你对一个值为undefined的变量进行运算操作的时候,算出来的结果将会是NaN,NaN的意思是"Not a Number"。当你用一个值是undefined的变量来做字符串拼接操作的时候,它会输出字符串"undefined"。
  • 了解变量名区分大小写
    • 使用驼峰命名法来书写一个 Javascript 变量,在驼峰命名法中,变量名的第一个单词的首写字母小写,后面的单词的第一个字母大写。
  • 加法运算
  • 减法运算
  • 乘法运算
  • 除法运算
  • 数字递增
  • 数字递减
  • 创建一个小数
  • 两个小数相乘
  • 两个小数相除
  • 求余运算%
  • 复合赋值之 +=
  • 复合赋值之 -=
  • 复合赋值之 *=
  • 复合赋值之 /=
  • 声明字符串变量
  • 转义字符串中的引号
    • 在 JavaScript 中,你可以通过在引号前面使用反斜杠(\)来转义引号。
  • 用单引号引用字符串
var myStr = '<a href="http://www.example.com" target="_blank">Link</a>';
  • 字符串中的转义序列
var myStr='FirstLine\n\t\\SecondLine\nThirdLine'; // 请修改这一行
  • 用加号运算符连接字符串
  • 用 += 运算符连接字符串
  • 用变量构造字符串
  • 将变量附加到字符串
  • 查找字符串的长度
    • 可以通过在字符串变量或字符串后面写上.length来获得字符串变量字符串值的长度。
  • 使用方括号查找字符串中的第一个字符
    • 方括号表示法是一种在字符串中的特定index(索引)处获取字符的方法。大多数现代编程语言,如JavaScript,不同于人类从 1 开始计数。它们是从 0 开始计数,这被称为 基于零 的索引。
  • 了解字符串的不变性
    • 在 JavaScript 中,字符串的值是 不可变的,这意味着一旦字符串被创建就不能被改变。
    • 改变myStr中的唯一方法是重新给它赋一个值
  • 使用方括号查找字符串中的第N个字符
  • 使用方括号查找字符串中的最后一个字符
  • 使用方括号查找字符串中的第N个字符到最后一个字符
  • 填词造句
  • 使用 JavaScript 数组将多个值存储在一个变量中(可以多数据类型)
  • 将一个数组嵌套在另一个数组中
  • 通过索引访问数组中的数据
  • 通过索引修改数组中的数据
  • 使用索引访问多维数组
  • 使用 push() 操作数组
    • push()接受把一个或多个参数,并把它“推”入到数组的末尾。
  • 使用 pop() 操作数组
    • 我们可以把这个“抛出”的值赋给一个变量存储起来。换句话说就是.pop()函数移除数组末尾的元素并返回这个元素。
  • 使用 shift() 操作数组
    • 它移除的是第一个元素,而不是最后一个。
  • 使用 unshift() 操作数组
    • .unshift()函数用起来就像.push()函数一样, 但不是在数组的末尾添加元素,而是在数组的头部添加元素。
  • 购物清单
  • 用函数编写可重用代码
  • 将值传递给带有参数的函数
  • 全局作用域和函数
    • 在 JavaScript 中,作用域涉及到变量的作用范围。在函数外定义的变量具有 全局 作用域。这意味着,具有全局作用域的变量可以在代码的任何地方被调用。
    • 这些没有使用var关键字定义的变量,会被自动创建在全局作用域中,形成全局变量。当在代码其他地方无意间定义了一个变量,刚好变量名与全局变量相同,这时会产生意想不到的后果。因此你应该总是使用var关键字来声明你的变量。
  • 局部作用域和函数
    • 在一个函数内声明的变量,以及该函数的参数都是局部变量,意味着它们只在该函数内可见
  • 函数中的全局作用域和局部作用域
    • 局部变量将会优先于全局变量。
  • 函数可以返回某个值
  • 函数也可以返回 undefined
    • 在函数没有return语句的情况下,当你调用它时,该函数会执行内部代码,返回的值是undefined。
  • 用返回值来赋值
  • 排队
    • 队列(queue)是一个抽象的数据结构,队列中的条目都是有秩序的。新的条目会被加到队列的末尾,旧的条目会从队列的头部被移出。
  • 理解布尔值
  • 用 if 语句来表达条件逻辑
  • 相等运算符
    • 在 JavaScript 中,为了让两个不同的数据类型(例如数字和字符串)的值可以作比较,它必须把一种类型转换为另一种类型。
  • 严格相等运算符
    • 严格相等运算符(===)是相对相等操作符(==)的另一种比较操作符。与相等操作符不同的是,它会同时比较元素的值和数据类型。
  • 比较不同值
  • 不等运算符
  • 严格不等运算符
  • 大于运算符
  • 大于或等于运算符
  • 小于运算符
  • 小于或等于运算符
  • 逻辑与运算符
  • 逻辑或运算符
  • 介绍 else 语句
  • 介绍 else if 语句
  • if else 语句中的逻辑顺序
  • 多个 if else 语句
  • 高尔夫代码
  • 使用 Switch 语句从许多选项中进行选择
  • 在 Switch 语句中添加默认选项
  • 用一个 Switch 语句来替代多个 if else 语句
  • 从函数返回布尔值
  • 函数执行到 return 语句就结束
  • 21点游戏
  • 新建 JavaScript 对象
    • 对象和数组很相似,数组是通过索引来访问和修改数据,而对象是通过属性来访问和修改数据
    • 对象适合用来存储结构化数据
var myDog = {
    "name": "Camper",
  "legs": 4,
  "tails": 1,
  "friends": ["everything!"]
};

  • 通过点符号访问对象属性
var hatValue = testObj.hat;      // 请修改这一行
var shirtValue = testObj.shirt;    // 请修改这一行
  • 通过方括号访问对象属性
var entreeValue = testObj["an entree"];   // 请修改这一行
var drinkValue = testObj["the drink"];    // 请修改这一行
  • 通过变量访问对象属性
  • 更新对象属性
  • 给对象添加新属性
ourDog.bark = "bow-wow";

或者

ourDog["bark"] = "bow-wow";
  • 删除对象的属性 delete ourDog.bark;
  • 使用对象进行查找
// 初始化变量
function phoneticLookup(val) {
  var result = "";

  // 请把你的代码写在这条注释以下
  var lookup = {
    "alpha": "Adams",
    "bravo": "Boston",
    "charlie": "Chicago",
    "delta": "Denver",
    "echo": "Easy",
    "foxtrot":"Frank",
  }
  // 请把你的代码写在这条注释以上
  result = lookup[val];
  return result;
}

// 你可以修改这一行来测试你的代码
phoneticLookup("charlie");
  • 测试对象的属性
    • 有时检查一个对象属性是否存在是非常有用的,我们可以用.hasOwnProperty(propname)方法来检查对象是否有该属性
// 初始化变量
var myObj = {
  gift: "pony",
  pet: "kitten",
  bed: "sleigh"
};

function checkObj(checkProp) {
  // 请把你的代码写在这条注释以下
  if(myObj.hasOwnProperty(checkProp)){
    return myObj[checkProp];
  }else{
    return "Not Found";
  }
}
  • 操作复杂对象
    • JavaScript Object Notation 简称JSON是用于存储数据的相关数据交换格式。
var myMusic = [
  {
    "artist": "Billy Joel",
    "title": "Piano Man",
    "release_year": 1973,
    "formats": [
      "CD",
      "8T",
      "LP"
    ],
    "gold": true
  },
  {
    "artist": "Billy Joel",
    "title": "Piano Man",
    "release_year": 1973,
    "formats": [
      "CD",
      "8T",
      "LP"
    ],
    "gold": true
  },
];

  • 访问嵌套对象
// 初始化变量
var myStorage = {
  "car": {
    "inside": {
      "glove box": "maps",
      "passenger seat": "crumbs"
     },
    "outside": {
      "trunk": "jack"
    }
  }
};

var gloveBoxContents = myStorage.car.inside["glove box"]; // 请修改这一行
  • 访问嵌套数组
var myPlants = [
  {
    type: "flowers",
    list: [
      "rose",
      "tulip",
      "dandelion"
    ]
  },
  {
    type: "trees",
    list: [
      "fir",
      "pine",
      "birch"
    ]
  }
];

// 请把你的代码写在这条注释以下

var secondTree = myPlants[1].list[1]; // 请修改这一行
  • 记录集合
    • 当通过变量访问对象的属性时,应使用中括号。
// 初始化变量
var collection = {
    "2548": {
      "album": "Slippery When Wet",
      "artist": "Bon Jovi",
      "tracks": [
        "Let It Rock",
        "You Give Love a Bad Name"
      ]
    },
    "2468": {
      "album": "1999",
      "artist": "Prince",
      "tracks": [
        "1999",
        "Little Red Corvette"
      ]
    },
    "1245": {
      "artist": "Robert Palmer",
      "tracks": [ ]
    },
    "5439": {
      "album": "ABBA Gold"
    }
};
// 复制 collection 以便测试
var collectionCopy = JSON.parse(JSON.stringify(collection));

// 请把你的代码写在这条注释以下
function updateRecords(id, prop, value) {
  if(prop != "tracks" && value != ""){
    collection[id][prop] = value;
  }else if(prop == "tracks" && collection[id].hasOwnProperty("tracks") == false){
    collection[id][prop] = [];
    collection[id][prop].push(value);
  }else if(prop == "tracks" && value != ""){
    collection[id][prop].push(value);
  }else if(value == ""){
    delete collection[id][prop];
  }

  return collection;
}

// 你可以修改这一行来测试你的代码
updateRecords(5439, "artist", "ABBA");

  • while循环
  • for循环
  • 使用 For 循环遍历数组的奇数
  • 使用 For 循环反向遍历数组
  • 使用 For 循环遍历数组
  • 循环嵌套
function multiplyAll(arr) {
  var product = 1;
  // 请把你的代码写在这条注释以下
  for(var i = 0; i < arr.length; i++){
    for(var j = 0; j < arr[i].length; j++){
      product *= arr[i][j];
    }
  }
  // 请把你的代码写在这条注释以上
  return product;
}
  • do...while 循环
  • 资料查找
// 初始化变量
var contacts = [
    {
        "firstName": "Akira",
        "lastName": "Laine",
        "number": "0543236543",
        "likes": ["Pizza", "Coding", "Brownie Points"]
    },
    {
        "firstName": "Harry",
        "lastName": "Potter",
        "number": "0994372684",
        "likes": ["Hogwarts", "Magic", "Hagrid"]
    },
    {
        "firstName": "Sherlock",
        "lastName": "Holmes",
        "number": "0487345643",
        "likes": ["Intriguing Cases", "Violin"]
    },
    {
        "firstName": "Kristian",
        "lastName": "Vos",
        "number": "unknown",
        "likes": ["JavaScript", "Gaming", "Foxes"]
    }
];


function lookUpProfile(name, prop){
// 请把你的代码写在这条注释以下
for(var i = 0; i < contacts.length; i++)
{
  if(contacts[i].firstName == name){
    if(contacts[i].hasOwnProperty(prop) == true)
    {
      return contacts[i][prop];
    }
    return "No such property";
  }
}
if(i == contacts.length){
    return "No such contact";
}
// 请把你的代码写在这条注释以上
}

// 你可以修改这一行来测试你的代码
lookUpProfile("Akira", "likes");
  • 使用 JavaScript 生成随机分数
    • Math.random()用来生成一个在0(包括 0)到1不包括 1)之间的随机小数,因此Math.random()可能返回 0 但绝不会返回 1。
  • 使用 JavaScript 生成随机整数
  • Math.floor()向下取整 获得它最近的整数。
    • Math.floor(Math.random() * 20);
  • 生成某个范围内的随机整数
    • Math.floor(Math.random() * (max - min + 1)) + min
  • 使用 parseInt 函数
    • parseInt()函数解析一个字符串返回一个整数下面是一个示例:var a = parseInt("007");上面的函数把字符串 "007" 转换成数字 7。 如果字符串参数的第一个字符是字符串类型的,结果将不会转换成数字,而是返回NaN.
  • 使用 parseInt 函数并传入一个基数
    • parseInt()函数解析一个字符串并返回一个整数。它同时可接受第二个参数,一个介于2和36之间的整数,表示字符串的基数
    • var a = parseInt("11", 2);参数 2 表示 "11" 使用二进制数值系统。此示例将字符串 "11" 转换为整数 3。
  • 使用三元运算符
  • 使用多个三元运算符