JavaScript面向对象基础

★ JavaScript基本介绍

• 浏览器端JS由以下三个部分组成：
  • ECMAScript：基础语法(数据类型、运算符、函数。。。)
  • BOM(浏览器对象模型)：window、location、history、navigator。。。
  • DOM(文档对象模型)：div、p、span。。。
• CMAScript又名es，有以下重大版本：
  • 旧时代：
    • es1.0。。。es3.1
  • 新时代：
    • es5
    • es6(es2015)
    • es7(es2016)、es8(es2017)

★ 数据类型

• 基本数据类型 —— 值类型：

  • Number
  • String
  • Boolean
  • null：未定义
  • undefined：已定义，未赋值

• 复杂数据类型——引用类型：(对象)

  • Array
  • Function
  • Date
  • RegExp

• 数据类型的检测方法：

  • Object.prototype.toString.call() 全类型检测
  • instanceof Array[,Function,Date,RegExp,Object] 只能检测对象类型
  • typeof 只能检测除null外的值类型
    • 常用于(typeof value == "string") ? "'" + value + "'" : value;
  • Array.isArray() 仅只检测Array类型

• 强制类型转换

  • 任意类型 --> 字符串
    • x.toString() - x不能是undefined或null
    • String(x) - 相当于隐式转换
  • 任意类型 --> 数字
    • Number(x) - 专用于将非字符串类型转数字，相当于隐式转换
    • parseInt(str) - 将字符串转为整型数字，不认识小数点，碰上第一个非数字字符就停止，自动跳过开头的空字符
    • parseFloat(str) - 将字符串转为浮点型数字，认识第一个小数点
  • 任意类型 --> Boolean
    • Boolean(x) - 相当于隐式转换
    • 只有5个值转为false - "" NaN undefined null 0，其余都转为true
  • 快速转换
    • 任意类型转String - x + ""
    • 任意类型转Boolean - !!x
    • 任意类型转Number - 除”+”以外的其他运算

    // Number(x)  VS  parseInt(str)
    var b = true;
    console.log(Number(b)); 			    //1
    console.log(parseInt(String(b)));	    //NaN

	var width="60px";
	console.log(Number(width)); 		    //NaN
    console.log(parseInt(width)); 		    //60

    // 十进制转十六进制
    var num = 125;
    console.log(num.toString(16));  //输出7d

    // 十六进制转十进制
    var num = '7d';
    console.log(parseInt(num,16));  //输出125

    // 十进制转十六进制
    var array = [170, 15, 19, 0, 0, 0, 0, 0, 0, 2, 1, 1, 0, 0, 0, 218];
	var newArray = array.map(item =>{
		return item.toString(16);
	});
	console.log(newArray);
			
	// 十六进制转十进制
	var arr = ["aa", "f", "13", "0", "0", "0", "0", "0", "0", "2", "1", "1", "0", "0", "0", "da"];
	var arr2 = arr.map(item =>{
		return parseInt(item,16);
	})
	console.log(arr2);

• 字符串API
  • 字符串操作
    • str.length - 判断字符串长度
    • x.toString(num) - 强制转换成字符，对数字进行进制转换
    • String(x) - 强制转换成字符
    • str.toLowerCase() - 强制转换小写
    • str.toUpperCase() - 强制转换大写
    • str.concat() - 合并字符串
  • 索引操作
    • str.charAt(index) - 选取字符串index位置的字符，Index从0开始选取，index-1结束，不支持负值
    • str.charCodeAt(index) - 选取字符串index位置的字符的unicode编码
    • str.indexOf(searchValue[,fromIndex]) - 返回选取字符第一个索引值，searchValue索引字符，fromIndex开始位置，不存在返回-1
    • str.lastIndexOf(searchValue[,fromIndex]) - 返回选取字符最后一个索引值，返回的值依旧从左开始计数，不存在返回-1
  • 调制解调操作
    • encodeURI() - 地址栏中按utf-8规则对汉字URI组件进行编码
    • decodeURI() - 地址栏中按utf-8规则对汉字URI组件进行解码
    • encodeURIComponent() - 地址栏中按utf-8规则对多字节URI组件进行编码
    • decodeURIComponent() - 地址栏中按utf-8规则对多字节URI组件进行解码
  • 正则操作
    • str.search(/regexp/) - 字符匹配，返回index，若没有，则返回-1
    • str.match(/regexp/) - 字符匹配，返回字符，若没有，则返回null
    • str.replace(regexp | substr , newSubstr | function) - 字符匹配/选择替换
  • 查询操作
    • str.substring(indexA[,indexB]) - 字符查询，包头不包尾
    • str.substr(start[,length]) - 字符截取，可传位数，可传负值
    • str.slice(beginSlice[,endSlice]) - 字符查询，包头不包尾，可传负值
  • 数组操作
    • str.split([separstor][,limit]) - 字符拆分成数组，负值全部输出
    • arrayObject.join(separator) - 数组转化为字符串

