JavaScript知识点1

Posted 2020-09-26 艳阳天

一  JS变量

1--命名：

• 由英文字母、数字。下划线组成，首字母为字母或下划线或美元符号$。避免使用关键字和保留字。
• 变量名区分大小写。
• 变量名两种写法：

      [1]驼峰命名法：首字母小写，剩下每个单词的首字母大写；单词与单词间用下划线分隔；每个单词的首字母都大写

      [2]匈牙利命名法：变量名=类型+对象描述，如oBtn，o表示Object对象类型，Btn表示按钮之类的

2-- 声明

• var 、let、const、
• 未声明直接使用的变量直接成了全局变量，不推荐。

       Ps：var声明的变量会提前到函数体的顶部。函数也有声明提前。

3--变量类型

• 值类型：占用空间固定，保存在栈中；保存与复制的是值本身；使用typeof检测数据类型；基本类型数据是值类型。按值访问，可以操作保存在变量中的实际值。如Null、Undefined、Number、String、Boolean。
• 引用类型：占用空间不固定，保存在堆中；保存与复制的是指向对象的一个指针；使用instanceof检测数据的类型；使用new()方法构造出的对象是引用类型。按引用访问，不能直接操作对象的内存空间。如Object。
• 类型转换：转换函数（parseInt()、parseFloat()、Number()）、强制类型转换、利用js弱类型转换

       Ps: 如果定义的变量在将来用于保存对象，则最好将其初始化为null，这样直接检查null就可以知道相应的变量是否已经保存了一个对象的引用。只要意在保存对象的变量还没有真正保存对象。可以让其保存null值。所有函数的参数都是按值传递的。

4--作用域

• 全局变量：在函数体外定义的变量或者在函数体内部定义的无var等声明的变量；全局变量可以在任何位置被调用。全局变量是全局对象的属性，除非被显示删除，否则一直存在。
• 局部变量：在函数内部使用var等声明的变量或是函数的参数变量；局部变量需在当前函数体内部调用。局部变量是调用对象的属性，自声明起至函数运行结束或被显示删除其生命周期结束。
• 优先级：局部变量高于同名的全局变量；参数变量高于同名全局变量；局部变量高于同名参数变量。

      Ps： 内层函数可访问外层函数局部变量；外层函数不能访问内层函数局部变量。垃圾回收机制：标记清除法（主要）、引用计数法。为了确保有效回收内存，应及时解除不再使用的全局变量。

 

二  JS运算符                

1--算术运算符：

      +：（对字符串进行连接操作，两种方式，将字符串+字符串，二者直接拼接，或者字符串+数值，即数值转为字符串再拼接； 将一个数值转换成字符串，即数值+空字符串；）、  

      -：（对操作数进行取反操作； 对数字进行减法操作； 将字符串转换成数值，数值型字符串-0）

      *：（对两个运算数进行乘法运算； 同号得正，异号得负）

      /：（对两个运算数进行除法运算； 同号得正，异号得负）

      %：（返回两个除数的余数； 符号与第一个运算数的符号相同）

     +=：

      -=：

      *=：

      /=：

      %=：

      ++：（自加运算）

       --：（自减运算）

      Ps：++、--运算=》运算数必须是一个变量、数组的一个元素或对象的属性； 如果运算数是非数值型的，需要将其转换为数值型的； 运算符在前，先进行自加/减操作，再进行求值，运算符在后，先进行求值，再进行自加/减操作；

 

2--逻辑运算符：

      逻辑非！ ：返回值为true的情况有空字符串、0、null、NaN、undefined； 返回false的情况有对象、非空字符串、非0数值； ==》若运算数的值为false则返回true，否则返回false； 连续使用两次！，可将任意类型转为布尔型值；

 

       逻辑与&& ： 若第一个操作数为对象，则返回第二个操作数； 第二个操作数为对象，则第一个操作数值为true时返回该对象； 若两个操作数都是对象，则返回第二个操作数； 一个操作数为null，则返回null； 若一个操作数为NaN，则返回NaN; 若一个操作数为undefined，则返回undefined； ==》当且仅当两个运算数都是true时，才返回true； 当一个操作数的值为false时则不对第二个操作数进行求值；

 

       逻辑或|| ：若第一个操作数为对象，则返回第一个操作数； 若第一个操作数值为false，则返回第二个操作数； 若两个操作数都是对象，则返回第一个操作数； 若两个操作数都是null，则返回null； 若两个操作数都是NaN，则返回NaN; 若两个操作数都是undefined，则返回undefined； ==》当且仅当两个运算数的值都未false时，才返回false； 若第一个操作数为true，则不会对第二个操作数进行求值；

 

