美文网首页
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变量和函数预解析，数组，定时器弹框，当天作业

    变量和函数预解析处理执行上下文代码分为两个阶段：进入执行上下文执行代码进入执行上下文：进入执行上下文，方法的变量对...

  • 函数

    预解析： 变量和函数的预解析 预解析把变量的声明提前(但不赋值) 函数名加括号调用函数 预解析把函数声明和调用都提...

  • 字符串、定时器、数组

    字符串处理的方法 字符串反转 定时器弹框 定时器使用方法 定时器动画 数组 数组的常用方法 数组去重 作业 for...

  • js函数条件

    函数定义与执行 变量与函数预解析 提取行间事件 匿名函数 函数传参 作业

  • js循环和判断

    变量和函数预解析 变量预解析alert(a);//只把变量a的声明提前，赋值不提前，所以弹出undefined，表...

  • 13day-函数条件

    变量和函数预解析 变量预解析alert(a);//只把变量a的声明提前，赋值不提前，所以弹出undefined，表...

  • 函数传参、返回、条件语句、数组

    (1)变量和函数预解析变量预解析alert(a);//只把变量a的声明提前，赋值不提前，所以弹出undefined...

  • 函数传参、返回、条件语句、数组

    (1)变量和函数预解析变量预解析alert(a);//只把变量a的声明提前，赋值不提前，所以弹出undefined...

  • 函数

    (1)变量和函数预解析变量预解析alert(a);//只把变量a的声明提前，赋值不提前，所以弹出undefined...

  • js应用

    字符串处理方法 定时器弹框 数组去重

网友评论

      本文标题：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

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

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