JavaScript实例2

来源：互联网发布：mac谷歌翻墙教程编辑：程序博客网时间：2024/06/05 19:30

使用捕获圆括号交换一个字符串中的单词

我们可以接受一个带有名称和姓氏的输入字符串，并且交换名称，以便让姓氏先出现。

var name = "Abe Lincoln";var re = /^(\w+)\s(\w+)$/;var newname =name.replace(re,"$2, $1");var result = re.exec(name);var newname2 = result[2] + ","+ result[1];console.log(newname);//Lincoln, Abeconsole.log(newname2);//Lincoln, Abe

使用命名实体来替代HTML标签

把示例标签粘贴到Web页面中，并且转义该标记，打印出尖括号而不是进行内容进行。

var pieceOfHtm1 = "<p> This is a <span> paragraph</span></p>";pieceOfHtm1 =pieceOfHtm1.replace(/</g,"&lt;");pieceOfHtm1 = pieceOfHtm1.replace(/>/g,"&gt;");console.log(pieceOfHtm1);输出："&lt;p&gt; This is a &lt;span&gt; paragraph&lt;/span&gt;&lt;/p&gt;"

把一个ISO 8601格式的日期转换为Date对象可接受的一种格式

需要把一个ISO 8601格式的日期字符串转换为可以用于创建一个新的Date对象的值。

var dtstr = "2014-3-04T19:35:32Z";dtstr = dtstr.replace(/\D/g," ");dtstr = dtstr.replace(/\s+$/,"");var dtcomps = dtstr.split(" ");dtcomps[1]--;var convdt = new Date(Date.UTC.apply(null,dtcomps));console.log(convdt.toString());//"Wed Mar 05 2014 03:35:32 GMT+0800 (中国标准时间)"

使用带有定时器的函数闭包

问题：想要提供一个带有定时器的函数，但是，想要直接把函数添加到定时器方法调用中。
解决方法：使用一个匿名函数作为setInterval()或者setTimeout()方法调用的第一个参数：

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>Interval</title>  <style type="text/css">    #redbox,#yellowbox{        background-color: red;        width: 50px;        height: 50px;        left: 50px;        position: absolute;    }    #redbox{        background-color: red;    }    #yellowbox{        background-color: yellow;        top: 100px;    }  </style></head><body> <div id="redbox" ></div><div id="yellowbox"></div>  <script type="text/javascript">  window.onload= function(){    var x=0;    var intervalId = setInterval(function(){        x+=5;        var left = x+'px';        document.getElementById("yellowbox").style.left = left;        console.log(document.getElementById("yellowbox").offsetLeft);        if(document.getElementById("yellowbox").offsetLeft >300){            document.getElementById("yellowbox").style.left=0+'px';            x=0;        }    },100);    var intervalId1 = null;    document.getElementById("redbox").addEventListener('click', startBox, false);    function startBox(){        if(intervalId1 == null){            var y = 100;            intervalId1 = setInterval(function(){                y+=5;                var left = y+"px";                document.getElementById("redbox").style.left = left;            },100);        }else{            clearInterval(intervalId1);            intervalId1 = null;        }    }  };  </script></body></html>

//黄色方块以100ms的间隔每次向右移动5个像素，红色的点击启动/暂停切换
这里写图片描述

把十进制数转换为一个十六进制值

var num = 255;console.log(num.toString(16));//ff

额外扩展：严格模式
‘use strict’或者 “use strict”作为脚本或者函数的第一行
当使用严格模式的时候，原来通常会被忽略的一次犯错，现在将导致一个错误
+ 在赋值的时候，变量名中的录入错误，将会抛出一个错误。
+ 通常赋值失败会很安静，现在会抛出一个错误。
+ 试图删除一个不能删掉的属性会失败
+ 使用非唯一性的属性名称会报错
+ 使用非唯一性的函数参数名称会报错
+ 严格模式还会提出其他的要求
+ 在严格模式中不支持八进制
+ eval()语句受到限制，并且不再支持with。
+ 当构建一个新的对象的时候，new是必须的，以保证this正确地工作。

把表中一列的所有数字加和

问题：想要将表中一累的所有数字加和
解决方案：遍历表中包好了数字值的类，将其转换为数字，并加和。

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>Accessing numbers in table</title></head><body>  <table id ="table1">    <tr>        <td>Washington</td>        <td>145</td>    </tr>    <tr>        <td>Oregon</td>        <td>233</td>    </tr>    <tr>        <td>Missouri</td>        <td>833</td>    </tr>    <tr>        <td>China</td>        <td>522</td>    </tr>  </table>  <script type="text/javascript">  var sum =0;  var cells = document.querySelectorAll("td + td");  for(var i=0; i<cells.length ; i++){    sum+= parseFloat(cells[i].firstChild.data);  }  //将求和置于表尾  var newRow = document.createElement("tr");   newRow.style.background = "red";  var firstCell= document.createElement("td");  var firstCellText = document.createTextNode("sum:");  firstCell.appendChild(firstCellText);  newRow.appendChild(firstCell);  //带有总和的第二个单元格  var secondCell = document.createElement("td");  var secondCellText = document.createTextNode(sum);  secondCell.appendChild(secondCellText);  newRow.appendChild(secondCell);  document.getElementById("table1").appendChild(newRow);  </script></body></html>

