美文网首页
2019-01-07变量和函数预解析，数组，定时器弹框，当天作业

2019-01-07变量和函数预解析，数组，定时器弹框，当天作业

作者: 一片落叶就是渺小 | 来源:发表于2019-01-08 16:30 被阅读0次

    变量和函数预解析
    处理执行上下文代码分为两个阶段：
    进入执行上下文
    执行代码
    进入执行上下文：
    进入执行上下文，方法的变量对象（VO）就会被以下属性填充
    参数，参数名就是VO中的名称。值就是实参的值。如果没有传递，则为undefined
    函数声明，如果VO中中已经存在相同的属性，则替换它的值
    变量声明：通过var声明的。在VO中的值为undefined，如果VO中已经含有相同的属性，则不会影响已经存在的属性。

    var n = 1;
fn(n);
function fn() {
    console.log(n);
    var n = 2;
}
打印结果：

undefined

    var n = 1;
fn(n);
function fn(n) {
    console.log(n);
    var n = 2;
}
打印结果：

1

    var n = 1;
fn(n);
function fn(n) {
    console.log(n);
    function n() {
        console.log(666);
    }
    var n = 2;
}
打印结果：

function n() {
            console.log(666);
        }

    1，预解析的顺序是从上到下，函数的优先级高于变量，函数声明提前到当前作用域最顶端，在var之上。
    2，函数执行的时候，函数内部才会进行预解析，如果有参数，先给实参赋值再进行函数内部的预解析。
    3，预解析函数是声明+定义（开辟了内存空间，形参值默认是undefined）。
    4，预解析变量是只声明，不赋值，默认为undefined。
    5，函数重名时，后者会覆盖前者。
    6，变量重名时，不会重新声明，但是执行代码的时候会重新赋值。
    7，变量和函数重名的时候，函数的优先级高于变量。
    1.期末考试奖励

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>奖励</title>
<script type="text/javascript">
var score = +prompt('请输入小明同学的期末成绩(0-100):')
if(score == 100){
alert('BMW');
}
else if(score >= 80 && score <= 99){
alert('iphone15s');
}
else if(score >= 60 && score < 80){
alert('参考书');
}
else{
alert('什么都没有');
}
</script>
</head>
<body>

</body>
</html>

    2.嫁不嫁

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嫁不嫁</title>
<script type="text/javascript">
var height = +prompt('输入身高');
var fu = +prompt('输入身价');
var yanzhi = +prompt('输入颜值');
if (height>180 && fu>1000 && yanzhi >500){
alert('一定嫁他');
}else if (height>180 || fu>1000 || yanzhi >500){
alert('嫁吧，比上不足比下有余');
}else{
alert('不嫁');
}
</script>
</head>
<body>

</body>
</html>

    3.数字排序

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>排序</title>
<script type="text/javascript">
var num1 = +prompt('输入数值:');
var num2 = +prompt('再输入数值:');
var num3 = +prompt('再再输入数值:');
if(num1>num2 && num1>num3 ){
if(num2>num3){
alert(num1+','+num2+','+num3);
}
else{
alert(num1+','+num3+','+num2);
}
}else if(num2>num1 && num2>num3 ){
if(num1>num3){
alert(num2+','+num1+','+num3);
}
else{
alert(num2+','+num3+','+num1);
}
}else if(num3>num2 && num3>num1 ){
if(num1>num2){
alert(num3+','+num1+','+num2);
}
else{
alert(num3+','+num2+','+num1);
}
}
</script>
</head>
<body>

</body>
</html>

    条件语句
    通过条件来控制程序的走向，就需要用到条件语句。
    if else

    var a = 6;
if(a==1)
{
    alert('语文');
}
else if(a==2)
{
    alert('数学');
}
else if(a==3)
{
    alert('英语');
}
else if(a==4)
{
    alert('美术');
}
else if(a==5)
{
    alert('舞蹈');
}
else
{
    alert('不补习');
}

    switch

    var a = 6;

