前言
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 中,你可以通过在引号前面使用反斜杠(\)来转义引号。
- 用单引号引用字符串
- 单引号和双引号的功能在 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 函数并传入一个基数
- parseInt()函数解析一个字符串并返回一个整数。它同时可接受第二个参数,一个介于2和36之间的整数,表示字符串的基数
var a = parseInt("11", 2);参数 2 表示 "11" 使用二进制数值系统。此示例将字符串 "11" 转换为整数 3。
- 使用三元运算符
- 使用多个三元运算符