跟着pink老师学前端之JavaScript-基础部分

1. 初始JavaScript

1.1 JavaScript是什么

• JavaScript是一种运行在客户端的脚本语言。
• 脚本语言：不需要编译，运行过程中由js解释器逐行来进行解释并执行。
• 现在也可以基于Node.js技术进行服务端编程。

1.2 JavaScript的作用

• 表单动态校验（密码强度检测）（js最初产生的目的）
• 网页特效
• 服务端开发（Node.js）
• 桌面程序（Electron）
• App（Cordova）
• 控制硬件-物联网（Ruff）
• 游戏开发（cocos2d-js）

1.3 浏览器执行JS简介

浏览器分成两部分：

• 渲染引擎：用来解析HTML和CSS，俗称内核，比如chrome浏览器的blink。
• JS引擎：也成为JS解释器，用来读取网页中的JavaScript代码，对其处理后运行。比如chrome浏览器的V8。

浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎来执行代码。JS引擎执行代码时逐行解释每一句源码，转换为机器语言，然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。

1.4 JavaScript的组成

JavaScript由ECMAScript语法、DOM（页面文档对象模型）和BOM（浏览器对象模型）三部分组成。

1. ECMAScript

​ ECMAScript是由ECMA国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMAScript语言的实现和扩展。ECMAScript : ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

2. DOM

​ 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。

3. BOM

​ BOM(Browser Object Model，简称BOM)是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

2. JS初体验

js习惯用单引号。

1. 行内式的js：直接写到元素的内部

     <input type="button" value="riki" onclick="alert('kawaii！')">
   

2. 内嵌式的js

   <script>
       alert('rikiwa kawaii desu!');
   </script>
   

3. 外部js script是双标签

   <script src="my.js"></script>
   //引用外部的script两个标签中间不允许写东西
   

3. JavaScript语言核心

3.1 输入输出语句

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(infu)	浏览器弹出输入框，用户可以输入	浏览器

3.2 变量

本质：变量是程序在内存中申请的一块用来存放数据的空间。

变量的基础知识和java语言、C语言比较相似，相同的部分就不做笔记了。

变量的使用：

// 1. 用户输入姓名存储到一个叫myname的变量中
var myname = prompt('请输入姓名:');
// 2. 输出这个姓名
alert(myname);
 // 声明多个变量
var name = 'riki',
    age = 27,
    sex = 'm';

特殊情况：

1. 只声明不赋值，结果是？undefined
2. 不声明不赋值，结果是？报错
3. 不声明，直接赋值，结果是？输出值

命名规范：

• 字母、数字、下划线、和美元符号组成。
• 严格区分大小写。
• 不能以数字开头。
• 不能是关键字和保留字。
• 变量名必须有意义。
• 遵守驼峰命名法。首字母小写，后面单词的首字母大写。
• 尽量不要用name这个词作为变量名，这个词在有些浏览器中具有含义。

3.3 数据类型

js是一种弱类型或者说动态语言，js的变量数据类型不用提前声明变量的类型，**是只有程序在运行过程中，根据等号右边的值来确定的。**运行完毕后，变量就确定了数据类型。js拥有动态类型，意味着相同的变量可用作不同的类型。

var x = 6;	//x为数字
var x = "bill";	//x为字符串

简单数据类型

简单数据类型	说明	默认值
Number	数字类型，包含整型和浮点型	0
Boolean	布尔值	false
String	字符串，带引号	“”
Undefined	声明变量却没有给值	undefined
Null	声明变量为空值	null

1. 数字型Number

1. 八进制：0~7，程序里面数字前面加0表示八进制。

   var num1=010;
   console.log(num1);  //010八进制转换为十进制是8
   var num2=012;
   console.log(num2);  //012八进制转换为十进制是10
   

2. 十六进制：0_9，af，数字前面加0x是十六进制。

   var num3=0xa;
   console.log(num3);  //0xa十六进制转换为十进制是10
   

