一、概述
JavaScript是一门脚本语言命名是为了当时蹭Java语言的热度二、快速入门
1、引入JavaScript
内部引入<!-- script标签内 写JavaScript代码--><script>alert("hello World!!")</script>
外部引入
<!--外部引入--><!--script标签必须成对出现--><script src="js/a.js"></script>
2、基本语法入门
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><!-- JavaScript 严格区分大小写--><script>// 定义变量 : 变量类型 变量名 = 变量值;var num = 1;alert("num = " + num);// 条件控制var score = 59;if (score>60) {alert("Happy Ending");} else {alert("Hollyshit");}// console.log(score) 在浏览器的控制台打印变量 == System.out.println(score);</script></body></html>
浏览器调试 ----> F12
3、数据类型
数值,文本,图像,音频,视频…
变量不能以数字命名
numberjs不区分小数和整数
123 // 整数123.1 // 浮点数1.123e3 // 科学计数法-99 // 负数NaN // not a numberInfinity // 无限大
字符串
“abc”,‘abc’
布尔值
true ,false
逻辑运算
&& 两个为真,结果为真|| 一个为真,结果为真! 真即假,假即真
比较运算符
===等于(类型不一样,值一样,也会判断为true)===绝对等于(类型一样,值一样,判断为true)
这是JS的缺陷之一,坚持不要使用==
来比较
须知:
NaN === NaN ,这个与所有的数据都不相等,包括自己
只能通过isNaN(NaN)来判断这个数是不是NaN
浮点数问题:
console.log((1 / 3) === (1 - 2 / 3));
尽量避免使用浮点数进行运算,会有精度损失
Math.abs(1/3-(1-2/3))<0.00000001
null、undefinednull 空undefined 未定义数组
Java的数组必须是相同类型的对象,JS则不必
如果数组越界了,则会显示undefined
var arr = [1, 2, 3, 4, null, 'hello', true];
对象
对象是用大括号,数组是用中括号
每个属性之间使用逗号分开
// Person person = new Person(1,2,3);var person = {name: "abc",age: 3,tags: ["html","css","JavaScript"]}
取对象的值:
4、严格检查模式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script>// 'use strict'; 严格检查模式,预防JavaScript的随意性导致产生的一些问题// 必须写在JavaScript的第一行!// 局部变量建议都使用let来定义'use strict';// 全局变量i = 1;let i =1;// ES6 let代替var// var i =2;</script></head><body></body></html>
三、数据类型
1、字符串
正常字符使用''
或""
来包裹注意转义字符 \多行字符串编写 ``(Tab与Esc之间的按键)\n 换行
\t 一个tab距离
\u4e2d Unicode字符
\x41 ASCII字符
var msg =`helloworld你好`
模板字符串
let name = "耳冉";let age = 18;let msg2 =`早哇 ${name}`
字符串长度以及可单独获取某一元素 字符串的不可变性 大小写转换
获取下标注意,这里是调用方法,而不是student的属性
console.log(student.toUpperCase())
console.log(student.toLowerCase())
substring 相当于console.log(student.indexOf(‘u’))
2
[)
左闭右开console.log(student.substring(1,3))
tu
2、数组
Array可以包含任意数据类型
var arr = [1,2,"1","2",null,true,'a']; // 通过下标取值、赋值
长度 arr.length
注:在给arr.length赋值时,数组大小会发生变化,若赋值小于数组长度,则多余元素就会丢失
通过元素获得下标索引 arr.indexOf(num)slice() 截取Array的一部分,返回一个新的数组 类似于substringpush()、pop() 尾部 unshift()、shift() 头部 sort() 排序
(3) ["B", "C", "A"]arr.sort()(3) ["A", "B", "C"]
reverse() 元素反转
(3) ["A", "B", "C"]arr.reverse()(3) ["C", "B", "A"]
concat() 拼接
注:concat()并没有修改数组,只是会返回一个新的数组
(3) ["C", "B", "A"]arr.concat(1,2,3)(6) ["C", "B", "A", 1, 2, 3]arr(3) ["C", "B", "A"]
join() 连接符
打印拼接数组,使用特定的字符串连接
(3) ["C", "B", "A"]arr.join('-')"C-B-A"
多维数组
arr = [[1,2],[3,4],["5","6"]](3) [Array(2), Array(2), Array(2)]arr[1][1]4
3、对象
若干个键值对
var 对象名 = {属性名: 属性值,属性名: 属性值,属性名: 属性值}
Js中对象,{…}表示一个对象,键值对描述属性
JavaScript中所有的键都是字符串,值是任意对象!
对象赋值
person.age18person.age = 2121person.age21
动态的删减属性
person{name: "Java", age: 21, email: "401446424@", score: 0}delete person.scoretrueperson{name: "Java", age: 21, email: "401446424@"}
动态添加
person{name: "Java", age: 21, email: "401446424@"}person.add = "Hello""Hello"person{name: "Java", age: 21, email: "401446424@", add: "Hello"}
判断属性值是否在对象中
'age' in persontrue'toString' in personfalse
判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
person.hasOwnProperty('toString')falseperson.hasOwnProperty('age')true
4、流程控制
判断 if if-else if-else循环 while(避免死循环) do-while forforEach循环let arr = [1,2,3,4,5,6,"1","2"];// 函数arr.forEach(function (value) {console.log(value);})
for… in
for (var num in arr) {console.log(arr[num]);}
for… of
for (var num of arr) {console.log(num);}
5、Map和Set
Map: get、set、delete
let map = new Map([['tom',100],['Jack',90],['John',80]]);// 通过get获得valuelet name = map.get('tom');console.log(name);
mapMap(3) {"tom" => 100, "Jack" => 90, "John" => 80}map.set('admin',70)Map(4) {"tom" => 100, "Jack" => 90, "John" => 80, "admin" => 70}map.delete('John')truemapMap(3) {"tom" => 100, "Jack" => 90, "admin" => 70}
Set: 无序不重复的集合(与Java相同)
如果觉得《JavaScript快速入门通俗易懂》对你有帮助,请点赞、收藏,并留下你的观点哦!