浅谈原生JavaScript（二）

一 . JS 高级

1. 数组及操作方法

数组就是一组数据的集合，javascript 中，数组里面的数据可以是不同类型的, 这里的数组就相当于我们 python 中的列表

定义数组的方法

数组定义形式: 
第一种: 
var 数组名 = new Array(元素一, 元素二, 元素三...) 


第二种: 
var 数组名 = [元素一, 元素二, 元素三...]

例如:

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

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

2. 数组常见的操作方法:

1、获取数组的长度：

一般我们获取数组长度使用: length

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

// 打印输出数组 aList 的长度
console.log(aList.length)

结果:

4

var aList = [‘光头强’, ‘熊大’, ‘熊二’, ‘翠花’, ‘吉吉’, ‘萝卜头]

2、下标索引的使用：

和python一样, 我们也可以利用下标索引的思想来操作数组中某一个元素: aList[0]

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

console.log(aList[0]); 

结果:

1

var aList = [‘美羊羊’, ‘慢羊羊’, ‘红太狼’, ‘喜羊羊’, ‘懒羊羊’]

3、join(分隔符)

将数组成员通过一个分隔符合并成字符串

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

var newList = aList.join('-')

console.log(newList)
console.log(typeof(newList)) 

结果:

1-2-3-4
string

var aList = [‘七龙珠’, ‘史努比’, ‘铁壁阿童木’, ‘忍者神龟’, ‘兔八哥’]

4、push( ) 和 pop( )

从数组最后增加成员或删除成员

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

aList.push(5);
console.log(aList)

aList.pop()
console.log(aList)

结果:

[1, 2, 3, 4, 5]

[1, 2, 3, 4]

var aList = [‘灌篮高手’, ‘邋遢大王奇遇记’, ‘变形金刚’]

5、reverse( )

将数组反转

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

aList.reverse();
console.log(aList)

结果:

[4, 1, 2, 3]

var aList = [‘蜡笔小新’, ‘舒塔和贝塔’, ‘魔神英雄坛’, ‘棒球英豪’]

6、indexOf( )

返回数组中元素第一次2出现的索引值:

• 如果有, 则正常返回索引值
• 如果检索的内容不存在于数组中, 则返回 -1

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

console.log( aList.indexOf(4) )
console.log( aList.indexOf(5) )

结果:

3
-1

var aList = [‘美少女战士’, ‘犬夜叉’, ‘黄金圣斗士’, ‘猫和老鼠’, ‘美少女战士’, ‘猫和老鼠’]

7、splice( )

在数组中增加或删除成员

使用格式: 

数组名.splice(index,howmany,item1,.....,itemX)

index: 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。

howmany: 必需。要删除的项目数量。如果设置为 0，则不会删除项目。

item1, …, itemX: 可选。向数组添加的新项目。

例如:

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

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

8. 多维数组

多维数组指的是数组的成员也是数组的数组。

var aList = [[1,2,3],['a','b','c']];

alert(aList[0][1]); //弹出2;

批量操作数组中的数据，需要用到循环语句

2. 循环

程序中进行有规律的重复性操作，需要用到循环语句。

for循环

使用格式:

for (var i=0;i<5;i++)
{
    console.log(i)
}

打印结果:

0
1
2
3
4

练习

1、数组去重

var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,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++){
    var value = aList[i]
    if (aList2.indexOf(value) + 1){
        console.log('重复了',value)
    } else {
        aList2.push(value)
    }
}
console.log(aList2)

// 第二种方法:
for(var i=0;i<aList.length;i++)
{
    if(aList.indexOf(aList[i])==i)
    {
        aList2.push(aList[i]);
    }
}

alert(aList2);

// 第三种形式:
   for (var i = 0; i < aList.length; i++) {
            var item = aList[i]
            if (newArray.indexOf(item) == -1) {
                newArray.push(item)
            } else {
                console.log('重复了',item)
            }
        }

