JavaScript基础18.数组基础、数组方法、数组排序

18.1数组

数组声明

3种方式
所有数组都继承于 Array.prototype

// 1. 数组字面量
var arr1 = []; 
// 2. 通过系统内置的 Array 构造函数声明数组
var arr2 = new Array(); 
// 3. 不用new
var arr3 = Array(); // 不使用

// 他们的原型是什么？都是Array
console.log(arr1.__proto__);
console.log(arr2.__proto__);
console.log(arr3.__proto__);

所有的对象都继承于 Object.prototype

// 对象
// 1. 对象字面量
var obj1 = {};
// 2. 通过系统内置的 Array 构造函数声明数组
var obj2 = new Object();
// 3. 不用new
var obj3 = Object();

// 他们的原型是什么？都是Object
console.log(obj1.__proto__);
console.log(obj2.__proto__);
console.log(obj3.__proto__);

数组到底是什么

在JavaScript中，数组就是对象的另一种形式，他们的访问机制是一样的，都是通过[]的方式 index相当于键名，数组中存放的是键值

var arr = [1, 2, 3];
// index: 数组元素的下标（索引值），从0开始
var obj = {
  0: 1,
  1: 2,
  2: 3
}
console.log(arr[2]); // 3
console.log(obj[2]); // 3

var arr = [1,2,3,4];
arr[4]; // undefined;
// 写入
arr[4] = 'a';
// 修改
arr[2] = 'b';

稀松数组

稀松数组：数组不一定每一位都有值
如果数组最后加了逗号，和没有一样

var arr = [, 1, 3, 5, 7,]; 
//相当于[, 1, 3, 5, 7]
arr.length; // 5

通过构造函数声明数组，不能传空值

因为字面量声明是已经成型的数组，而构造函数是将一组值变为数组，传的值相当于参数，参数不能乱传，它是直接把构造函数的参数转换成数组

var arr1 = new Array(1,3,4,5);//对
var arr1 = new Array(,1,3,4,5);//报错
var arr1 = new Array(,1,3,4,5,);//报错
var arr1 = new Array(1,3,,4,5);//报错

如果只填一个参数（数字），代表设置数组的长度
注如果只填一个参数（字符串），代表设置第一个数组元素

var arr1 = new Array(5); // [,,,,,]

18.2 方法

push unshif 等这些方法是哪来的?
继承了数组Array构造函数的prototype属性上的方法，即继承了数组原型上的方法

push, unshift

push unshif -> 返回值是执行了方法以后的数组长度

1. push 在数组的最后一位添加元素

var arr = [2, 3, 4];
arr.push(5, 6, 7); 
console.log(arr);//[2, 3, 4, 5, 6, 7]

实现push方法

var arr = [2, 3, 4];
Array.prototype.myPush = function(){
  for(var i = 0; i < arguments.length; i++){
    this[this.length] = arguments[i]
  }
  return this.length;
}

arr.myPush(1, 2, 3);

2. unshift 在数组的最前一位添加元素

var arr = [2, 3, 4];
arr.unshift(5, 6, 7); //[2, 3, 4, 5, 6, 7]

pop shift

1. pop 删除数组最后一位，并返回该删除元素

var arr = ['a', 'b', 'c'];
arr.pop();//'c'

2. shift 删除第一位，并返回该删除元素

var arr = ['a', 'b', 'c'];
arr.shift();

reverse

倒序

var arr = [1, 2, 3];
arr.reverse(); // [3, 2, 1]

splice

arr.splice(开始项的下标，剪切长度，剪切以后最后一位开始添加数据);

var arr = ['a', 'b', 'c'];
arr.splice(1, 2); // ['a']

var arr = ['a', 'b', 'c', 'd'];
arr.splice(1, 2, 1,2,3); // ['a', 1, 2, 3, 'd']

在 c 后面添加 d

var arr = ['a', 'b', 'c', 'e'];
// 方法1
arr.splice(3, 0, 'd');//['a', 'b', 'c', 'd', 'e']
//方法2
arr.splice(-1, 0, 'd'); // -1 从右向左第一位

实现splice

function splice(arr, index){
  return index += index >= 0 ? 0 : arr.length; 
}
var arr = ['a', 'b', 'c', 'e'];
console.log(arr[splice(arr, -1)]);

sort

sort 返回的结果是排序之后的数组

var arr = [-1, -5, 8, 0, 2];
arr.sort(); // 升序
console.log(arr);//[-5, -1, 0, 2, 8]

var arr = ['b', 'z', 'h'];
arr.sort(); // 升序

sort -> 按照 ascii 码来排序的

var arr = [27, 49, 5, 7];
arr.sort();

sort的参数function

var arr = [27, 49, 5, 7]; // 冒泡排序法

// 1. 参数 a, b
// 2. 必须有返回值：负值，a 就排前面 
//				   正值，b 就排前面
// 				    0 保持不动
arr.sort(function(a, b){
  if(a > b) {
    return 1;
  } else {
    return -1;
  }
});
//相当于
arr.sort(function(a, b){
  return a - b; // 升序
});

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

18.3 练习题

随机排序

var arr == [1, 2, 3, 4, 5];
// Math.random() -> 返回 0-1 之间的数，开区间
arr.sort(function(a, b){
  return Math.random() - 0.5;
})

根据属性中的年龄排序

var arr = [{
  son: 'Jenny',
  age: 18
},{
  son: 'Jone',
  age: 10
},{
  son: 'Ben',
  age: 11
}]

arr.sort(function(a, b){
  return a.age - b.age;
})

根据元素长度排序

var arr = ['12345', '1', '12'];
arr.sort(function(a, b){
  return a.length - b.length;
})

18.4总结

修改原数组：push/unshift pop/shift reverse splice sort

18.5 题目

1. 用 splice 方法重写数组的原型上的 unshift 方法 myUnshift

// 方法1
Array.prototype.myUnshift = function(){
  var pos = 0;
  for(var i = 0; i < arguments.length; i++){
    this.splice(pos, 0, arguments[i]);
    pos ++;
  }
  return this.length;
}

var arr = [1, 2, 3, 4];
arr.myUnshift('a', 'b', 'c');


// 方法2
Array.prototype.myUnshift = function(){
  var argArr = Array.prototype.slice.call(arguments);
  var newArr = argArr.concat(this);
  return newArr;
}

var arr = [1, 2, 3, 4];
var newArr = arr.myUnshift('a', 'b', 'c');
console.log(newArr);

2. 请按照字节数排序下列数组[‘哈哈哈’, ‘ok’, ‘hello’,‘你是what’, ‘可以’]

var arr = ['哈哈哈', 'ok', 'hello','你是what', '可以'];
arr.sort(function(a, b){
  return getBytes(a) - getBytes(b);
})

function getBytes(str){
  var len = str.length;
  for(var i = 0; i < str.length; i++){
    var item = str[i];
    if(item.charCodeAt() > 255) {
      len++;
    }
  }
  return len;
}