JavaScript实例2

最新推荐文章于 2017-10-07 22:45:05 发布

xiantouxu

最新推荐文章于 2017-10-07 22:45:05 发布

阅读量308

点赞数

分类专栏：学习笔记程序员面试文章标签：实例 javascript

本文链接：https://blog.csdn.net/xiantouxu/article/details/77344407

版权

程序员面试同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

学习笔记

19 篇文章 0 订阅

订阅专栏

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

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

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, Abe
console.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.5235987755982988
console.log(degress);//29.999999999999996
console.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]);
输出
true
function toString() { [native code] }
false
true
"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';}

xiantouxu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实例2

使用捕获圆括号交换一个字符串中的单词使用命名实体来替代HTML标签把一个ISO 8601格式的日期转换为Date对象可接受的一种格式使用带有定时器的函数闭包把十进制数转换为一个十六进制值在角度和弧度之间转换用contact和apply将一个两维数组扁平化对每个数组元素应用一个函数dict模式使用解构赋值简化代码放置函数并提升
复制链接

扫一扫