3. 数字型的最大值

   console.log(Number.MAX_VALUE);	//1.7976931348623157e+308
   

4. 数字型的最小值

   console.log(Number.MIN_VALUE);	//5e-324
   

5. 无穷大

   console.log(Number.MAX_VALUE * 2);	//Infinity
   

6. 无穷小

   console.log(-Number.MAX_VALUE * 2);	//-Infinity
   

7. 非数字

   console.log('riki' - 27)  //NaN
   

   isNaN（）：判断非数字方法，如果是数字返回false，如果不是数字返回true。

2. 字符串型String

在一个简单字符串中，用单引号和双引号都可以，由于HTML里的属性用的是双引号，所以这里推荐使用单引号。

引号的嵌套

由于js匹配引号时使用的是就近原则，所以要在字符串中使用引号时使用外双内单，或者外单内双。

字符串的拼接

• 字符串的拼接：+，字符串+任何类型=拼接之后的新字符串。
• 拼接前会把与字符串相加的任何类型转成字符串，再拼结成一个新字符串。
• +号口诀：数值相加，字符相连。

3. 布尔型Boolean

true在参与加法运算时当成1处理，false当成0处理。

4. Undefine和Null

Undifined

• 一个变量只声明不赋值输出undefine。
• 和数字类型、布尔类型相连输出NaN。
• 和字符串相连输出新的字符串。

Null

• 和数字相连输出数字本身。

5. typeof

var num = 10;
console.log(typeof num);	//number

控制台输出内容判断数据类型：

• 黑色：字符型；
• 蓝色：数字型
• 深蓝色：布尔型；
• 灰色：undefined和null

6. 字面量

一眼能看出来是什么类型的值。

3.4 数据类型的转换

1. 转换成字符串

// 1. 把数字型转换为字符串类型 变量.toString()
var num = 10;
var str = num.toString();
console.log(typeof str);    //String
// 2. 利用String()
console.log(String(num));
// 3. 利用+ 拼接字符串的方法，最常用，也成为隐式转换
console.log(num + '');

2. 转换为数字型

var age = prompt('请输入年龄：');
// 1. parseInt(变量) 把字符型的转换为整型数字型
console.log(parseInt(age));
console.log(parseInt('3.89'));  //3取整
console.log(parseInt('120px')); //120 会去掉后面的字母
console.log(parseInt('rem120px'));  // NaN

// 2. parseFloat(变量) 把字符型的转换为浮点数字型
console.log(parseFloat('3.89'));  //3.89
console.log(parseFloat('3'));   //3

// 3. 利用Number()
var str='123';
console.log(Number(str));
console.log(Number('12'));

// 4. 利用* - /隐式转换
console.log('12' - 0);  //12
console.log('123' - '120'); //3

3. 转换成布尔型

// 1. false
console.log(Boolean(''));
console.log(Boolean(NaN));
console.log(Boolean(null));
console.log(Boolean(0));
console.log(Boolean(undefined));
// 2. true除了以上五个，其余都是true

3.4 标识符、关键字、保留字

1. 标识符：开发人员为变量、属性、函数、参数取的名字。
2. 关键字：js本身已经使用了的字。
3. 保留字：实际上就是预留的“关键字”，未来可能会成为关键字的字。

3.5 运算符

注意：

1. console.log(18 == '18')	//true，==会默认转换数据类型，会把字符串型的数据转换为数值型的数据
   console.log(18 === '18')	//false，===代表全等，要求两边的值和数据类型完全相同
   

2. 短路运算：

   逻辑与短路：如果表达式1为真，返回表达式2；如果表达式为假，返回表达式1。类比于狼人杀里面预言家拿警徽留警徽流的反向操作，即狼警。验出第一警徽流是狼，警徽给他；验出第一警徽流是好人，警徽给第二个人。

   逻辑或短路：如果表达式1为真，返回表达式1；如果表达式1为假，返回表达式2。好人预言家警长。

