JavaScript 进阶

最新推荐文章于 2025-04-07 19:25:56 发布

郭大帅

最新推荐文章于 2025-04-07 19:25:56 发布

阅读量373

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/weixin_42225318/article/details/80777278

版权

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

JavaScript中数组及操作方法

数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的。

定义数组的方法: 分为两种:

//对象的实例创建
var aList = new Array(1,2,3);

//直接量创建
var aList2 = [1,2,3,'asd'];

操作数组中数据的常用方法 :

1、获取数组的长度：aList.length;

var aList = [1,2,3,4];
alert(aList.length); // 弹出4

2、用下标操作数组的某个数据：aList[0];

var aList = [1,2,3,4];
alert(aList[0]); // 弹出1

3、join() 将数组成员通过一个分隔符合并成字符串

var aList = [1,2,3,4];
alert(aList.join('-')); // 弹出 1-2-3-4

4、push() 和 pop() 从数组最后增加成员或删除成员:

var aList = [1,2,3,4];
aList.push(5);
alert(aList); //弹出1,2,3,4,5
aList.pop();
alert(aList); // 弹出1,2,3,4

unshift() 和 shitf() 从数组最前增加成员或删除成员:

var aList = [1,2,3,4];
aList.unshift(0)
alert(aList); // 弹出0,1,2,3,4
aList.shift(0)
alert(aList); // 弹出1,2,3,4

5、reverse() 将数组反转

var aList = [1,2,3,4];

var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));

6、indexOf() 返回数组中元素第一次出现的索引值

var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));

7、splice() 在数组中增加或删除成员

var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //从第2个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素
alert(aList); //弹出 1,2,7,8,9,4

JavaScript中字符串处理方法

1、字符串合并操作：“ + ”

var iNum01 = 12;
var iNum02 = 24;
var sNum03 = '12';
var sTr = 'abc';
alert(iNum01+iNum02);  //弹出36
alert(iNum01+sNum03);  //弹出1212 数字和字符串相加等同于字符串相加
alert(sNum03+sTr);     // 弹出12abc

2、parseInt() 将数字字符串转化为整数

var sNum01 = '12';
var sNum02 = '24';
var sNum03 = '12.32';
alert(sNum01+sNum02);  //弹出1224
alert(parseInt(sNum01)+parseInt(sNum02))  //弹出36
alert(parseInt(sNum03))   //弹出数字12 将字符串小数转化为数字整数

3、parseFloat() 将数字字符串转化为小数

var sNum03 = '12.32'
alert(parseFloat(sNum03));  //弹出 12.32 将字符串小数转化为数字小数

4、split() 把一个字符串分隔成字符串组成的数组

var sTr = '2017-4-22';
var aRr = sTr.split("-");
var aRr2= sTr.split("");

alert(aRr);  //弹出['2017','4','2']
alert(aRr2);  //弹出['2','0','1','7','-','4','-','2','2']

5、indexOf() 查找字符串是否含有某字符

var sTr = "abcdefgh";
var iNum = sTr.indexOf("c");
alert(iNum); //弹出2

6、substring() 截取字符串用法： substring(start,end)（不包括end）

var sTr = "abcdefghijkl";
var sTr2 = sTr.substring(3,5);
var sTr3 = sTr.substring(1);

alert(sTr2); //弹出 de
alert(sTr3); //弹出 bcdefghijkl

7、字符串反转

var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');

alert(str2);

JavaScript中的定时器

定时器在javascript中的作用:
1、定时调用函数
2、制作动画

定时器类型及语法:

setTimeout 只执行一次的定时器

clearTimeout 关闭只执行一次的定时器

setInterval 反复执行的定时器

clearInterval 关闭反复执行的定时器

动画的demo案例:(移动一个box 从左到右移动)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: gold;
            position: fixed;
            left: 0px;
            top: 100px;
        }
    </style>
    <script>
        window.onload = function(){
            var oBox = document.getElementById('box');
            var iLeft = 0 ;
            function fnMove(){
                iLeft += 5;
                oBox.style.left = iLeft + "px";
            }
            var oTimer = setInterval(fnMove ,10);

        }
    
    </script>

</head>
<body>
    <div class="box" id="box"></div>
</body>
</html>

JavaScript 中的变量作用域

变量作用域指的是变量的作用范围，javascript中的变量分为全局变量和局部变量。

1、全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
2、局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。

<script type="text/javascript">
    // 定义全局变量
    var a = 12;
    function myalert()
    {
        // 定义局部变量
        var b = 23;
        alert(a);
        // 修改全局变量
        a++;
        alert(b);
    }
    myalert(); // 弹出12和23
    alert(a);  // 弹出13    
    alert(b);  // 出错
</script>

JavaScript中的封闭函数

封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。

一般定义的函数和执行函数：

function myalert(){
    alert('hello!');
};

myalert();

封闭函数格式：

(function(){
    alert('hello!');
})();

高大上的写法如下: 还可以在函数定义前加上“~”和“!”等符号来定义匿名函数

!function(){
    alert('hello!');
}()

~function(){
    alert('hello!');
}()