JavaScript基础语法

时间:2021-1-18 作者:admin

JavaScript基础语法


序言

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组成部分:
JavaScript基础语法
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.调试代码的流程

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

3.关于注释

  1. 最讨厌别人让我写注释
  2. 最讨厌别人不写注释
    代码如下(示例):
// 单行注释,注释内容不可以换行  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 .赋值运算符
口诀:单目算术位关系,逻辑三目后赋值


声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。