3. 运算符优先级：由高到低

   优先级	运算符	顺序
   1	小括号	（）
   2	一元运算符	++ – ！
   3	算术运算符	先* / %后+ -
   4	关系运算符	> >= < <=
   5	相等运算符	== != === !==
   6	逻辑运算符	先&& 后||
   7	赋值运算符	=
   8	逗号运算符	，

4. JavaScript流程控制

4.1 switch

switch语法结构：当要针对变量设置一系列特定值的选项时，就可以使用switch。

switch (表达式) {
    case value1:
        执行语句1;
        break;
    case value2:
        执行语句2;
        break;
    ...
    default:
    	执行最后的语句;
        break;
}

1. 表达式的值和case里面的值相匹配的条件是二者全等。
2. 如果当前case里面没有break，则不会退出switch，而是不管有没有匹配上，都要执行下一个case里面的语句。

4.2 continue和break

continue

for (var i = 1; i <= 5; i++) {
    if (i == 3) {
        continue;   //只要遇到continue就退出本次循环
    }
    console.log('我正在吃第' + i + '个包子');
}
输出结果：
我正在吃第1个包子
我正在吃第2个包子
我正在吃第4个包子
我正在吃第5个包子

break

for (var i = 1; i <= 5; i++) {
    if (i == 3) {
        break;  //退出整个循环
    }
    console.log('我正在吃第' + i + '个包子');
}
输出结果：
我正在吃第1个包子
我正在吃第2个包子

二者区别：continue是退出当前次数循环，break是推出整个循环。

4.3 ATM机案例

<script>
    // 里面现存有100块钱。
    // 如果存钱，就用输入钱数加上先存的钱数之后弹出显示余额提忝框
    // 如果取钱，就减去取的钱数,之后弹出显示余额提示框
    // 如果显示余额,就输出余额
    // 如果退出，弹出退出信息提示框

    var myname, psw;
    do {
        myname = prompt('请输入用户名：');
        psw = prompt('请输入密码：');
    } while (!(myname == 'admin' && psw == '123456'));
    alert('ATM系统登录成功！')
    var choice;
    var surplus = 100;
    do {
        choice = prompt('请输入您要进行的操作：\n1.存钱\n2.取钱\n3.显示余额\n4.退出')
        if (choice == '1') {
            var save = prompt('请输入您要存的钱数：');
            surplus += (save - 0);
            alert('存钱成功！您的余额为：' + surplus);
            // break;
        }
        else if (choice == '2') {
            var withdraw = prompt('请输入您要取的钱数：');
            while (withdraw > surplus) {
                alert('余额不足！您的余额为：' + surplus);
                withdraw = prompt('请输入您要取的钱数：');
            }
            surplus -= (withdraw - 0);
            alert('取钱成功！您的余额为：' + surplus);
        } else if (choice == '3') {
            alert('您的余额为：' + surplus);
            // break;
        } else {
            alert('退出成功！');
        }
    } while (choice != 4);

</script>

5. 数组

数组可以将一组数据的集合存放在单个变量下

5.1 创建数组

// 1.利用new创建数组
var arr = new Array();
// 2.利用数组字面量创建数组
var arr = [];

1. 数组里的元素可以是任意类型,不需要相同
2. 数组里面的数据用逗号分隔

5.2 新增数组元素

// 1. 通过修改length长度
var arr1 = [1, 2, 3];
arr1.length = 5;
console.log(arr1.length);   // 5
console.log(arr1[3]);   // undefined
console.log(arr1[4]);   // undefined
// 2. 修改索引号追加数组元素
var arr2 = [1, 2, 3];
arr2[3] = 4;
console.log(arr2.length);   // 4

不要直接给数组名赋值,否则数组中的元素就全部没有了

一个利用数组长度的例子:

// 筛选出数组中大于10的数,存放到一个新的数组中
var arr = [2, 23, 6, 45, 7, 12, 15, 7, 9, 5];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] >= 10) {
        // 利用了数组长度比下标大1的特点
        newArr[newArr.length] = arr[i];
    }
}
console.log(newArr);

5.3 冒泡排序

var arr = [2, 23, 6, 45, 7, 12, 15, 7, 9, 5];
var tmp;
// 每趟要把最大的值放在数组最后
// 外层循环i控制趟数,内层循环j才是数组下标,比较次数
for (var i = 0; i < arr.length - 1; i++) {
    for (var j = 0; j < arr.length - i - 1; j++) {
        // 如果前一个数大于后一个数,两者交换
        if (arr[j] > arr[j + 1]) {
            tmp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = tmp;
        }
    }
    console.log('我是第' + (i + 1) + '趟:' + arr);
}
console.log(arr);

6. 函数

函数封装了一个大量调用可重复执行的代码块,用function来声明

// 1. 函数关键字
function fn() {

}
// 2. 函数表达式(匿名函数)
var fun = function () {

}
//fun是变量名,不是函数名.
//函数表达式类似于声明变量,只不过里面存的是函数
//函数表达式也可以传参

6.1 实参与形参

在js中,实参和形参的个数不一致不会报错

• 如果个数一致,则正常输出结果;
• 如果实参个数多于形参个数,会取到形参的个数;
• 如果实参个数少于形参个数,多余的形参定义为undefined,最终的结果是NaN

6.2 函数返回值

注意:

• return会终止函数
• return只能返回最后一个值

6.3 arguments的使用

只有函数才有argument对象。

当我们不确定有多少个参数传递的时候，可以用argument来获取，argument对象中存储了传递的所有实参。

argument展示形式是一个伪数组，可以进行遍历。伪数组有以下特点：

• 具有length属性
• 按索引方式储存数据
• 不具有数组的push、pop方法

7. JavaScript作用域

JavaScript作用域目的是为了提高程序的可靠性,最重要的是减少命名冲突.

js在es6的时候新增块级作用域.

7.1 全局作用域

在整个script标签或单独的js文件中起作用.

全局变量:

1. 在全局作用域中声明的变量叫全局变量
2. 在函数内部没有声明的变量也叫全局变量.
3. 全局变量在浏览器关闭的时候才会被销毁,比较浪费内存

7.2 局部作用域(函数作用域)

在整函数内部起作用.

局部变量:

1. 在局部作用域中声明的变量叫局部变量
2. 函数的形参也算局部变量.
3. 在函数执行完毕时就会销毁,节省内存空间

7.3 作用域链

如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域，根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链(就近原则)

var num=10;
function fn() {
    var num = 20;
    function fun() {
        console.log(num);   //num=20,就近原则
    }
}

8. 预解析

js引擎运行js代码分为两步:预解析和代码执行

1. 预解析:js引擎会把js里面所有的var还有function提升到当前作用域的最前面;
2. 代码执行:按照代码书写的顺序从上往下执行.

预解析分为变量预解析(变量提升)和函数与解析(函数提升):

1. 变量提升:就是把所有的变量声明提升到当前作用域的最前面,但是不提升赋值操作.
2. 函数提升:就是把所有的函数声明提升到当前作用域的最前面,但是不调用函数.

一个坑:

f1();
console.log(a);
console.log(b);
console.log(c);
function f1() {
    var a = b = c = 9;
    // 相当于 var a = 9; b = 9; c = 9;b和c直接赋值,没有var声明,是全局变量
    // 要和集体声明区分开，集体声明：var a = 9, b = 9, c = 9;中间用的是逗号。
    console.log(a);
    console.log(b);
    console.log(c);
}
//结果是:9 9 9 9 9 a is not defined

9. 对象

对象是特定的一个事物。对象具有属性和方法。

9.1 创建对象

