美文网首页
javascript进阶

javascript进阶

作者: 潇潇雨歇_安然 | 来源:发表于2018-06-26 22:39 被阅读0次

1. 数组及操作方法

数组就是一组数据的集合,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
    5、reverse() 将数组反转
    var aList = [1,2,3,4];
    aList.reverse();
    alert(aList); // 弹出4,3,2,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

  • 多维数组
    多维数组指的是数组的成员也是数组的数组。
    var aList = [[1,2,3],['a','b','c']];
    alert(aList[0][1]); //弹出2;

2.循环语句

for循环
for(var i=0;i<len;i++)
{
......
}

3. 字符串处理方法

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
  1. 字符串反转
var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');

alert(str2);

4.定时器

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

定时器类型及语法

/*
    定时器:
    setTimeout  只执行一次的定时器 
    clearTimeout 关闭只执行一次的定时器
    setInterval  反复执行的定时器
    clearInterval 关闭反复执行的定时器

*/

var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
    alert('ok!');
}

5. 变量作用域

变量作用域指的是变量的作用范围,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>

6.封闭函数

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

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

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

myalert();

封闭函数:

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

还可以在函数定义前加上“~”和“!”等符号来定义匿名函数

!function(){
    alert('hello!');
}()
~function(){
    alert('hello!');
}()
  • 封闭函数的作用
    封闭函数可以创造一个独立的空间,在封闭函数内定义的变量和函数不会影响外部同名的函数和变量,可以避免命名冲突,在页面上引入多个js文件时,用这种方式添加js文件比较安全,比如:
var iNum01 = 12;
function myalert(){
    alert('hello!');
}

(function(){
    var iNum01 = 24;
    function myalert(){
        alert('hello!world');
    }
    alert(iNum01);
    myalert()
})()

alert(iNum01);
myalert();

相关文章

  • JavaScript学习笔记(五)

    慕课网JavaScript进阶篇第9章学习笔记 JavaScript进阶篇—第9章 JavaScript学习笔记(...

  • 技术书刊

    Javascript# ########《JavaScript设计模式》《高性能网站建设指南》《高性能网站建设进阶...

  • 进阶篇:浏览器渲染 & 白屏和FOUC(1)

    饥人谷学习进阶第 1 天 JavaScript 网页 = Html + CSS + JavaScript Html...

  • 0. JavaScript学习资料汇总

    JavaScript教程 - 廖雪峰的官方网站 JavaScript入门篇 - 慕课网 JavaScript进阶篇...

  • 前端心得

    1.基础阶段:HTML+CSS 2.js阶段:JavaScript基础、JavaScript进阶、JavaScri...

  • #30天专注橙长计划#向前端工程师进发#day0#航线设计

    发现问题,路线大修。 学习方面:暂定按HTML入门→CSS入门→HTML进阶→CSS进阶→JavaScript入门...

  • JavaScript ☞ day3

    JavaScript基础学习笔记之JavaScript进阶 焦点事件 鼠标事件-单击与双击 鼠标事件-mouseo...

  • 技术栈

    一、HTML、CSS基础、JavaScript语法基础。 二、JavaScript语法进阶。包括:作用域和闭包、t...

  • 2020前端技术栈

    一、HTML、CSS基础、JavaScript语法基础。二、JavaScript语法进阶。包括:作用域和闭包、th...

  • javascript进阶

    1. 数组及操作方法 数组就是一组数据的集合,javascript中,数组里面的数据可以是不同类型的。 定义数组的...

网友评论

      本文标题:javascript进阶

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