JavaScript基础语法

2021-01-21 15:02 419人阅读评论(0)

JavaScript基础语法

序言
一、JS用法
二、JS调试与注释
三、JS变量
四、JS数据类型
五、运算符
- - 运算符

序言

1.JavaScript学习方法：
编程思维：更高效的解决问题、更全面的思考、更清晰的逻辑
布鲁姆教育将思维学习分六个层次：
记忆、理解、应用、分析、评价、创造

2.什么是JS：
JavaScript 直译式、动态类型、弱类型、基于原型的脚本语言
js跨平台 ==> windows linux ios 安卓 …

3.JS发展史：
==>1994年，网景公司(Netscape)发布了Navigator浏览器0.9版
==>发明一种全新的语言。
==> liveScript ==> javaScript ==> ECMAscript

1995年Sun公司将Oak语言改名为Java，正式向市场推出。Sun公司大肆宣传，许诺这种语言可以"一次编写，到处运行"(Write Once, Run Anywhere)，它看上去很可能成为未来的主宰。
网景公司动了心，决定与Sun公司结成联盟
34岁的系统程序员Brendan Eich登场了。1995年4月，网景公司录用了他,他只用10天时间就把Javascript设计出来了。（多态语言）

4.JS组成部分：

ECMAScript语法
DOM文档对象模型(Document Object Model)
BOM浏览器对象模型(Browser Object Model)

一、JS用法

1.js引入方式，内嵌式

用法：内嵌式的 js 代码会在页面打开的时候直接触发
代码如下（示例）：

<!-- 在 html 页面书写一个script 标签，标签内部书写 js 代码 -->

<script type="text/javascript">
//type 书写值可写可不写
	alert("这是一个弹窗");
</script>

<!--
scirpt标签可以放在 head 里面也可以放在 body 里面
 -->

2.js引入方式，行内式

用法：写在标签上的 js 代码需要依靠事件（行为）来触发
代码如下（示例）：

<!-- 写在 a 标签的 href 属性上 -->
<a href="javascript:alert('这是一个弹窗');">点击试试</a>

<!-- 写在其他元素上 -->
<div onclick="alert('这是一个弹窗')">点击试试</div>

<!--
onclick(点击事件)：当点击元素的时候执行后面的 js 代码
-->

3.js引入方式，外链式

用法：新建一个 .js 后缀的文件，在文件里书写 js 代码，通过script标签的src引入外部js后缀的文件
代码如下（示例）：

//我是 index.js 文件
alert("这是一个弹窗");

<!--很多html页面都可以调用js4.js页面-->
<script src="../js/js4.js" type="text/javascript" charset="utf-8">

二、JS调试与注释

1.调试方法

代码如下（示例）：

alert(“123”) 	// 弹出提示框输出
console.log(”123“)  // 在控制台打印：
document.write('123')		//在页面中输出<不推荐使用>

2.调试代码的流程

看是否有报错
单词错误
输出调试各种数据（变量）
思考怎么解决（查看比较，百度，看文档）

3.关于注释

最讨厌别人让我写注释
最讨厌别人不写注释
代码如下（示例）：

// 单行注释，注释内容不可以换行  ctrl+/

/* 多行注释  alt+shift+a			(Visual Studio Code)
注释内容
可以换行
 */

/**
* 文档注释
* 说明类、方法的参数及使用方式。。。
* 功能介绍
*/

三、JS变量

一个变量名只能储存一个值
当再次给一个变量赋值的时候，前面一次的值就会被覆盖掉
变量名严格区分大小写
代码如下（示例）：

var abc = 123
// 把123这个数据赋值给变量abc

1.使用关键字var

var str = 'abc'; 	// 显式声明变量

2.声明变量可以不给初始值

var num 			// 显式声明变量

3.声明变量可以不使用关键字var

age = 18 			// 隐式声明变量
console.log( age )	// 18  引用变量

4.但是不允许直接使用一个未声明的变量，会报错

console.log( word );
// Uncaught ReferenceError: hehe is not defined   at 4-变量.html:25
// 未捕获     引用错误     ：word 未定义 (报文)           报错位置

5.标识符（变量、函数、属性、参数，你自己命名的东西）命名规范：

/*
    1.第一个字符不能是数字，可以字母、下划线、美元符号$
    2.命名中不能包含空格
    3.从第二个字符开始可以是数字、字母、下划线、美元符号$
    4.标识符命名要语义化（有语义有含义）非必须
    5.不可以使用关键字和保留字命名
*/
var var = 123
console.log( var )
//Uncaught SyntaxError: Unexpected token 'var'    4-变量.html:37 
//            语法错误

6.语义化命名规范：

var userAgeNumber = 23		//驼峰命名法
var UserAgeNumber = 23		//帕斯卡命名法
var user_age_number = 23		//下划线命名法

var num_user_age = 23
var nUserAge = 23			//匈牙利命名法

四、JS数据类型

