JS 基础学习

Posted 勇气

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS 基础学习相关的知识，希望对你有一定的参考价值。

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");
//此时获取的新数组 arr = [1,2,3,"hello","world"]
console.log(arr);

 

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 脚本；

　　

 

 

 

 

 

 

以上是关于JS 基础学习的主要内容，如果未能解决你的问题，请参考以下文章

201555332盛照宗—网络对抗实验1—逆向与bof基础

谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程

DOM探索之基础详解——学习笔记

20155201 李卓雯 《网络对抗技术》实验一 逆向及Bof基础