本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

JavaScript基础部分，学习笔记源网站：javascript.info

1 基础运算符

js中可以用++符号

let counter = 0;
counter++;
++counter;

js中的mod运算符是“%”

alert( 5 % 2 ); // 1，5 除以 2 的余数
alert( 8 % 3 ); // 2，8 除以 3 的余数

宕开一笔，为什么这里要写mod？因为百度实在是误人子弟前几天我忘了还有“%”，于是在百度搜索“js mod”，结果—— 在这里插入图片描述前五条，头一条回答就是大错特错，第二条答案藏在里面，后面三条都不知所云。可能我的搜索关键字不够精确？所以百度搜索头条置顶会搜出完全错误的回答？？？？

2 值的比较

js值的比较比较特别，关键是在不同类型间的比较，而混淆点是在对null和undefined的比较，特别是null vs 0以及特立独行的undefined，非常容易产生意想不到的混乱。

2.1 不同类型间的比较

String转化为Number

alert( '2' > 1 ); // true，字符串 '2' 会被转化为数字 2
alert( '01' == 1 ); // true，字符串 '01' 会被转化为数字 1

Boolean也是转化为Number

alert( true == 1 ); // true
alert( false == 0 ); // true

混合转化为Number

let a = 0;
alert( Boolean(a) ); // false

let b = "0";
alert( Boolean(b) ); // true

alert(a == b); // true!

2.2 null和underfined比较

alert( null === undefined ); // false
alert( null == undefined ); // true

2.3 null vs 0

alert( null > 0 );  // (1) false
alert( null == 0 ); // (2) false
alert( null >= 0 ); // (3) true

== 和其他的普通比较符的代码逻辑是独立的，其他比较符时先转化为Number，即0>0是false。而undefined和null在==时不进行类型转化，所以null==0也是false

2.4 特立独行的undefined

alert( undefined > 0 ); // false (1)
alert( undefined < 0 ); // false (2)
alert( undefined == 0 ); // false (3)

具体原因及具体详解还是要看：值的比较在使用时，一般多留个心眼即可。

3 条件分支：if和'?'

if ··· else if ··· else 的最后一个else是可以省略的 if else也可以用多个?来表示

let age = prompt('age?', 18);

let message = (age < 3) ? 'Hi, baby!' :
  (age < 18) ? 'Hello!' :
  (age < 100) ? 'Greetings!' :
  'What an unusual age!';

alert( message );

但是尽量避免这种，代码简洁了，但是可读性大大降低了的代码，但同时对这种写法也不能不懂。

4 空值合并运算符'??'

let user;

alert(user ?? "匿名"); // 匿名（user 未定义）

还有一点，就是与||比较

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

即，|| 无法区分 false、0、空字符串 "" 和 null/undefined。

5 循环：while和for

就一点，循环标签，实现一次性跳出多重循环标签是在循环之前带有冒号的标识符： break 语句跳出循环至标签处：

outer: for (let i = 0; i < 3; i++) {

  for (let j = 0; j < 3; j++) {

    let input = prompt(`Value at coords (${i},${j})`, '');

    // 如果是空字符串或被取消，则中断并跳出这两个循环。
    if (!input) break outer; // (*)

    // 用得到的值做些事……
  }
}
alert('Done!');

6 "switch"语句

就一点，switch的case判断遵从的是严格相等，也即“===”

7 函数

7.1 默认值

js中的参数默认值是如下形式设定的

function showMessage(from, text = "no text given") {
  alert( from + ": " + text );
}

showMessage("Ann"); // Ann: no text given

也可以使用空值合并运算符

function showCount(count) {
  // 如果 count 为 undefined 或 null，则提示 "unknown"
  alert(count ?? "unknown");
}

showCount(0); // 0
showCount(null); // unknown
showCount(); // unknown

7.2 返回值

关于返回值的注意事项在这里插入图片描述

7.3 函数命名

要规范，实现函数 == 注释在这里插入图片描述

7.4 函数声明与函数表达式

7.4.1 函数声明

function sayHi() {
  alert( "Hello" );
}

7.4.2 函数表达式

let sayHi = function() {
  alert( "Hello" );
};

值得注意的是，函数表达式方式时，console.log(sayHi)不能调用方法，打印会打印出整个方法内容。sayHi()才能调用方法。

7.4.3 区别

你可以理解为，函数表达式，是创建了一个内含函数的变量，而函数声明是创建了一个函数。故而，第一，变量未被创建前你不能使用它。当你把函数表达式写在js文件的最后，那你第一句话就不能调用它。但你把函数声明写在js文件的最后，你第一句话就可以调用它（js初始化时会先扫描所有的函数）。第二，他们拥有各自的作用域。用let函数表达式创建的遵从let的作用域，用函数声明方式创建的，遵从其所属的代码块的作用域。

7.5 回调函数

js的回调函数挺有意思的，也一点也不复杂，可以看看原文，清晰明了

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
  "Do you agree?",
  function() { alert("You agreed."); },
  function() { alert("You canceled the execution."); }
);

简单讲，就是把方法以参数的形式传进函数中，当函数内部后续运行出现了需要，就回来调用不同的方法

8 箭头函数

在此处也没啥好说的，后续有一章会展开讲

let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?
  () => alert('Hello') :
  () => alert("Greetings!");

welcome();

【前端】JavaScript基础知识

前言