前端七十二变之javascript高级

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++)
{......
}

课堂练习
1、数组去重

var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];var aList2 = [];for(var i=0;i<aList.length;i++)
{if(aList.indexOf(aList[i])==i){aList2.push(aList[i]);}
}alert(aList2);

2、将数组数据放入页面

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

字符串反转

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

4.调试程序的方法
1、alert

2、console.log

3、document.title

5.定时器
定时器在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!');
}

课堂实例
1、定时器制作移动动画
2、定时器制作无缝滚动

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

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

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

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

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

function myalert(){alert('hello!');
};myalert();
封闭函数：(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入门及进阶
1.JavaScript介绍 JavaScript是运行在浏览器端的脚步语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互. JavaScript是浏览器解释执行的,前 ...
前端七十二变之jquery高级
1.事件冒泡什么是事件冒泡在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true, ...
【Java Web前端开发】JavaScript高级
文章目录 DOM简单学习:为了满足案例要求事件简单学习 BOM: DOM: 事件监听机制 DOM简单学习:为了满足案例要求 * 功能:控制html文档的内容 * 获取页面标签(元素)对象:Eleme ...
javascript高级程序设计pdf_一个老牌程序员推荐的JavaScript的书籍,看了真的不后悔!...
很多人问我怎么学前端?我的回答是:读书吧!相对于在网上学习,在项目中学习和跟着有经验的同事学习,书中有着相对完整的知识体系,每读一本好书都会带来一次全面的提高.而如果深一脚浅一脚的学习,写出代码的质量 ...
前端红宝书《JavaScript高级程序设计》核心知识总结
此文是对<JavaScript 高级程序设计>一书难点的总结,也是笔者在看了 3 遍之后的一些梳理和感想,希望能借此巩固js的基础和对一些核心概念有更深入的了解. 摘要 JS基本的数据类型 ...
javascript 高级程序设计_JavaScript 经典「红宝书」，几代前端人的入门选择
人的一生中总要读几本经典书,在这个"经典"泛滥的年代,什么才是权威的代表,我想大概是一本的书的口碑,能积累下上佳口碑的书,往往也是能经得住时间推敲的.比如这本: 相信许多前端开发者 ...
【笔记-面试】《imooc -前端跳槽面试技巧》、《imooc- 揭秘一线互联网企业前端javaScript高级面试》、《imooc-前端javascript面试技巧》
20190204:<imooc -前端跳槽面试技巧> 第01章课程介绍 01-01 课程导学一.一面知识点 1.面试技巧页面布局类 2.css盒模型dom事件类 3.http协议类 ...
【web前端(四十五)】javascript高级
JavaScript 高级目标理解面向对象开发思想掌握 JavaScript 面向对象开发相关模式掌握在 JavaScript 中使用正则表达式基本概念复习由于 JavaScript 高级 ...
《JavaScript高级程序设计》（第2版）上市
本书是技术畅销书<JavaScript高级程序设计> 的第2版,几乎全部更新.重写了上一版的内容,融入了作者近几年来奋战在前端开发一线的宝贵经验 , 是学习和提高JavaScript ...

前端七十二变之javascript高级

前端七十二变之javascript高级相关推荐

最新文章

热门文章