JavaScript基础语法（二）

最新推荐文章于 2022-08-10 20:16:38 发布
最新推荐文章于 2022-08-10 20:16:38 发布
阅读量206 收藏
点赞数
分类专栏： JavaScript 文章标签： JavaScript 基础语法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fuziwang/article/details/84330876
版权

JavaScript运算符

算术运算符
  • 加法运算符：+ (一方面可以用于数值的相加，另一方面可以用于字符串的连接)

  • 减法运算符：- (字符串和数值相减可以得到数值)

  • 乘法运算符：* (字符串和数值相乘可以得到数值,可以作为隐式转化字符串的方法)

  • 除法运算符：/ (整数相除可以得到小数)

  • 余数运算符：%

  • 自增运算符：++（用法和C语言的相同，注意前置和后置的区别）

  • 自减运算符：--

// + 用于字符串的时候表示连接，用于数值的时候表示运算
console.log("1" + "2"); //"12"
console.log("1" + 2); //"12"
console.log(1 + {}); //"1[object Object]"
console.log(10 + 20 + '是您的年龄'); //30 是您的年龄

//注意区分++i和i++运算
var x = "1";
console.log(++x); //2 注意++和--的隐式类型转换
var x = "1";
console.log(x + 1); //11
// 注意+=返回的是string类型
var a = '1';
a += 1;
console.log(a); // 11

// 注意区分JavaScript和C语言的区别
var i = 1;
var y = ++i + ++i + ++i;
console.log(y); //javascript的结果是9，而对于C语言的结果是12
关系运算符

比较两个值，然后返回一个布尔值，表示是否满足比较条件

  • == 相等（如果类型不同，先转换再比较，注：引用类型到基本类型的转换方向）

  • === 全等（若类型不同则false，若类型相同则判断同 ==）

  • != 不相等（相当于==的逆运算）

  • !== 全不相等（先判断类型，若类型不同则返回true，相当于===的逆运算）

# == 类型不同，尝试进行转换和比较：
null == undefined // 相等
number == string (string转换为number进行比较)
boolean == number(boolean转换为number进行比较)
object == string | number(对象要转换为基本数据类型)

// 关系运算符
// == === != !==

console.log(3 === 3); // true
console.log(3 === "3"); //false
console.log(3 == "3"); //true
console.log(3 == new String(3)); //true
console.log(3 === new String(3)); //false
console.log(undefined == 0);// false
console.log(null == 0);// false
console.log(null == undefined);// true
console.log(null === undefined);// false
console.log(NaN == NaN);// false
console.log(true == 2);// false true->1!=2

var obj1 = new String("xyz");
var obj2 = new String("xyz");
console.log("xyz" === obj1); //false
console.log(obj1 == obj2); // false
console.log(obj1 === obj2); //false
console.log(obj1 == new String("xyz")); //false

var obj1 = new String("xyz");
var obj2 = obj1;
console.log("xyz" != obj1); // false
console.log(obj1 !== obj2); // false
console.log(obj1 != obj2); //false
console.log(obj1 != new String("xyz")); //true
逻辑运算符
  • 非运算符：!

逻辑非运算符可以用于任何值。无论这个值是什么数据类型，**这个运算符都会返回一个布尔值。**它的流程是：先将这个值转换成布尔值，然后取反，规则如下：

var box = !(5 > 4); //false
var box = !''; //true
var box = !'Lee'; //false
var box = !0; //true
var box = !8; //false
var box = !null; //true
var box = !NaN; //true
var box = !undefined; //true

// 使用一次逻辑非运算符，流程是将值转成布尔值然后取反。
// 而使用两次逻辑非运算符就是将值转成成布尔值取反再取反，相当于对值进行Boolean()转型函数处理。
var box = !!0; //false
var box = !!NaN; //false
  • 或运算符|| 和 与运算符 &&

&&与||的基本理解及应用