3--位运算符：

       类型：有符号（前31为数值位，第32位为符号位，0表示正数，1表示负数）、无符号（只能是正数，第32位表示数值，数值范围可以加大）

      数值范围：-2³¹-2³¹-1，即-2147483648-2147483647

      存储方式：正数（纯2进制存储，31位中每一位表示2的幂，用0补充无用位）、负数（2进制补码存储，补码计算=>确定该数字的非负版本的二进制表示，求得二进制反码，即把0替换为1,1替换为0，在二进制反码上加1）

      当做0来处理的特殊值有NaN、Infinity

 

      逻辑位运算：返回值为1的情况有=>按位非~  0 ，按位与& 对应位全为1 ，按位或|  任何一位是1 ，按位异或^  既不同时为0也不同时为1； 返回值为0的情况有=>按位非~  1 ，按位与&  任何一位是0 ， 按位或|  对应位全为0 ，按位异或 ^  对应位全0或全1

      

       位移操作：左移（将数值的所有位左移指定的位数，所有空位用0补，左移1位对其乘2，左移两位乘4……）、有符号右移（将数值的所有位右移指定的位数，移出的位被舍弃，保留符号位，右移1位对其除2，右移2位除4……）、无符号右移（正数，与有符号右移结果相同；负数，会出现无限大的数值……）

 

ps : 若对非数值执行位运算，会先使用Number()函数将其转换为数值（自动完成），然后再进行位运算。按位非的本质是其负数减1.

 

4--关系运算符：

• 大小关系检测：

           <  若A<B，则返回true，否则返回false

          <= 若A<=B，则返回true，否则返回false

          >= 若A>=B，则返回true，否则返回false

          >  若A>B，则返回true，否则返回false

 

数值与数值比较，比较它们的代数值；

• 仅一个运算符是数值，将另一个运算数转换成数值，并比较它们的代数值；
• 字符串间的比较，逐字符比较它们的Unicode数值；
• 字符串与非数值的比较，将运算数转换为字符串并进行比较；
• 运算数既非数字也非字符串，转换为数值或字符串后进行比较；
• 运算数无法被转换成数值或字符串，返回false；
• 与NaN比较，返回值为false；

 

等值关系检测：

• 相等比较：

                == ：比两个运算数的返回值是否相等

                != ：比较两个运算数的返回值是否不相等

       Ps：对象-调用valueOf() ； 字符串与数值的比较，字符串转换为数值 ；null与undefined相等，比较前不进行任何转换 ；NaN与任何值都不相等，包括其本身 ； 对象是否属于同一对象，是==，否！=

• 相同比较：

                 === ：比较两个运算数的返回值及数据类型是否相同；

                 !== ：比较两个运算数的返回值及数据类型是否不同；

        Ps：值类型间比较，只有数据类型相同且数值相等时才相同 ；值类型与引用类型比较，肯定不相同 ；引用类型间比较，比较它们的引用值（内存地址）

 

5--对象运算符：

• in ：判断左侧运算数是否为右侧运算数的成员
• instanceof ：判断对象实例是否属于某个类或构造函数
• new ：根据构造函数创建一个新对象，并初始化该对象
• delete ：删除指定对象的属性、数组元素或变量
• . 及[] ：存取对象和数组元素
• () ：函数调用，改变运算符优先级等

 

 

6--条件运算符：

    boolean_expression ? true_value : false_value

 

7--赋值运算符：

   =

 

8--逗号运算符：

    在一行内执行多个不同的操作

 

9--typeof运算符：类型判断运算符

 

