JavaScript精粹(一)

JavaScript(简称为JS)是一种广泛应用于网页开发的脚本语言,具有以下几个主要作用:

网页交互:JavaScript 可以用于创建动态的网页效果,例如响应用户的操作,实现页面内容的动态更新,以及验证用户输入等。
与用户交互:通过 JavaScript,网页可以与用户进行实时的交互,例如表单验证、响应点击事件、实现动画效果等,从而提升用户体验。
操作 DOM:JavaScript 可以通过 DOM(Document Object Model 文档对象模型)来操作网页的结构、样式和内容,使开发者能够动态地修改页面元素,实现页面的动态效果。
异步数据请求:JavaScript 可以通过 AJAX 技术(Asynchronous JavaScript and XML 异步 JavaScript 和 XML)向服务器发送异步请求,获取数据并动态更新页面内容,实现无需刷新页面即可加载新数据的功能。
构建 Web 应用:JavaScript 还可以用于构建复杂的 Web 应用,例如单页应用(SPA,Single Page Application)和动态网站,通过 JavaScript 的框架和库(如React、Angular、Vue.js等),开发者可以更高效地构建现代化的 Web 应用程序。

总的来说,JavaScript 在网页开发中扮演着至关重要的角色,它使得网页不再是静态的展示页面,而是可以实现丰富的交互和动态效果,从而提升用户体验和网站的功能性。

这里写自定义目录标题

  • 一、JavaScript发展史
    • 1.1 JavaScript用途
    • 1.2 JavaScript非常好学
  • 二、Hello Word!
    • 1.1 js代码的书写
      • 1.1.1 javascript标签的书写:
      • 1.1.2 放置位置,执行顺序
      • 1.1.3 console.log() 控制台
      • 1.1.4 alert()
      • 1.1.5 prompt()
    • 1.2 一个简单的js过程
      • 1.2.1获取元素
      • 1.2.2 绑定事件
      • 1.2.3写js代码需要注意什么?
    • 1.3 不同位置的js代码
      • 1.3.1 当js代码放在获取的元素之前的时候
      • 1.3.2 将js代码放在标签内
    • 1.4 事件
    • 1.5 在标签中添加 或者 获取内容
      • 1.5.1 innerHTML
      • 1.5.2 innerText
  • 三 变量和字面量初步
    • 1.1 变量和初步认识this
      • 1.1.1 定义变量
      • 1.1.2 变量要先申明才能用
      • 1.1.4 变量的运用
      • 1.1.2 this的简单认识
    • 1.2 数字的字面量
      • 1. 八进制举例:
      • 2. 16进制举例:
      • 3. NaN
    • 1.3 字符串
    • 1.4 变量类型
      • 1.4.1 数据类型(5种)
      • 1.4.2 引用类型
  • 四、数学运算符
    • 1.1 数学运算符
      • 1.1.1 string → number (显示类型转换)
      • 1.1.2 number → string
      • 1.1.3 toString()
      • 1.1.4 隐式转换
      • 1.1.5 取余 %
    • 1.2 关系运算符
      • 1.2.1关系运算符的正统,number和number进行数学运算,得到的答案boolean
      • 1.2.2 不正统的关系运算,为了面试
    • 1.3 逻辑运算符
      • 1.3.1 && 与运算符
      • 1.3.2 || 或运算符
      • 1.3.3 ! 非运算符
    • 1.4 赋值运算符
    • 1.5 Math对象方法


一、JavaScript发展史

1.1 JavaScript用途

前端三层:

  • 结构层 HTML 从语义的角度描述页面的结构
  • 样式层 CSS 从审美的角度装饰页面
  • 行为层 JavaScript 从交互的角度提升用户体验
    说白了,JavaScript用来制作web页面交互效果,提升用户体验

1.2 JavaScript非常好学

好学的点是什么:

  • JavaScript是有界面效果:不像C语言,黑底白字,很枯燥的。
  • JavaScript的语法来源于C和Java:有C和Java的经验同学好学很多。
  • JavaScript是弱变量类型的语言,动态数据类型语言。
  • JavaScript运行在宿主环境中,不关心内存,垃圾回收。

不好学的点是什么:

  • 兼容性问题: IE8是个怪胎,很多东西都不一样,所以就要写兼容写法,不怕造轮子,多写几遍
  • 花式写法很多,抽象:从简单入手,细细品味代码
  • 太多细节: 为知笔记认真写自己的笔记,自己做实验; 老师的课程已经精挑细选了细节,并不盲目堆砌

二、Hello Word!