最常见情况（运算符两边的操作数都是布尔类型）

  1. 对于&&来说， 除了两侧都为真时为真，其他情况都为假
  2. 对于 || 来说，除了两侧都为假时为假，其他情况都为真
// &&
console.log(2>1&&4<5);// true
console.log(true&&(!2));// false
console.log(false&&("2" == 2));// false
console.log(false&&false);// false

// ||
console.log(2>1||4<5);// true
console.log(true||(!2));// true
console.log(false||("2" == 2));// true
console.log(false||false);// false

&&与||的深层次理解（非布尔类型）

当逻辑运算符&&和||两侧的操作数不是布尔类型时

  1. 首先将左操作数转换成布尔类型
  2. 对转换后的左操作数进行逻辑判断（true or false）
  3. 根据短路原则返回原始左操作数或原始右操作数
    • 对于&&，转换后的左操作数若为true，则直接返回原始右操作数，若为false则直接返回原始左操作数
    • 对于||，转换后的左操作数若为true，则直接返回原始左操作数，若为false则直接返回原始右操作数
//操作数非布尔类型，&&短路原则
console.log(2&&4);// 4
console.log(0&&4);// 0
console.log({x:2}&&{name:"Jack"});// {name:"Jack"}
console.log(null&&"hello");// null
console.log({}&&"world");// "world"

//操作数非布尔类型，||短路原则
console.log(2||4);// 2
console.log(0||4);// 4
console.log({x:2}||{name:"Jack"});// {x:2}
console.log(null||"hello");// "hello"
console.log({}||"world");// {}

//思考 所有对象转换为布尔类型 都为 true
console.log((new Boolean(false))&&234);// 234
console.log((new Boolean(false))||234);// new Boolean(false)

&&与||在实际中的应用

  • 遵循短路特性，使用&&和||可用来实现条件语句
var score = 76;
if(score>90){
    console.log("优");
}else if(score>75){
    console.log("良");
}else if(score>60){
    console.log("及格");
}else{
    console.log("不及格");
}

//通过&&和||的组合实现如上功能，注：小括号优先级最高
console.log((score>90&&"优")||(score>75&&"良")||(score>60&&"及格")||"不及格");
  • 使用||来设置函数参数的默认值
    • 函数定义时可以给参数指定默认值，调用时若未传参数则该参数的值取它定义时的默认值
    • JS（ES6之前）不能直接为函数的参数指定默认值，可以通过 || 来实现

在下列案例中：未传参的话，形参初识为undefined，undefined转化为布尔值为false，根据||短路原则直接返回右操作数

var sum = function(a,b,c){
    b = b||4;
    c = c||5;
    return a+b+c;
};
console.log(sum(1,2,3));// 1 + 2 + 3
console.log(sum(1,2));// 1 + 2 + 5
console.log(sum(1));// 1 + 4 + 5
// console.log(sum(1,0,0));// 1 + 4 + 5

// sum函数的问题及完善
// 若实参转换为布尔类型为false，返回值则可能不是预期结果，如sum(1,0,0)为10
var sum = function(a,b,c){
    if(b!=false){b = b||4;}//(b!=false)&&(b=b||4);
    if(c!=false){c = c||5;}//(c!=false)&&(c=c||5);
    return a+b+c;
};
console.log(sum(1,2,3));// 1 + 2 + 3
console.log(sum(1,2));// 1 + 2 + 5
console.log(sum(1));// 1 + 4 + 5
console.log(sum(1,0,0));// 1 + 0 + 0
赋值运算符

注意=与==（表达式要发反写，有什么好处）

var a = 20;
if (a = 2) { //本来想写判等符号，确写成赋值
    console.log('Yes'); //结果输出了Yes
}
// 输出Yes

// 表达式反写的原因就是为了防止将判等号写成赋值符号
if (2 = a) {
    console.log('Yes'); // error
}
# Uncaught ReferenceError: Invalid left-hand side in assignment
特殊运算符