10--void：舍弃运算数的值，返回undefined作为表达式的值

 

 

三  JS流程（控制）语句

  

• 条件选择结构：if、if-else、if-else-if、switch
• 循环结构：for、for-in、while、do-while
• 其他语句：break、continue、return、with、label
• 异常处理语句：throw（主动抛出异常）、try（指明需要处理的代码段）、catch（捕获异常）、finally（后期处理）

 

四  JS数组

 

1--创建方法：

        空数组：var Obj=new Array();或者 var Obj=[];

        指定长度数组：var Obj=new Array(length);或var Obj=Array(20)

        指定元素数组：var Obj=new Array(ele1,ele2,...,eleN);或var Obj=[1,2,3];

        单维数组：var Obj=[ele1,ele2,…,eleN];或var Obj=new Array(“red”,”blue”)

        多维数组：var a=new Array([arr1],[arr2],…,[arr3]);

 

2--基本操作：

       存取数组元素：（1）单维数组：数组名[下标索引];  （2）多维数组：数组名[外层数组下标][内层元素下标]     ps：数组长度是可变的；数组下标从0开始；下标类型有数值与非数值型，其中非数值型有几种情况：转为字符串或生成关联数组或下标将作为对象属性的名字；数组元素可添加到对象中。如读取arr[2]或设置 arr[2]=”blue”

       增加数组：使用[]运算符指定一个新下标，如数组长度为3，arr[3]=”loj”

      删除数组：delete 数组名[下标]

      遍历数组：for（var 数组元素变量 in 数组）

      检测数组：Array.isArray(value)

eg. 

var vals=[1,2,3]; 
console.log(vals[2]); 
vals[vals.length]="black"; 
vals[vals.length]="red"; 
console.log(vals);
if(Array.isArray(vals)){ 
    console.log("we get"); 
  }

 

       数组属性：constructor：（引用数组对象的构造函数）、length：（返回数组的长度）、prototype（通过增加属性和方法扩展数组定义）

ps ：length属性不是只读的，通过length可以实现数组元素的删除和添加，若将数组length设置小于实际数组元素个数，则将会从数组末尾删除相应的数组元素，若数组length大于实际数组元素个数，则会向该数组添加新数组元素，其值为undefined

 

3--数组方法：

添加元素：

push()：（在数组末尾添加数组，并返回修改后的数组的长度）、

var colors=new Array(); 
var count=colors.push("red","blue");//push()操作返回的是数组长度，即将数组长度赋值给变量count 
console.log(count);//2

 

unshift()：（在数组头部添加任意多个元素，并返回新数组的长度）、

var colors=new Array(); 
var count=colors.unshift("red","bleu"); 
console.log(count);//2 
count=colors.unshift("black"); 
console.log(count);//3 
var item=colors.pop(); 
console.log(item);//bleu 
console.log(colors.length);//2

 

concat()：（合并两个或多个数组，并返回合并后的新数组）

先创建当前数组的一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在么有给concat()传递参数时，只是复制当前数组并返回其副本。若传递给其的参数是一或多个数组，则该方法会将这些数组中的每一项添加到结果数组中。若传递的不是数组，则这些值直接添加到数组的末尾。

var colors=["red","blue","green"]; 
var colors2=colors.concat("yellow",["black","pink"]); 
console.log(colors2);//[ ‘red‘, ‘blue‘, ‘green‘, ‘yellow‘, ‘black‘, ‘pink‘ ] 
console.log(colors);//[ ‘red‘, ‘blue‘, ‘green‘ ]

 

删除元素：

pop()：（删除并返回数组的最后一个元素）、

var colors=new Array(); 
var count=colors.push("red","blue");//push()操作返回的是数组长度，即将数组长度赋值给变量count 
console.log(count);//2 
var item=colors.pop();//pop()操作删除数组的最后一个元素并返回，即将删除的最后一个元素赋值给变量item 
console.log(item);//blue

 

shift()：（删除并返回数组的第一个元素，同时将数组长度减1）

