【ECMAScript】深拷贝实例、数组基础、数组方法、数组排序

1. 数组

1.1 数组声明

3种方式

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

// 他们的原型是什么？都是Array
arr1.__proto__;
arr2.__proto__;
arr3.__proto__;
所有数组都继承于 Array.prototype

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

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

1.2 数组到底是什么

在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, 3, 5, 7,]; // 稀松数组：数组不一定每一位都有值
arr.length; // 5

// 问：通过构造函数声明数组，不能传空值，为什么？⭐
// 答：因为字面量声明是已经成型的数组，而构造函数是将一组值变为数组，
// 传的值相当于参数，参数不能乱传，它是直接把构造函数的参数转换成数组
var arr1 = new Array(1,3,4,5);


// 如果只填一个参数，代表设置数组的长度
var arr1 = new Array(5); // [,,,,,]

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

2. 方法

问：push unshif 这些方法是哪来的⭐

答：继承了数组Array构造函数的prototype属性上的方法，即继承了数组原型上的方法

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

2.1 push、unshift

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

   var arr = [2, 3, 4];
   arr.push(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.2 pop、shift

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

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

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

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

2.3 reverse

倒序

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

2.4 splice ⭐

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

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

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');
//方法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)]);

2.4 sort ⭐

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

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

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; // 升序
});

2.5 练习题

2.5.1 随机排序

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

2.5.2 根据属性中的年龄排序

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

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

2.5.3 根据元素长度排序

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

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

题目

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

请按照字节数排序下列数组[‘哈哈哈’, ‘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;
}