开发者社区> 王平安> 正文

1.2w字 | 初中级前端 JavaScript 自测清单 - 1 下

简介: 1.2w字 | 初中级前端 JavaScript 自测清单 - 1 下
+关注继续查看

九、alert / prompt / confirm

1. alert

显示一个警告对话框,上面显示有指定的文本内容以及一个“确定”按钮。 注意:弹出模态框,并暂停脚本,直到用户点击“确定”按钮。

// 语法
window.alert(message);
alert(message);
// 示例
alert('hello leo!');

message是要显示在对话框中的文本字符串,如果传入其他类型的值,会转换成字符串。

2. prompt

显示一个对话框,对话框中包含一条文字信息,用来提示用户输入文字。 注意:弹出模态框,并暂停脚本,直到用户点击“确定”按钮。 当点击确定返回文本,点击取消或按下 Esc 键返回 null。 语法如下:

let result = window.prompt(text, value);
  • result 用来存储用户输入文字的字符串,或者是 null。
  • text 用来提示用户输入文字的字符串,如果没有任何提示内容,该参数可以省略不写。
  • value 文本输入框中的默认值,该参数也可以省略不写。不过在 Internet Explorer 7 和 8 中,省略该参数会导致输入框中显示默认值"undefined"。

3. confirm

Window.confirm() 方法显示一个具有一个可选消息和两个按钮(确定和取消)的模态对话框。 注意:弹出模态框,并暂停脚本,直到用户点击“确定”按钮。 语法如下:

let result = window.confirm(message);
  • message 是要在对话框中显示的可选字符串。
  • result 是一个布尔值,表示是选择确定还是取消 (true表示OK)。

十、条件运算符:if 和 '?'

1. if 语句

当 if 语句当条件表达式,会将表达式转换为布尔值,当为 truthy 时执行里面代码。 转换规则如:

  • 数字 0、空字符串 ""nullundefinedNaN 都会被转换成 false。因为他们被称为 “falsy” 值。
  • 其他值被转换为 true,所以它们被称为 “truthy”。

2. 三元运算符

条件(三元)运算符是 JavaScript 仅有的使用三个操作数的运算符。一个条件后面会跟一个问号(?),如果条件为 truthy ,则问号后面的表达式A将会执行;表达式A后面跟着一个冒号(:),如果条件为 falsy ,则冒号后面的表达式B将会执行。本运算符经常作为 [if](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) 语句的简捷形式来使用。 语法:

condition ? exprIfTrue : exprIfFalse
  • condition 计算结果用作条件的表达式。
  • exprIfTrue 如果表达式 condition 的计算结果是 truthy(它和 true 相等或者可以转换成 true ),那么表达式 exprIfTrue 将会被求值。
  • exprIfFalse 如果表达式 condition 的计算结果是 falsy(它可以转换成 false ),那么表达式 exprIfFalse 将会被执行。 示例:
let getUser = function(name){
    return name === 'leo' ? 'hello leo!' : 'unknow user';
}
// 可以简写如下:
let getUser = name => name === 'leo' ? 'hello leo!' : 'unknow user';
getUser('leo'); // "hello leo!"
getUser('pingan'); // "unknow user"

十一、逻辑运算符

详细可以阅读《MDN 逻辑运算符》

1. 运算符介绍

逻辑运算符如下表所示 (其中_expr_可能是任何一种类型, 不一定是布尔值):

