js基础--简介、变量、运算符、变量提升

小白小白从不日白

已于 2022-04-26 10:12:54 修改

阅读量252

点赞数 1

分类专栏： javascript 文章标签： javascript

于 2021-04-03 20:55:33 首次发布

本文链接：https://blog.csdn.net/weixin_43285360/article/details/115420614

版权

javascript 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

一、简介

javascript是一种轻量级的脚本语言(为弱语言类型)，可以部署在多种环境中，最常见的部署环境就是浏览器。
所谓“脚本语言”，指的是它不具备开发操作系统的能力，而只是用来编控制其他大型应用程序的操作方法。
JavaScript属于解释型语言。
JavaScript为单线程。

1.编译型语言和解释型语言的区别？

编译型语言是通篇翻译，也就是说比如你写了10行代码，但是它不会一行一行的进行翻译，而是10行代码全部‘看’完了再通篇翻译，翻译完后会生成一个文件，程序再执行该文件，就拿最常见的java来说，刚开始我们生成的java文件其后缀都是以.java命名的，在编译完后则会对应的生成一个以.class结尾的文件，然后程序去执行这个.class文件。
解释型语言则是逐行翻译，翻译一行执行一行，不会生成特定的文件。

b.解释型语言和编译型语言的优缺点

解释型：速度稍慢；跨平台
编译型：速度快；移植性不好（不夸平台）

2.核心部分：

		1. 基本的语法构造（比如操作符、控制结构、语句等）
		2. 标准库（就是一系列具有各种功能的对象，比如Array、Date、Math等） 
		3. 除此之外，还有提供的额外API可以分为三大类：浏览器控制类、 DOM类、Web类

 <p>
        组成部分：
        <pre>
            Ecmascript   js标准 规定了js的基础语法
            Dom          通过js操作网页元素
            Bom          通过API操作浏览器
        </pre>
    </p>

3.书写方式及位置

        <pre>
            行内式:
                例如：<input type="button" value="唐伯虎" onclick="alert('秋香姐')">
            内嵌式:
                <scrip type="text/javascript">...</scrip>
                注意：可写在页面的任何位置，推荐写在html结束标签之后
            外链式:
                <script src=""></script>
        </pre>

注意： 写js代码时，切记分号不能省略

4.输出信息的几种方式

<pre>
   alert("");  在页面中弹出一个对话框。早期用于js的调试
   confirm(""); 在页面中弹出一个对话框
   console.log(""); 将信息打印输出在控制台
   document.write(""); 在页面中输出消息及标签
   输入方式：prompt(""); 弹出对话框，用于接收用户信息
</pre>

5. 注释

<pre>
   单行注释：// 快捷键：ctrl + /
   多行注释：/**...*/或/*...*/  快捷键：ctrl + shift + \
</pre>

二、变量

语句：
描述：以分号结尾的表达式
注意：一般情况一行就是一个语句（多个语句可以写在一行，但不建议）
变量：
描述：其表示的值可以发生改变的量
语法：变量一般采用var声明

例如：

 var name; //声明变量
        name = '张三'; //给变量赋值
        
 var n = 1,
     n1 = 2,
     n2 = 3,
     n3 = 4,
     n4 = 5; //变量的集体声明

1.变量命名规则

变量的本质是在内存中申请的一块用来存放数据的空间

命名规范：

<pre>
  	i. 由字母(A-Z,a-z)、数字(0-9)、下划线(_)、美元符号($)组成。例如：userAge num_01 _name
    ii. 严格区分大小写
    iii. 不能以数字开头
    iv. 不能使用 **关键字**、**保留字** 例如：var for while if
    v. 变量名必须有意义即见名知意
    vi. 遵守驼峰命名法：首字母小写，后面的首字母大写。例如：userName
</pre>

例如：

var userName = 'zs';
var num1 = 1;

2.JavaScript 保留关键字（了解）

