Js学习

Posted 2020-10-06

1 变量提升

javascript会将所有变量和函数声明移动到它的作用域的最前面，这就是所谓的变量提升(Hoisting)。也就是说，无论你在什么地方声明变量和函数，解释器都会将它们移动到作用域的最前面。因此我们可以先使用变量和函数，而后声明它们。

但是，仅仅是变量声明被提升了，而变量赋值不会被提升。如果你不明白这一点，有时则会出错：

console.log(y);  // 输出undefined

y = 2; // 初始化y

上面的代码等价于下面的代码：

var y;  // 声明y

console.log(y);  // 输出undefined

y = 2; // 初始化y

为了避免BUG，开发者应该在每个作用域开始时声明变量和函数。

2. 柯里化

柯里化，即Currying，可以是函数变得更加灵活。我们可以一次性传入多个参数调用它；也可以只传入一部分参数来调用它，让它返回一个函数去处理剩下的参数。

var add = function(x) {

   return function(y) {

       return x + y;

   };

};

console.log(add(1)(1)); // 输出2

var add1 = add(1);

console.log(add1(1)); // 输出2

var add10 = add(10);

console.log(add10(1)); // 输出11

代码中，我们可以一次性传入2个1作为参数add(1)(1)，也可以传入1个参数之后获取add1与add10函数，这样使用起来非常灵活。

3.javascript删除元素节点

IE中有这样一个方法:removeNode()，这个方法在IE下是好使的，但是在Firefox等标准浏览器中就会报错了 removeNode is not defined，但是在核心JS中有一个操作DOM节点的方法叫：removeChild()。

我们可以先去找到要删除节点的父节点，然后在父节点中运用removeChild来移除我们想移除的节点。我们可以定义一个方法叫removeElement：

function removeElement(_element){

        var _parentElement = _element.parentNode;

        if(_parentElement){

               _parentElement.removeChild(_element);

        }

}

4.js sort方法根据数组中对象的某一个属性值进行升序或者降序排列

/**数组根据数组对象中的某个属性值进行排序的方法

    * 使用例子：newArray.sort(sortBy(‘number‘),false) //表示根据number属性降序排列;若第二个参数不传递，默认表示升序排序

    * @param attr 排序的属性 如number属性

    * @param rev true表示升序排列，false降序排序

    * */

   sortBy: function(attr,rev){

       //第二个参数没有传递 默认升序排列

       if(rev ==  undefined){

           rev = 1;

       }else{

           rev = (rev) ? 1 : -1;

       }

 

       return function(a,b){

           a = a[attr];

           b = b[attr];

           if(a < b){

               return rev * -1;

           }

           if(a > b){

               return rev * 1;

           }

           return 0;

       }

   }

5 获取项目根路径

function getRootPath() {
var strFullPath = window.document.location.href;
var strPath = window.document.location.pathname;
var pos = strFullPath.indexOf(strPath);
var prePath = strFullPath.substring(0, pos);
var postPath = strPath.substring(0, strPath.substr(1).indexOf(‘/‘) + 1);
return (prePath + postPath);
}

　　

6 js 页面刷新location.reload和location.replace的区别小结

reload 方法，该方法强迫浏览器刷新当前页面。 
语法： location.reload([bForceGet]) 
参数： bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5(“刷新”)

replace 方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过“前进”和“后退”来访问已经被替换的URL。 
语法： location.replace(URL)

6 isFinite函数

isFinite函数返回一个布尔值，检查某个值是不是正常数值，而不是Infinity。

isFinite(Infinity) // false

isFinite(-1) // true

isFinite(true) // true

isFinite(NaN) // false

7 parseInt()

parseInt方法用于将字符串转为整数。

parseInt(‘123‘) // 123

如果parseInt的参数不是字符串，则会先转为字符串再转换。

如果字符串头部有空格，空格会被自动去除。

字符串转为整数的时候，是一个个字符依次转换，如果遇到不能转为数字的字符，就不再进行下去，返回已经转好的部分。

parseInt(‘8a‘) // 8

parseInt(‘12**‘) // 12

parseInt(‘12.34‘) // 12

parseInt(‘15e2‘) // 15

parseInt(‘15px‘) // 15

面代码中，parseInt的参数都是字符串，结果只返回字符串头部可以转为数字的部分。

如果字符串的第一个字符不能转化为数字（后面跟着数字的正负号除外），返回NaN。

parseInt(‘abc‘) // NaN

parseInt(‘.3‘) // NaN

parseInt(‘‘) // NaN

parseInt(‘+‘) // NaN

parseInt(‘+1‘) // 1

parseInt的返回值只有两种可能，不是一个十进制整数，就是NaN。

parseInt方法还可以接受第二个参数（2到36之间），表示被解析的值的进制，返回该值对应的十进制数。默认情况下，parseInt的第二个参数为10，即默认是十进制转十进制。

parseInt(‘1000‘, 2) // 8

parseInt(‘1000‘, 6) // 216

parseInt(‘1000‘, 8) // 512

面代码中，二进制、六进制、八进制的1000，分别等于十进制的8、216和512。这意味着，可以用parseInt方法进行进制的转换。

如果第二个参数不是数值，会被自动转为一个整数。这个整数只有在2到36之间，才能得到有意义的结果，超出这个范围，则返回NaN。如果第二个参数是0、undefined和null，则直接忽略。