1.1 js代码的书写

1.1.1 javascript标签的书写:

三种写法都是对的

<script></script>
<script type="text/javascript"></script>
<script language="javascript"></script>

JavaSript程序,要写在HTML页面中,运行页面的时候,这个页面上的JS也就一起运行了。也就是说,js的运行必须有宿主环境,最最常见的宿主环境,就是浏览器

1.1.2 放置位置,执行顺序

可以放置在页面中任何位置,但是,我们通常放在body或者head结束之前,且要注意加载顺序,从上到下依次加载
就像css一样,js还可以引入外部js文件,通常放在head结束之前

<script src="index.js"></script>

1.1.3 console.log() 控制台

console.log("内容");

在控制台输出内容,字符串需要加引号(单双引号不区分,成对出现就好)

1.1.4 alert()

alert("内容");

1.1.5 prompt()

var a = prompt("请输入用户名:");

会把用户输入的值返回,存到a里面

1.2 一个简单的js过程

我们想要用js操作元素,和我们的css一样,需要选择到这个元素,当然,我们的css是通过选择器,那么js是通过什么呢?

1.2.1获取元素

我们来学习第一个获取元素的方法

document.getElementById("id名");//通过ID选择器获取元素
//document代表整个HTML页面

1.2.2 绑定事件

当我们获取到元素以后,我们可以操作元素了,我们来给他绑定一个点击事件,通常也叫做添加监听。

document.getElementById("box").onclick = function () {alert("Daniel好帅!Daniel好帅!");
};

1.2.3写js代码需要注意什么?

通过上面的一段简单的js代码,我们可以总结出一些js的代码规范

  • 代码要缩进,缩进要对齐
  • js严格区分大小写
  • 语句字符都要半角符号
  • 每条完整语句后面要写分号
  • JavaScript对空格和换行不敏感,因此,语句后面的分号就显得尤为重要,分号代表一个语句执行完毕

1.3 不同位置的js代码

1.3.1 当js代码放在获取的元素之前的时候

这个时候由于代码是由上到下执行的,因此js找不到box,这个时候就会报错,这个时候我们可以用

window.onload = function(){}

将我们的代码包裹起来,这个代码的意思是:页面加载完成(标签、图片、框架…)后,执行代码。
但是,一个页面只能出现一次

<script>
window.onload = function(){document.getElementById("box").onclick = function(){alert( '这是我的第一段JavaScript代码~' );};
};
</script>
<body>
<div id='box'></div>
</body>

1.3.2 将js代码放在标签内

神奇的是,我们还能将js的代码放在标签里面,但是,写法有所不同

<div id='box' onclick='alert("这是我的第一段JavaScript代码~")'></div>

我们可以发现,少了function方法,好比我们有onclick这一个属性一样直接用等号加引号接上他的属性值
但是,这样子写没办法维护,代码一多久杂乱无章,可读性差因此我们不会这样写js

1.4 事件

JS里面有很多的事件,刚刚我们讲的onclick就是其中的左键点击事件。
我们可以讲这些事件大致分为几类:鼠标事件、键盘事件、表单事件、系统事件。此处做简单认识,暂时无需全部掌握。
鼠标事件:

onclick 鼠标点击事件
onmouseover/onmouseout 鼠标被移入/移出(会冒泡,暂时不需要理解)
onmouseenter/onmouseleave 鼠标移入/移出(常用)
ondblclick 鼠标双击事件
onmousedown 鼠标按键按下事件(按下不弹起)
onmousemove 鼠标移动事件
onmouseup 某个鼠标抬起事件

表单事件:

onblur 元素失去焦点
onfocus 元素获得焦点
onchange 用户改变表单的内容 (发生在失去焦点之前)
用户改变表单内容:当失去焦点的时候表示改变完成,但是又在失去焦点事件之前执行
onreset 重置按钮被点击(注意:要给form表单设置该事件)
onsubmit 提交按钮被点击

键盘事件:

onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下或按住
onkeyup 某个键盘的键被松开

系统事件:

onload 某个页面或图像被完成加载
onresize 窗口或框架被调整尺寸
onselect 文本被选定
onerror 当加载文档或图像时发生某个错误(xss跨站脚本攻击时使用)

1.5 在标签中添加 或者 获取内容

我们先来做一个小小的案列,当我们鼠标移入box盒子的时候显示一段文字:

1.5.1 innerHTML

我们又学习到一个新的属性:innerHTML 获取元素里面的内容或者添加内容

document.getElementById('box').onmouseover = function(){document.getElementById('box').innerHTML = '大家好,我是Daniel';
};

