JavaScript基础

最新推荐文章于 2022-12-14 11:12:10 发布

出太阳下雨�

最新推荐文章于 2022-12-14 11:12:10 发布

阅读量166

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/A20190518/article/details/99321755

版权

JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

JavaScript概念

JavaScript是基于对象和事件驱动，并具有安全性能的客户端脚本语言。
由ECMAScript核心+DOM（文档对象模型）+BOM（浏览器对象模型）三部分组成。

编写JS及如何运行JS
1.在HTML普通标签中直接写入JS代码

<input type="button" id="btn" value="点我" onclick="alert('hello world')"/>

2.在HTML文档中写入代码（script标签）

<input type="button" id="btn" value="点我">
<script type="text/javascript">
	btn.onclick = function(){
	alert('aaa');
	}
</script>

3.在*.js文件中写入JS代码
首先创建js文件，在js文件中创建js代码，再引入

<script src="../js/click.js" type="text/javascript" charset="utf-8"></script>

注：引入js文件的标签内，不允许再书写js代码

JavaScript变量及数据类型

变量的声明和定义
var a = 10;
var是关键字 a是变量名 =是赋值符号 10是值
变量的命名规则
变量是由数字、字母、下划线（_）和美元符号（$）的一种或者几种组成，且不能以数字开头，严格区分大小写。不能使用关键字和保留字。

JavaScript数据类型
1、数值整数、小数、正值、负值、0
2、字符串双引号或者单引号引起来的字符串
3、布尔 true、false
4、undefined 判断变量是否声明了未赋值
5、null 空对象的引用，这个值暂时没有，未来会有
6、对象由属性和方法组成

算术、赋值、关系运算符
1、算术运算符

+ - * / %

2、赋值运算符
赋值符号的左右两端变量名相同，如a = a + 10，可写作a += 10

=   +=  -=  *=   /=  %=

3、关系运算符
运算结果只有true和false两种

>   <   >=   <=   ==  !=    ===   !== 
== 内部进行类型转换，只比较值是否相等。
=== 全相等，类型和值均保持一致。

JavaScript类型转换

使用typeof操作符来查看JavaScript变量的数据类型。
JavaScript的数据类型有六种，但typeof只能检测到五种。其中null检测结果为object。

typeof "John"  //string
typeof null    //object
console.log(typeof 10,typeof "10",typeof true,typeof undefined,typeof null,typeof {});
// number string boolean undefined object object
console.log(typeof typeof 10);
//string,相当于typeof "number"

显式转换（转型函数）

1、转数值类型Number()

console.log(Number(""));  //0
console.log(Number(" ")); //0
console.log(Number(null));//0
console.log(Number(undefined));//NaN
console.log(Number('abc'));    //NaN
//NaN（not a number）是数值转换中一个特殊的值,当其他类型无法转换得到一个具体的值时,用NaN表示

2、转字符串类型String()
注：Number、Boolean类型的方法toString()也可进行转换为字符串类型。

console.log(String(100));            //"100"
console.log(String(true));           //"true"
console.log(String(undefined));      //"undefined"
console.log(String(null));           //"null"

3、转布尔类型Boolean()

console.log(Boolean(0));      //false
console.log(Boolean(NaN));    //false
console.log(Boolean(""));     //false

console.log(Boolean(-10));    //true
console.log(Boolean("abc"));  //true

4、parseInt() parseFloat()也可用来显式转换为数值类型
parseInt()基本功能：将字符串转为数值，如果以数字开头，则取数字的整数部分，否则NaN。可用来进行数字的取整。

	console.log(parseInt("10a"));  //10
	console.log(parseInt("10.1a"));//10
	console.log(parseInt("a10b")); //NaN
   
   //parseInt()可有两个属性值，后一个属性表示是几进制,转化为10进制
	console.log(parseInt(1111,2)); //15,1111转化为2进制
	console.log(parseInt(123,2));  //1,1转化为2进制,后面的23超出二进制范围,不转换
	console.log(parseInt(22,3));   //8,22转化为3进制