ES3 有 5 种基本数据类型：number、null、undefined、boolean、string；1 种复杂数据类型 object。ES6+ 后面新增了两种基本数据类型：Symbol, Bigint。如果把函数 function 也算作一种数据类型，就是 9 种。

1.number数字类型

一切数字都是数值类型（包括二进制、十进制、十六进制）
NaN：非数字类型
正数、负数、整数、浮点数、NaN 都叫 number
NaN ： Not a Number 非数字，代表错误的计算结果
NaN特性：

1. 任何与NaN进行计算结果都是NaN

console.log( 1 + NaN )// NaN
console.log( 1 - NaN )// NaN

2. NaN与任何值都不相等，包括它自己也不相等

console.log( NaN === NaN )// false

isNaN() 判断一个数据是否为NaN，返回布尔值

console.log( isNaN(NaN) )		//true
console.log( isNaN(123-'a') )		//true
console.log( isNaN(123) )		//false
console.log( isNaN('123') )		//false
console.log( isNaN('a123') )	//true
console.log( isNaN( Number('123') ) )
console.log( isNaN( Number('a123') ) )
console.log( Number('123') )	//123
console.log( Number('a123') )	//NaN

isNaN 判断一个值是否为纯数字字符串

var qq = '2437325196'
console.log( isNaN(qq) )

小数加减出现的系统bug

console.log( 0.1 + 0.2 )// 0.30000000000000004
console.log( 0.1 + 0.7 )// 0.7999999999999999

产生原因：

10进制小数转2进制：小数位乘以2，取整数部分，如果还有小数部分继续
于是出现了无限循环小数

解决方案：转成整数计数

var val = 0.1+0.2;
//转成整数计数，转成字符串输出
var price = (0.1*100 + 0.2*100)/100
//将数字转成字符串，并保留2位小数
var v = price.toFixed(2)
console.log( v )// '0.30'

Number类型常用的两种解析方法：

1. parseInt 解析整数

从左往右解析，如果第一个字符是非数字，则返回NaN
从左往右解析，一直解析到非数字，解析结束，并返回前面解析到的整数

console.log( parseInt(23.45) )// 23
console.log( parseInt('23.45') )// 23
console.log( parseInt('200px') )// 200
console.log( parseInt('a200px') )// NaN

2. parseFloat 解析浮点数，解析规则基本同上

console.log( parseFloat(23.45) )// 23.45
console.log( parseFloat('23.45') )// 23.45
console.log( parseFloat('200px') )// 200
console.log( parseFloat('a200px') )// NaN

2.string字符串（用双引号或单引号括起来的都会被解析成字符串）

var str1 = '123'
var str2 = "abc"
var str3 = '你好'
var str4 = 'str1'

//变量.toString()中null 和 undefined 数据类型不能使用
//String()所有数据类型都可以使用
//使用加法运算符
//在 JS 里面，+ 由两个含义
//字符串拼接：只要+任何一边是字符串，就会进行字符串拼接
//加法运算：只有+两边都是数字的时候，才会进行数学运算

3.boolean 布尔值

var bool1 = true;
var bool2 = false;

//在 js 中，只有''、0、null、undefined、NaN，这些是false，其余都是true

4.undefined 值未定义

var a
var b = undefined
console.log( a ) // undefined
console.log( b ) // undefined

5.null 空值/空对象的引用

var obj = null
obj = {
   }

6.Object 对象类型（Array {} function）

Array数组

var arr = [1,2,3]//数组

对象{}

var obj = {
   key:'value'}// 键值对

函数

var fun = function (){}

typeof 运算符(返回运算数据的数据类型)，返回有6种：

console.log( typeof 123 )// 'number'
console.log( typeof 'abc' )// 'string'
console.log( typeof true )// 'boolean'
console.log( typeof undefined )// 'undefined'
console.log( typeof [1,2,3] )// 'object'
console.log( typeof {
   a:123} )// 'object'
console.log( typeof function (){
   } )// 'function'  ECMA规定
console.log( typeof null )// 'object'

五、运算符

运算符

1. 赋值运算符：= += -= *= /= %=

var abc = 8
abc += 2		
//等价于：abc = abc + 2

abc %= 3
//等价于：abc = abc%3
//其余同理

2. 算术运算符：+ - * / %

易错点：
//一个小的数模大的数，余小的数
2%7 == 2              
(-2)%7 == -2          
2%(-7) == 2           
(-2)%(-7) == -2       

//余数的正负号取决于前面数字的正负号
7%4 == 3
(-7)%4 == -3
(7)%(-4) == 3
(-7)%(-4) == -3

3. 关系运算符（比较运算符），始终返回布尔值

等于: ==

只比较值是否相等，不考虑数据类型

console.log( 2 == '2' )		//true

全等: ===

既要值相等也要数据类型相等（对于引用类型则比较内存地址）

console.log( 2 === '2' )// false
console.log( {
   } === {
   } )//false

比较规则

// 两个数字比较，正常比较大小
console.log( 2 > 3 )// false