1. 使用字面量{}来创建对象。
   (1) 里面的属性或者方法我们采取键值对的形式。
   (2) 多个属性或方法之间用逗号隔开。
   (3) 方法冒号后面跟的是一个匿名函数。

var obj = {
    uname: 'riki',
    age: 27,
    sex: '男',
    sayHi: function () { };
}

2. 利用new Object创建对象

   (1) 里面的属性或者方法我们采取等号赋值的形式。
   (2) 多个属性或方法之间用分号结束。
   (3) 方法冒号后面跟的是一个匿名函数。

   var obj2 = new Object();
   obj2.uname = 'daniel';
   obj2.age = 19;
   obj2.sex = '男';
   obj2.sayHi = function(){};
   

3. 利用构造函数创建对象

   ​ 因为我们一次创建一个对象，里面很多的属性和方法是大量相同的，我们只能复制。因此我们可以利用函数的方法重复这些相同的代码，我们就把这个函数称为构造函数。又因为这个函数不一样，里面封装的不是普通代码，而是对象。构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面。

   (1) 构造函数名字首字母大写
   (2) 构造函数不需要return就可以返回结果
   (3) 调用构造函数必须使用new。

   function 构造函数名() {
       this.属性 = 值;
       this.方法 = function ();
   }
   

   例：

   function Babe(uname,age,sex) {
       this.name = uname;
       this.age = age;
       this.sex = sex;
   }
   var niki = new Babe('niki', 4, '女');
   

9.2 使用对象

(1) 调用对象的属性：对象名.属性名

console.log(obj.uname);

(2) 对象名[‘属性名’]

console.log(obj['age']);

(3) 调用对象的方法：对象名.方法名()

obj.sayHi();

9.3 区别

(1) 变量与属性：

• 变量单独声明并赋值，使用的时候直接写变量名，单独存在。
• 属性存在于对象中，不需要声明，使用时必须是对象.属性。

(2) 函数与方法：

• 函数是单独声明并调用，函数名()，单独存在。
• 方法是存在于对象里面，调用的时候用对象.方法名()。

(3) 构造函数和对象

• 构造函数泛指的是某一大类，它类似于java里面的类class。
• 对象是一个具体的事物。

9.4 new关键字执行过程

1. new构造函数可以在内存中创建了一个空的对象。
2. this就会指向刚才创建的空对象。
3. 执行构造函数里面的代码，给这个空对象添加属性和方法。
4. 返回这个对象。

10. 内置对象

内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本的功能。

10.1 查文档

Mozilla开发者网络（MDN）提供了有关开放网络的信息，包括HTML、CSS和万维网及HTML5应用的API。

网址：https://developer.mozilla.org

10.2 Math对象

Math对象不是构造函数，不需要new 。

方法	描述
Math.PI	圆周率Π
Math.floor()	向下取整，往小了取
Math.ceil()	向上取整，往大了取
Math.round()	四舍五入版就近取整（注意：-3.5结果是 -3（.5特殊，往大了取
Math.abs()	绝对值
Math.max()/Math.min()	求最大值和最小值

封装函数

利用对象封装自己的数学对象，里面有PI、最大值和最小值。

var myMath = {
    PI: 3.141592653,
    max: function () {
        var max = arguments[0];
        for (var i = 1; i < arguments.length; i++) {
            if (arguments[i] > max) {
                max = arguments[i];
            }
        }
        return max;
    },
    min: function () {
        var min = arguments[0];
        for (var i = 1; i < arguments.length; i++) {
            if (arguments[i] < min) {
                min = arguments[i];
            }
        }
        return min;
    }
}

随机数方法

1. Math.random() 返回一个随机的小数，[0,1)。

2. 这个方法不跟参数。

3. 得到两个数之间的随机整数，并且包含这两个数。

   function getRandom(min, max) {
       return Math.floor(Math.random() * (max - min + 1) )+ min;
   }
   // 应用：随机点名
   var arr = ['riki', 'daniel', 'oscar', 'kazuma', 'mika'];
   console.log(arr[getRandom(0, arr.length - 1)]);
   

