JavaScript基础语法--重点掌握内容

it2025-03-17  12

1、JavaScript的输出

JavaScript 没有任何直接打印或者输出的函数。若有显示数据可以通过下⾯不同的⽅式来输出: window.alert() 弹出警告框 document.write() ⽅法将内容写到 HTML ⽂档中 innerHTML 写⼊到 HTML 元素 console.log() 写⼊到浏览器的控制台

//弹出⼀个信息提示框 window.alert("Hello JavaScript!"); //输出到浏览器⻚⾯中 document.write("这个是⻚⾯中的输出"); //通过写⼊HTML标签中,完成⻚⾯中的输出 document.getElementById('did').innerHTML="div层中的输出"; //控制台上的输出 console.log("控制台上的输出");

2、JavaScript数据类型

JavaScript中数据类型:

值类型(基本类型):

字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。 注意: Symbol 是 ES6 引⼊了⼀种新的原始数据类型,表示独⼀⽆⼆的值。

引⽤数据类型: 对象(Object)、数组(Array)、函数(Function)。

<script> //数值类型 console.log(typeof a); //undefined 没有定义的变量 var a = 10; //整数 console.log(typeof a); //number a = 3.14; //浮点数 console.log(typeof a); //number //布尔类型:boolean: 值:true false a = true; console.log(typeof a); //boolean //字符串:使用单引号或双引号都可以定义子符串 a = "Hello ..."; console.log(typeof a); //string a = null; console.log(typeof a); //object //引用类型 var b = [10,20,30]; //数组的定义 console.log(typeof b); //数组对象object console.log(b instanceof Array); //true 检查对象b是否是来源于Array console.log(a instanceof Array); //false 检查对象a是否是来源于Array var ob = new Object(); console.log(typeof ob); //object var fn = function(){} //声明一个空函数 console.log(typeof fn); //function console.log("======================================"); console.log(1.23e5); //1.23*10的5次方 console.log("整数进制的使用"); console.log(10); //10 十进制 console.log(0b10); //2 二进制 console.log(0o10); //8 八进制 console.log(0x10); //16 十六进制(0 1 2 3 4 5 6 7 8 9 a b c d e f) console.log("===============十进制转成其他进制=============="); var num = 220; console.log(num.toString(2)); //11011100 二进制 console.log(num.toString(8)); //334 八进制 console.log(num.toString(16)); //DC 十六进制 console.log("===============其他进制转成十进制=============="); console.log(parseInt('11011100',2)); //二进制转十进制 console.log(parseInt('334',8)); //八进制转十进制 console.log(parseInt('DC',16)); //十六进制转十进制 </script>

undefined 和 null 的区别: null 和 undefined 的值相等,但类型不等。

typeof undefined // undefined typeof null // object null === undefined // false null == undefined // true “==”比较的是值是否相等,而“==”比较的是值和类型是否都相等!!

值类型理解:变量之间的互相赋值,是指开辟⼀块新的内存空间,将变量值赋给新变量保存到新开辟的内存⾥⾯;之后两个变量的值变动互不影响,例如:

var a = 10; //开辟⼀块内存空间保存变量a的值“10”; var b = a; //给变量 b 开辟⼀块新的内存空间,将 a 的值 “10” 赋值⼀份保存到新的内存⾥; //a 和 b 的值以后⽆论如何变化,都不会影响到对⽅的值;

引⽤类型理解:变量之间的互相赋值,只是指针的交换,⽽并⾮将对象(普通对象,函数对象,数组对象)复制⼀份给新的变量,对象依然还是只有⼀个,只是多了⼀个指引。

//需要开辟内存空间保存对象,变量 a 的值是⼀个地址,这个地址指向保存对象的空间; var a = { x: 1, y: 2 }; var b = a; // 将a 的指引地址赋值给 b,⽽并⾮复制⼀给对象且新开⼀块内存空间来保存; // 这个时候通过 a 来修改对象的属性,则通过 b 来查看属性时对象属性已经发⽣改变; <script> //值类型和引用类型的区别 //值类型: var a = 10; var b = a; //由于a是值类型,故此处赋值,属于开辟一个新空间,将的值复制一份传给了b。 b = 20; console.log(a); //10 //引用类型: var oa = {name:'zhangsan',age:20}; var ob = oa; //oa是引用类型,故ob为oa别名。并没有复制一份新对象 ob.name = "lisi"; console.log(oa); </script>