<h5>Javascript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Javascript 以后扩展使用。</h5>
    <pre>
        abstract 	arguments 	boolean 	break 	byte
        case 	catch 	char 	class* 	const
        continue 	debugger 	default 	delete 	do
        double 	else 	enum* 	eval 	export*
        extends* 	false 	final 	finally 	float
        for 	function 	goto 	if 	implements
        import* 	in 	instanceof 	int 	interface
        let 	long 	native 	new 	null
        package 	private 	protected 	public 	return
        short 	static 	super* 	switch 	synchronized
        this 	throw 	throws 	transient 	true
        try 	typeof 	var 	void 	volatile
        while 	with 	yield 		
    </pre>
    <p>* 标记的关键字是 ECMAScript5 中新添加的。</p>

3.JavaScript 对象、属性和方法（了解）

 <h5>避免使用 JavaScript 内置的对象、属性和方法的名称作为 Javascript 的变量或函数名：</h5>
    <pre>
        Array 	Date 	eval 	function 	hasOwnProperty
        Infinity 	isFinite 	isNaN 	isPrototypeOf 	length
        Math 	NaN 	name 	Number 	Object
        prototype 	String 	toString 	undefined 	valueOf
    </pre>

4.Windows 保留关键字（了解）

<h5>避免使用 HTML 和 Windows 对象和属性的名称作为 Javascript 的变量及函数名：</h5>
    <pre>
        alert 	all 	anchor 	anchors 	area
        assign 	blur 	button 	checkbox 	clearInterval
        clearTimeout 	clientInformation 	close 	closed 	confirm
        constructor 	crypto 	decodeURI 	decodeURIComponent 	defaultStatus
        document 	element 	elements 	embed 	embeds
        encodeURI 	encodeURIComponent 	escape 	event 	fileUpload
        focus 	form 	forms 	frame 	innerHeight
        innerWidth 	layer 	layers 	link 	location
        mimeTypes 	navigate 	navigator 	frames 	frameRate
        hidden 	history 	image 	images 	offscreenBuffering
        open 	opener 	option 	outerHeight 	outerWidth
        packages 	pageXOffset 	pageYOffset 	parent 	parseFloat
        parseInt 	password 	pkcs11 	plugin 	prompt
        propertyIsEnum 	radio 	reset 	screenX 	screenY
        scroll 	secure 	select 	self 	setInterval
        setTimeout 	status 	submit 	taint 	text
        textarea 	top 	unescape 	untaint 	window
    </pre>

5.HTML 事件句柄（了解）

<h5>避免使用 HTML 事件句柄的名称作为 Javascript 的变量及函数名</h5>
    <pre>
        onblur 	onclick 	onerror 	onfocus
        onkeydown 	onkeypress 	onkeyup 	onmouseover
        onload 	onmouseup 	onmousedown 	onsubmit
    </pre>

6.数据类型

JS中有六种数据类型，其中有五种为基本数据类型和一种对象(object)类型

类型：
(1)number 数字类型
(2)string 字符(串)类型
(3)boolean 布尔类型
(4)undefined 未定义
(5)null 空对象类型

注意：

js中拥有动态类型，变量可以根据【保存的值的类型】不同，而表现出不同的类型
其中基本数据类型在栈中存储的是值；引用类型在栈中存储的是地址
typeof 运算符能够查看变量的类型

例如：

 var item;
 console.log(typeof item);
 item=10;
 console.log(typeof item);
 item=true;
 console.log(typeof item)

6.1 数字(number)类型

javascript只有一种数字类型。数字可以带小数点，也可以不带
极大或极小的数字可以通过科学计数法来表示

		var num1=3;
        var num2=3.14;
        var num3=314e2;
        console.log(num3);

一个特殊的数字类型 NaN(not a number)

<script>
	console.log(typeof NaN); // number
</script>

6.2字符串(string)类型

在js中字符串类型是用来存储字符的类型，可以使用单双引号定义
字符串可以是引号中的任意文本
可以使用单引号或双引号(注意： 不与包围字符串的引号冲突)

 <script>
        var str1 = '';
        var str2 = 'a';
        var str3 = 'hello world';
        var str4 = "123";
        var str5 = 'my name is "sxt"';
        console.log(str5);
    </script>