10.3 日期对象

日期对象是一个构造函数，必须使用new来调用创建日期对象。

1. 使用Date.

如果没有跟参数，则返回当前时间

var date = new Date();
console.log(date);  //Thu Jun 24 2021 09:29:13 GMT+0800 (中国标准时间)

参数常用的写法：(1)数字型：2019, 10, 01 (2)字符串型：‘2019-10-1 8:8:8’

var date1 = new Date(2021, 6, 24);
console.log(date1);
var date2 = new Date('2021-6-24');
console.log(date2);

2. 日期格式化

方法名	说明	代码
getFullYear()	获取当年	dObj.getFullYear()
getMonth()	获取当月（0-11）	dObj.getMonth()
getDate()	获取当天日期	dObj.getDate()
getDay()	获取星期几（周日0到周六6）	dObj.getDay()
hetHours()	获取当前小时	dObj.getHours()
getMinutes()	获取当前分钟	dObj.getMinutes()
grtSeconds()	获取当前秒钟	dObj.getSeconds()

（1）日期格式化

var date = new Date();
console.log(date.getFullYear());    //返回年份
console.log(date.getMonth() + 1);   // 返回月份-1
console.log(date.getDate());    //返回几号
console.log(date.getDay());     // 返回星期几，周日到周六0-6

var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]);

（2）时分秒格式化

var date = new Date();
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
// 封装一个函数返回当前的时分秒 格式：08：08：08
function getTime() {
    var time = new Date();
    var h = time.getHours();
    h = h < 10 ? '0' + h : h;
    var m = time.getMinutes();
    m = m < 10 ? '0' + m : m;
    var s = time.getSeconds();
    s = s < 10 ? '0' + s : s;
    return h + ':' + m + ':' + s;
}
console.log(getTime());

3. 获得总的毫秒数

// 获得Date总的毫秒数，不是当前时间的毫秒数，而是距离1970年1月1日过了多少毫秒
// 1. 通过valueOf() getTime()
var date = new Date();
console.log(date.valueOf());
console.log(date.getTime());
// 2. 简单写法(最常用)
var date1 = +new Date();
console.log(date1);
// 3. H5新增的
console.log(Date.now());

4. 倒计时案例（重点）