switch (a){
    case 1:
        alert('语文');
        break;
    case 2:
        alert('数学');
        break;
    case 3:
        alert('英语');
        break;
    case 4:
        alert('美术');
        break;
    case 5:
        alert('舞蹈');
        break;
    default:
        alert('不补习');
}

    数组相关操作
    1、数组创建

    var array1 = new Array();
var array2 = [];

    2、获取数组长度
    数组长度可以通过.length获取

    var array7 = [1,2,3,4];
array7.length;//4

    同时，数组的长度你也可以随时设置，如果设置的长度超过之前的，则后面的内容会自动补充维undefined，否则会截取有效长度的内容，如下：

    var array8 = [1,2,3,4,5];
console.log(array8.length);//5
array8.length = 8;
array8;//[1, 2, 3, 4, 5, undefined × 3]
 
array8.length = 3;
array8;//[1,2,3]

    3、获取或者设置数组值
    数组的下标是从0开始的

    var array9 = [1,2,3,4,5,6];
array9[2];//3
array9[2] = 4;
array9[2];//4

    4、数组字符串转换
    数组转换为字符串可以调用数组自带的toString()方法，返回数组的字符串形式

    var array10 = [1,2,3,4];
array10.toString();//"1,2,3,4"

    数组也有另外一个非常有用的函数join()，它接受一个字符串参数，用于插在数组各项之间形成字符串，如下：

    var array11 = [1,2,3,4];
array11.join("||");//"1||2||3||4"

    5、数组添加和删除项
    可以通过访问一个超过数组本来的长度的数字下标以给数组添加项，如：

    var array12 = [1,2,3,4];
array12[5] = 5;
array12[6] = 6;
array12;//[1, 2, 3, 4, undefined × 1, 5, 6]

    也可以通过push()给数组添加新的元素，如下：

    var array13 = [1,2,3,4];
array13.push(5,6);
array13;//[1, 2, 3, 4, 5, 6]

    与push()相对的是有一个pop()方法，用以删除数组中的项，且从数组最后一项开始，例如：

    var array14 = [1,2,3,4];
array14.pop();//4
array14.pop();//3;
array14;//[1, 2]

    同时，我们可以通过delete删除数组某项，但是只会删除该值，恢复默认的undefined，如下：

    var array15 = [1,2,3,4,5];
delete array15[1];
array15;//[1, undefined × 1, 3, 4, 5]

    6、数组翻转和排序

    var array18 = [21,14,54,35,23,44,103];
array18.reverse();//[103, 44, 23, 35, 54, 14, 21]
array18.sort();//[103, 14, 21, 23, 35, 44, 54]

    注意，数组默认排序并不是大小，而是按照对应字符串逐个编码排序的。
    7.最强大的splice()
    可实现添加、删除、修改等不同的功能。
    ①添加元素

    var array25 = [1,2,3,4,5,6];
array25.splice(2,0,88,77);//[]  返回被删除的元素，这里没有删除，返回为空
array25;//[1, 2, 88, 77, 3, 4, 5, 6]

    ②修改元素

    var array26 = [1,2,3,4,5,6,7];
array26.splice(2,2,33,44);//[3,4]
array26;//[1, 2, 33, 44, 5, 6, 7]

    ③删除元素

    var array27 = [1,2,3,4,5,6,7];
array27.splice(2,2);//[3, 4]
array27;//[1, 2, 5, 6, 7]

    1.计算器

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<script type="text/javascript">
window.onload = function(){
var oInput01 = document.getElementById('input01');
var oInput02 = document.getElementById('input02');
var oSelect = document.getElementById('select');
var oBtn = document.getElementById('btn');
        oBtn.onclick = function(){
            var val01 = oInput01.value;
            var val02 = oInput02.value;

            //不做此判断会弹出“NaN”
            if(val01=="" || val02==""){
                alert('输入框不能为空！');
                return;
            }
            if(isNaN(val01) || isNaN(val02)){
                alert('请输入数字！');
                return;
            }
            switch(oSelect.value){
                case '0':
                    alert((parseFloat(val01)*100 + parseFloat(val02)*100)/100);
                    break;
                case '1':
                    alert((parseFloat(val01)*100 - parseFloat(val02)*100)/100);
                    break;
                case '2':
                    alert((parseFloat(val01)*100) * (parseFloat(val02)*100)/10000);
                    break;
                case '3':
                    alert((parseFloat(val01)*100) / (parseFloat(val02)*100));
                    break;
            }
        }
    }