2、将数组数据放入页面

var list = [‘弱点’, ‘看不见的客人’, ‘摔跤吧, 爸爸’, ‘龙猫’, ‘全民目击’, ‘触不可及’, ‘萨利机长’,’消失的爱人]

JS部分: 
<script>
    window.onload = function () {
        var ul = document.getElementById('ulbox')
        var  list = ['弱点','看不见的客人','摔跤吧, 爸爸','龙猫','全民目击','触不可及','萨利机长']
        var str = ''
        for (var i=0;i<list.length;i++){
            value = list[i]
            str += '<li>' + value + '</li>'
        }
        console.log(str)
        ul.innerHTML = str
    }
</script>


HTML部分: 
<ul id="ulbox">

</ul>

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.62'
alert( parseFloat(sNum03) );  // 弹出 12.62 将字符串小数转化为数字小数

4、split( )

把 一个字符串 分隔成 字符 组成的 数组

var sTr = '2017-4-22';
var aStr1 = sTr.split("-");
var aStr2 = sTr.split("");
var aStr3 = sTr.split();

console.log(aStr1);   
console.log(aStr2);   
console.log(aStr3)    

结果:

['2017','4','22']
['2','0','1','7','-','4','-','2','2']
['2017-4-22']

练习: var str=”How are you doing today?”

如果把空字符串 (“”) 用作 separator，那么 stringObject 中的每个字符之间都会被分割。

注意： split() 方法不改变原始字符串。

<p id="demo">单击按钮显示分割后的数组.</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
    var str="How are you doing today?";
    var n=str.split(" ");
    document.getElementById("demo").innerHTML=n;
}
</script>

5、indexOf( )

方法可返回某个指定的字符串值在字符串中首次出现的位置。

如果要检索的字符串值没有出现，则该方法返回 -1。

var sTr = "abcdefgh";

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

6、substring( )

截取字符串

左闭右开 [start, stop) start <= x < stop

使用方法: 

字符串.substring(start,stop)

start: 必需。一个非负的整数，规定要提取的子串的第一个字符在 字符串 中的位置。

stop: 可选。一个非负的整数，比要提取的子串的最后一个字符在 字符串 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾。

例如:

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('');

console.log(str2);

结果:

890fkdslj21jfdsa

思考:

如果我们把上面的式子写成下面的样子, 能否达到同样的效果:

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

console.log(str2);

结果:

asdfj12jlsdkf098

二. 调试程序的方法

• alert

  使用方式: 
  alert(要展示的内容)
  
  alert展示内容的形式是弹出一个对话框, 然后把内容添加上去. 
  通常用于程序需要暂时停止的情况

  console.log

  使用方式: 
  console.log(要展示的内容)
  
  console.log()方法能够帮助我们将调试的代码展示在浏览器的控制台
  一般我们使用这样的调试方式较多, 而且浏览器控制台能够直接修改代码, 方便我们多次调试

• document.title

  使用方法: 
  document.title = 要显示的内容
  
  这样的方式可以把要调试的内容,展示在网页的标题区域
  这样的方式适合于偶尔展示

• document.write( )

  使用方法: 
  document.write(exp1,exp2,exp3,....)
  
  write() 方法可向文档写入 HTML 表达式或 JavaScript 代码
  可列出多个参数(exp1,exp2,exp3,...) ，它们将按顺序被追加到文档中。
  一般不怎么使用, 偶尔可用
  

  ​

三. 定时器

定时器在 javascript 中的作用

• 定时调用函数
• 制作动画
• 模拟网络延时的情况

1. 定时器的种类:

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

定时器的使用方式: 

setInterval(code,millisec)

code 必需。要调用的函数或要执行的代码串。

millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。

例如:

// 设置定时器
var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);

// 去除定时器
clearTimeout(time1);
clearInterval(time2);

// 定时器调用的方法
function myalert(){
    alert('ok!');
}