// 利用时间戳实现。
// 1s = 1000ms
// d = 总秒数/60/60/24
// h = 总秒数/60/60%24
// m = 总秒数/60%60
// s = h = 总秒数%60
function conutDown(time) {
    var nowTime = +new Date();   // 当前时间总毫秒数
    var targetTime = +new Date(time);   // 目标时间总毫秒数
    var times = (targetTime - nowTime) / 1000;  // 剩余时间总秒数
    var d = parseInt(times / 60 / 60 / 24);
    d = d < 10 ? '0' + d : d;
    var h = parseInt(times / 60 / 60 % 24);
    h = h < 10 ? '0' + h : h;
    var m = parseInt(times / 60 % 60);
    m = m < 10 ? '0' + m : m;
    var s = parseInt(times % 60)
    s = s < 10 ? '0' + s : s;
    return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(conutDown('2021-7-12 12:00:00'));

10.4 数组对象

1. 创建数组

var arr1 = new Array(); // 创建了一个空数组
var arr2 = new Array(2);    // 创建了一个数组长度为2的空数组
var arr3 = new Array(2, 3); // 相当于创建了一个[2,3]这样的数组

2. 判断是否为数组的方法

// 1. instanceof运算符
console.log(arr instanceof Array);  // true
console.log(obj instanceof Array);  // false
// 2. Array.isArray(参数)   --H5新增的方法
console.log(Array.isArray(arr));    // true
console.log(Array.isArray(obj));    // false

3. 添加删除数组元素

添加数组元素：push()和unshift()

var arr = [1, 2, 3]
// 1. push():在数组末尾添加一个或多个元素,push完毕之后，返回的是新数组的长度。
// 这意味着：如果写arr1=arr.push(4,5);打印arr1，并不会出来新的数组，打印出的值是5，及数组长度。发生变化的是原数组本身。
arr.push(4, 5);
console.log(arr);   // [1,2,3,4,5]
// 2. unshift():在数组开头添加一个或多个元素,unshift完毕之后，返回的是新数组的长度。
arr.unshift('riki');
console.log(arr);   // ['riki',1,2,3,4,5]

删除数组元素：pop()和shift()

// 3. pop():删除数组最后一个元素，每次只能删除一个,返回的是删除的元素
arr.pop();
console.log(arr);  // ['riki',1,2,3,4]
// 4. shift():删除数组第一个元素，每次只能删除一个,返回的是删除的元素
arr.shift();
console.log(arr);  // [1,2,3,4]

4. 翻转数组

arr.reverse();

5. 冒泡排序

arr.sort(function(a,b){
	return a - b;	//升序
});
arr.sort(function(a,b){
	return b - a;	//降序
});

6. 获取数组索引

//返回数组元素索引号方法indexOf(数组元素)作用就是返回该数组元素的索引号
//它只返回第一个满足条件的索引号。
//它如果在该数组里面找不到元素，则返回的是-1。
var arr = ['riki', 'daniel', 'oscar', 'kazuma', 'mika','riki'];
console.log(arr.indexOf('riki'));   // 0
// lastIndexOf()从后往前找
console.log(arr.lastIndexOf('riki'));   //5

7. 数组去重

function unique(arr) {
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) === -1) {
            newArr.push(arr[i]);
        }
    }
    return newArr;
}

8. 数组转换为字符串

// 1. toString()
var arr = [1, 2, 3];
console.log(arr.toString());    // 1,2,3
// 2. join(分隔符)
var arr1 = ['riki', 'daniel', 'oscar', 'kazuma', 'mika'];
console.log(arr1.join('♥'));   // riki♥daniel♥oscar♥kazuma♥mika

10.5 字符串对象

1. 基本包装类型

基本包装类型就是：把简单数据类型包装成为了复杂数据类型，这样基本数据类型就有了属性和方法。有：String，Number和Boolean。

2. 根据字符返回位置

// str.indexOf('要查找的字符',[起始位置])
var str = '你肯定能懂我的意思都不用我怎么说';
console.log(str.indexOf('我'));
console.log(str.indexOf('我', 6));   //从索引号是3的位置开始查找

// 查找字符串"asdfaasadf"中所有a出现的位置及次数
var str = 'asdfaasadf';
var num = 0;
var index = str.indexOf('a');
while (index !== -1) {
    num++;
    console.log(index);
    index = str.indexOf('a', index + 1);
}
console.log('次数：' + num);

3. 根据位置返回字符

// 1. charAt(index)
var str = 'rikimaru';
console.log(str.charAt(5)); //a
// 遍历所有字符
for (var i = 0; i < str.length; i++) {
    console.log(str.charAt(i));
}
// 2. charCodeAt(index):返回相应索引号的字符ASCII码值，目的是判断用户按下了哪个键
console.log(str.charCodeAt(5)); // 97
// 3. str[index] H5新增的
console.log(str[5]);

4. 字符串操作方法

// 1. 截取字符串
var str = 'rikimaru';
console.log(str.substr(2, 2));  // 从索引为2的位置往后取2个字符
// 2. 替换字符
var str1 = str.replace('r', 'n');
console.log(str1);
// 将字符串'dcfgvhassaddd'里所有的d替换为*
var str2 = 'dcfgvhassaddd';
while (str2.indexOf('d') !== -1) {
    str2 = str2.replace('d', '*');
}
console.log(str2);
// 3. 字符转换为数组split('分隔符')
var str3='riki,daniel,kazuma'
console.log(str3.split(','));