当然也可以获取内容

console.log(document.getElementById('box').innerHTML);

这个时候我们可以获取里面的内容,是获取到里面所有的内容,包括标签

1.5.2 innerText

此外,还有一个innerText也可以添加内容

document.getElementById('box').onmouseover = function(){document.getElementById('box').innerText = '<p>大家好,我是Daniel。</p>';
};
document.getElementById('box').onmouseover = function(){document.getElementById('box').innerHTML = '<p>大家好,我是Daniel。</p>';
};

但是我们可以看出来,innerText不能解析标签,而innerHTML可以。
注意:这两个属性都是可读可写的,也就是既可以修改也可以获取.


三 变量和字面量初步

1.1 变量和初步认识this

变量(Variables),和高中代数学习的x、y、z很像,它们不是字母,而是蕴含值的符号。
它和直接量不同,直接量5,就是数字5;直接量”你好”就是字符串“你好”。现在这个变量不一样了,你看见一个a,实际上它不是字母a,而是里面蕴含的不同的值。

1.1.1 定义变量

<script type="text/javascript">//定义一个变量var a;//赋值a = 100;//输出变量aconsole.log(a);
</script>

我们使用var关键字来定义变量,所谓的关键字就是一些有特殊功能的小词语,关键字后面要有空格。var就是英语variables变量的缩写,表示定义一个变量。一旦你

var a

你的电脑内存中,就会开辟一个空间,来存储这个变量a。现在就可以给这个变量赋值,JS中给变量赋值用等号,等号右边的值赋给左边

a = 100

现在a变量的值就是100。所以我们输出

console.log(a)    //100

1.1.2 变量要先申明才能用

使用一个变量,必须先进行一个var,才能使用。var这个过程可以叫做声明declaration,也可以叫做定义definition。
现在我们直接运行语句:

console.log(b);   //这个b没有被var过,所以要报错

在这里插入图片描述

因为b没有被定义,所以b现在不是一个变量,系统不认识这个b的。抛出引用错误。而且
如果一个变量,仅仅被var了,但是没有被赋初值呢,此时这个变量的值就是undefined 未定义

var a;
console.log(a);  //undefined

变量也可以一边定义一边赋值

var a = 10;

还可以同时定义多个变量

var a = 10,b = 20;

变量的名称是标识符(identifiers),任何标识符的命名都需要遵守一定的规则:

  • 在JavaScript语言中,一个标识符(identifier)可以由 字母、下划线(_)、美元($)符号、数字(0-9) 组成,但不能以数字开头 。也就是说,一个标识符必须由字母、下划线、美元符号开头,后续可以有字母、下划线、美元符号、数字。因为JavaScript语言是区分大小写的,所以A和a不是同一个变量。并且不能是JavaScript保留字、关键字。

1.1.4 变量的运用

之前我们设置了一个js事件,鼠标移入会显示内容,那么,当移出的时候我们也给他设置事件,让里面的内容清空

document.getElementById('box').onmouseover = function(){document.getElementById('box').innerHTML = '大家好,我是Daniel。';
};
document.getElementById('box').onmouseout = function(){document.getElementById('box').innerHTML = '' ";
};

这个时候,我们可以看到我们的页面中有一大串重复的语句document.getElementById(‘box’) ,这时候我们就可以用变量把他给存起来。

var oBox = document.getElementById('box');
oBox .onmouseover = function(){oBox .innerHTML = '大家好,我是Daniel。';
};
oBox .onmouseout = function(){oBox .innerHTML = ''";
};

这个时候,我们可以发现,我们的代码量少了很多,优化了代码,也提升了运行速度,但是,我们却不能这样子,

var oBox = document.getElementById('box');
var x= oBox .innerHTML
oBox .onmouseover = function(){x = '大家好,我是Daniel。';
};
oBox .onmouseout = function(){x = ''";
};

这个时候是什么情况呢,是我们把oBox的内容复制给了x,再将’大家好,我是Daniel。复制给x,这时候,等价于给x新赋值了内容,把之前的覆盖了。在js里面 ‘=’是赋值的意思,‘==’才是等于的意思

1.1.2 this的简单认识

this指向触发这个事件的对象

oBox1.onmouseenter = function () {this.innerHTML = "我爱Daniel!";//在js里面=是赋值
};
oBox1.onmouseleave = function () {this.innerHTML = "Daniel好帅!";//在js里面=是赋值
};

字面量:英语叫做literals,有些书上叫做直接量。
我们先来学习数字的字面量,和字符串的字面量。剩余的字面量类型,我们日后遇见再介绍