在这里插入图片描述

  • delete 运算符（删除属性）

  • in 运算符（判断某一个document是否在window上）

  • new 运算符（创建构造器的实例）

  • void（不管void的后面的值是多少都会返回undefined，一元运算符）

JavaScript流程控制结构

选择和分支语句

  • if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码

  • if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码

  • if…else if…else 语句 - 使用该语句来选择多个代码块之一来执行 （一个执行，其他的就不再进行执行了）

对于 if 语句括号里的表达式，ECMAScript 会自动调用**Boolean()**转型函数将这个表达式的结果转换成一个布尔值。如果值为 true，执行后面的一条语句，否则不执行。

var box = 100;
if (box >= 100) {//如果满足条件，不会执行下面任何分支
  	console.log('甲');
} else if (box >= 90) {
  	console.log('乙');
} else if (box >= 80) {
  	console.log('丙');
} else if (box >= 70) {
  	console.log('丁');
} else if (box >= 60) {
  	console.log('及格');
} else {//如果以上都不满足，则输出不及格
  	console.log('不及格');
}
  • switch 语句 - 使用该语句来选择多个代码块之一来执行

switch语句中的case

  1. case在比较时使用的是全等操作符比较,因此不会发生隐式类型转换
  2. case 后可以是一个表达式（如i<60）
//  case在比较时使用的是全等操作符比较,因此不会发生隐式类型转换
var i = '1';
switch (i) {
    case 1:
        console.log('1 Number');
        break;
    // case '1':
    //     console.log('"1" Number');
    //     break;
    default:
        console.log('default');
}

# 输出default

//思考：下边的例子输出什么?
// var j = 23; 输出 case_111
// var j = "23"; 输出 case_222
// var j = new String("23"); 输出 case_default
var j = new Number(23); // 输出 case_default
switch (j) {
    case 23:
        console.log("case_111");
        break;
    case "23":
        console.log("case_222");
        break;
    case new Number(23):
        console.log("case_333");
        break;
    default:
        console.log("case_default");
}

switch语句中的穿透性及其应用

在这里插入图片描述

从满足第一case处开始执行，直到遇到break为止，若都没有break则直到default结束为止

循环语句
  • do…while 语句

do…while 语句是一种先运行，后判断的循环语句。也就是说，不管条件是否满足，至少先运行一次循环体。

var box = 1; //如果是 1，执行五次，如果是 10，执行 1 次
do {
	alert(box);
  	box++;
} while (box <= 5); //先运行一次，再判断
  • while语句

while 语句是一种先判断，后运行的循环语句。也就是说，必须满足条件了之后，方可运行循环体。

var box = 1; //如果是 1，执行五次，如果是 10，不执行
while (box <= 5) { //先判断，再执行
	alert(box);
	box++;
}
  • for语句

for 语句是一种先判断，后运行的循环语句。但它具有在执行循环之前初始变量和定义循环后要执行代码的能力。

for (var box = 1; box <= 5 ; box++) { //第一步，声明变量 var box = 1;
	alert(box); //第二步，判断 box <=5
} //第三步，alert(box)
//第四步，box++
//第五步，从第二步再来，直到判断为 false
break和continue语句

break和 continue语句用于在循环中精确地控制代码的执行。

  • break 语句会立即退出循环，强制继续执行循环体后面的语句。
  • continue 语句退出当前循环，继续后面的循环。
for (var box = 1; box <= 10; box++) {
	if (box == 5) break; //如果 box 是 5，就退出循环
	document.write(box);
	document.write('<br />');
}
for (var box = 1; box <= 10; box++) {
	if (box == 5) continue; //如果 box 是 5，就退出当前循环
	document.write(box);
	document.write('<br />');
}

JS严格模式

基本概念

  • ES5中的运行模式：严格模式和非严格模式（松散模式）

  • 严格模式的目的

    • 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为
    • 消除代码运行的一些不安全之处，保证代码运行的安全
    • 提高编译器效率，增加运行速度

  • 启用严格模式的方式

    • 针对整个脚本文件使用 'usestrict'
    • 针对函数使用 'usestrict'
