DNS | Array | Object | Map | Set | iterable ---[廖雪峰老师js教程笔记]

一.DNS协议
1.DNS提供什么服务？——域名与IP地址之间的解析服务（正逆均可）。

2.DNS存在的原因？——对于计算机而言，它更擅长通过一长串数字（IP地址）来访问对方的计算机;而对于人类来说，字母+数字的组合更方便记忆，因此用户使用主机名或域名来访问对方的计算机。

【廖雪峰老师的JavaScript教程】
https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000

二.基本知识点
1.ECMAScript是一种语言标准，而JavaScript是网景公司对ECMAScript标准的一种实现。

2.为什么不直接将JavaScript作为一种标准？因为JavaScript是网景的注册商标。

3.没有必要显式设置<script>标签的属性：type ="text/javascript"的原因？因为默认的type就是JavaScript。

4.出于浏览器的安全限制，以file://开头的地址无法执行如联网等JavaScript代码;需要架设一个Web服务器，然后以http://开头的地址来正常执行所有JavaScript代码。

5.遇到过多的嵌套，可以将部分代码抽离出来，作为函数来调用，从而减少代码的复杂度。

6.计算机：可以做数学计算的机器。

7.0/0 //NaN(Not a Number)

8.唯一能判断NaN的方法是通过isNaN()函数—-isNaN(NaN); //true

9.浮点数在运算过程中会产生误差，因为计算机无法精确表示无限循环小数。

    1 / 3 === (1 - 2 / 3);    //false
    Math.abs(1 /3 - (1 - 2 /3)) < 0.000001;   //true

10.null表示一个”空”的值 ; 0表示一个数值 ; ''表示长度为0的字符串。undefined表示"未定义"。null适用于大多数情况下，undefined仅仅在判断函数参数是否传递的情况下使用。

11.数组是一组按顺序排列的集合，集合的每个值成为元素。JavaScript的数组可以包括任何数据类型。

12.JavaScript的对象是一组由键-值对组成的无序集合。

13.在JavaScript中，使用等号=对变量进行赋值。可以将任意数据类型赋值给变量，同一个变量可以反复赋值，而且可以是不同类型的变量。

    var a = true;
    a = 'yyc';
    a = null;
    a;//null

14.动态语言：变量本身的数据类型不固定的语言。

15.转义字符存在的原因？因为JavaScript的字符串是由单引号或双引号括起来的字符表示的。如果要呈现出字符串内部的单引号或者双引号，则需要使用转义字符\。”一词多义”—为常规的”字符”赋予特殊的含义。如：

var way1 = "l'm a boy";
var way2 = 'l\'m a boy';
'\u4e2d\u6587';    //"中文"

16.

alert(`
1
2
3
4`);

//反引号
//output:

1
2
3
4

17.模板字符串

var name = 'Gerg';
var age = 21;
var message = '你好,' + name + ',你今年' + age + '岁了！';
console.log(message);//你好,Gerg,你今年21岁了！


var name = 'Gerg';
var age = 21;
var message = `你好,${name},你今年${age}岁了！`;
console.log(message);//你好,Gerg,你今年21岁了！

18.字符串是不可变的：

var s = 'test';
s[0] = 'y';
console.log(s);//"test"

19.JavaScript为字符串提供了一些常用的方法，调用这些方法不会改变原始字符串的内容，而是返回一个新的字符串。

a) toUpperCase()---把一个字符串全部变为大写
b) toLowerCase()---把一个字符串全部变为小写
c) indexOf()---搜素指定字符串出现的首个位置：
    var s = 'Hello world';
    s.indexOf('l');//2
    s.indexOf('L');//-1
d)substring()返回指定索引区间的子串：
    var s = 'Hello world';
    s.substring(0,4);//"hell"----[0,4)
    s.substring(4);//"o world"----[4,end]

三.数组（Array）

1.直接给Array的length赋一个新的值会改变Array：

    var arr = [1,2,3];
    arr.length;//3
    arr.length = 5;
    arr;//[1,2,3,undefined,undefined]
    arr.length = 2;
    arr;//[1,2];