var colors=new Array(); 
var count=colors.push("red","bleu"); 
console.log(count);//2 
count=colors.push("blaj"); 
console.log(count);//3 
var item=colors.shift(); 
console.log(item);//red 
console.log(colors.length);//2

 

子数组：

splice()：（删除任意数量的项 => splice(要删除的起始下标，要删除的项数) ； 在指定位置插入指定的项 => splice(起始下标，0，要插入的项) ；替换任意数量的项 => splice(起始下标，要删除的项数，要插入的项)）

ps:splice()方法始终会返回一个数组，该数组中包含从原始数组中删除的项，若没有删除任何项，则返回空数组。且splice()会改变原数组。

var colors=["red","blue","green","yellow"]; 
var removed=colors.splice(0,1); 
console.log(colors);//[ ‘blue‘, ‘green‘, ‘yellow‘ ] 
console.log(removed);//[ ‘red‘ ] 
 
removed=colors.splice(1,0,"yellow","orange"); 
console.log(colors);//   [ ‘blue‘, ‘yellow‘, ‘orange‘, ‘green‘, ‘yellow‘ ] 
console.log(removed);//  [] 
 
removed=colors.splice(1,1,"red","purple"); 
console.log(colors);// [ ‘blue‘, ‘red‘, ‘purple‘, ‘orange‘, ‘green‘, ‘yellow‘ ] 
console.log(removed);//  [ ‘yellow‘ ]

 

slice()：（从已有数组中选取部分元素构成新数组； slice(返回项的起始位置，返回项的结束位置)； ps：若是负数，则用数组长度加上该值确定位置；起始位置为数值的实际下标；结束位置的实际下标为结束值减1；若只传入一个参数，则从该参数指定位置开始一直到数组末尾都返回；slice()方法不会影响原数组）

var colors=["red","blue","green","yellow"]; 
var colors2=colors.slice(1); 
var colors3=colors.slice(1,4); 
console.log(colors);//[ ‘red‘, ‘blue‘, ‘green‘, ‘yellow‘ ] 
console.log(colors2);//[ ‘blue‘, ‘green‘, ‘yellow‘ ] 
console.log(colors3);//[ ‘blue‘, ‘green‘, ‘yellow‘ ]

 

4--数组排序：

    reverse()：（颠倒数组中元素的顺序）

    sort()：（对字符数组或数字数组进行排序，默认按字符串比较，也可以自己写排序函数支持）

ps：sort()方法按升序排列数组项，sort()会调用toString()转型方法，比较得到的字符串，以确定如何排序。sort()方法可也接收一个比较函数作为参数，便于我们指定哪个值在哪个值前面。比较函数接收两个参数，若第一个参数应该位于第二个参数之前则返回一个负数，若两个参数相等则返回0，若第一个参数应该位于第二个参数之后则返回一个正数。

function compare(value1,value2){  //升序 
            if(value1<value2){ 
               return -1; 
           }else if(value1>value2){ 
               return 1; 
         }else{ 
              return 0; 
        } 
        } 
        function compare1(a,b){ //适用于数值类型或者其valueOf()会返回数值类型的对象类型 
             return a-b; 
       } 
        var values=[1,3,10,35,8]; 
        var vals=[1,5,6,10,8] 
        values.sort(compare1); 
        vals.sort(compare); 
        console.log(values);//[ 1, 3, 8, 10, 35 ] 
        console.log(vals);//[ 1, 5, 6, 8, 10 ]

 

ps：由于比较函数通过返回一个小于0、等于0或大于0的值来影响排序结果，因此减法操作可以适当处理所有这些情况。

 

       数组转换：

            toString() ：（转换为字符串并返回）

            toLocaleString() ：（转换为本地格式字符串并返回）

           valueOf() ：（返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串）

           join(分隔符) ：（用指定分隔符分割数组并转换为字符串）

 

        eg.   

var arr=[1,2,6,8,9]; 
console.log(arr.toString());//1,2,6,8,9 
console.log(arr.valueOf());// [ 1, 2, 6, 8, 9 ] 
console.log(arr);//  [ 1, 2, 6, 8, 9 ]

     

           ps: toString()、toLocaleString()、valueOf()，默认情况下都会以逗号分隔的字符串形式返回数组项，而join()可以使用不同的分隔符来构建这个字符串。

 

 

