JavaScript之数组篇

Javascript之数组篇

一. 数组基础知识

1. 数组定义
   数组是引用数据类型中的对象数据类型
   创建一个数组就是开辟出一个堆内存，堆内存中存储数组的键值
2. 数组特性
   索引
   数组中我们看到的每一项都是属性值，默认的属性名是数字，从零开始递增，数字代表当前属于第几项，我们把代表位置的属性称之为“索引"
   length
   默认存在一个length属性，代表数组的长度(数组有多少项)
3. 学习重点
   掌握基础操作
   掌握数组中常用的方法
   掌握数组排序和去重

二. 数组的常用方法

1. 数组的增加、删除、修改方法
   1.push
   - 定义 在数组的末尾添加内容
   - params 多个任意类型
   - return 返回新增后数组的长度
   - 是否改变原数组 ：改变

     let ary = [10,20,30,40];
     let res = ary.push(50,'嘻嘻','哈哈');
     console.log(ary, res); // [10,20,30,40,50,'嘻嘻','哈哈'] 7
     // 基于原生JS操作键值对的方法，也可以向数组末尾添加一项新的内容
     ary[ary.length] = 50;
   

   2.unshift
   - 定义 在数组的起始位置添加新内容
   - @params 多个任意类型
   - @return 返回新增后数组的长度
   - 是否改变原数组：改变

     let ary2 = [10,20,30,40];
     let res2 = ary2.unshift("吴瑾瑜","吴曼曼");
     console.log(ary2, res2);
     /** 基于原生es6展开运算符，把原有的ary克隆一份，在新的数组中创建第一项，
     其余信息使用原始ary的内容即可，也算实现了向开始追加内容的效果*/
     ary2 = [100,...ary2] // => [100, 10, 20,30,40]
   

   3.pop
   - 定义 在数组的末尾移除一项
   - @params 无
   - @return 返回移除后数组的长度
   - 是否改变原数组：改变

   let ary3 = [10,20,30,40];
   let res3 = ary3.pop();
   console.log(ary3, res3);
   // 基于原生JS，让数组长度减少一位，默认干掉就是最后一位
   ary3.length--;
   

   4.shift
   - 定义 在数组的首位移除一项
   - @params 无
   - @return 返回移除的那一项
   - 是否改变原数组：改变

   let ary4 = [10,20,30,40];
   let res4 = ary4.shift();
   console.log(ary4, res4);
   // 基于原生JS的delete，把数组当做普通对象，确实可以删除数组中的某一项内容，
   // 但是不会影响数组本身的结构特点（length的长度不会跟着改变），真实项目中杜绝这样的删除使用
   delete ary4[0];
   

   5.splice
   - 定义 实现数组的增加、删除、修改
   - @params n, m 从索引n开始删除m个元素（m不写，是删除到末尾）
   - @return 把删除的部分用新数组存储起来返回
   - 是否改变原数组：改变

    let ary5 = [10,20,30,40,50,60,70,80];
    let res5 = ary5.splice(2,5);
    console.log(ary5+'======'+res5) // => [10,20,80]; [30,40,50,60,70]
    // 基于这种方法可以清空一个数组，把原始数组中的内容用一个新数组存储起来
    // 有点类似于数组的克隆，把原来的数组克隆一份一模一样的给新数组
    res5 = ary5.splice(0);
    console.log(res5);
    // 删除最后一项
    ary5.splice(ary5.length)
    // 删除第一项
    ary5.splice(0, 1)
   

2. 数组的查询和拼接
   6.slice（此方法不会改变原始数组）
   - 定义 实现数组的查询
   - @params n,m 都是数字，从索引n开始找到m(不包含m)
   - @return 把查找到的数据以一个新数组返回
   - 是否改变原数组：不改变

    let ary7 = [10,20,30,40,50,60,70];
    let res7 = ary7.slice(1,3); // => [20, 30]
    res7 = ary7.slice(0);       // => [10,20,30,40,50,60,70] 
    /** 
     *思考：1.如果n/m为负数会怎样，如果n>m会怎样，
     *如果是小数会怎样，如果是非有效数字会怎样，
     *如果m或者n的值比最大索引大会怎样？ 
     */
    // 当参数n,m都为正数 n > m时，=>返回空数组
    res7 = ary7.slice(3,1);  // => []
   
    // 当参数n,m都为负数 n > m时，=>返回空数组
    res7 = ary7.slice(-1, -2);  // => []
   
    // 当参数n,m都为负数 n < m时，=>从后向前查找
    res7 = ary7.slice(-3, -1);  // => [50, 60]
   
    // 当参数n为负数，m为空时 =>数组从后向前n索引开始截取全部
    res7 = ary7.slice(-3); // => [50, 60, 70]
   
    // 当参数m的索引大于数组的长度,参数n正常输出 => 从索引n开始查找数组全部
    res7 = ary7.slice(3, 10); // => [40, 50, 60, 70]
   
    // 当参数n,m是小数, 会只取小数点前的整数，无论小数点后数字是几都直接省略
    res7 = ary7.slice(3.34); // => [40, 50, 60, 70]
    res7 = ary7.slice(3.34, 6.789); // => [40, 50, 60]
   
    // 当参数n,m是非有效数字, 会先基于Number转换为数字，再进行截取
    res7 = ary7.slice(null, '4.56'); // => [10, 20, 30, 40]
    res7 = ary7.slice('1', '3');     // => [20, 30]
    res7 = ary7.slice(false, true);  // => [10]
    res7 = ary7.slice({}, {a: 'b'}); // => []
    res7 = ary7.slice({}, {a: b});   // => Uncaught ReferenceError: b is not defined
    res7 = ary.slice(NaN,2);         // => [10, 20]
   

   7.concat
   - 定义 实现数组的拼接
   - @params 多个任意类型值
   - @return 返回拼接后的新数组
   - 是否改变原数组：不改变

   let ary8 = [10,20,30,40,50,60,70,80];
   let ary9 = [,100,110,120];
   let res8 = ary8.concat('123', ary9);  // =>  [10, 20, 30, 40, 50, 60, 70, 80, "123", empty, 100, 110, 120]
   