2.Array可以通过索引将对应的元素修改为新的值：

    var arr = [1,2,3];
    arr[1] = 'y';
    arr;//[1,'y',3];
    arr[4] = 'c';
    arr;//[1,'y',3,undefined,'c']

3.但在编写代码的时候，不建议直接修改Array的大小，访问索引时要确保索引不会越界。

4.与String类似，Array也可以通过indexOf()来搜索一个指定的元素出现在数组中的首个位置：

    var arr = ['y','y','c'];
    arr.indexOf('y');//0
    arr.indexOf(1);//-1---因为，数组中不存在数值1这个元素

5.数组的slice()方法就是对象String的substring()方法，截取Array的部分元素，然后返回一个新的Array：

var s1 = 'Hello world';    
var arr;
arr = s1.split('');//["H", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]
arr.slice(3,7);
//[3,7)
//(4) ["l", "o", " ", "w"]
arr.slice(7);
//[7,end]
/(4) ["o", "r", "l", "d"]

6.如果不给slice()传递任何参数，它就会从头到尾截取数组中的所有元素。—使用这个特性，可用来复制一个Array。

var arr = [1,2,3,4,5,6];
var aCopy = arr.slice();
aCopy;
//(6) [1, 2, 3, 4, 5, 6]

7.push() | pop()

1.push()向Array末尾添加若干元素：
    var arr = [1,2,3];
    arr.push('y','y','c');//6
    arr;
    //(6) [1, 2, 3, "y", "y", "c"]
2.pop()把Array的最后一个元素删掉：
    var arr = [1,2];
    arr.pop();//2
    arr;//[1]
    arr.pop();//1
    arr;//[]
    arr.pop();//undefined
    arr;//[]

8.unshift() | shift()

1.unshift()向Array头部添加若干元素：
    var arr = [1,2,3];
    var arr2 = arr.unshift('y','y','c');
    arr2;//6
    arr;
    //(6) ["y", "y", "c", 1, 2, 3]

2.shift()将Array的第一个元素删掉：
    var arr = [1,2,3];
    arr.shift();
    arr;
    //[2,3]

9.sort()

1.sort()对当前Array进行排序，它会直接修改当前Array的元素的位置。
var arr = ['b','a','c'];
arr.sort();
arr;//["a", "b", "c"]

10.reverse()

var arr = [1,2,3];
arr.reverse();
arr;//[3, 2, 1]

11.splice()—-修改Array的”万能方法”

1.删除---指定(位置 + 数量)
var arr = [0,1,2,3,4,5];
//删除数组中的三个元素，其索引值为2,3,4
arr.splice(2,3);//[2,3,4]---删除
arr;//[0, 1, 5]

2.不光删除，还能添加若干元素：
var arr = [0,1,2,3,4,5];
arr.splice(2,3,'y',true);//[2, 3, 4]---删除
arr;//[0, 1, "y", true, 5]

3.不删，只加
var arr = [0,1,2,3,4,5];
arr.splice(2,0,'add');//[]
arr;[0, 1, "add", 2, 3, 4, 5]

12.concat()

要使当前Array与另一个Array连接起来，使用concat()：
var arr1 = [1,2];
var arr2 = [3,4];
var add = arr1.concat(arr2);
add;//[1, 2, 3, 4]

//concat()方法并没有修改arr1，而是返回一个新的Array.
arr1;
//(2) [1, 2]
arr2;
//(2) [3, 4]


concat()方法可以接受任意个元素和Array，并自动把Array拆开，然后全部添加到新的Array里：
var arr = [1,2,3];
arr.concat([true,'y'],null,'string');
//[1, 2, 3, true, "y", null, "string"]
arr;//[1,2,3]

13.join()

1.join()方法将当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串：
var arr = ['y','y','c',1,2,3];
arr.join('--');//"y--y--c--1--2--3"
arr;//["y", "y", "c", 1, 2, 3]---并没有改变原始数组

2.如果Array中的元素不是字符串，将自动转换为字符串后再连接。

14.多维数组—数组中某个元素也是数组

var arr = [[1,2,3],['y','y','c'],'-'];
arr[1][2];//"c"

四. 对象

