云社区 博客 博客详情

JavaScript基础语法

CSDN 发表于 2021-01-17 23:30:02 2021-01-17
0
0

【摘要】 JavaScript基础语法 序言一、JS用法1.js引入方式,内嵌式2.js引入方式,行内式3.js引入方式,外链式 二、JS调试与注释1.调试方法2.调试代码的流程3.关于注释 三、JS变量四、JS数据类型1.number数字类型1. 任何与NaN进行计算结果都是NaN2. NaN与任何值都不相等,包括它自己也不相等isNaN() 判断一...


序言

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组成部分:
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 里面
 -->

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

2.js引入方式,行内式

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

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

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

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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

3.js引入方式,外链式

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

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

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

  
 
  • 1
  • 2

二、JS调试与注释

1.调试方法

代码如下(示例):

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

  
 
  • 1
  • 2
  • 3

2.调试代码的流程

  1. 看是否有报错
  2. 单词错误
  3. 输出调试各种数据(变量)
  4. 思考怎么解决(查看比较,百度,看文档)

3.关于注释

  1. 最讨厌别人让我写注释
  2. 最讨厌别人不写注释
    代码如下(示例):
// 单行注释,注释内容不可以换行  ctrl+/

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

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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

三、JS变量

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

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

  
 
  • 1
  • 2

1.使用关键字var

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

  
 
  • 1

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

var num // 显式声明变量

  
 
  • 1

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

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

  
 
  • 1
  • 2

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

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

  
 
  • 1
  • 2
  • 3

5.标识符(变量、函数、属性、参数,你自己命名的东西)命名规范:

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


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

6.语义化命名规范:

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

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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

四、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

  
 
  • 1
  • 2
2. NaN与任何值都不相等,包括它自己也不相等
console.log( NaN === NaN )// false

  
 
  • 1
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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
isNaN 判断一个值是否为纯数字字符串
var qq = '2437325196'
console.log( isNaN(qq) )

  
 
  • 1
  • 2
小数加减出现的系统bug
console.log( 0.1 + 0.2 )// 0.30000000000000004
console.log( 0.1 + 0.7 )// 0.7999999999999999

  
 
  • 1
  • 2
产生原因:

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'

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
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

  
 
  • 1
  • 2
  • 3
  • 4
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

  
 
  • 1
  • 2
  • 3
  • 4

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

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

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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

3.boolean 布尔值

var bool1 = true;
var bool2 = false;

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

  
 
  • 1
  • 2
  • 3
  • 4

4.undefined 值未定义

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

  
 
  • 1
  • 2
  • 3
  • 4

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

var obj = null
obj = {}

  
 
  • 1
  • 2

6.Object 对象类型 (Array {} function)

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

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

  
 
  • 1
函数
var fun = function (){}

  
 
  • 1

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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

五、运算符

运算符

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

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

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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

3. 关系运算符(比较运算符),始终返回布尔值

等于: ==

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

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

  
 
  • 1
全等: ===

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

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

  
 
  • 1
  • 2
比较规则
// 两个数字比较,正常比较大小
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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
自增(++)自减(–)运算符
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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

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

返回值:布尔值

//&&运算符
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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55

三元运算符(三目运算符)

格式:(逻辑表达式) ? (为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
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

注意:优先级的使用

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


文章来源: blog.csdn.net,作者:范特希_start,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/qq_53167080/article/details/112701932

登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

上一篇:防抖节流工具型方法的封装

下一篇:JavaScript数据结构之栈结构

评论 (0)


登录后可评论,请 登录注册

评论