1.2 数字的字面量

数字的字面量,就是这个数字自己,并不需要任何的符号来界定这个数字。
JavaScript中,数字的字面量可以有三种进制:

  • 10进制:普通的数字就是十进制
  • 8进制:如果以0开头、或者以0o开头、或者以0O开头的都是八进制,八进制只能用0~7来表示
  • 16进制:如果以0x 或0X开头的都是十六进制。

1. 八进制举例:

以0开头,所以就是八进制;显示的时候会以十进制显示 036 = 3*8+6=30

    console.log(036);  //30console.log(044);   //36console.log(010);   //8console.log(0o36); //30console.log(0O36); //30console.log(010);   //8

注意,八进制只能出现0~7这8中字符,如果表示不合法,那么JS将自动的认为你输入错了,从而用十进制进行显示:
console.log(088);//88 以0开头,按理说是八进制,但后面的数字错了,所以以十进制显示
但是以0o开头、0O开头的数字,如果后面写错了,控制台报错

2. 16进制举例:

十六进制数:0 1 2 3 4 5 6 7 8 9 a b c d e f

console.log(0xff);   //255
console.log(0x2b);  //43
console.log(0x11);  //17

小数的字面量也很简单,就是数学上的点。计算机世界中,小数称为“浮点数”,允许使用e来表示乘以10的几次幂:

console.log(5.6e5); //560000
console.log(1e-4); //0.0001
console.log(.1e-3); //0.0001

只有十进制有小数的字面量,八进制、十六进制没有小数的字面量
最后学习两个特殊的字面量:

Infinity 无穷大

试图输出一个非常大的数字:

console.log(3e45645645645645);  //infinity

至于多大的数字能生成无穷大,不同浏览器不一样,不要管,当然也可以是负无穷大

3. NaN

英语全名叫做not a number,不是一个数。比较哲学的是,这个“不是一个数”是一个数字字面量

console.log(0/0);

简单得说就是用不是数字字面量或数字字符串参与运算,或者不符合运算法则的结果就是NaN
总结一下,数字字面量有 整数字面量(十进制、16进制、八进制),浮点数字面量(要记住e),Infinity,NaN

1.3 字符串

字符串是一个术语,就是人类说的语句、词。字符串的字面量,必须用双引号、单引号包裹起来。字符串被限定在同种引号之间;也即,必须是成对单引号或成对双引号。

console.log("今天天气很好")

或者

console.log('今天天气很好')

但是绝对不能

