什么是JavaScript
概述
JavaScript是一门世界上最流行的脚本语言
Java、JavaScript
历史
ECMAScript可以理解为是JavaScript的一个标准
最新版本已经到es6~
但是大部分浏览器还停留在支持es5代码上
开发环境--线上环境，版本不一致
快速入门
引入JavaScript
1、内部标签
<script> //...... </script>
2、外部引入
abc.js
//...
test.html
<script src="abc.js"></script>
测试代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- script标签内，写JavaScript代码 --> <!--<script>--> <!-- alert('hello,world');--> <!--</script>--> <!-- 外部引入 --> <!--注意：script标签必须成对出现--> <script src="js/qj.js"></script> <!-- 不用显式定义type，也默认就是javascript --> <script type="text/javascript"> </script> </head> <body> <!--这里也可以存放--> </body> </html>
基本语法入门
<!--JavaScript严格区分大小写！--> <script> //1. 定义变量 变量类型 变量名 = 变量值; var score = 75; //alert(num); //2. 条件控制 if (score>60 && score<70){ alert("60~70"); }else if (score>70 && score<80){ alert("70~80"); }else { alert("other"); } //console.log(score) 在浏览器的控制台打印变量！ System.out.println() /* * asdasdasd * */ </script>
数据类型
数值，文本，图形，视频，音频......
变量
var 王者荣耀 = "倔强青铜";
number
js不区分小数和整数，Number
123 //整数123 123.1 //浮点数123.1 1.23e4 //科学计数法 -99 //负数 NaN // not a number Infinity //表示无限大
字符串
'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 和 undefined
- null 空
- undefined 未定义
数组
Java的数组必须是相同类型的对象，JS中不需要这样
//保证代码的可读性，尽量使用[] var arr = [1,2,3,4,5,'hello',null,true]; new Array(1,12,3,4,4,5,'hello');
取数组下标：如果越界了，就会
undefined
对象
对象是大括号，数组是中括号~~
每个属性之间使用逗号隔开，最后一个不需要添加逗号
//Person person = new Person(1,2,3,4,5); var person = { name: "qinjiang", age: 3, tags: ['js','java','web','...'] }
取对象的值
person.name > "qinjiang" person.age > 3
严格检查格式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 前提：IDEA 需要设置支持ES6语法 'use strict'; 严格检查模式，预防JavaScript的随意性导致产生的一些问题 必须写在JavaScript的第一行！ 局部变量建议都使用 let 去定义~ --> <script> 'use strict'; //全局变量 let i = 1; // ES6 let </script> </head> <body> </body> </html>
数据类型
字符串
1、正常字符串我们使用 单引号，或者双引号包裹
2、注意转义字符 \
\' \n \t \u4e2d \u#### Unicode字符 \x41 ASCII字符
3、多行字符串编写
//tab 上面 esc键下面 var msg = `hello world nihao 你好`
4、模板字符串
//tab 上面 esc键下面 let name = "qinjiang"; let age = 3; let msg = `你好呀，${name}`
5、字符串长度
str.length
6、字符串的可变性，不可变
7、大小写转换
//注意，这里是方法，不是属性了 student.toUpperCase() student.toLowerCase()
8、student.indexOf('t')
9、substring
[) studnet.substring(1) //从第一个字符串截取到最后一个字符串 student.substring(1,3) //[1,3)
数组
Array可以包含任意的数据类型
var arr = [1,2,3,4,5,6]
1、长度
arr.length
注意：加入给arr.length赋值，数值大小就会发生变化~，如果赋值过小，元素就会丢失
2、indexOf，通过元素获得下标索引
arr.indexOf(2) 1
字符串的“1”和数字1是不同的
3、slice（） 截取Array的一部分，返回一个新的数组，类似于String中的substring
4、push，pop 尾部
push: 压入到尾部 pop: 弹出尾部的一个元素
5、unshift()，shift() 头部
unshift: 压入到头部 shift: 弹出头部的一个元素
6、排序 sort()
(3) ["B","C","A"] arr.sort() (3) ["A","B","C"]
7、元素反转
(3) ["A","B","C"] arr.reverse() (3) ["C","B","A"]
8、concat()
(3) ["C","B","A"] arr.concat([1,2,3]) (6) ["C","B","A",1,2,3] arr (3) ["C","B","A"]
注意：concat() 并没有修改数组，只是会返回一个新的数组
9、连接符join
打印拼接数组，使用特定的字符串连接
(3) ["C","B","A"] arr.join('-') "C-B-A"
10、多维数组
arr = [[1,2],[3,4],["5","6"]]; arr[1][1] 4
数组：存储数据（如何存，如何取，方法都可以自己实现！）
对象
若干个键值对
var 对象名 = { 属性名：属性值， 属性名：属性值， 属性名：属性值 } //定义了一个person对象，它有四个属性！ var person = { name: "kuangshen", age: 3, email: "24736743@qq.com", score: 0 }
Js中的对象，{......}表示一个对象，键值对描述属性 xxxx：xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号！
JavaScript中的所有的键都是字符串，值是任意对象！
1、对象赋值
person.name = "qinjiang" "qinjiang" person.name "qinjiang"
2、使用一个不存在的对象属性，不会报错！undefined
person.haha undefined
3、动态的删减属性
delete person.name true person
4、动态的添加，直接给新的属性添加值即可
person.haha = "haha" "haha" person
5、判断属性值是否在这个对象中！ xxx in xxx!
'age' in person true //继承 'toString' in person true
6、判断一个属性是否是这个对象自身拥有的hasOwnProperty()
person.hasOwnProperty('toString') false person.hasOwnProperty('age') true
流程控制
if 判断
var age = 3; if (age>3){ //第一个判断 alert("haha"); }else { //否则... alert("kuwa~"); }
while循环，避免程序死循环
while (age<100){ age = age + 1; console.log(age); } do{ age = age + 1; console.log(age); }while(age<100)
for循环
for (let i = 0; i < 100; i++) { console.log(i); }
forEach循环
5.1引入
var age = [1,2,3,21,12,3,1,123,12]; //函数 age.forEach(function (value) { console.log(value) })
for...in
//for(var index in object){} for(var num in age){ if (age.hasOwnProperty(num)){ console.log("存在") console.log(age[num]) } }
Map和Set
ES6 的新特性~
Map:
//ES6 //学生的成绩，学生的名字 //var names = ["tom","jack","haha"]; //var scores = [100,90,80]; var map = new Map([['tom',100],['jack',90],['haha',80]]); var name = map.get('tom'); //通过key获得value map.set('admin',123456); //新增或修改 map.delete("tom"); //删除
Set: 无序不重复的集合
set.add(2); //添加 set.delete(1); //删除 console.log(set.has(3)); //是否包含某个元素
iterator
遍历数组
//通过for of / for in 下标 var arr = [3,4,5] for (var x of arr){ console.log(x) }
遍历map
var map = new Map([["tom",100],["jack",90],["haha",80]]); for (let x of map){ console.log(x) }
遍历set
var set = new Set([5,6,7]); for (let x of set) { console.log(x) }