5--位置方法：

     indexOf(arg1,arg2) ：（从数组的起始位置开始向后查找，返回要查找的项在数组中的位置或-1）

     lastIndexOf(arg1,arg2) ：（从数组的结束位置开始向前查找，返回要查找的项在数组中的位置或-1）

     ps：参数：要查找的项、表示查找起点的位置索引（可选参数）。比较时用全等操作符。

var nums=[1,2,3,4,5,4,3,2,1]; 
console.log(nums.indexOf(4));//3 
console.log(nums.lastIndexOf(4));//5，索引都是从前往后定义的 
console.log(nums.indexOf(4,4));//5 
console.log(nums.lastIndexOf(4,4)); //3 
 
var person={name:"Nicho"}; 
var people=[{name:"Nicho"}]; 
var morePeople=[person]; 
console.log(people.indexOf(person));//-1 
console.log(morePeople.indexOf(person));//0

 

6--迭代方法：（相同点：对数组中的每一项运行给定函数）

    every() ：（如果该函数对每一项都返回true，则返回true）

    filter() ：（返回值为true的所有成员）

    forEach() ：（无返回值）

    map() ：（返回每次函数调用的结果数组）

    some() ：（有任意一项返回true，则返回true）

    ps：接收参数：要在每一项上运行的函数、运行该函数的作用域对象； 运行函数的传入参数：数组项的值item、该项在数组中的位置index、数组对象本身array

 

every()、some()用于查询数组中的项是否满足某个条件；对every()来说，传入的参数必须每一项都返回true，该方法才返回true；而some()方法只要传入的函数对数组中的某一项返回true，则返回true。

var nums=[1,2,3,4,5,4,3,2,1]; 
var everyResult=nums.every(function(item,index,array){ 
    return (item > 2); 
}); 
console.log(everyResult);//false 
 
var someResult=nums.some(function(item,index,aray){ 
    return (item > 2); 
}); 
console.log(someResult);//true

 

 

filter()：利用指定的函数确定是否在返回的数组中包含某一项，如返回一个所有数值都大于2的数组。该方法对查询符合某些条件的所有数组项非常有益。

var nums=[1,2,3,4,5,4,3,2,1]; 
var filterResult=nums.filter(function(item,index,array){ 
    return (item > 2); 
}); 
console.log(filterResult);//[ 3, 4, 5, 4, 3 ]

 

map()：返回一个数组，该数组的每一项都是在原始数组中的对应项上运行传入函数的结果，如可给数组中的每一项乘以2，然后返回这些乘积组成的数组

var nums=[1,2,3,4,5,4,3,2,1]; 
var mapResult=nums.map(function(item,index,array){ 
    return item*2 ; 
}); 
console.log(mapResult);//[ 2, 4, 6, 8, 10, 8, 6, 4, 2 ]

 

forEach()：只是对数组中的每一项运行传入的函数，无返回值。

 

7--归并方法：

    reduce() ：（从数组起始位开始遍历）

    reduceRight() ：（从数组末尾开始遍历）

    ps： 接收参数：每一项上调用的函数、作为归并基础的初始值； 传入参数：当前一个值prev、当前值cur、项的索引index、数组对象array

    ps：这两个方法都会迭代数组所有的项，然后构建一个最终返回的值。传入的函数返回的任何值都会作为第一个参数自动传给下一项，即第一次迭代发生在数组的第二项上，因为第一个参数是数组的第一项，第二个参数就是数组的第二项。

var nums=[1,2,3,4,5]; 
var sum=nums.reduce(function(prev,cur,index,array){ 
    return prev + cur; 
}); 
console.log(sum);//15

 
var nums=[1,2,3,4,5]; 
var sum=nums.reduceRight(function(prev,cur,index,array){ 
    return prev + cur; 
}); 
console.log(sum);//15

 

 

ps：参考资料：《javascript高级程序设计》、《JavaScript权威指南》、某网友的图谱（地址忘了）

未完待续。。。