// 严格模式的使用方法
"use strict" //全局使用

function f() {
    "use strict" //函数内部使用
}
JS严格模式下语法和行为的改变
  • 严格模式下全局变量需显式声明

在这里插入图片描述

// 严格模式下全局变量需要显式声明
function f() {
    // 'use strict' 会报错，不会输出a
    a = 3;
    return a;
}
console.log(f());
  • 函数中的this

一般函数中的this（严格模式）为undefined，非严格下为全局变量window

// 函数中的this 一般函数中的this（严格模式）为undefined，非严格下为全局变量window
function f() {
    // 'use strict' 会报错，不会输出a
    return this;
}
console.log(f()); // 非严格模式下为window 严格模式下this为undefined

可以用此特性来判断当前是否为严格模式

/* 判断是否为严格模式,怎么判断一个函数是严格模式？ */
function isStrictMode() {
    if (this === undefined) {
        return true; // 严格模式
    } else {
        return false; // 不是严格模式
    }
}
isStrictMode();
  • 属性、变量及函数参数

严格模式下禁止删除不可改变的属性和未定义的变量

// 严格模式下禁止删除不可改变的属性和未定义的变量
function f(str) {
    // 'use strict'
    str.length = 0;
    console.log(str.length);
}
var a = 'abc';
f(a);// 3

function f(str) {
    'use strict'
    str.length = 0;
    console.log(str.length);
}
var a = 'abc';
f(a);
# Uncaught TypeError: Cannot assign to read only property 'length' of string 'abc'
#     at f (<anonymous>:3:16)
#     at <anonymous>:7:1

严格模式下禁止函数参数重名

// 严格模式下禁止函数参数重名
//"use strict";
function f(a, a, b) {
    return a + b;
}
f(2, 3, 4);// 7

"use strict";
function f(a, a, b) {
    return a + b;
}
f(2, 3, 4);
# Uncaught SyntaxError: Duplicate parameter name not allowed in this context

严格模式下禁止删除未定义的变量

//严格模式下禁止删除未定义的变量
delete foo; // true

