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(`1234`);//反引号//output:1234

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');//-1d)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,4arr.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 definedPerson['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');//truePerson.hasOwnProperty('toString');//false

五. 条件判断

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

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

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

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

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

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

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

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);//2500var 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]);}>>>yycasanpangzi//for---逆序var arr = ['yyc','asan','pangzi'];for(var i = arr.length-1;i > -1;i--){    console.log(arr[i]);}>>>pangziasanyyc//while---正序var arr = ['yyc','asan','pangzi'];var i = 0;while(arr[i]){    console.log(arr[i]);    i++;}>>>yycasanpangzi//while---逆序var arr = ['yyc','asan','pangzi'];var i = arr.length;while(arr[i-1]){    console.log(arr[i-1]);    i--;}>>>pangziasanyyc

六 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');//truem.get('yyc');//66m.delete('yyc');//truem.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');//trues;//Set(4) {1, 2, 3, 4}

七 iterable(迭代的，遍历的)

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

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

//Arrayvar a = ['a','b','c'];for(var i of a){    console.log(i);}>>>abc//Mapvar 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]//Setvar s = new Set(['A','B','C']);for(var i of s){    console.log(i);}>>>ABC

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

var a = ['a','b','c'];a.name = 'Gerg';for(var i in a){    console.log(i);}>>>012nameconsole.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);>>>abc3

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

//Arrayvar a = ['a','b','c'];a.forEach(function(element,index,array){    console.log(element);});>>>abcvar a = ['a','b','c'];a.forEach(function(element,index,array){    console.log(index);});>>>012var a = ['a','b','c'];a.forEach(function(element,index,array){    console.log(array);});>>>["a", "b", "c"]["a", "b", "c"]["a", "b", "c"]//Setvar s = ['A','B','C'];s.forEach(function(element,set){    console.log(element);});>>>ABCvar s = ['A','B','C'];s.forEach(function(element,set){    console.log(set);});>>>012//Mapvar m = new Map([['yyc',90],['asan',95],['tuhao',100]]);m.forEach(function(value,key,map){    console.log(value);});>>>9095100var m = new Map([['yyc',90],['asan',95],['tuhao',100]]);m.forEach(function(value,key,map){    console.log(key);});>>>yycasantuhaovar 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}