3、类型转换:

JavaScript 变量可以转换为新变量或其他数据类型:

通过使⽤ JavaScript 函数通过 JavaScript ⾃身⾃动转换

ECMAScript 中可⽤的 3 种强制类型转换如下:

Boolean(value) - 把给定的值转换成 Boolean 型;Number(value) - 把给定的值转换成数字(可以是整数或浮点数);String(value) - 把给定的值转换成字符串;

使⽤: Number()、 parseInt() 和parseFloat() 做类型转换

Number() 强转⼀个数值(包含整数和浮点数)。*parseInt() 强转整数,*parseFloat()强转浮点数

函数isNaN()检测参数是否不是⼀个数字。 is not a number

常⻅类型转换:

<script> //类型转换 console.log(String(20)) console.log(typeof String(20)) console.log(String(false)) console.log(String(new Date())) console.log(String(null)) console.log(String([10,20,30])) console.log("========数值类型的转换========"); console.log(Number("30")+20); //50 console.log("30"+20); //"3020" console.log(Number('3.1415926')); console.log(Number('3.14abc')); //NaN => Not a Number console.log(isNaN("20")); //false 不是一个纯数值判断函数 console.log(parseInt("40abc")); //40 console.log(parseInt("40.6abc")); //40 console.log(parseFloat("40.6abc")); //40.6 console.log(parseFloat("abc40.8")); //NaN console.log(true+1); //2 console.log("abc"+100); //'abc100' </script>

4、JavaScript运算符

① 算数运算符: 算数运算符⽤于对数字执⾏算数运算:

注意: 其中+号具有两重意思:字串连接和数值求和。 就是加号”+“两侧都是数值则求和,否则做字串连接

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> console.log("============1.算数运算符==============="); console.log(10+20); //30 console.log(100-20); //80 console.log(10*20); //200 console.log(100/20); //5 console.log(10%3); //余数1 console.log("10"+20); //1020 子串做加计算是连接操作 console.log('10'+20+30); //102030 console.log(10+'20'+30); //102030 console.log(10+20+'30'); //3030 console.log(true+30); //31 console.log("-----------------"); /* var a = 10; a++; //变量a自增1 --a; //自减1 console.log(a); */ // var a = 10 // var b = 20 + a++; //先取出变量a的值与20求和后赋给变量b,之后a自增1 // console.log(b); //30 // console.log(a); //11 // var a = 10 //var b = 20 + ++a; //先将变量a自增1,再与与20求和结果赋给变量b //console.log(b); //31 //console.log(a); //11 var a1 = 10; console.log(a1 + ++a1); //10+11=21 var a2 = 10; console.log(a2 + a2++); //10+10=20 var a3 = 10; console.log(a3++ + ++a3); //10+12=22 var a4 = 10; console.log(a4++ + a4++); //10+11=21 var a5 = 10; console.log(++a5 + ++a5); //11+12=23 </script> </head> <body> <h1>JavaScript语言中的运算符</h1> </body> </html>

② 赋值运算符 赋值运算符向 JavaScript 变量赋值。

<script> console.log("============2.赋值运算符==============="); //= += -= *= /= %= //var a = 20; //将20赋给变量a var a = b = c = 20; console.log(a+b+c); //60 var a = 10; a += 20; //等价于 a = a + 20; console.log(a);//30 var b = 100; b -= 80; //等价于 b = b - 80; console.log(b);//20 var c = 101; c %= 2; console.log(c);//1 //拼接子串 var str = "aa"; str += "bb"; str += "cc"; str += "dd"; console.log(str);//aabbccdd </script>

③ ⽐较运算符