★ 数组

初识数组

• 数组的创建
  • 使用Array对象创建数组
    • 不可以留有空存储位
    • 可以指定数组长度
  • 使用“[]”创建数组
    • 可以留有空存储位

    var arr = [];
    var arr = new Array;
    var arr = new Array();
    var arr = new Array(3);

• 数组的基本操作
  • 获取数组长度
    • arr.length
  • 数组的访问与遍历
    • for循环

    // 数组的访问与遍历
    var arr = ['red','orange','yellow','green','cyan','blue','purple'];

    for(var i=0; i<arr.length; i++){
        console.log(arr[i]);
    }

    for(var key in arr){
        console.log(arr[key]);
    }

    for(var value of arr){
        console.log(value);
    }

• 元素的添加与修改
• 元素的删除
  • delete

    // 清空数组
    var arr = ['red','orange','yellow','green','cyan','blue','purple'];
    for(var i=0; i<arr.length; i++){
        delete arr[i];
        console.log(arr[i]);
    }

• 数组的结构赋值
  • [a,b,c] = [1,2,3];

    // 解构赋值
    var num = ['#ff0000','#ff7d00','#ffff00','#00ff00','#00ff7d','#0000ff','#7d00ff'];
    [red,orange,yellow,green,cyan,blue,purple] = num;
    console.log(red);

• 数组的释放
  • 主动释放一个对象的引用，null本身是原始类型的值。
  • 伴随主程序同时运行的后台程序，记录每个对象当前被引用的次数
  • 被引用的次数==0时，垃圾回收器自动释放对象内存空间
  • 强烈建议：在使用完，较大对象后，主动赋值为null，总是好习惯

    var arr = ['red','orange','yellow','green','cyan','blue','purple'];
    console.log(arr);
    arr = null;
    console.log(arr);

    // 任意数字比大小
    function comparison(){
        var max = min = arguments[0];
        for(var i=0; i<arguments.length; i++){
            arguments[i] > max ?  max = arguments[i] : max;
            arguments[i] < min ?  min = arguments[i] : min;
        }
        return "max : "+ max + " min : " + min;
    }
    console.log(comparison(32,56,42,12));

哈希(hash)数组

• 定义
  • 哈希数组：关联数组，可自定义元素下标名称的数组
    • 关联数组的length属性失效
    • 关联数组中的key不能重复
    • 关联(hash)数组查找极快！和元素个数无关！
  • 索引数组：自动从0开始分配连续不重复的序号下标
• 创建
  • 先创建普通空数组，再追加自定义下标的元素

    var arr = [];
    arr["red"] = "#ff0000";
    arr["orange"] = "#ff7d00";
    arr["yellow"] = "#ffff00";

• 创建数组同时，初始化元素内容

    var arr = {
        "red" : "#ff0000",
        "orange" : "#ff7d00",
        "yellow" : "#ffff00"
    }

• 遍历哈希数组

    for(var key in arr){
        console.log(arr[key]);
    }

• 哈希数组的浅拷贝

    var source = ['red','orange','yellow','green','cyan','blue','purple'];
    var target = [];
    for(var key in source){
        target[key] = source[key];
    }

二维数组

• 定义
  • 数组中的某个元素，又指向另一个子数组对象
    • 存储横行竖列的二维数据
    • 存储上下级包含关系的数据
• 创建
  • 使用Array对象创建数组
  • 使用"[]"创建数组

    var arr = new Array(new Array, new Array);
    var arr = [[], []];

• 遍历
  • 外层循环遍历行，内层循环遍历列

    var arr = [];
    for(var i=0; i<3; ++i>){
        arr[i] = [];
        arr[i][0] = i;
    }

• 转置
  • 将二维数组横向元素保存为纵向元素

    var arr = [['a','b','c'], ['d','e','f'], ['g','h','i'], ['j','k','l']];
    var res = [];
    for(var i=0; i<arr[0].length; ++i){
        res[i] = [];
        for(var j=0; j<arr.length; ++j){
            res[i][j] = arr[j][i];
        }
    }
    console.log(res);

数组排序