1.若对象的属性名中存在特殊字符，就必须用单或双引号将其括起来，同时必须用[‘string’]的方式来访问该属性。不过，为了方便起见，属性名尽量使用标准的变量名，直接通过点表示法来访问一个属性。

var Person = {
    name: 'Gerg',
    'nominal-age':22
};
Person.name;//"Gerg"
Person.nominal-age;
//VM239:1 Uncaught ReferenceError: age is not defined
Person['nominal-age'];//22

2.可以用in操作符检测该对象中是否存在某一属性

var Person = {
    name: 'Gerg',
    age: 21
};
'name' in Person;//true
//如果in判断一个属性存在，这个属性不一定就是该对象的，它可能是该对象继承而来的：
'toString' in Person;//true

3.判断一个属性是该对象本身拥有的还是继承而来的，可使用hasOwnProperty()方法：

var Person = {
    name: 'Gerg',
    age: 21
};
Person.hasOwnProperty('age');//true
Person.hasOwnProperty('toString');//false

五. 条件判断

1.if…else…语句执行的特点是二选一.

2.JavaScript将null,undefined,0,NaN和空字符串''视为false，其他值一概为true.

Boolean(null);
//false
Boolean(undefined);
//false
Boolean(0);
//false
Boolean(NaN);
//false
Boolean('');
//false

3.for…in循环，可以把一个对象中的所有属性依次循环出来：

var Person = {
    name: 'Gerg',
    age: 21,
    city: 'Shanghai'
};
for(var key in Person){
    console.log(key);
}
>>>
name
age
city

想要过滤掉对象的继承属性，可用hasOwnProperty()来实现：

var Person = {
    name: 'Gerg',
    age: 21,
    city: 'Shanghai'
};
for(var key in Person){
    if(Person.hasOwnProperty(key)){
        console.log(key);
    }
}
>>>
name
age
city

5.当对象为Array时：

var person = ['Gerg',21,'Shanghai'];
//下列表示方式仅用于理解
var Person ={
    0:'Gerg',
    1:21,
    2:'Shanghai'
};

for(var i in person){
    console.log(i);
}
>>>
"0"
"1"
"2"

for(var i in person){
    console.log(person[i]);
}
>>>
"Gerg"
"21"
"Shanghai"

//for...in对Array的循环得到的是String而不是Number

6.while—条件满足，不断循环; 否则，退出循环。

//从小[1]到大[99]
var sum = 0;
var i = 1;
while(i < 100){
    sum += i;
    i = i + 2;
}
console.log(sum);//2500

//从大[99]到小[1]
var sum = 0;
var i = 99;
while(i > 0){
    sum += i;
    i = i -2;
}
console.log(sum);//2500

//for循环
var sum = 0;
for(var i = 1;i < 100;i = i + 2){
    sum += i;
}
console.log(sum);//2500

var sum = 0;
for(var i = 99;i > 0;i = i - 2){
    sum += i;
}
console.log(sum);//2500

7.do…while—先斩后奏型—先执行一次大括号中的语句，再检测判断条件。

var n = 0;
do{
    n++;
}while(n < 100);
console.log(n);//100

8.

//for---正序
var arr = ['yyc','asan','pangzi'];
for(var i = 0;i < arr.length;i++){
    console.log(arr[i]);
}
>>>
yyc
asan
pangzi


//for---逆序
var arr = ['yyc','asan','pangzi'];
for(var i = arr.length-1;i > -1;i--){
    console.log(arr[i]);
}
>>>
pangzi
asan
yyc


//while---正序
var arr = ['yyc','asan','pangzi'];
var i = 0;
while(arr[i]){
    console.log(arr[i]);
    i++;
}
>>>
yyc
asan
pangzi


//while---逆序
var arr = ['yyc','asan','pangzi'];
var i = arr.length;
while(arr[i-1]){
    console.log(arr[i-1]);
    i--;
}
>>>
pangzi
asan
yyc

六 Map | Set

1.Map

1.是什么？Map是一组键值对的结构，具有极快的查找速度。

2.为什么存在？对象的属性（键）必须是字符串。但是Number或其他数据类型作为键也是合理的。

2.使用Array实现：根据同学的姓名来查找对于的成绩