6.3布尔(boolean)类型

描述：可以用来判断真假的数据类型
类型值：true false

	<script>
		var flag=true;
        var flag2=false;
        console.log( typeof flag);
        console.log( typeof flag2);
    </script>

6.4未定义(undefined)类型&空(null)类型

6.4.1未定义类型undefined

注意： 未定义类型中有一个值就是undefined
描述： 是用来描述当变量的值不确定时，变量所表示的类型
例如

<script>
var item;
console.log(typeof   item);
</script>

注意： 如果变量的值为undefined，并不代表变量就没有类型

<script>
        var name;
        console.log(name); //此时变量name的类型就是undefined类型
    </script>

6.4.2空类型null

描述：表示对象为空
null类型表示数据类型存在，但是并没有给变量（对象）赋值
一般null类型用于变量的初始化

注意： 如果变量（对象）的值为null，并不代表变量（对象）就没有类型

	<script>
 		var item ;
        item=null;
        console.log(typeof   item);
        var name;
        name=null;
        console.log(name); //此时name就不再是变量，而是一个对象。类型就是null类型。
    </script>

总结： undefined类型和null类型在页面中表现的效果是相同的，但是undefined用于变量类型；null用于对象类型。两者不能混用！

三、基本运算符

1.type 获取当前变量类型的运算符

<script>
 		var item=10;
 		console.log(typeof  item); // number
 </script>

2.= 赋值运算符

js中，=代表的是把等号右边的值赋予左边的变量

	<script>
        var item;
        item = 15;
    </script>

3. == 简要比较运算符（忽略变量类型）

 	<script>
        var item1 = 10;
        var item2 = '10';
        console.log(item1 == item2);//true
    </script>

4.=== 标准比较运算符（计算变量类型，严格相等）

 	<script>
        var item1 = 10;
        var item2 = '10';
        console.log(item1 === item2);//false
    </script>

四、算术运算符

1. 基本类型 + - * / %

	<script>
        console.log(1 + 1); // 2
        console.log(1 - 1); // 0
        console.log(1 * 1); // 1
        console.log(1 / 1); // 1

        console.log(4 % 2); // 0  % 取余 （取模）
        console.log(5 % 3); // 2

        // 我们不能直接拿着浮点数来进行相比较 是否相等 会存在精度问题
        console.log(0.1 + 0.2); // 0.30000000000000004
        console.log(0.07 * 100); // 7.000000000000001
        var num = 0.1 + 0.2;
        console.log(num == 0.3); // false
   </script>

加法和减法的特殊之处–隐式转换

a. 在一个加法运算中有任意一个数据是字符串，那么运算逻辑就是连接字符串，而且运行的结果就是两个字符串的连接
b. 如果加号两端有一端不是数字，那么先将数字转换为字符串，然后两个字符串拼接
c. 如果减号两端有一端不是数字，那么先将不是数字的内容转换称数字，在进行计算；如果不是数字的内容无法转换成数字，那么结果是NAN(no a number)

例如

	<script>
	 	var num1 = 10;
        var num2 = 'a';
        var result = num1 - num2;
        console.log(result); // NaN
        console.log(typeof result); // number

        var num3 = 'ac';
        var num4 = 'de';
        console.log(num3 + num4); // acde
    </script>

在这里插入图片描述

2.自增、自减运算符

类型：++ –
语法：++num num++ --num num–
功能：+1 -1

自增自减操作符遵循如下规则：

对于字符串，如果是有效的数值形式，则转换为数值再应用改变。变量类型从字符串变成数值。
对于字符串，如果不是有效的数值形式，则将变量的值设置为NaN。变量类型从字符串变成数值。
对于布尔值，如果是false，则转换为0再应用改变。变量类型从布尔值变成数值。
对于布尔值，如果是true，则转换为1再应用改变。变量类型从布尔值变为数值。
对于浮点数，加1或者减1。
如果是对象，则调用其**valueOf()**方法取得可以操作的值。对得到的值应用上述规则。如果是NaN，则调用toString()并再次应用其他规则。变量类型从对象变成数值。