// 一个数字和纯数字字符串比较，把纯数字字符串转成number再比较
console.log( 2 > '12' )// false

// 两个字符串比较，先比较第一个字符的ASCII码值，不能区分大小再比较后一位
console.log( '3' > '21' )//true
console.log( 'abc' > 'abd' )//false
0 -- 48   a -- 97   A -- 65

// 非正常比较都返回false
// 一个数字和非纯数字字符串无法比较，返回false
console.log( 2 > 'a12' )// false
console.log( 2 < 'a12' )// false

自增（++）自减（–）运算符

var i = 1
var num = 2
num = i++ 			// ++后置，先取值，再自增
num = ++i 			// ++前置，先自增，再取值
console.log( num )	// 1  2


var k = 0
console.log( k++ + ++k + k * 2 + k++ )// 8
//            0  +  2  + 2 * 2 + 2

逻辑运算符:与 &&、或 ||、非 !

返回值：布尔值

//&&运算符
console.log( true&&true )// true
console.log( false&&true )// false
console.log( true&&false )// false
console.log( false&&false )// false
console.log( true||true )//true
console.log( true||false )//true
console.log( false||true )//true
console.log( false||false )//false
console.log( !true )//false
console.log( !false )//true

//短路操作:如果判断前一个结果就能决定整体的结果，
//那么程序不会去执行后续的语句
//符号左边必须为true并且右边也是true，才会返回true
//只要有一边不是true，那么就会返回false
var a = 3
var b = 4
var c = 5
a>b&&(c=6)
console.log( c )//5
//a>b为false,逻辑表达式的结果已经确定（false），所以不会执行后续的赋值语句：(c=6)
a<b&&(c=6)
console.log( c )//6

a<b&&console.log(123)
//等同于：
if (a<b) {
   
  console.log(123)
}



//||运算符
a>b||(c=7)
console.log(c)//7

a<b||(c=7)
console.log(c)//5
console.log( 0||2 )//2
console.log( 1||2 )//1
console.log( a<b||2 )//true
console.log( a>b||2 )//2
//符号左边为true或者右边为true，都会返回true
//只有两边都是false，那么就会返回false




//!运算符
//进行 取反 的运算
//本身是true的，会变成false
//本身是false的，会变成true
!true   //false
!false   //true

三元运算符（三目运算符）

格式：(逻辑表达式) ? (为true执行此代码) : (为false执行此代码)

逗号运算符: ,

var a = 1, b = 2, c = 3
console.log( a,b,c )// 1 2 3
console.log( (a,b,c) )// 3 返回一个整体的最后一个值

var num = 0
for( var i = 0,v = 0; i < 5,v < 9; i++,v++){
   
  num = i + v// 8+8
}
console.log( num )// 16

console.log( (2>3,4<5) )
//等价于
console.log( (2>3||4<5) )

注意：优先级的使用

结合优先级从高到低
1. () 优先级最高
2 .一元(单目)运算符:++,–,!
3 .算术运算符: 先*,/,% 再+,-
4. 关系运算符:>,>=,<,<=
5 .相等运算符:== === != !==
6 .逻辑运算符:先&&，再||
7 .赋值运算符
口诀:单目算术位关系，逻辑三目后赋值

转载：https://blog.csdn.net/qq_53167080/article/details/112701932

查看评论

飞道的博客

飞道的博客

个人资料

文章分类

文章存档

阅读排行

评论排行

推荐文章

JavaScript基础语法

JavaScript基础语法

序言

一、JS用法

1.js引入方式，内嵌式

2.js引入方式，行内式

3.js引入方式，外链式

二、JS调试与注释

1.调试方法

2.调试代码的流程

3.关于注释

三、JS变量

四、JS数据类型

1.number数字类型

1. 任何与NaN进行计算结果都是NaN

2. NaN与任何值都不相等，包括它自己也不相等

isNaN() 判断一个数据是否为NaN，返回布尔值

isNaN 判断一个值是否为纯数字字符串

小数加减出现的系统bug

产生原因：

解决方案：转成整数计数

Number类型常用的两种解析方法：

1. parseInt 解析整数

2. parseFloat 解析浮点数，解析规则基本同上

2.string字符串（用双引号或单引号括起来的都会被解析成字符串）

3.boolean 布尔值

4.undefined 值未定义

5.null 空值/空对象的引用

6.Object 对象类型 （Array {} function）

Array数组

对象{}

函数

typeof 运算符(返回运算数据的数据类型)，返回有6种：

五、运算符

运算符

1. 赋值运算符：= += -= *= /= %=

2. 算术运算符：+ - * / %

3. 关系运算符（比较运算符），始终返回布尔值

等于: ==

全等: ===

比较规则

自增（++）自减（–）运算符

逻辑运算符:与 &&、或 ||、 非 !

三元运算符（三目运算符）

逗号运算符: ,

注意：优先级的使用

* 以上用户言论只代表其个人观点，不代表本网站的观点或立场

6.Object 对象类型（Array {} function）

逻辑运算符:与 &&、或 ||、非 !