console.log('今天天气很好")

无论什么类型,只要用引号引起来以后就是字符串
如果在字符串里面要使用引号,那么必须用转义符号""转义:

console.log("老师说你像\"考拉\"一样漂亮");

1.4 变量类型

这个变量是什么类型,和赋的值有关系,而和定义的时候是没有关系的。定义的时候,都是用var关键字定义的
检测数据类型用typeof

var a = 10;
console.log(typeof a);

1.4.1 数据类型(5种)

基本类型5种:

  • number 数字类型
  • string 字符串类型
  • undefined undefined类型,变量未定义时的值,这个值自己是一种类型
  • boolean 布尔类型,仅有两个值true 和 false,讲if语句时我们细说
  • null null类型,空对象 这个值自己是一种类型,遇见时我们细说

(1) number 数字类型

var a = -100;

(2)string 字符串(无论什么类型,用引号引起来就是字符串)

 var a = '100';

注意:空字符串,也是字符串。
(3) undefined

var a;
console.log(a);   //undefined

(4) boolean 布尔值(true/false)

var a = false;

1.4.2 引用类型

所谓的引用类型就是在进行比较的时候比较的不仅是值,还有内存地址
(1)function 函数类型

var a = function () {console.log("Daniel!");};var b = function () {console.log("Daniel!");};console.log(typeof a); // functionconsole.log(a === b); //false};

我们可以发现 虽然这两个函数长得一模一样,但是却不相等,这就是因为在定义的时候开辟了两个不同的内存,导致他们的内存地址不相等,所以值不等。
还有json,数组也是引用类型,不过,function是独立的function类型,json和数组是object类型

(2)object对象(元素节点、数组、JSON、null)

元素节点:

var oBox = document.getElementById('box');
console.log(typeof oBox); //object

数组:
数组(数组里面可以放任意的数据类型,包括数组)

var a = [1,2,3,'Daniel','好帅'];

可以通过下标的方式获取数组里面的内容,数组的下标从0开始

console.log(a[2]);    //3

通过.length获取数组的长度

console.log(a.length)   //5

类型:object

var a = [1,2,3,4];
var b = [1,2,3,4];
console.log(typeof a); //object
console.log(a === b); //false

JSON:

  • JSON,里面放置键值对,由逗号隔开,最后一个可以不加逗号
  • 键值对:由引号引起的属性 冒号 值构成
  • 就属性而言:可以不用引号,但有些后台语言不认识没有冒号的JSON,因此我们统一要求加冒号
  • 就值而言:可以是任意语句,但是一般传到后台的是字符串数据,在js自身去使用的话可以是任意类型
var a = {"name" : 'Daniel',"sex" : '男',"age" : 18,"fn" : function () { console.log("哈哈");}};console.log(a.name); //调用里面的属性 值console.log(a.fn());

但是,和数组不一样的是,json里没有长度这个属性,除非你定义了

console.log(shuaiGe.length); //undefined

类型:object

    var a = {"name" : "Daniel"};var b = {"name" : "Daniel"};
console.log(typeof a); // objectconsole.log(a === b); //false

null:
在一个节点元素没有添加事件的时候,他的事件就是null

var oBox = document.getElementById('box');
console.log(oBox.onclick); //null
console.log(typeof oBox.onclick); //object

所以我们在绑定一个事件的时候想要解绑,就可以用null

var oBox = document.getElementById('#box');oBox.onclick = function (ev) {console.log("你好!");};oBox.onclick = null;

四、数学运算符

运算符(Operators,也翻译为操作符),是发起运算的最简单形式。运算符的分类见仁见智,我们的课程对运算符进行如下分类:

  • 数学运算符(Arithmetic operators)
  • 比较运算符(Comparison operators)
  • 逻辑运算符(Logical operators)
  • 赋值运算符(Assignment operators)
  • 按位运算符(Bitwise operators)
  • 条件 (三元) 运算符(Conditional operator)

1.1 数学运算符

数学运算符的正统,是number和number的数学运算,结果是number。出于面试的考虑,有一些奇奇怪怪的数学运算:
数学运算中,只有纯数字字符串、布尔值、null能够帮你进行隐式转换
- + - * / % ()

1.1.1 string → number (显示类型转换)

(1)parseInt()
parseInt就是将一个string转为一个整数,不四舍五入,直接截取整数部分。如果这个string有乱七八糟的东西,那么就截取前面数字部分。如果两个数字之间有字符串,那么只截取第一个数字。

var a = "123.12px123";
var b = parseInt(a);
console.log(typeof b); //number
console.log(b); //123

(2)parseFloat()
会截取小数点

var a = "123.12px123";
var b = parseFloat(a);
console.log(typeof b); //number
console.log(b); //123.12

1.1.2 number → string

将一个数字,与一个空字符串进行连字符运算,那么就是自动转为字符串了,不仅是数字适用,其他类型要转换成字符串也适用

var a = 123;
var b = a + "";
console.log(b); //123
console.log(typeof b);  //string

1.1.3 toString()

将其他类型转换为string类型

var str4 = 100;
console.log(typeof str4.toString()); //string

1.1.4 隐式转换

就是没有写parseInt()、parseFloat()自己帮你转格式

console.log(3 * "8"); //24
console.log("3" * "8"); //24
console.log("48" / "2"); //24
console.log("24" % 55); //24
console.log(3 * null);  //0   隐式转换的时候null将被转为0
console.log(3 * false);  //0  隐式转换的时候false将被转为0
console.log(3 * true);  //3  隐式转换的时候true将被转为1
// 不纯的字符串和undefined是不能帮你进行隐式转换的,结果都是NaN
console.log(3 * "8天"); //NaN 数学运算中,不纯的字符串没法隐式转换
console.log(3 * undefined); //NaN  数学运算中,undefined不能进行隐式转换

加号比较特殊,加号两边都是数字类型或者数字类型的字符串的时候,那么就是数学加法;两边不都是数字或者数字类型的字符串的时候,那么就是字符串的拼接,结果是字符串。

var sum = 3 + 4; //7

以上是运算

console.log("你" + "好"); //你好
var sum = "3" + "4"; //34

这种就是字符串的拼接,所以,加号没有隐式类型转换

总结

  • 无论哪种运算,只要出现了undefined参与运算,结果都是NaN。
  • 然后"4"、false、true、null都能进行隐式转换。
  • 加号比较特殊,面对"4"没有隐式转换的

1.1.5 取余 %

两个值相除的余数

var a = 13 % 5;
console.log(a);   //3

13除以5 商 2 余3, 所以结果为3

1.2 关系运算符

<img src="img/1.jpg" alt="Daniel的媳妇儿,你们的师娘!" id="box" width="200" >>   大于<   小于>=  大于等于<=  小于等于==  等于!=  不等于=== 全等于!== 不全等

1.2.1关系运算符的正统,number和number进行数学运算,得到的答案boolean

console.log(8 > 5);
console.log(7 < 4);

(1)= 等号 赋值

var a = 10; //将10赋值给a

(2)== 等等 等于

var a = 10;
var b = "10";
console.log( a == b );  //true

(3)=== 全等 数据类型判断值和类型 引用类型判断内存地址和值

var a = "3",var b = 3;
console.log( a === b );  //false

1.2.2 不正统的关系运算,为了面试

(1)string 和 string 比较的就是字符编码顺序
字符编码顺序 à 数字、大写字母、小写字母

"a" < "b" //true
"A" < "B" //true
"A" < "a" // true ,大写字母在字符集里面是在小写字母前面
"1" < "A"   //true ,数字在字母前端
"blank" < "blue"   //true   因为一位一位比,直到比出大小
"25678" < "111111111"    //false  因为是string和string比,比的是字符编码顺序 所以一位一位的比

(2)与数字进行关系运算时,纯数字字符串被转为数字,null转换为0,true转换转为1, false转换为0 (隐式类型转换)

注意的是:null不能进行和0的相等判定

null < 0.00001   //true
null > -0.0001   //true
null == 0   //false  
false == 0   //true
true == 1 //true

NaN不等于自己,不全等于自己

NaN == NaN   //false
NaN === NaN   //false
NaN != NaN //true
NaN !== NaN //true

string 和 number比,string会被隐式转换为number

console.log( "234" < 235 ); //true

要注意的是,不要出洋相,不能连续使用关系运算符!!
2 > 2 > 1
的值是多少?

解:原式=(3>2) >1 = true > 1 = false (因为true会被当做1来与1进行比较)

也就是说,不能连续使用关系运算符!!因为一旦连续使用了,实际上还是从左至右计算,所以就有上一步的boolean参与了下一步的运算。
如果想要使用连续关系运算:
1<2 && 2<3

1.3 逻辑运算符

逻辑运算符就三个:

  • && 逻辑与运算
  • || 逻辑或运算
  • ! 逻辑非运算

正统来说,参与逻辑运算的是boolean和boolean,得到的结果也是boolean

1.3.1 && 与运算符

都真才真 有假就假 “短路语法”:a&&b a真抛出b a假抛出a

console.log(1 && 2); //2
console.log(false && 2); //false

1.3.2 || 或运算符

有真就真,都假才假 “短路语法”: a || b a真抛出a a假抛出b

console.log(1 || 2); //1
console.log(false || 2); //2

1.3.3 ! 非运算符

取反

console.log( !1 ); //false
console.log( !false ); //true

1.4 赋值运算符

  • = 赋值
  • += 加等于
  • -= 减等于
  • *= 乘等于
  • /= 除等于
  • %= 模等于
  • ++ 加加
  • -- 减减

赋值运算的参与者,一定是变量
(1)+=

var a = 1;
a += 2;        //这行语句等价于a = a + 2;
console.log(a);   //3

(2)/=

var b = 6;
b /= 3;   //等价于b = b / 3
console.log(b); //2

(3)%=

var c = 100;
c %= 10; //等价于c = c % 10;
console.log(c); //0var a = false + true && 13;
原式 = 0 + 1 && 13= 1 && 13= 13

(4)++

var e = 10;
e++; //等价于e=e+1
console.log(e); //11

++可以与输出语句写在一起,++写在变量前和写在变量后不是一个意思

var a = 10;
var x = a++// 先赋值 再加1
var y = ++a : // 先加1 再赋值

++有花式玩儿法,仅面试有用:

var a = 8;
console.log(4 + a++);   //12  , 先使用原来的a的值,就是4+8,输出12.然后a加1  a为9
console.log(a);     //9

(5)运算符的计算顺序:
++ -- !贴身的 →→→ 比较 →→→ 逻辑 →→→ 赋值

var a = 3 < 6 && 7 < 14; //true
原式 = true && true= true
var a = 1 + 2 < 3 + 3 && 3 + 4 < 2 * 7;
原式 = 3 < 6 && 7 < 14= 上一题= true
var a = false + true && 13;
原式 = 0 + 1 && 13= 1 && 13= 13
var a = 15;
false + a++ + true > 8 && 13 || 6
原式 = false + 15 + true > 8 && 13 || 6= 16 > 8 && 13 || 6= true && 13 || 6= 13 || 6= 13

1.5 Math对象方法

  1. Math.pow(x,y) x的y次幂
    Math.pow(3,4) //81
  2. Math.sqrt(x); x的根号
    Math.sqrt(81); //9
  3. Math.floor() 向下取整
    Math.floor(3.14) //3
  4. Math.ceil() 向上取整
    Math.ceil(3.14) //4
  5. Math.max() 取最大值 参数没有个数限制
    Math.max(3,4) // 4
  6. Math.max() 取最小值 参数没有个数限制
    Math.min(3,4); //3
  7. Math.random() 随机数 [0,1) 之间,取得到0,取不到1
    要取到[a,b]之间的随机整数,公式:Math.floor(Math.random()*(b-a+1) + a),比如要取[2,4]之间的整数
    Math.floor(Math.random()*(4-2+1) + 2);
  8. Math.abs() 取绝对值
    Math.abs(-2) // 2
  9. Math.round() 四舍五入
    Math.round(3.14) //3

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/12282.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java SE vs Java EE:深入剖析及面试指南

Java 平台提供了多个版本来满足不同应用场景的需求&#xff0c;其中最常用的是 Java SE&#xff08;Standard Edition&#xff09;和 Java EE&#xff08;Enterprise Edition&#xff09;。理解这两个版本的区别对于任何 Java 开发者都是至关重要的&#xff0c;尤其是在面试过程…

C++字符串细节,面试题06

文章目录 22. 字符串22.1. 字符数组 vs 字符指针 vs 常量字符指针 vs string22.2. strcpy vs sprintf vs memcpy22.3. strlen vs length vs size vs sizeof22.4. 字符串之间的转换22.5 其他数据类型与字符串之间的转换22.6 字符串分割 22. 字符串 22.1. 字符数组 vs 字符指针 …

Spring整合其他技术

文章目录 Spring整合mybatis思路分析Mybatis程序核心对象分析整合Mybatis 代码实现 Spring整合Junit修改成警告 Spring整合mybatis 思路分析 Mybatis程序核心对象分析 上面图片是mybatis的代码&#xff0c;上述有三个对象&#xff0c;分别是sqlSessionFactory&#xff0c;sqlS…

Linux:配置客户端自定义autofs服务

Linux&#xff1a;配置客户端自定义autofs服务 修改autofs的主策略文件 [rootserver200 data]# vim /etc/auto.master# 修改内容如下 /misc /etc/auto.misc # 挂载目录的上级目录 /mnt /etc/auto.timinglee --timeout3修改autofs的自定义策略文件 [rootserver200 data]…

数据库SQL编写规范-SQL书写规范整理(SQL语句书写规范全解-Word原件)

编写本文档的目的是保证在开发过程中产出高效、格式统一、易阅读、易维护的SQL代码。 1 编写目 2 SQL书写规范 3 SQL编写原则 软件全套精华资料包清单部分文件列表&#xff1a; 工作安排任务书&#xff0c;可行性分析报告&#xff0c;立项申请审批表&#xff0c;产品需求规格说…

鸿蒙布局Column/Row/Stack

鸿蒙布局Column/Row/Stack 简介我们以Column为例进行讲解1. Column({space: 10}) 这里的space: 10&#xff0c;表示Column里面每个元素之间的间距为102. width(100%)&#xff0c;height(100%) 表示宽高占比3. backgroundColor(0xffeeeeee) 设置背景颜色4. padding({top: 50}) 设…

【ARM 嵌入式 C 文件操作系列 20.4 -- 打印 uint64_t 类型的数值】

文章目录 C代码中 打印 uint64_t 类型的数值测试效果 C代码中 打印 uint64_t 类型的数值 为了以16进制方式打印uint64_t类型的数值&#xff0c;可以使用printf函数&#xff0c;配合<inttypes.h>头文件中定义的宏PRIX64或PRIx64。这些宏确保了无论在哪个平台上&#xff0…

keepalived双机热备超详细入门介绍

keepalived 一、keepalived入门介绍 1.keepalived简介 2.keepalived服务的三个重要功能 2.1.管理LVS负载均衡软件 2.2.实现对LVS集群节点健康检查功能 2.3.作为系统网络服务的高可用功能 3.keepalived高可用故障切换转移原理 4.keepalived安装及主配置文件介绍 …

如何用Rust获取本机CPU、内存在Web网页中显示?

目录 一、需求描述 二、具体操作步骤 三、知识点 1、systemstat 2、Actix 一、需求描述 需求&#xff1a; 1、需要使用Rust进行后端开发获取本机CPU和内存信息&#xff1b; 2、使用WEB框架发布API&#xff1b; 3、然后使用HTML/CSS/JavaScript进行前端开发&#xff0…

MySQL表的增删查改【基础部分】

数据表的操作 新增 普通插入 insert into 表名 values(值,值...)注意&#xff1a; 此处的值要和表中的列相匹配 使用’‘单引号或者”“双引号来表示字符串 mysql> insert into student values(123,zhangsan); Query OK, 1 row affected (0.02 sec)指定列插入 insert …

2024年3月 电子学会 青少年等级考试机器人理论真题五级

202403 青少年等级考试机器人理论真题五级 第 1 题 下图程序运行后&#xff0c;串口监视器显示的结果是&#xff1f;&#xff08; &#xff09; A&#xff1a;0 B&#xff1a;1 C&#xff1a;3 D&#xff1a;4 第 2 题 下列选项中&#xff0c;关于74HC595移位寄存器芯片的…

微信小程序开发【Coffee Shopping】(1)

1.环境准备 微信开发者工具&#xff1a;https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 前端常用网站集合&#xff1a;http://www.wwp666.cn/ 微信小程序开发文档&#xff1a;https://developers.weixin.qq.com/miniprogram/dev/framework/quicksta…

数据结构之二叉树详解[1]

在前面我们介绍了堆和二叉树的基本概念后&#xff0c;本篇文章将带领大家深入学习链式二叉树。 1.预备知识 2.二叉树结点的创建 3.二叉树的遍历 3.1前序遍历 3.2中序遍历 3.3 后序遍历 4.统计二叉树的结点个数 5.二叉树叶子结点的个数 6.二叉树第k层的结点个数 7.总结 …

鸿蒙ArkUI开发:常用布局【相对布局】

相对布局&#xff08;RelativeContainer&#xff09; 相对布局可以让子元素指定兄弟元素或父容器作为锚点&#xff0c;基于锚点做位置布局必须为RelativeContainer及其子元素设置ID&#xff0c;用于指定锚点信息。未设置ID的子元素不会显示RelativeContainer ID为“__containe…

增程SUV价格即将崩盘?买车一定要再等等!

文 | AUTO芯球 作者 | 雷歌​ 真是“离谱”啊&#xff0c;车圈真是逗比欢乐多&#xff0c; 我这两天看一个博主连续40多小时开车直播&#xff0c;充电口、油箱盖全部封死&#xff0c;全程视频直播没断过&#xff0c; 就为了测试这两天刚上市的星际元ET续航有多远。 另一个…

Docker 创建网络

问题&#xff1a; 1.需要将多个容器添加到同一个网络. 2.docker-compose.yaml 如果不指定&#xff0c;默认会重新创建一个网卡. 创建网卡 docker network create -d bridge mynet ##-d 指定模式&#xff08;默认桥接&#xff09;查看自定义网络信息 docker inspect mynet…

NSSCTF Web方向的例题和相关知识点(二)

[SWPUCTF 2021 新生赛]Do_you_know_http 解题&#xff1a; 点击打开环境&#xff0c;是 提示说请使用wLLm浏览器访问 我们可以更改浏览器信息&#xff0c;在burp重放器中发包后发现是302重定向&#xff0c;但是提示说success成功&#xff0c;说明 我们修改是成功的&#xff…

HTML特殊字符

特殊字符 有特殊含义的字符成为字符实体 对于有特殊含义的字符,需要通过转移字符来表示 <span> <br><a href"http://www.atguigu.com">我 爱 前端</a> <br>&amp;amp; 效果

Element-UI 快速入门指南

文章目录 一、安装 Element-UI1.1 使用 npm 安装1.2 使用 yarn 安装 二、引入 Element-UI三、使用 Element-UI 组件3.1 按钮组件3.2 输入框组件3.3 表单组件3.4 表格组件3.5 弹框组件 四、自定义主题4.1 安装主题工具4.2 初始化变量文件4.3 编译主题 五、总结 &#x1f389;欢迎…

刷题之最长连续序列

哈希表 class Solution { public:int longestConsecutive(vector<int>& nums) {//set记录并且去重nums中的数unordered_set<int>set;for(int i0;i<nums.size();i){set.insert(nums[i]);}int result0;//遍历所有数for(auto iset.begin();i!set.end();i){//如…