总结

如果运算符在变量的前边，那么先自增或自减再使用（先写再读）
如果运算符在变量的后边，那么先使用，后自增或自减（先读再写）
自增自减运算符必须和变量一起使用

 <script>
        var n1 = 4;
        n1++; //5
        ++n1; //5
        console.log(n1); //在不参与运算的前提下，++n与n++结果一样

        //在参与运算的前提下，n++，是先赋值，在自增；++n，是自增，再赋值  自减运算和自增运算一样
        var a = 2;
        b = ++a;
        // b=a++;
        console.log(a); //3 3
        console.log(b); //3 2
    </script>

在这里插入图片描述

3.赋值运算符

类型：+= -= *= /= %=
功能：累加

 	<script>
        var num = 1;
        result1 = num += 5;
        result2 = result1 -= 2;
        result3 = result2 *= 5;
        result4 = result3 /= 4;
        result5 = result4 %= 3;
        console.log(result1); // 4
        console.log(result2); // 20
        console.log(result3); // 5
        console.log(result4); // 2
        console.log(result5); // 2
    </script>

在这里插入图片描述

4.比较运算符

类型:== === != >= <=

总结：

如果数字和其他内容比较，那么先将其他内容转换成数字，然后再进行运算
布尔转成数字(false是0，true是1)，再和数字进行运算
布尔和字符串进行比较时，都先转换成数字，再进行运算

 <script>
        var item = undefined; //undefined
        var b = null;
        console.log(item === b); // false
        // null与undefined自身严格相等
        console.log(undefined === undefined); // true
        console.log(null === null); // true
        console.log(NaN == NaN); //false
        console.log(3 >= 5); // false
        console.log(2 <= 4); // true
        //1. 我们程序里面的等于符号 是 ==  默认转换数据类型 会把字符串型的数据转换为数字型 只要求值相等就可以
        console.log(3 == 5); // false
        console.log('pink老师' == '刘德华'); // flase
        console.log(18 == 18); // true
        console.log(18 == '18'); // true
        console.log(18 != 18); // false
        // 2. 我们程序里面有全等 一模一样  要求 两侧的值 还有 数据类型完全一致才可以 true
        console.log(18 === 18); //true
        console.log(18 === '18'); // false
  </script>

在这里插入图片描述

5.逻辑运算符&三目运算符&运算符优先级

5.1 && || ！

语法：
- && (表达式1)&&(表达式2) 一假即假;运算具备短路功能
- || (表达式1)||(表达式2) 一真即真;运算具备短路功能
- ! !(表达式)

	<script>
        var age = 10;
        var result = 0 ? '成年' : '未成年';
        console.log(result);// 未成年

        // 1. 逻辑与 &&  and 两侧都为true  结果才是 true  只要有一侧为false  结果就为false 
        console.log(3 > 5 && 3 > 2); // false
        console.log(3 < 5 && 3 > 2); // true

        // 2. 逻辑或 || or  两侧都为false  结果才是假 false  只要有一侧为true  结果就是true
        console.log(3 > 5 || 3 > 2); // true 
        console.log(3 > 5 || 3 < 2); // false
        
        // 3. 逻辑非  not  ！ 
        console.log(!true); // false
    </script>

在这里插入图片描述

5.2 三目运算

语法： 表达式1?表达式2：表达式3；

	<script>
        var n2 = Math.floor((Math.random() * 100));
        var n1 = prompt("请输入你想输入的数字" + n2);
        n1 > n2 ? alert("你赢了！") : alert("你输了！"); // false
    </script>

在这里插入图片描述

5.3运算符优先级

