1.开发工具选择
- 开发工具推荐 visual studio code,为了能够右键运行代码，需要安装插件 CodeRunner。
- 关于运行：必须先保存，在运行，如果不保存运行不会成功；
2.快速入门
2.1 数组
- 声明数组： var arr = [] 即可，声明一个非空数组 var arr = [1,2,"hello",null];
- 数组中的内容可以是任意的数据类型；
- 获取数组中的值：arr[i]，其中 i 为数组元素对应的索引值，从 0 开始；
- 获取数组长度：直接调用 length 方法。例如获取数组 arr 的长度，直接写 arr.length即可，注意没有 ()；另：可以根据 length 任意修改数组长度，比如原数组为 var arr = [1,2,3] 此时数组长度为 3 ，如果想改变其长度为 10，直接调用 arr.length = 10 即可，此时数组 arr 的长度即为 10；
- js 中的数组即使越界，但是不会报错，只是值会为 undefined
- 数组中的其他方法
| 方法名 | 方法描述 |
| indexOf() | 获取数组指定元素的索引位置 |
slice(i) |
数组截取，如果 i 为3，就截取索引从 3 到数组结束作为新数组 |
slice(startIndex,endIndex) |
数组截取，从 startIndex 下标开始，到 endIndex 下标结束，包含 startIndex，但是不包括 endIndex |
push(新元素 a,新元素 b ...) |
在数组末尾加入元素，例如现有数组 arr = [1,2,3],arr.push(4,5) 此时数组 arr 会变为：[1,2,3,4,5] |
| pop() | 删除数组的最后一个元素，例如现有数组 arr = [1,2,3],arr.pop()，此时数组会变为 [1,2] |
| unshift() | 在数组头部加入元素，例如现有数组 arr = [1,2,3],arr.unshift(4,5) 此时数组 arr 会变为：[4,5,1,2,3] |
| shift() | 删除数组的开头第一个元素，例如现有数组 arr = [1,2,3],arr.shift()，此时数组会变为 [2,3] |
| sort() | 默认数组排序，比如原数组 arr = [B,C,A]，调用此方法可以变为 arr = [A,B,C] |
reverse（） |
实现数组反转 |
splice() |
从数组指定索引位置删除若干元素，而后从该位置添加新元素；此方法可以说是 push()、pop()、unshift()、shift() 方法的全部实现且实现了扩展，必须牢牢掌握；具体有以下三种应用形态 1.先删除元素在添加元素 var arr = [1, 2, 3, "hello world", null]; //代表从 索引3 开始删除，到索引 4 结束删除，然后添加了两个新元素 hello、world arr.splice(3,4,"hello","world"); 2.只删除元素，不添加元素 var arr = [1, 2, 3, "hello world", null]; //删除索引3到索引4的元素 arr.splice(3,4); //此时获取到的新数组 arr = [1,2,3] console.log(arr); 3.只添加元素，不删除元素 var arr = [1, 2, 3, "hello world", null]; //添加的元素在 索引位置 之前添加，索引结束位置为0代表不删除 arr.splice(3,0,"hello","world"); //此时返回的新数组 arr = [ 1, 2, 3, 'hello', 'world', 'hello world', null ] console.log(arr); |
concat() |
将两个数组进行合并返回一个新的数组，原数组不予改变；示例如下： var arr = [1, "bb", 3, "hello world", 4]; var arry = [3,4,5]; var nArr = arr.concat(arry); console.log(arr);//arr = [ 1, 'bb', 3, 'hello world', 4 ] console.log(nArr);//nArr = [ 1, 'bb', 3, 'hello world', 4, 3, 4, 5 ] |
join() |
把数组中的每个元素都按照指定字符串进行拼接，返回拼接后的字符串；示例如下： |
- 多维数组： js 中 数组中包含数组即为多维数组，例如 var array = [[1,2,3],['a','b','c'],'-'] 此时 array 就是一个多维数组，此时若想访问 'b'，即可 按照 array[1][1] 进行访问；
2.2 对象
- js 语法中定义的对象为 var obj = {键值对...}，例如我们有对象 person，其有 name、age、sex 属性则表示如下：
var person = { name:"海哥", age:28, sex:'男' }
- 对象中的属性访问：使用 对象名.属性名 进行访问，这样访问的前提是 对象中定义的属性不能够包含任何特殊字符；例如我们想访问性别 sex，示例如下：
var person = { name: "海哥", age: 28, sex: '男' }; console.log(person.sex);//结果为 男
- 如果访问一个不存在的对象属性，在 js 中不会报错，返回 undefined;
- 给对象增加和删除属性：
| 操作名称 | 具体描述 |
| 增加对象属性 |
对象名.新属性 = 值，即可，示例如下：在对象 person 中增加属性 身高（height） var person = { name: "海哥", age: 28, sex: '男' }; person.height = '180cm'; //此时 person 对象为：{ name: '海哥', age: 28, sex: '男', height: '180cm' } console.log(person); |
| 删除属性对象 |
关键字 delete 对象名.属性名，示例如下：在对象 person 中删除年龄(age)属性 var person = { name: "海哥", age: 28, sex: '男' }; person.height = '180cm'; delete person.age; //此时 person 对象为:{ name: '海哥', sex: '男', height: '180cm' } console.log(person); |
- 判定一个属性是否属于某个对象，使用方法：对象名.hasOwnProperty(属性名称)，属于返回 true，属性不属于则返回 false，示例如下：判断 age 是否是 person 的属性，ages 是否是 person 的属性；
var person = { name: "海哥", age: 28, sex: '男' }; person.height = '180cm'; console.log(person); console.log(person.hasOwnProperty('name'));//返回值为 true console.log(person.hasOwnProperty('names'));//返回值为 false
2.3 条件判断
- 单层条件判断示例：
var a = 10; if (a === 10) { console.log("十全十美"); } else { console.log("期待十全十美"); }
注意：虽然原则上 else 后面的 {} 可以省略，但是我们书写时一定要加上，这样才能时刻保持语义明确；
- 多层条件判断示例：
//if ...else 循环的使用 var a = 10; if (a === 10) { console.log("十全十美"); } else if (a > 9) { console.log("可能十全十美"); }else{ console.log("谁知道"); }
上述程序的执行结果为 “十全十美”，注意：多个if ...else...语句执行时，如果已经返回正确的结果，后面的语句将不会执行；
- 特别说明： js 中将 null、undefined、NaN、空字符传 '' 视为 false，其他的值都视为 true，所以 if 条件中 出现类似:if(3) 就代表条件是 true;
2.4 循环
- 第一种形式 for 循环，举例如下：
//求 从 1 到 100 的 和 var i = 1; var sum = 0; for (i = 1; i <= 100; i++) { sum += i; } console.log("此时的和为:" + sum)
- 第二种应用：依据索引遍历数组
//依据索引遍历数组 var arr = [1, 2, 'hello', 'world', null]; var i = 0; for (i = 0; i < arr.length; i++) { console.log("此时数组依次的值为:" + arr[i]); }
- 退出 for 循环，可以使用语句：break
var i = 10;
//可以用 ;;表示内部执行结构 for (;;) { if (i > 20) { console.log("此时的i值为:" + i) break; } i++; }
- 第三种应用：利用 for ... in 遍历出一个对象中的所有属性
//利用 for ...in 循环输出对象中的所有属性 var obj = { name: "海哥", age: 18, sex: "男", height: "180cm" }; for (var key in obj) { console.log("对象的属性为:" + key); }
如果想只保持自身属性，过滤掉继承属性，可以使用 hasOwnProperty() 增加判断；另外：同理 for ...in 结构还可以应用在数组中，但是数组中输出的值为 String 而不是 number；
//利用 for ..in 循环输出数组 var array = [1, 2, 3, 4]; for (var key in array) { //这个 key 循环输出的是索引值 console.log("此时数组 array 的索引值为:" + key); //这个 array[key] 循环输出的是数组具体的值 console.log("此时数组 array 的单个值为:"+array[key]); }
- 第四种应用： while 单条件循环，注意使用时要有结束条件；
//利用 while 循环求出 100以内的基数和 var i = 1; var sum = 0; while (i <= 100) { if (i % 2 === 1) { sum += i; } i++; } //此时的值为 2500 console.log("此时的 sum 值为:" + sum);
- do ... while 循环，每次循环完成才去校验条件，循环体至少要被执行一次；
//do ... while 循环使用 var j = 1; do { j = j + 1; } while (j < 100) { console.log(j); }
即：对于上面代码，无论 while 内的条件如何，都会执行一次 j = j+1；
2.5 JS 中的 Map 和 Set
- 为什么要引入 Map ：解决对象的键（key）值只能是字符串的局限，Map 中的键(key)值可以是任意数据类型；
- 初始化Map：有两种方式可以进行初始化。
第一种：直接初始化 Map 且赋值，例如：var map = new Map([[1,'张一'],[2,'张二']])
第二种：初始化一个空的 Map，例如：varmap = new Map()；
- Map 中常见的两个方法：
| 方法名称 | 方法描述 |
| get(key) | 依据 Map 集合的 key 值来获取到对应的 value 值 |
| set(key,value) | 向 Map 集合中添加子元素 |
| delete(key) | 按照 key 值删除 Map 集合中的元素 |
示例代码如下:
var map01 = new Map([ [1, "大宝"], [2, '小宝'], ['age', 18] ]); var i = map01.get(1); var j = map01.get(2); var k = map01.get('age'); console.log(i + j + k);
var map02 = new Map(); map02.set(3, "AA"); map02.set(4, "BB"); map02.set(5, "CC"); console.log("此时的 map02 集合为:" + map02.get(5));
另：set() 方法遵循如下约定：当 Map 集合中存在相同的 key 值时，会覆盖。另： Map 集合中的 Key 值可以是 null；
- Set 集合用来存储 Key 值，不存储 value，Key 值不允许重复；
- Set 集合常用方法如下：
| 方法名称 | 方法描述 |
| add(key) | 向 Set 集合中添加元素 |
| delete(key) | 在 Set 集合中删除元素 |
示例代码如下：
// Set 集合使用案例 var set = new Set(); set.add(11); set.add(null); set.add("AA"); set.delete("AA"); for (var m of set) { console.log("此时set集合的值为:"+m ); }
2.6 Array、Set、Map 循环输出
- 第一种方式：通过 for of 进行循环输出
//通过 for ... of 循环输出 数组、Set 集合 和 Map 集合 var array = [1, 2, 3, null, 'AA']; var map = new Map([ [1, "AA"], [2, 'BB'], [3, 'CC'] ]); var set = new Set(["aa", "bb", "cc"]); for (var i of array) { console.log("数组 Array 的值为:" + i); } for (var j of map) { console.log(j[0] + "=" + j[1]); } for (var k of set) { console.log("集合 Set 的值为:" + k); }
- 第二种方式：直接使用 iterable 内置的 foreach 语句进行循环输出
//通过 for ... of 循环输出 数组、Set 集合 和 Map 集合 var array = [1, 2, 3, null, 'AA']; var map = new Map([ [1, "AA"], [2, 'BB'], [3, 'CC'] ]); var set = new Set(["aa", "bb", "cc"]); //利用 iterable 内置的 foreach 语句进行循环输出 array.forEach(function (element, index, array) { // element: 指向当前元素的值 // index: 指向当前索引 // array: 指向Array对象本身 console.log(element + ', index = ' + index); }); set.forEach(function (element, set) { console.log("set集合的元素为:" + element); }); map.forEach(function (value, key, map) { console.log(key +"=" + value); });
3.总结
- 为什么要学习这个：为了在 Postman中书写简单的 js 脚本；