• 冒泡算法
  • 原理：在冒泡排序的过程中，按照要求从小到大排序或从大到小排序，不断比较数组中相邻两个元素的值，较大或较小的元素前移。冒泡排序比较的轮数是数组长度减1，每轮比较的对数等于数组的长度减当前的轮数。

    function bubbleSort(){
        var arr = [];
        for(var key in arguments){
            arr[key] = arguments[key];
        }
        for(var i=1; i<arr.length; ++i){
            for(var j=0; j<arr.length-i; ++j){
                if(arr[j] > arr[j+1]){
                    [arr[j], arr[j+1]] = [arr[j+1], arr[j]];
                }
            }
        }
        return arr;
    }
    console.log(bubbleSort(52, 61, 91, 81, 72, 43, 10, 28, 35));

• 插入算法
  • 原理：插入排序是冒泡排序的优化，是一种直观的简单排序算法。其原理是通过构建有序数组元素的存储，对未排序的数组元素在已排序的数组中从最后一个元素向第一个元素遍历，找到相应位置并插入，其中，待排序数组的第1个元素会被看作是一个有序的数组，从第2个至最后一个元素会被看作是一个无序数组。插入排序比较的次数与无序数组的长度相等，每次无序数组元素与有序数组中的所有元素进行比较，比较后找到对应位置插入，最后即可得到一个有序数组。

    function insertSort(){
        var arr = [];
        for(var key in arguments){
            arr[key] = arguments[key];
        }
        for(var i=1; i<arr.length; ++i){
            for(var j=i; j>0; --j){
                if(arr[j-1] > arr[j]){
                    [arr[j-1], arr[j]] = [arr[j], arr[j-1]];
                }
            }
        }
        return arr;
    }
    console.log(insertSort(52, 61, 91, 81, 72, 43, 10, 28, 35));

• 希尔算法
  • 原理：希尔排序是插入排序的改进型。对于一个任意一个无序的序列，我们把这个序列从逻辑上分为有序区和无序区，并默认在开始排序前，第一个元素为有序区，其余为无序区。在我们对其逐渐有序化的时候，依次从无序区中取出其第一个元素并插入有序区。有序区会增加，无序区会减少，同时无序区第一个元素前的元素必然在有序区。
  • 增量（gap）：一个序列可以按增量（gap）在逻辑上划分为gap个序列（关于的gap的取值，第一次取序列长度一半，之后再取用gap前要除2）。如 [ 5, 6, 9, 8, 7, 4, 1, 2, 3 ]，gap = 9/2 = 4 ，即在逻辑上分成4组小序列，同一小序列内的、逻辑上相邻的元素，在序列中的小标差为gap，比如小序列[ 5, 7, 3 ],它们在原序列中的小标为0、4、8，相差为gap。
  • 排序流程：
    • [1] 在逻辑上按gap将序列划分为gap个小序列。（第一次时取增量（gap）为序列长度的一半）；
    • [2] 一个指针从序列的无序区（由各个小序列的无序区组成）由左向右遍历，遍历到的元素，将其插入对应小序列的有序区”；

    // 希尔算法，待考证
    function shellSort(){
        var arr = [];
        for(var key in arguments){
            arr[key] = arguments[key];
        }
        //控制增量（gap），增量将不断/2直到小于1。（序列会在逻辑上按gap划分为gap个小序列）
        for(var gap=arr.length/2; gap>0; gap=gap/2){
            //遍历无序区（最开始>=gap的下标都属于无序区）
            //变量unorder始终指向当前序列的无序区的第一个元素的下标
            for(var unorder=gap; unorder<arr.length; unorder++){
                /*
                    *order是小序列有序区内的下标指针
                    *unorder - gap 是当前小序列有序区的最后一个
                    *把当前无序区第一个元素插入对应小序列有序区
                */
                for(var order=unorder-gap; order>=0; order=order-gap){
                    if(arr[order] > arr[order+gap]){
                        [arr[order], arr[order+gap]] = [arr[order+gap], arr[order]];
                    }
                }
            }
        }
        return arr;
    }
    console.log(shellSort(5, 6, 9, 8, 7, 4, 1, 2, 3));

数组API

• 栈和队列方法
  • push() - 将一个或多个元素添加到数组的末尾，并返回数组的新长度
  • unshift() - 将一个或多个元素添加到数组的开头，并返回数组的新长度
  • pop() - 从数组的末尾移出并返回一个移出的数组元素，若是空数组则返回undefined
  • shift() - 从数组的开头移出并返回一个移出的数组元素，若是空数组则返回undefined

    var arr = ['red','orange','yellow','green','cyan','blue','purple'];
    var pur = arr.pop();
    console.log(pur);
    console.log(arr);

    var red = arr.shift();   
    console.log(red);
    console.log(arr);

    var purlen = arr.push('purple');   
    console.log(purlen);
    console.log(arr);

    var redlen = arr.unshift('red');   
    console.log(redlen);
    console.log(arr);