在这里插入图片描述

	1. . () [] {}提取属性与函数调用
    2. delete new typeof + - ! 一元运算符
    3. * / %
    4. + - 加法/连接、减法
    5. >= <= > < 不等式运算符
    6. === !== 等式运算符
    7. && 逻辑与
    8. || 逻辑或
    9. ? : 三元运算符

6.短路运算（逻辑中断）

用我们的布尔值参与的逻辑运算 true && false == false
123 && 456 是值或者是表达式参与逻辑运算？

	<script>
        // 1. 逻辑与短路运算  如果表达式1 结果为真 则返回表达式2  如果表达式1为假 那么返回表达式1
        console.log(123 && 456); // 456
        console.log(0 && 456); //  0
        console.log(0 && 1 + 2 && 456 * 56789); // 0
        console.log('' && 1 + 2 && 456 * 56789); // ''
        // 如果有空的或者否定的为假 其余是真的  0  ''  null undefined  NaN

        // 2. 逻辑或短路运算  如果表达式1 结果为真 则返回的是表达式1 如果表达式1 结果为假 则返回表达式2
        console.log(123 || 456); // 123
        console.log(123 || 456 || 456 + 123); // 123
        console.log(0 || 456 || 456 + 123); // 456

        // 逻辑中断很重要 它会影响我们程序运行结果
        var num = 0;
        console.log(123 || num++); //123
        console.log(num); // 0
    </script>

在这里插入图片描述

注意： undefined、null、NaN、“”、0、false转换为布尔值都是false，其余的都为true

五、变量提升

在函数作用域或全局作用域中通过var声明的变量，无论实际上在哪里声明的，都会被当成在当前作用域顶部声明的变量，这就是是我们常说的提升机制
变量声明提升只提升定义而不会提升值
JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。
JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。
以下两个实例将获得相同的结果：

 <!--示例1-->
    <p id="demo"></p>
    <script>
        x = 5; // 变量 x 设置为 5
        elem = document.getElementById("demo"); // 查找元素 
        elem.innerHTML = x; // 在元素中显示 x
        var x; // 声明 x
    </script>

    <!--示例2-->
    <p id="demo"></p>
    <script>
        var x; // 声明 x
        x = 5; // 变量 x 设置为 5
        elem = document.getElementById("demo"); // 查找元素 
        elem.innerHTML = x; // 在元素中显示 x
    </script>

<script>
        //变量及变量提升和undefined类型
        //变量声明提升只提升定义而不会提升值
        console.log(a); //undefined
        var a = 20;
        console.log(typeof a); //number
        //undefined即是值也是undefined类型
        console.log(typeof undefined); // undefined
    </script>

JavaScript 初始化不会提升

JavaScript 只有声明的变量会提升，初始化的不会。以下两个实例结果结果不相同：

<!--示例1-->
    <p id="demo"></p>
    <script>
        var x = 5; // 初始化 x
        var y = 7; // 初始化 y
        elem = document.getElementById("demo"); // 查找元素 
        elem.innerHTML = x + " " + y; // 显示 x 和 y  5 7
    </script>

    <!--示例2-->
    <p id="demo"></p>
    <script>
        var x = 5; // 初始化 x
        elem = document.getElementById("demo"); // 查找元素 
        elem.innerHTML = "x 为：" + x + "，y 为：" + y; // 显示 x 和 y 5 undefined
        var y = 7; // 初始化 y
    </script>

小白小白从不日白

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
js基础--简介、变量、运算符、变量提升

一、简介javascript是一种轻量级的脚本语言(为弱语言类型)，可以部署在多种环境中，最常见的部署环境就是浏览器。所谓“脚本语言”，指的是它不具备开发操作系统的能力，而只是用来编控制其他大型应用程序的操作方法。JavaScript属于解释型语言。JavaScript为单线程。1.那么何为编译型语言和解释型语言呢？a.解释型语言与编译型语言的区别在于编译型语言是通篇翻译，也就是说比如你写了10行代码，但是它不会一行一行的进行翻译，而是10行代码全部‘看’完了再通篇翻译，翻译完后会生成一
复制链接

扫一扫