常规方法：两个Array,一个保存姓名，一个保存成绩。
    var names = ['yyc','asan','tuhao'];
    var scores = [90,95,100];

Map实现
    var m = new Map([['yyc',90],['asan',95],['tuhao',100]]);
    m.get('asan');//95

3.Map拥有的方法：增(set) | 删(delete) | 判(has) | 查(get)

var m = new Map();
m.set('yyc',66);
//Map(1) {"yyc" => 66}
m.set('asan',88);
//Map(2) {"yyc" => 66, "asan" => 88}
m.has('yyc');//true
m.get('yyc');//66
m.delete('yyc');//true
m.get('yyc');//undefined

4.由于一个key只能对应一个value，因此多个value存入一个key,”长江后浪推前浪”

var m = new Map();
m.set('yyc','前浪');
m.set('yyc','后浪');
m.get('yyc');//"后浪"

5.Set与Map类似，也是一组Key的集合，但不存储value。由于Key不能重复，所以可用Set去重。

function dedup(arr){
    return Array.from(new Set(arr));
}
dedup([1,2,3,4,3,2,1]);
//[1, 2, 3, 4]

6.Set对象的方法：

var s = new Set([1,2,3,3,3,'3']);
s;
//Set(4) {1, 2, 3, "3"}

s.add(4);
s;
Set(5) {1, 2, 3, "3", 4}

s.add(4);
s;
Set(5) {1, 2, 3, "3", 4}

s.delete('3');
//true
s;
//Set(4) {1, 2, 3, 4}

七 iterable(迭代的，遍历的)

1.Array | Map | Set 都属于iterable类型。

2.具有iterable类型的集合可以通过新的for…of循环来遍历。

//Array
var a = ['a','b','c'];
for(var i of a){
    console.log(i);
}
>>>
a
b
c


//Map
var m = new Map([['yyc',90],['asan',95],['tuhao',100]]);
for(var i of m){
    console.log(i);
}
>>>
(2) ["yyc", 90]
(2) ["asan", 95]
(2) ["tuhao", 100]


//Set
var s = new Set(['A','B','C']);
for(var i of s){
    console.log(i);
}
>>>
A
B
C

3.for…in | for…of 区别？

var a = ['a','b','c'];
a.name = 'Gerg';
for(var i in a){
    console.log(i);
}
>>>
0
1
2
name

console.log(a.length);//3


***而for...of循环只循环集合本身的元素
var a = ['a','b','c'];
a.name = 'Gerg';
for(var i of a){
    console.log(i);
}
console.log(a.length);
>>>
a
b
c
3

4.更好的方式：使用iterable内置的forEach方法，接收一个函数，每次迭代都自动回调该函数。

//Array
var a = ['a','b','c'];
a.forEach(function(element,index,array){
    console.log(element);
});
>>>
a
b
c

var a = ['a','b','c'];
a.forEach(function(element,index,array){
    console.log(index);
});
>>>
0
1
2

var a = ['a','b','c'];
a.forEach(function(element,index,array){
    console.log(array);
});
>>>
["a", "b", "c"]
["a", "b", "c"]
["a", "b", "c"]


//Set
var s = ['A','B','C'];
s.forEach(function(element,set){
    console.log(element);
});
>>>
A
B
C

var s = ['A','B','C'];
s.forEach(function(element,set){
    console.log(set);
});
>>>
0
1
2


//Map
var m = new Map([['yyc',90],['asan',95],['tuhao',100]]);
m.forEach(function(value,key,map){
    console.log(value);
});
>>>
90
95
100

var m = new Map([['yyc',90],['asan',95],['tuhao',100]]);
m.forEach(function(value,key,map){
    console.log(key);
});
>>>
yyc
asan
tuhao

var m = new Map([['yyc',90],['asan',95],['tuhao',100]]);
m.forEach(function(value,key,map){
    console.log(map);
});
>>>
Map(3) {"yyc" => 90, "asan" => 95, "tuhao" => 100}
Map(3) {"yyc" => 90, "asan" => 95, "tuhao" => 100}
Map(3) {"yyc" => 90, "asan" => 95, "tuhao" => 100}