运算符语法说明
逻辑与,AND(&&_expr1_ && _expr2_expr**1** 可转换为 true,则返回 expr**2**;否则,返回 expr**1**
逻辑或,OR(||_expr1_ || _expr2_expr**1** 可转换为 true,则返回 expr**1**;否则,返回 expr**2**
逻辑非,NOT(!!_expr_expr 可转换为 true,则返回 false;否则,返回 true

如果一个值可以被转换为 true,那么这个值就是所谓的 truthy,如果可以被转换为 false,那么这个值就是所谓的 falsy。 会被转换为 false 的表达式有:

  • null
  • NaN
  • 0
  • 空字符串("" or '' or ````);
  • undefined。 尽管 &&|| 运算符能够使用非布尔值的操作数, 但它们依然可以被看作是布尔操作符,因为它们的返回值总是能够被转换为布尔值。如果要显式地将它们的返回值(或者表达式)转换为布尔值,请使用双重非运算符(即!!)或者Boolean构造函数。 JavaScript 里有三个逻辑运算符:||(或),&&(与),!(非)。

2. 运算符示例

  • 逻辑与(&&) 所有条件都为 true 才返回 true,否则为 false。
a1 = true  && true      // t && t 返回 true
a2 = true  && false     // t && f 返回 false
a3 = false && true      // f && t 返回 false
a4 = false && (3 == 4)  // f && f 返回 false
a5 = "Cat" && "Dog"     // t && t 返回 "Dog"
a6 = false && "Cat"     // f && t 返回 false
a7 = "Cat" && false     // t && f 返回 false
a8 = ''    && false     // f && f 返回 ""
a9 = false && ''        // f && f 返回 false
  • 逻辑或( || ) 所有条件有一个为 true 则返回 true,否则为 false。
o1 = true  || true      // t || t 返回 true
o2 = false || true      // f || t 返回 true
o3 = true  || false     // t || f 返回 true
o4 = false || (3 == 4)  // f || f 返回 false
o5 = "Cat" || "Dog"     // t || t 返回 "Cat"
o6 = false || "Cat"     // f || t 返回 "Cat"
o7 = "Cat" || false     // t || f 返回 "Cat"
o8 = ''    || false     // f || f 返回 false
o9 = false || ''        // f || f 返回 ""
  • 逻辑非( ! )
n1 = !true              // !t 返回 false
n2 = !false             // !f 返回 true
n3 = !''                // !f 返回 true
n4 = !'Cat'             // !t 返回 false
  • 双重非运( !! )
n1 = !!true                   // !!truthy 返回 true
n2 = !!{}                     // !!truthy 返回 true: 任何 对象都是 truthy 的…
n3 = !!(new Boolean(false))   // …甚至 .valueOf() 返回 false 的布尔值对象也是!
n4 = !!false                  // !!falsy 返回 false
n5 = !!""                     // !!falsy 返回 false
n6 = !!Boolean(false)         // !!falsy 返回 false

3. 布尔值转换规则

  • 将 && 转换为 ||
condi1 && confi2
// 转换为
!(!condi1 || !condi2)
  • 将 || 转换为 &&
condi1 || condi2
// 转换为
!(!condi1 && !condi2)

4. 短路取值

由于逻辑表达式的运算顺序是从左到右,也可以用以下规则进行"短路"计算:

  • (some falsy expression) && (_expr)_ 短路计算的结果为假。
  • (some truthy expression) || _(expr)_ 短路计算的结果为真。 短路意味着上述表达式中的expr部分不会被执行,因此expr的任何副作用都不会生效(举个例子,如果expr是一次函数调用,这次调用就不会发生)。造成这种现象的原因是,整个表达式的值在第一个操作数被计算后已经确定了。看一个例子:
function A(){ console.log('called A'); return false; }
function B(){ console.log('called B'); return true; }
console.log( A() && B() );
// logs "called A" due to the function call,
// then logs false (which is the resulting value of the operator)
console.log( B() || A() );
// logs "called B" due to the function call,
// then logs true (which is the resulting value of the operator)

5. 注意

与运算 && 的优先级比或运算 || 要高。 所以代码 a && b || c && d 完全跟 && 表达式加了括号一样:(a && b) || (c && d)

十二、循环:while 和 for

1. while 循环

详细可以阅读《MDN  while》while 语句可以在某个条件表达式为真的前提下,循环执行指定的一段代码,直到那个表达式不为真时结束循环。 如:

var n = 0;
var x = 0;
while (n < 3) {
  n++;
  x += n;
}

当循环体为单行时,可以不写大括号:

let i = 3;
while(i) console.log(i --);

2. do...while 循环

详细可以阅读《MDN  do...while》do...while 语句创建一个执行指定语句的循环,直到condition值为 false。在执行statement 后检测condition,所以指定的statement至少执行一次。 如:

var result = '';
var i = 0;
do {
   i += 1;
   result += i + ' ';
} while (i < 5);

3. for 循环

详细可以阅读《MDN  for》for 语句用于创建一个循环,它包含了三个可选的表达式,这三个表达式被包围在圆括号之中,使用分号分隔,后跟一个用于在循环中执行的语句(通常是一个块语句)。 语法如:

for (begin; condition; step) {
  // ……循环体……
}

示例:

for (let i = 0; i < 3; i++) {
  console.log(i);
}

描述:

begini = 0进入循环时执行一次。
conditioni < 3在每次循环迭代之前检查,如果为 false,停止循环。
body(循环体)alert(i)条件为真时,重复运行。
stepi++在每次循环体迭代后执行。

4. 可选的 for 表达式

for 语句头部圆括号中的所有三个表达式都是可选的。

  • 不指定表达式中初始化块
var i = 0;
for (; i < 3; i++) {
    console.log(i);
}
  • 不指定表达式中条件块,这就必须要求在循环体中结束循环,否则会出现死循环
for (var i = 0;; i++) {
   console.log(i);
   if (i > 3) break;
}
  • 不指定所有表达式,也需要在循环体中指定结束循环的条件
var i = 0;
for (;;) {
  if (i > 3) break;
  console.log(i);
  i++;
}

5. break 语句

详细可以阅读《MDN  break》 。 break 语句中止当前循环,switch语句或label 语句,并把程序控制流转到紧接着被中止语句后面的语句。 在 while 语句中:

function testBreak(x) {
  var i = 0;
  while (i < 6) {
    if (i == 3) {
      break;
    }
    i += 1;
  }
  return i * x;
}

另外,也可以为代码块做标记,并在 break 中指定要跳过的代码块语句的 label:

outer_block:{
  inner_block:{
    console.log ('1');
    break outer_block;      // breaks out of both inner_block and outer_block
    console.log (':-(');    // skipped
  }
  console.log ('2');        // skipped
}

需要注意的是:break 语句需要内嵌在它所应用的标签或代码块中,否则报错:

block_1:{
  console.log ('1');
  break block_2;            // SyntaxError: label not found
}
block_2:{
  console.log ('2');
}

6. continue 语句

continue 声明终止当前循环或标记循环的当前迭代中的语句执行,并在下一次迭代时继续执行循环。 与 break 语句的区别在于, continue 并不会终止循环的迭代,而是:

  • while 循环中,控制流跳转回条件判断;
  • for 循环中,控制流跳转到更新语句。 注意:continue 也必须在对应循环内部,否则报错。
i = 0;
n = 0;
while (i < 5) {
   i++;
   if (i === 3) {
      continue;
   }
   n += i;
}

带 label:

var i = 0, 
    j = 8;
checkiandj: while (i < 4) {
   console.log("i: " + i);
   i += 1;
   checkj: while (j > 4) {
      console.log("j: "+ j);
      j -= 1;
      if ((j % 2) == 0)
         continue checkj;
      console.log(j + " is odd.");
   }
   console.log("i = " + i);
   console.log("j = " + j);
}

7. 注意

禁止 break/continue 在 ‘?’ 的右边:

(i > 5) ? console.log(i) : continue; // continue 不允许在这个位置

这样会提示语法错误。 请注意非表达式的语法结构不能与三元运算符 ? 一起使用。特别是 break/continue 这样的指令是不允许这样使用的。

8. 总结

三种循环:

  • while —— 每次迭代之前都要检查条件。
  • do..while —— 每次迭代后都要检查条件。
  • for (;;) —— 每次迭代之前都要检查条件,可以使用其他设置。 通常使用 while(true) 来构造“无限”循环。这样的循环和其他循环一样,都可以通过 break 指令来终止。 如果我们不想在当前迭代中做任何事,并且想要转移至下一次迭代,那么可以使用 continue 指令。 break/continue 支持循环前的标签。标签是 break/continue 跳出嵌套循环以转到外部的唯一方法。

十三、"switch" 语句

switch 语句用来将表达式的值与 case 语句匹配,并执行与情况对应的语句。 switch 语句可以替代多个 if 判断,为多个分支选择的情况提供一个更具描述性的方式。

1. 语法

switch 语句至少包含一个 case 代码块和一个可选的 default 代码块:

switch(expression) {
  case 'value1':
    // do something ...
    [break]
   
  default:
    // ...
    [break]
}

expression 表达式的值与 value1 匹配时,则执行其中代码块。 如果没有 case  子句匹配,则会选择 default 子句执行,若连 default 子句都没有,则直接执行到 switch 结束。

2. 使用 case 分组

所谓 case 分组,就是与多个 case 分支共享同一段代码,如下面例子中 case 1  和 case 2

let a = 2;
switch (a) {
  case 1: // (*) 下面这两个 case 被分在一组
  case 2:
    console.log('case is 1 or 2!');
    break;
  case 3:
    console.log('case is 3!');
    break;
  default:
    console.log('The result is default.');
}
// 'case is 1 or 2!'

3. 注意点

  1. expression 表达式的值与 case 值的比较是严格相等:
function f(n){
    let a ;
    switch(n){
        case 1:
            a = 'number';
            break;
        case '1':
            a = 'string';
            break;
        default:
            a = 'default';
            break;
    }
    console.log(a)
}
f(1);   // number
f('1'); // string
  1. **如果没有 break,程序将不经过任何检查就会继续执行下一个 ****case** :
let a = 2 + 2;
switch (a) {
    case 3:
    console.log( 'Too small' );
  case 4:
    console.log( 'Exactly!' );
  case 5:
    console.log( 'Too big' );
  default:
    console.log( "I don't know such values" );
}
// Exactly!
// Too big
// I don't know such values
  1. **default** **放在 ****case** 之上不影响匹配:
function f(n){
  switch (n) {
    case 2:
      console.log(2);
      break;
    default:
      console.log('default')
      break;
    case 1:  
      console.log('1');
      break;
  }
}
f(1); // 1
f(2); // 2
f(3); // default
  • switch 语句中存在 let / const重复声明问题:
// 以下定义会报错
function f(n){
    switch(n){
        case 1:
            let msg = 'hello';
            console.log(1);
            break;
        case 2: 
            let msg = 'leo';
            break;
        default: 
            console.log('default');
            break;
    }
}
// Error: Uncaught SyntaxError: Identifier 'msg' has already been declared

这是由于两个 let 处于同一个块级作用域,所以它们被认为是同一变量名的重复声明。 解决方式,只需要将 case 语句包装在括号内即可解决:

function f(n){
    switch(n){
        case 1:{ // added brackets
            let msg = 'hello';
            console.log(msg);
            break;
        }
        case 2: {
            let msg = 'leo';
            console.log(msg);
            break;
        }
        default: 
            console.log('default');
            break;
    }
}

十四、函数

函数可以让一段代码被多次调用,避免重复代码。 如之前学习到的一些内置函数: alert(msg) / prompt(msg, default) / confirm(quesyion) 等。

1. 函数定义

定义函数有两种方式:函数声明函数表达式

1.1 函数声明

如定义一个简单 getUser 函数:

function getUser(name){
    return 'hello ' + name;
}
getUser('leo"); // 函数调用

通过函数声明来定义函数时,需要由以下几部分组成:

  • 函数名称 - getUser
  • 函数参数列表 - name
  • 函数的 JS 执行语句 - return 'hello ' + name

1.2 函数表达式

类似声明变量,还是以 getUser 为例:

let getUser = function(name){
    return 'hello ' + name;
}

另外,函数表达式也可以提供函数名,并用于函数内部指代函数本身:

let fun = function f(n){
    return n < 3 ? 1 : n * f(n - 1);
}
fun(3);  // 3
fun(5);  // 60

2. 函数调用

当定义一个函数后,它并不会自动执行,而是需要使用函数名称进行调用,如上面例子:

fun(3);  // 3

只要注意: 使用 函数表达式 定义函数时,调用函数的方法必须写在定义之后,否则报错:

console.log(fun());  // Uncaught ReferenceError: fun is not defined
let fun = function(){return 1};

而使用 函数声明 则不会出现该问题:

console.log(fun());  // 1
function fun(){return 1};

原因就是:函数提升仅适用于函数声明,而不适用于函数表达式。

3. 函数中的变量

在函数中,可以使用局部变量和外部变量。

3.1 局部变量

函数中声明的变量只能在该函数内可见。

let fun = function(){
    let name = 'leo';
}
fun();
console.log(name); // Uncaught ReferenceError: name is not defined

3.2 全局变量

函数内可以使用外部变量,并且可以修改外部变量的值。

let name = 'leo';
let fun = function(){
    let text = 'Hello, ' + name;
  console.log(text);
}
fun(); // Hello, leo

当函数内也有与外部变量名称相同的变量,会忽略外部变量:

let name = 'leo';
let fun = function(){
  let name = 'pingan8787';
    let text = 'Hello, ' + name;
  console.log(text);
}
fun(); // Hello, pingan8787

4. 函数参数

从ECMAScript 6开始,有两个新的类型的参数:默认参数,剩余参数。

4.1 默认参数

若函数没有传入参数,则参数默认值为undefined,通常设置参数默认值是这样做的:

// ES6 之前,没有设置默认值
function f(a, b){
    b = b ? b : 1;
    return a * b;
}
f(2,3);  // 6
f(2);    // 2
// ES6,设置默认值
function f(a, b = 1){
    return a * b;
}
f(2,3);  // 6
f(2);    // 2

4.2 剩余参数

可以将参数中不确定数量的参数表示成数组,如下:

function f (a, ...b){
    console.log(a, b);
}
f(1,2,3,4); // a => 1 b => [2, 3, 4]

既然讲到参数,那就不能少了 arguments 对象。

4.3 arguments 对象

函数的实际参数会被保存在一个类似数组的arguments对象中。在函数内,我们可以使用 arguments 对象获取函数的所有参数:

let fun = function(){
    console.log(arguments);
    console.log(arguments.length);
}
fun('leo'); 
// Arguments ["leo", callee: ƒ, Symbol(Symbol.iterator): ƒ] 
// 1

以一个实际示例介绍,实现将任意数量参数连接成一个字符串,并输出的函数:

let argumentConcat = function(separator){
    let result = '', i;
  for(i = 1; i < arguments.length; i ++){
    result += arguments[i] + separator;
  }
  return result;
}
argumentConcat(',', 'leo', 'pingan'); //"leo,pingan,"

5. 函数返回值

在函数任意位置,指定 return 指令来停止函数的执行,并返回函数指定的返回值。

let sum = function(a, b){
    return a + b;
};
let res = sum(1, 2);
console.log(res); // 3

默认空值的 return 或没有 return 的函数返回值为 undefined

十五、函数表达式

函数表达式是一种函数定义方式,在前面章节中已经介绍到了,这个部分将着重介绍 函数表达式函数声明 的区别:

1. 语法差异

// 函数表达式
let fun = function(){};
// 函数声明
function fun(){}

2. 创建时机差异

函数表达式会在代码执行到达时被创建,并且仅从那一刻可用。 而函数声明被定义之前,它就可以被调用。

// 函数表达式
fun();  // Uncaught ReferenceError: fun is not defined
let fun = function(){console.log('leo')};
// 函数声明
fun();  // "leo"
function fun(){console.log('leo')};

3. 使用建议

建议优先考虑函数声明语法,它能够为组织代码提供更多灵活性,因为我们可以在声明函数前调用该函数。

十六、箭头函数

本章节简单介绍箭头函数基础知识,后面章节会完整介绍。 函数箭头表达式是ES6新增的函数表达式的语法,也叫胖箭头函数,变化:更简洁的函数和this

1. 代码更简洁

// 有1个参数
let f = v => v;
// 等同于
let f = function (v){return v};
// 有多个参数
let f = (v, i) => {return v + i};
// 等同于
let f = function (v, i){return v + i};
// 没参数
let f = () => 1;
// 等同于
let f = function (){return 1};
let arr = [1,2,3,4];
arr.map(ele => ele + 1);  // [2, 3, 4, 5]

2. 注意点

  1. 箭头函数不存在this
  2. 箭头函数不能当做构造函数,即不能用new实例化;
  3. 箭头函数不存在arguments对象,即不能使用,可以使用rest参数代替;
  4. 箭头函数不能使用yield命令,即不能用作Generator函数。 一个简单的例子:
function Person(){
  this.age = 0;
  setInterval(() => {
    this.age++;
  }, 1000);
}
var p = new Person(); // 定时器一直在执行 p的值一直变化

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
[前端]JavaScript图片切换
最近学前端感觉入门了,还在最最基础的阶段。今天打开一个网页看到非常常见的一个图片切换效果:在淘宝、JD等购物时,介绍产品的图片会有多张,一般是显示一张,底下有一排小图片,鼠标放到小图片上大图片会切换.
750 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
28409 0
前端开发教程:JavaScript的相等比较你了解吗?
如果你是一个JavaScript新手,那么有些基础知识需要你掌握,从新手到大神就是一条踩坑和出坑的过程,下面先说一个最基本的相等。前端开发教程:JavaScript的相等比较你了解吗? 相等 如果你搞C#或Java一定非常熟悉==比较运算符。
740 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
20324 0
1.2w字 | 初中级前端 JavaScript 自测清单 - 1 下
1.2w字 | 初中级前端 JavaScript 自测清单 - 1 下
19 0
前端文件上传-javascript-ajax
书写是为了更好的记忆。
25 0
+关注
王平安
🌼 前端宝藏小哥哥🏅欢迎关注「前端自习课」公众号
175
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载