运行结果
这里写图片描述

注意：querySelectorAll()返回的是一个NodeList而不是一个数组，而如果使用forEach()方法，则返回的是一个数组，且并forEach本身是数组的一个方法。
使用forEach（）和call（）遍历querySelectorAll（）的结果

var cells = document.querySelectorAll("td + td");[].forEach.call(cells,function(cell){    sum+=parseFloat(cell.firstChild.data);});

在角度和弧度之间转换

var degress = 30;var radius = degress *(Math.PI/180);degress = radius *(180/Math.PI);console.log(radius);//0.5235987755982988console.log(degress);//29.999999999999996console.log(parseInt(degress));//29,向下取整console.log(parseInt(degress)+1);//30，向上取整

JavaScript数组

用contact和apply将一个两维数组扁平化

var fruitarray = [];fruitarray[0] = ['strawberry','orange'];fruitarray[1] = ['lime','peach','banana'];fruitarray[2] = ['tangerine','apricot'];fruitarray[3] = ['raspberry','kiwi'];//扁平化数组var newArray = fruitarray.concat.apply([],fruitarray);console.log(newArray);输出：["strawberry", "orange", "lime", "peach", "banana", "tangerine", "apricot", "raspberry", "kiwi"]

对每个数组元素应用一个函数

var charSets = ["ab","bb","cd","ab","cc","ab","dd","ab"];function replaceElement(element,index,array){    if(element == "ab") array[index] = "**";} charSets.forEach(replaceElement);console.log(charSets);输出["**", "bb", "cd", "**", "cc", "**", "dd", "**"]

forEach()方法：接受一个参数，即回调函数，该函数自身有3个参数，数组元素、元素的索引和数组，其中只有第一个参数是必须的。
map()方法：与forEach（）传递一样的参数

var decArray = [23,255,122,5,16,99];var hexArray = decArray.map(function(element){    return element.toString(16);});console.log(hexArray);//["17", "ff", "7a", "5", "10", "63"]

与forEach（）方法不同的是map（）方法的结果是一个新的数组，而不是修改原有的数组，所以使用forEach的时候不会返回一个值，但是使用map的时候必须返回一个值。
filter()方法：与forEach传递的值一样，将返回值为true的元素添加到新的数组中

 var charSets = ["**", "bb", "cd", "**", "cc", "**", "dd", "**"];var  newArray = charSets.filter(function(element){  return (element != "**");})console.log(newArray);//["bb", "cd", "cc", "dd"]

every()方法，检查每个元素符合给定的条件
some()方法：确保至少某些元素符合该条件

dict模式

创建一个空的原型的对象，以避免已有的属性可能会搞乱应用程序，而不是创建一个标准的对象

var newMap = {};var key = 'toString';console.log(key in newMap);console.log(newMap[key]);var secondMap = Object.create(null);console.log(key in secondMap);secondMap[key] = "something diff";console.log(key in secondMap);console.log(secondMap[key]);输出truefunction toString() { [native code] }falsetrue"something diff"

使用解构赋值简化代码

问题：想要将数组元素的值赋给几个变量，但是确实不想单独地赋值每一个值
解决方案：使用解构赋值来简化数组赋值

var stateValues =[459,144,96,34.0,14];var [Arizona,Missouri,Idaho,Nebraska,Texas,Minnesota] = stateValues;console.log(Missouri);//144

JavaScript的构建块

有3种基本的方式可以创建函数：
+ 声明式函数
+ 匿名函数或函数构造函数
+ 函数字面值或函数表达式

放置函数并提升

在JavaScript中，所有的变量声明都会移动或提升到当前作用域的顶部，这是指声明不是调用
先调用后声明会出现如下情况

console.log(a);//undefined;var a;console.log(a);//undefined;var a = 1;

上面情况发生的原因在于变量的声明得到提升而赋值没有提升，赋值是在其相应位置上发生的。
那么针对函数，这样会有什么情况出现呢？
+ 如果你创建的是一个声明式函数，则在访问函数前，提升将确保函数声明移动到当前作用域的顶部

console.log(test());//"hello"function test(){ return 'hello';}

如果创建的是一个函数表达式，如下，会引发错误，因为变量test可能声明了，但是还未实例化，而代码试图将没有实例化的变量当做一个函数对待。

console.log(test());//会引发错误var test = function(){return 'hello';}

阅读全文

0 0