2.1 引入JavaScript
-
内部标签
<!-- 在script标签内写JavaScript(简称js)代码，代码块可以放在head中，也可以放在body中--> <script> // alert:弹窗 alert('Hello,world!'); //注意以分号结尾 </script> -
外部引入
hello.js
alert('Hello,world!');hello.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 外部引入 --> <!-- 注意：script标签必须成对出现 --> <script src="js/qj.js" type="text/javascript"></script> </head> <body> <h1>我是标题</h1> </body> </html>
2.2 基本语法入门
<!--JavaScript中也要严格区分大小写-->
<script>
//定义变量
var score="88";
//弹窗
alert(score);
//在浏览器的控制台打印变量 相当于sout
console.log(score);
</script>
2.3 变量和数据类型
变量 JavaScript只有一种变量
//定义变量 变量类型 变量名 = 变量值;
var name = "jiangjiang";
number JavaScript中不区分整数和小数
1 //整数1
1.1 //浮点数1.1
1.123e3 //科学计数法
-99 //复数
NaN //not a number
Infinity //无限大
字符串
-
正常的字符串我们使用单引号或者双引号包裹 —— ‘a’ “abc”
-
注意转义字符
\' 字符串 \n 换行 \t tab \u4e2d Unicode字符 \x41 Ascll字符 -
多行字符串编写
//tab键上面的 `` 飘 var s = `hello world 你好呀`; -
模板字符串
let name = "jinagjiang"; let age = 18; let s2 = `你好呀，${age}岁的${name}`; console.log(s2); -
字符串长度
var s3 = "student"; console.log(s3.length); > 7 -
字符串的可变性 不可变
//通过字符串中的字符，获取其对应的下标 console.log(s3.indexOf('s')); //通过字符串的下标，获取其对应的字符 console.log(s3[0]); > s s3[0]= 1; > 1 console.log(s3); > student -
大小写转换
//注意：这里是方法，不是属性了 console.log(s3.toUpperCase()); console.log(s3.toLowerCase()); -
字符串截取
//截取字符串 //从下标0对应的字符截取到最后一个字符 console.log(s3.substring(0)); > student //从下标0对应的字符截取到下标2对应的字符 //[) 左闭右开 包含前面，不包含后面 console.log(s3.substring(0,2)); > st
布尔值
- true false
逻辑运算
- 与(&&) 或(||) 非(！)
比较运算符（重要）
| 符号 | 含义 | 注意 |
|---|---|---|
| = | 赋值 | |
| == | 等于（类型不一样，值一样，也会判断为true） | 这是一个js的缺陷，坚持不要使用 == 比较 |
| === | 绝对等于（类型一样，值一样，才会判断为true） | NaN问题： NaN与所有的值都不相等，包括自己本身 - NaN === NaN 结果为false - isNaN(NaN) 结果为true 浮点数问题： console.log((1/3) === (1-2/3)) 结果为false 尽量避免使用浮点数进行运算，存在精度问题 |
null 和 underfined
-
null 空
-
underfined 未定义
数组
Java中的数组必须是一系列相同类型的对象，JavaScript中数组可以包含任意的数据类型
//定义数组：为了代码的可读性，尽量使用 [] 这种形式
var arr = [1,2,3,'hello',null,true];
new Array(1,2,3,'hello',null,true);
数组下标越界，会报 underfined（未定义的）
-
数组长度
console.log(arr.length); /**注意： * 假如给 arr.length 赋值，数组大小就会发生变化 * 如果赋值过小，数组中的元素就会丢失 */ -
常用方法 数组：存储数据（如何存，如何取，方法都可以自己实现）
方法名 用法 a.indexof() 通过元素获得下标索引 a.slice() 类似于字符串的substring()，截取数组的一部分，并返回一个新的数组
console.log(a.slice(0)); //从下标0对应的字符截取到最后一个字符a.push() 向原数组的尾部添加元素 a.pop() 弹出原数组尾部的一个元素 a.unshift() 向原数组的头部添加元素 a.shift() 弹出原数组头部的一个元素 a.sort() 给数组排序 a.reverse() 将数组元素反转 a.concat() 将元素与原数组拼接，并返回一个新的数组（并没有修改原数组） a.join(‘-’) 修改数组元素之间的连接符
var a = [“A”,“B”,“C”] →→→ “A-B-C” -
多维数组
对象
对象是大括号 {}，数组是中括号[]
若干个键值对，JavaScript中的所有的键都是字符串，值是任意对象！
var 对象名 = {
属性名: 属性值,
属性名: 属性值,
属性名: 属性值
}
/**Js中对象 {...}表示一个对象，
* 键值对描述属性 xxx:xxx，
* 多个属性之间使用逗号隔开，最后一个不需要
*/
//定义了一个person对象，它有四个属性
var person = {
name:"jiangjiang",
age:18,
lesson:"java"
}
-
对象赋值和取值
person.name = "jiang" > 'jiang' person.name > 'jiang' person.age > 18 -
使用一个不存在的对象属性，不会报错 undefined
person.sex > undefined -
动态的删减和添加属性
-
删减 —— 通过 delete 删除对象的属性
delete person.name > true person > {age: 18, lesson: 'java'} -
添加 —— 直接给新的属性添加值即可
person.name = "jiangjiang" > 'jiangjiang' person > {age: 18, lesson: 'java', name: 'jiangjiang'}
-
-
判断属性值是否在这个对象中 xxx in xxx
'name' in person > true 'sex' in person > false //继承父类的 'toString' in person > true //判断一个属性是否是这个对象自身所拥有的 hasOwnProperty person.hasOwnProperty('toString') > false
2.4 严格检查模式
<script>
'use strict';
/** 'use strict'; 严格检查模式
* 前提：IDEA需要设置支持ES6语法
* 预防JavaScript的随意性导致产生的一些问题
* 必须写在JavaScript的第一行才能起作用
*/
//全局变量 若不在严格检查模式下，可以这么定义
i = 1;
//在严格检查模式下，局部变量建议都使用 let 去定义
let j = 2;
</script>
2.5 流程控制
-
if 判断
if (score>60 && score<70){ alert("60~70"); }else if (score>70 && score<80){ alert("70~80") }else if (score>80 && score<90){ alert("80~90") }else { alert("other") } -
while 循环
while(score>85){ score = score-1; console.log(score) } do{ score = score-1; console.log(score) }while(score>85)for 循环
for (let score = 88; score < 100; score++) { console.log(score); }forEach循环 ES5.1
var num = [5,1,2,3,4]; num.forEach(function (value){ console.log(value); })for…in 循环
/** Java中 * for(Type str:el){} */ var num = [5,1,2,3,4]; /** JavaScript中 * for(var index in object){} */ for(var n in num){ console.log(num[n]); }
2.6 Map和Set
ES6 的新特性~
Map：
//学生的名字，学生的成绩
//var names = ["tom","jack","jiang"];
//var scores = [100,90,80];
//ES6 Map集合(将以上两个数组变成集合)
var map = new Map([["tom",100],["jack",90],["jiang",80]]);
var s = map.get("tom"); //通过key获得value
console.log(s);
> 100
//新增或修改元素
map.set("karry",921);
console.log(map);
> Map(4) {'tom' => 100, 'jack' => 90, 'jiang' => 80, 'karry' => 921}
//删除元素
map.delete("jiang");
console.log(map);
> Map(4) {'tom' => 100, 'jack' => 90, 'karry' => 921}
Set：无序不重复的集合
var set = new Set([3,1,1,1,1]);
console.log(set); //Set可以去重：Set(2) {3, 1}
set.add(2); //添加：Set(3) {3, 1, 2}
set.delete(1); //删除：Set(2) {3,2}
console.log(set.has(3)); //是否包含某个元素：true
2.7 iterator
ES6 的新特性~
-
遍历数组
var arr = [3,4,5]; //通过 for..in实现：打印数组下标 for (let x in arr){ console.log(x); } //通过 for..of实现：打印数组中对应的值 for (let x of arr){ console.log(x); } -
遍历Map
var map = new Map([["tom",100],["jack",90],["jiang",80]]); for (let x of map){ console.log(x); } -
遍历Set
var set = new Set([3,1,1,1,1]); for (let x of set){ console.log(x); }