<script> console.log("============3.比较运算符==============="); //> < >= <= == != === !== ? : console.log(10>5); //true console.log(10<5); //false console.log(10>=10); //true console.log(10<=5); //false console.log("a">"b"); //false console.log("a">"A"); //true console.log("abc">"abd"); //false console.log("======================"); console.log(10 == '10'); //true 值比较 console.log(10 === '10'); //false 值比较相同,类型比较不同 console.log(10 !== "20"); //true var a = 100; var b = 20; console.log(a>b?'大于':'小于'); //三元运算符的使用 var sex = 'm'; console.log(sex=='w'?'女':'男'); </script>

④ 逻辑运算符

<script> console.log("============4.逻辑算符==============="); //&& || ! var a = 188; //判断a变量的值是否在1~100范围内 console.log(a>=1 && a<=100); //false //判断a变量的值是否在1~100范围外 console.log(a<1 || a>100); //true console.log('-------------------'); //逻辑与:真真为真,其他都为假 console.log(true && true); //true console.log(false && true); //false console.log(true && false); //false console.log(false && false);//false console.log('-------------------'); //逻辑或:假假为假,其他都为真 console.log(true || true); //true console.log(false || true); //true console.log(true || false); //true console.log(false || false);//false console.log('-------------------'); //逻辑非:真为假,假为真(取反) console.log(!true); //false console.log(!false); //true console.log('======================'); //逻辑运算符的短路效果 var a = 100; //console.log(a>20 && ++a<100); console.log(a>200 || ++a<100); console.log(a); </script>

⑤ 位运算符 位运算符处理 32 位数。 该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数。

<script> console.log("============5.位算符==============="); //位运算符就是先将数值转成二进制,然后再做对应位的计算 // & | ~ ^ << >> >>> //数值 10 的二进制:1010 //数值 7 的二进制: 111 console.log(10 & 7); //2 位与计算 console.log(10 | 7); //15 位或计算 console.log(10 ^ 7); //13 异或(不同为真1,相同为假0) console.log(~5); //-6 按位取反 console.log(10<<3); //80 左移3位 console.log(80>>3); //10 右移3位 console.log(1<<10); //1024 左移10位 //1T = 1024G 1G = 1024M 1M = 1024K 1k = 1024节 </script>

⑥ 条件运算符(三元运算符) : JavaScript 也包含了可基于某些条件向变量赋值的条件运算符。 语法 variablename = (condition) ? value1:value2 实例 var voteable = (age < 18) ? “太年轻”:“⾜够成熟”;

console.log("=========6.三元运算符========"); var age = 26; var info = (age < 18) ? "太年轻":"足够成熟"; console.log(info);

⑦ 逗号运算符 ⽤逗号运算符可以在⼀条语句中执⾏多个运算。 var iNum1=1, iNum2=2, iNum3=3;

console.log("=========7.逗号运算符========"); var a = 10, b = 20, c = 30; console.log(a+":"+b+":"+c); //10:20:30

⑧ 类型运算符

instanceof 运算符与 typeof 运算符相似,⽤于识别正在处理的对象的类型。 与 typeof ⽅法不同的是, instanceof ⽅法要求开发者明确地确认对象为某特定类型。

console.log("=========8.类型运算符========"); //typeof instanceof var oStringObject = new String("hello world"); console.log(oStringObject instanceof String); // 输出 "true" // 判断 foo 是否是 Foo 类的实例 function Foo(){} var foo = new Foo(); console.log(foo instanceof Foo)//true // 判断 foo 是否是 Foo 类的实例 , 并且是否是其父类型的实例 function Aoo(){} function Foo(){} Foo.prototype = new Aoo();//JavaScript 原型继承 var foo = new Foo(); console.log(foo instanceof Foo)//true console.log(foo instanceof Aoo)//true console.log("=========9.delete运算符========"); var stu = {name:'zhangsan',sex:'man',age:20}; console.log(stu); delete stu.sex; //删除stu对象中的sex属性 console.log(stu);

假设有15瓶水,其中有一个水有毒 请问至少使用几只小白鼠可以一次性试喝出来?4

最新回复(0)