</script>

</head>
<body>
<h1>计算器</h1>
<input type="text" name="" id="input01" />
<select id="select">
<option value="0">+</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
<input type="text" name="" id="input02" />
<input type="button" name="" value="计算" id="btn" />
</body>
</html>

    2.switch练习1-对于成绩大于等于60分的，输出'合格'。低于60分的，输出'不合格'

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>合格</title>
<script type="text/javascript">
var score = +prompt('输入分数:')
if(score > 60){
alert('合格');
}else{
alert('不合格');
}
</script>
</head>
<body>
</body>
</html>

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>合格</title>
<script type="text/javascript">
var score = +prompt('输入分数');
switch(parseInt(score/10)){
case 10:
case 9:
case 8:
case 7:
case 6:
alert('合格');
break;
default:
alert('不合格');
break;
}
</script>
</head>
<body>
</body>
</html>

    练习2-从键盘接收整数参数，如果该数为1-7，打印对应的星期，否则打印非法参数

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1~7</title>
<script type="text/javascript">
var week = +prompt('输入整数:');
switch(today){
case 1:
alert('星期一');
break
case 2:
alert('星期二');
break
case 3:
alert('星期三');
break
case 4:
alert('星期四');
break
case 5:
alert('星期五');
break
case 6:
alert('星期六');
break
case 7:
alert('星期日');
break
default:
alert('非法参数');
break
}
</script>
</head>
<body>
</body>
</html>

    数组去重的方法

    方式一, 借助ES6的Map, 因为Map不会出现重复的key, 后添加的key-value会把之前的覆盖

    var arr = [1,2,3,4,3,3,2,5]
var map = new Map()
arr.forEach((value,index) => {
   map.set(value,index)
})
var newArr = Array.form(map.keys())
console.log(newArr)

    方式二

    var arr = [1,2,3,4,3,3,2,5]
var newArr = []
arr.forEach((value,index) => {
    if(newArr.indexOf(value) == -1){
        newArr.push(value)
    }
})
console.log(newArr)

    字符串翻转的方法
    1）使用字符串函数

       //str=hello 
  function reverseString(str) {
      var array = str.split('');//['h','e','l','l','o'];
      array = array.reverse();// ['o','l','l','e','h'];
      str = array.join('');//"olleh"
      return str;
  }

    上面代码可以合并一行代码

    //str=hello
  function reverseString(str) { 
      return str.split('').reverse().join('');;
  }

    2）使用for循环

    function reverseString(str) {   
var newStr="";
for(var i=str.length-1;i>=0;i--){
newStr+=str[i];
}
return newStr;
}

    使用逆序遍历字符串，从后面将字符串累加起来。
    3）使用递归

    function reverseString(str) {
 if (str === "") {
 return "";
 } else {
 return reverseString(str.substr(1)) + str.charAt(0);
 }
}
reverseString("hello"); // => olleh

    上面的方法还可以继续改良一下，改成三元操作符：

    function reverseString(str) {
 return (str === '') ? '' : reverseString(str.substr(1)) + str.charAt(0);
}
reverseString("hello"); // => olleh

    相关文章

      网友评论

          本文标题：2019-01-07变量和函数预解析，数组，定时器弹框，当天作业

          本文链接：https://www.haomeiwen.com/subject/guhbrqtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|2019-01-07变量和函数预解析，数组，定时器弹框，当天作业|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！