JS 基础学习

时间：2019-12-09 14:08:46 收藏：0 阅读：73

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

原文：https://www.cnblogs.com/haibaowang/p/11988288.html

JS 基础学习

1.开发工具选择

2.快速入门

2.1 数组

slice(i)

slice(startIndex,endIndex)

push(新元素 a,新元素 b ...)

reverse（）

splice()

concat()