三. 数组转换为字符串(此类方法都不改变原数组)

1. 转换字符串
   8.toString
   - 定义 把数组转换为字符串
   - @params 无
   - @return 转换后的字符串，每一项用逗号分隔
   - 是否改变原数组：不改变

   let ary10 = [10,20,30,40,50,60,70,80];
   let res10 = ary10.toString();
   console.log(res10); // => "10,20,30,40,50,60,70,80"
   console.log([].toString()) // => ""
   console.log([12].toString()) // => "12"
   

   9.join
   - 定义 把数组转换为字符串
   - @params 无
   - @return 按指定的分隔符链接
   - 是否改变原数组：不改变

   let ary11 = [10,20,30,40,50];
   let res11 = ary11.join(); // => 10,20,30 未指定分隔符，用逗号隔开
       res11 = ary11.join('-') // => 10-20-30
       res11 = ary11.join('') // => 102030
       res11 = ary11.join('+') // => '10+20+30'
   console.log(eval(res11)); // => 60 eval相当于把字符串转换为JS表达式（加减乘除）执行
   

四. 检测数组中是否包含某一项

1. indexOf与lastIndexOf
   10.indexOf
   - 定义 检测当前项在数组中第一次出现位置的索引值
   - @params 要检索的这一项内容
   - @return 要检索的这一项位置的索引值，如果数组中不存在这一项返回-1
   - 是否改变原数组：不改变

   let ary12 = [10,20,30,40,50,60,70,50,60,50];
       res12 = ary12.indexOf(50); // => 4
   

    注意：在IE6-8中不兼容
   

   11.lastIndexOf
   - 定义 检测当前项在数组中最后一次出现位置的索引值
   - @params 要检索的这一项内容
   - @return 要检索的这一项位置的索引值，如果数组中不存在这一项返回-1
   - 是否改变原数组：不改变

   let ary13 = [10,20,30,40,50,60,70,50,60,50];
       res13 = ary12.lastIndexOf(50); // => 9
       res13 = ary12.lastIndexOf('aaa'); // => -1
   

   注意：es6语法，在IE6-8中不兼容
   

   12.includes
   - 定义 检测当前数组是否包含某一项
   - @params 要检索的这一项内容
   - @return Boolean类型 true：包含 false：不包含
   - 是否改变原数组：不改变

   let ary13 = [10,20,30,40];
       res13 = ary13.includes(50); // => false
       res13 = ary13.includes(10); // => true
   

   注意：ES6语法，在IE6-8中不兼容
   

五. 数组反转和排序(此类方法都改变原数组)

1. 数组反转
   13.reverse
   - 定义 把数组倒过来排列
   - @params 无
   - @return 排列过后的新数组
   - 是否改变原数组：改变

   let ary15 = [10,30,'嘻嘻', 'haha',50];
       res15 = ary15.reverse();
       console.log(res15, ary15); //[50, "haha", "嘻嘻", 30, 10] [50, "haha", "嘻嘻", 30, 10] 
   

   14.sort
   - 定义 把数组倒过来排列
   - @params 无
   - @return 排列过后的新数组
   - 是否改变原数组：改变

   使用方法：ary.sort()：SORT方法中如果不传递参数，是无法处理10以上数字排序的（它默认按照每一项第一个字符来排，不是我们想要的效果）

   想要实现多位数正常排序，需要给SORT传一个函数，函数中返回a-b实现升序，返回b-a实现降序。
   ary.sort(function(a,b){return a-b;})；

   var ary=[11,12,1,2,3];
   // 升序
   ary.sort(function(a,b){
       return a-b;
   });
   // 降序
   ary.sort(function(a,b){
       return b-a;
   });