parseInt(‘10‘, 37) // NaN

parseInt(‘10‘, 1) // NaN

parseInt(‘10‘, 0) // 10

parseInt(‘10‘, null) // 10

parseInt(‘10‘, undefined) // 10

如果字符串包含对于指定进制无意义的字符，则从最高位开始，只返回可以转换的数值。如果最高位无法转换，则直接返回NaN。

parseInt(‘1546‘, 2) // 1

parseInt(‘546‘, 2) // NaN

上面代码中，对于二进制来说，1是有意义的字符，5、4、6都是无意义的字符，所以第一行返回1，第二行返回NaN。

8 parseFloat()

parseFloat方法用于将一个字符串转为浮点数。

parseFloat(‘3.14‘) // 3.14

如果字符串符合科学计数法，则会进行相应的转换。

parseFloat(‘314e-2‘) // 3.14

parseFloat(‘0.0314E+2‘) // 3.14

如果字符串包含不能转为浮点数的字符，则不再进行往后转换，返回已经转好的部分。

parseFloat(‘3.14more non-digit characters‘) // 3.14

parseFloat方法会自动过滤字符串前导的空格。

parseFloat(‘\t\v\r12.34\n ‘) // 12.34

如果参数不是字符串，或者字符串的第一个字符不能转化为浮点数，则返回NaN。

parseFloat([]) // NaN

parseFloat(‘FF2‘) // NaN

parseFloat(‘‘) // NaN

面代码中，尤其值得注意，parseFloat会将空字符串转为NaN。

这些特点使得parseFloat的转换结果不同于Number函数。

parseFloat(true)  // NaN

Number(true) // 1

 

parseFloat(null) // NaN

Number(null) // 0

 

parseFloat(‘‘) // NaN

Number(‘‘) // 0

 

parseFloat(‘123.45#‘) // 123.45

Number(‘123.45#‘) // NaN

9 join()

join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。 
语法： 
arrayObject.join(separator) //separator：可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

注意：返回的是一个字符串。

例如：

 

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr.join("."))

输出：George.John.Thomas

　　

10 .split()

语法：stringObject.split(separator,howmany)

separator：必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。

howmany：可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

返回值：一个字符串数组，String.split() 执行的操作与 Array.join() 执行的操作是相反的。

"2:3:4:5".split(":")    //将返回["2", "3", "4", "5"]

"|a|b|c".split("|")    //将返回["", "a", "b", "c"]

如果您希望把单词分割为字母，或者把字符串分割为字符，可使用下面的代码：

"hello".split("")    //可返回 ["h", "e", "l", "l", "o"]

若只需要返回一部分字符，请使用 howmany 参数：

"hello".split("", 3)    //可返回 ["h", "e", "l"]

11 indexOf()

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。 
语法：stringObject.indexOf(searchvalue,fromindex)

searchvalue：必需。规定需检索的字符串值。

fromindex：可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

indexOf() 方法对大小写敏感！ 
如果要检索的字符串值没有出现，则该方法返回 -1。

 

var str="Hello world!"

document.write(str.indexOf("Hello") + "<br />")

document.write(str.indexOf("World") + "<br />")

document.write(str.indexOf("world"))

输出：0 -1 6

12 lastIndexOf()

lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。 
语法：stringObject.lastIndexOf(searchvalue,fromindex)

searchvalue：必需。规定需检索的字符串值。

fromindex：可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的最后一个字符处开始检索。

lastIndexOf() 方法对大小写敏感！ 
如果要检索的字符串值没有出现，则该方法返回 -1。

var str="Hello world world!"

console.log(str.lastIndexOf("Hello")); //0

console.log(str.lastIndexOf("World")); //-1

console.log(str.lastIndexOf("world")); //12

console.log(str.lastIndexOf("world",9)); //6

13　substring()

substring() 方法用于提取字符串中介于两个指定下标之间的字符。 
语法：stringObject.substring(start,stop)

start：必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。

stop：可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾。

返回值：一个新的字符串，该字符串值包含 stringObject 的一个子字符串，其内容是从 start 处到 stop-1 处的所有字符，其长度为 stop 减 start。

1.substring() 方法返回的子串包括 start 处的字符，但不包括 stop 处的字符。 
2.如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。 
3.与 slice() 和 substr() 方法不同的是，substring() 不接受负的参数。

var str="Hello world!"

console.log(str.substring(3)); //lo world!

console.log(str.substring(3,7));//lo w

14 substr()

substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。 
语法：stringObject.substr(start,length)

参数	描述
start	必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
length	可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。

返回值

一个新的字符串，包含从 stringObject 的 start（包括 start 所指的字符） 处开始的 length 个字符。如果没有指定 length，那么返回的字符串包含从 start 到 stringObject 的结尾的字符。

提示和注释

注释：substr() 的参数指定的是子串的开始位置和长度，因此它可以替代 substring() 和 slice() 来使用。

重要事项：ECMAscript 没有对该方法进行标准化，因此反对使用它。

重要事项：在 IE 4 中，参数 start 的值无效。在这个 BUG 中，start 规定的是第 0 个字符的位置。在之后的版本中，此 BUG 已被修正。

var str="Hello world!"

document.write(str.substr(3,7))