'use strict';
delete foo; //error
# Uncaught SyntaxError: Delete of an unqualified identifier in strict mode.
frewenwang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript基础语法总结.pdf
07-02
这个资源是javaScript基础语法的总结，适合学完javascript基础语法的进行巩固、复习！ 这...我是想免费给大家看的,这怎么还收费
JavaScript基础语法
chenchenchencl的博客
03-09 952
JavaScript基础语法
javaScript基础语法介绍
10-24
本文从javascript简介开始，介绍了javascript的语法以及注意事项、动态语言、引用外部JS文件、变量命名规则、判断是否已经声明、不存在块级作用域这些方面的内容，是篇相当不错的基础语法的介绍文章，推荐给小伙伴们
JavaScript基础语法笔记
04-12
JavaScript基础语法笔记(for、对象、js基础语法截图等...)
javascript基础语法学习笔记
10-23
主要为大家分享了javascript基础语法学习笔记，帮助大家夯实javascript基础知识，感兴趣的小伙伴们可以参考一下
JavaScript基础语法（ppt）
05-31
JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）...
JavaScript基本语法
weixin_62270300的博客
02-25 2846
关于JavaScript基本语法大家的掌握有多少呢？接下来我们从以下方面一起回忆一下 首先关于JavaScript的认识 什么是JavaScript？ JavaScript的组成部分 JavaScript的主要用途 脚本执行原理 什么是JavaScript？ JavaScript是一种直译式脚本语言，是一种弱类型的语言。最早是在HTML网页上使用，用来给HTML网页增加动态效果。 JavaScript的组成部分是什么? ECMAScript ：JavaScript的基本语法 DOM
JavaScript 语法基础
lfm1010123的博客
08-10 431
例如：下面的变量 a 就是一个 int 类型，在后面的编译阶段中，不管怎么修改 a 的值都是可以的，但当前 a 的类型始终是 int 类型，这无法改变。在 JS 中，我们可以将数组理解为一个对象，那么我们就可以利用对象对应的方法，这就和 Java 中的 ArrayList 差不多，push 就相当于 ArrayList 的 add 方法。④ JS 对象没有 “继承”，继承本质就是 “让两个对象建立关联”，或者说，是让一个对象能够重用另一个对象的属性 / 方法，JS 中使用 “原型” 机制实现类似的效果。..
JavaScript——基本语法
SupreEvi的博客
03-05 1817
JavaScript的基本语法与C++基本类似。1.基本语句每一个语句以“；”为结束标志。语句块用{...}但是，JavaScript并不强制要求在每个语句的结尾加；，浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上；。2.声明变量语句有区别。对于c++：int var；//整型变量 char var：//字符类型 对于javascript：var a；3.{...}相关花...
JavaScript系列--基础语法
全网粉丝10W+、全栈领域优质创作者、掘金、阿里云等社区博客专家、专注于全栈领域和毕业项目实战
09-30 1122
JS基础前言1、简述2、基础语法内部JS外部JS注意点3、注释单行注释多行注释4、数据类型原始数据类型（基本数据类型）引用数据类型（对象）5、变量6、运算符一元运算符算数运算符赋值运算符比较运算符逻辑运算符三元运算符特殊语法7、流程控制语句if..else...switchwhiledo...whilefor 前言 1、今天是2021.9.30号晚上9点半 2、明天是国庆节，国庆节会更新JS内容和一个综合案例 3、JavaSe尚硅谷版本学习一遍，并发布所有相关笔记和思维导图 4、C语言的基础在学习一遍，等
JavaScript基础语法(个人整理)
有糖吃就会笑3
06-22 1775
JavaScript基础语法 JavaScript的简介 概述 JavaScript是一门动态的、弱类型的解释型高级编程语言。它基于原型，支持面向对象 和函数式编程等多种编程范式。通常称为js 作者 Brendan Eich（布兰登·艾奇） 背景： JavaScript诞生于 1995年，其诞生的初衷是为了减轻服务器的压力，而在客户端提供一种表单验证的功能。最初的名字为：Mocha（摩擦），1995年9月在Netscape navigator 2.0的beta版本中改名为 livescript，同年12月份
JavaScript基础入门——语法
Zhanganliu的博客
07-08 1805
一：简介 JavaScript是一种解释性程序设计语言、不需要编译器、只需要解释器。Web浏览器负责完成有关的解释和执行工作。 编译JavaScript不需要任何特殊工具（有则更加、比如jetbrainswebstorm，Sublime Text等神器）。 页面中使用JavaScript：1、在页面中任何位置添加<script> //body…</s...
Nice！JavaScript基础语法知识都在这儿了
Robod的博客
02-18 2304
好好学习，天天向上 本文已收录至我的Github仓库DayDayUP：github.com/RobodLee/DayDayUP，欢迎Star ⭐⭐⭐⭐⭐转载请注明出处！⭐⭐⭐⭐⭐ 链接： ⭐⭐⭐⭐⭐**转载请注明出处！**⭐⭐⭐⭐⭐ JavaScript简介 之前我们在写网页的时候，用的是HTML+CSS，这样的网页被称作静态网页，它只是用来展示内容而已，不具备交互的功能，如果想要点击某个元素的时候执行特定的事件，就要使用到JavaScript，有了JavaScript之后，网页就可以实现更加复杂的.
JavaScript_构建您的第一个移动应用程序.zip
05-20
JavaScript
手机应用源码新浪微博Android客户端.rar
最新发布
05-20
手机应用源码新浪微博Android客户端.rar
javascript基础语法
09-09
以下是JavaScript的一些基础语法： 1. 变量声明： 使用 `var`、`let` 或者 `const` 关键字来声明变量。例如： ```javascript var x = 5; let y = "Hello"; const z = true; ``` 2. 数据类型： JavaScript...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值