[JavaScript] MDN web docs 摘要 2 : JavaScript 基础要件

1 在代码中决策 — 条件

if ... else ...， 嵌套， 以及 switch case 与 C++ 概念语法相同，还有三元操作符 x ? y : z;

关于true/false

这也是和C++ 类似的：
测试布尔值(true/false)时，一切非 false, undefined(变量不存在), null, 0, NaN, 或 空字符串(’’)都是true; 有时直接测试一个变量就可以，例如：

var cheese = 'Cheddar';
if (cheese) { }

2 代码循环

下面的一段代码，目的是要搜索电话号码：

<label for="search">Search by contact name: </label>
<input id="search" type="text">
<button>Search</button>
<p></p>

const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
const para = document.querySelector('p');
const input = document.querySelector('input');
const btn = document.querySelector('button');

btn.addEventListener('click', function() {
  let searchName = input.value.toLowerCase();
  input.value = '';
  input.focus();
  for (let i = 0; i < contacts.length; i++) {
    let splitContact = contacts[i].split(':');
    if (splitContact[0].toLowerCase() === searchName) {
      para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
      break;
    } else {
      // 下面这段，不会连续输出，因为如果原数组第一个元素不匹配，会继续进行下一次     loop，直到不再循环，以最终结果为准。这样写也是没有问题的。不用在else后加if (i === (contacts.length - 1)).
      para.textContent = 'Contact not found.'; 
    }
  }
});

其他， for, while, do while, break, continue 和 C++ 一模一样，没有特别之处。

3 函数 - 可重复利用的代码块

3.1 内建的浏览器函数

例如.replace()函数，是浏览器函数。

let myText = 'I am a string';
let newString = myText.replace('string', 'sausage');
console.log(newString);
// the replace() string function takes a source string, 
// and a target string and replaces the source string,
// with the target string, and returns the newly formed string

一些内建的浏览器API不属于核心JavaScript语言，有些API是使用底层的语言C++写的。

3.2 函数 Versus 方法

对象的成员函数称为方法

3.3 调用函数

3.4 匿名函数

没有名称的函数称为匿名函数，这种形式的函数主要用于响应事件。如果点击按钮，函数内的code将会执行。

var myButton = document.querySelector('button');
myButton.onclick = function() {
  alert('hello');
}

如下的code语法上也是允许的，但会造成code不好理解，所以不应该这样使用匿名函数。

// Not recommended!!!
var myGreeting = function() {
  alert('hello');
}
myGreeting();
let anotherGreeting = myGreeting;
myGreeting();
anotherGreeting();

最好写成下面的形式：

function myGreeting() {
  alert('hello');
}

3.5 函数参数

形参不带参数类型：

function myBigFunction() {
  var myValue = 1;
      
  subFunction1(myValue);
  subFunction2(myValue);
  subFunction3(myValue);
}

function subFunction1(value) {
  console.log(value);
}

function subFunction2(value) {
  console.log(value);
}

function subFunction3(value) {
  console.log(value);
}

3.6 函数域和冲突

这和其他语言概念类似。

3.7 函数内部的函数

函数内部调用其他函数，无特别之处。

4 建立自己的函数

4.1 基本的函数

4.2 调用函数

4.3 使用参数

一般事件响应函数不能加括号：

function displayMessage() {
}
btn.onclick = displayMessage();  // Error, 立即调用函数，而不是点击按钮时调用。

如果必须带参数，则必须写成匿名函数，原因同上。

btn.onclick = displayMessage(x, y);
btn.onclick = function() {   // 匿名函数
  displayMessage(xx);  
}

5 函数回传值

使用isNaN()函数测试一个变量是否是一个数字，不是数字返回true，反之返回false.
使用return 关键字返回值，通其他语言。函数不指定返回值类型。
应该逐步建立自己的函数库，方便自己以后的工作。

6 事件介绍

这一章先不写了。

---

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events