• 检索方法
  • includes() - 用于确定数组中是否含有某个元素，含有返回true，否则返回false
  • Array.isArray() - 用于确定传递的值是否是一个Array，是返回true，不是返回false
  • indexOf() - 返回在数组中可以找到给定值的第1个索引，如果不存在，则返回-1
  • lastIndexOf() - 返回指定元素在数组中的最后一个索引，如果不存在则返回-1

    var arr = ['red','orange','yellow','green','cyan','blue','purple','orange'];
    var cyan = arr.includes('cyan', 5);
    console.log(cyan);

    var is = Array.isArray(arr);
    console.log(is);

    var orange = arr.indexOf('orange');
    var pink = arr.indexOf('pink');
    var orangelast = arr.lastIndexOf('orange');
    var pinklast = arr.lastIndexOf('pink');
    console.log(orange);
    console.log(pink);
    console.log(orangelast);
    console.log(pinklast);

    // 添加元素
    var arr = ['red','orange','yellow','green','orange','cyan','blue','purple','orange'];
    function addArrayElement(array,add){
        if(array.indexOf(add) === -1){
            array.push(add);
            return array;
        }else{
            return '目标已存在';
        }
    }
    console.log(addArrayElement(arr,'pink'));

    // 检索元素
    function searchArrayElement(array,search){
        var res = [];
        var i = array.lastIndexOf(search);
        if(i === -1){
            return "检索目标不存在";
        }else{
            while(i !== -1 && i>0){
                res.push(i);
                i = array.lastIndexOf(search,i-1);
            }
        }
        return res;
    }
    console.log(searchArrayElement(arr,'orange'));

• 数组转字符串
  • join() - 将数组的所有元素连接到一个字符串中
  • toString() - 返回一个字符串，表示指定的数组及其元素
  • split() - 字符拆分成数组

    console.log(['r','e','d'].join());
    console.log(['r','e','d'].join(''));
    console.log([['r','e','d'], ['c','y','a','n']].join());
    console.log([['r','e','d'], ['c','y','a','n']].join('-'));

    console.log(['r','e','d'].toString());
    console.log([['r','e','d'], ['c','y','a','n']].toString());

    var cities = ['北京','天津','重庆','上海'];
    var html = cities.join('</option><option>');
    html = '<select><option>' + html + '</option></select>';
    document.write(html);

    var symbol = 'red';
    console.log(symbol.split(''));

• 函数处理方法
  • every() - 用于检测数组所有元素是否都符合指定条件（函数提供）
  • some() - 检测数组中的元素是否满足指定条件（函数提供）
  • map() - 按照原始数组元素顺序依次按传递函数处理数组元素，返回一个$color{#FF3030}{新数组}$
  • reduce() - 接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

    var ages = [25, 23 ,26, 19, 24];
    function check(age){
        return age > 18;
    }
    console.log(ages.every(check));

    var colors = ['red','orange','yellow','green','orange','cyan','blue','purple','orange'];
    function check(color){
        return color == 'pink';
    }
    console.log(colors.some(check));

    var colors = ['red','orange','yellow','green','orange','cyan','blue','purple','orange'];
    function softCopy (value){
        return value;
    }
    console.log(colors.map(softCopy));

    var money = [25, 23 ,26, 19, 24];
    function getSum(total, num){
        return total+num;
    }
    console.log(money.reduce(getSum));

• 其他方法
  • sort() - 对数组的元素进行排序，并返回数组
  • fill(value, start, end) - 用一个固定值填充数组中指定下标范围内的全部元素
  • reverse() - 颠倒数组中元素的位置
  • splice() - 对一个数组在指定下标范围内删除或添加元素，返回被删除的值
  • slice() - 从一个数组的指定下标范围内拷贝数组元素到一个$color{#FF3030}{新数组}$中
  • concat(array2,array3,...) - 返回一个合并两个或多个数组后的$color{#FF3030}{新数组}$

    var ages = [25, 23 ,26, 19, 24];
    console.log(ages.sort());

    var colors = ['red','orange','yellow','green','orange','cyan','blue','purple','orange'];
    console.log(colors.fill('pink',4,5));

    console.log(colors.reverse());

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    console.log(fruits.splice(2,1,"Lemon","Kiwi"));
    console.log(fruits);

    var colors = ['red','orange','yellow','green','orange','cyan','blue','purple','orange'];
    console.log(colors.slice(0,7));

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    var colors = ['red','orange','yellow','green'];
    console.log(fruits.concat(colors));