parseFloat()基本功能：是将字符串转为数值，如果以数字开头，则取数字的小数部分，否则NaN。

	console.log(parseFloat("10.1a"));    //10.1
	console.log(parseFloat("10.1.1a"));  //10.1
	console.log(parseFloat("a10.1"));    //NaN

隐式转换
1、通过算术运算符进行隐式转换
加法运算，只要有一个是字符串，就进行字符串的拼接。
如果没有字符串，就转化为数值。
减法、乘法、除法、取余，都转化为数值，具体以显式类型转换的规则为准。

console.log(10+"20");    //1020数值和字符串+运算，数值转化为字符串，进行字符串拼接
console.log(10-"20");    //-10 字符串"20"转化为数字20,进行减法运算
console.log("a"-10);     //NaN 字符串"a"转化为数字NaN,与10进行减法运算,结果仍是NaN
console.log(true+10);    //11 true转化为1,与10进行加法运算
console.log(undefined + 10);  //NaN undefined转化为NaN,与10进行加法运算,结果仍是NaN
console.log(undefined + "10");//undefined10,加法运算有字符串,就进行字符串的拼接
console.log(null - 10);       //-10 null转化为数字0,进行减法运算
console.log(true + undefined);//NaN undefined转化为NaN,与1进行加法运算,结果仍是NaN

2、关系运算符
如果两个都是字符串，则进行按位比较，ASCII码比较
如果某一个是数字，则进行数字比较

console.log(10>"2");      //true 带有数字，进行数字比较，字符串转数值2
console.log("10">"2");    //false  没有数字，字符串之间按位比较ASCII码
console.log(true>-10);    //true  带有数字，进行数字比较，true转为1
console.log("true">"a");  //true  没有数字，字符串之间按位比较ASCII码
console.log(undefined>-1);//false  带有数字，undefined转换为NaN
console.log(null>-1);     //true  带有数字，null转换为0
console.log("b">"A");     //true  没有数字，字符串按位比较ASCII码

逻辑运算符 && || !

console.log(true && true,true && false,false && true,false && false);
// true false false false
// 逻辑 && 运算，只要有一个为false，结果就为false（仅当两个都为true时，结果为true）

console.log(true || true,true || false,false || true,false || false);
// true true true false
// 逻辑 || 运算，只要有一个为true，结果就为true

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

逻辑运算符运算的结果不一定是布尔值

//逻辑&& 如果第一个数为true或者能隐式转换为true,则运算结果为第二个数；
	如果第一个值是false,则结果为第一个值
//逻辑|| 如果第一个数为true或者能隐式转换为true,则运算结果为第一个数；
	如果第一个值是false,则结果为第二个值

console.log(10 && 0);  //0  第一个数是true，运算结果为第二个数0
console.log(0 && 10);  //0  第一个数是false，运算结果为第一个数0
console.log(5 && 12);  //12 第一个数是true，运算结果为第二个数12

console.log(0 || 10);  //10 第一个数是false，运算结果为第二个数10
console.log(10 || 0);  //10 第一个数是true，运算结果为第一个数10
	
console.log(2 && 1);   //1  第一个数是true，运算结果为第二个数1
console.log(2 || 1);   //2  第一个数是true，运算结果为第一个数2

自加自减

自减和自加同理，现以自加为例进行说明。

var a=10;
var b = a++;
console.log(a,b);//11 10
/**
 * var b = a;
 * a = a+1;
 */
	
var c = 10;
var d = ++c;
console.log(c,d);//11 11
/**
 * c = c+1;
 * var d = c;
 */
	
var m = 10;
console.log(m++ + m + ++m + m-- + m + --m + ++m + m);//88
// 10 + 11 + 12 + 12 + 11 + 10 + 11 + 11