标签：null   table   关于   相同   length   tin   code   ble   使用方法   

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
• 数组中的其他方法

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);

var arr = [1, 2, 3, "hello world", null];
//删除索引3到索引4的元素
arr.splice(3,4);
//此时获取到的新数组  arr = [1,2,3]
console.log(arr);

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); 

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 ]

•  多维数组： 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;
• 给对象增加和删除属性：

var person = {
    name: "海哥",
    age: 28,
    sex: ‘男‘
};
person.height = ‘180cm‘;
//此时  person 对象为：{ name: ‘海哥‘, age: 28, sex: ‘男‘, height: ‘180cm‘ }
console.log(person); 

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 ) {
    sum += i;
}
console.log("此时的和为:" + sum)

• 第二种应用：依据索引遍历数组

//依据索引遍历数组
var arr = [1, 2, ‘hello‘, ‘world‘, null];
var i = 0;
for (i = 0; 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 ) {
    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 ) {
    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 中常见的两个方法：

 　　　　　　示例代码如下:

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 集合常用方法如下：

 　　　　　　示例代码如下：

// 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 基础学习

标签：null   table   关于   相同   length   tin   code   ble   使用方法   

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