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基础