JavaScript30 - 4.Array Cardio 1

❤️ javascript30是一系列的视频教程，旨在30天编写30个前端小项目。 这些项目不需要使用其他lib,不需要编译，不需要模板，回归最纯真的JavaScript；

? ? ?

? 这是这个系列的第4篇

• 1. Drum Kit
• 2.JS + CSS Clock
• 3.CSS Variables
• 4.Array Cardio 1

项目代码同步更新在男同交友网

内容简介

熟悉并掌握JavaScript中Array的使用，以及一些开发的小技巧；

本期先讲一部分，剩余的在第7期中继续完成；

知识点

JS

• Array MDN-JS-Array

实践

Array 的属性

length

• length: 值是一个 0 到 232-1 的整数。

用处：

• 返回数组的长度
• 将数组的长度指定为X， 进行数组截断若 X=0 则表示数组为空(清空数组)

?：

const length_test = [1, 3, 55, 66]
console.log(length_test.length)

length_test.length = 2
console.log(length_test)复制代码

这里附平时常用的清空数组的操作：

// 清空数组
let empty_test = [1,2,3,4];  

// 1.length = 0
empty_test.length = 0

// 2. empty_test = []
empty_test = []

// 3. splice
empty_test.splice(0)复制代码

效率最好的是第二种，但是推荐使用第一种； 因为第二种新建了内存

prototype

......大部分的方法都是原型链上的方法。 具体的每个方法会在后续一一实践；

console.log(Array.prototype)复制代码

Array 的静态方法(类方法)

静态方法是指那些不需要对类进行实例化，使用类名就可以直接访问的方法，需要注意的是静态方法不能被实例化的对象调用。静态方法经常用来作为工具函数。 --MDN

• Array.isArray() : 如果对象是 Array 返回true，否则false。

// Array.isArray()
const type_test = [];
const type_test1 = {};
console.log('type_test type is array? : ', Array.isArray(type_test))
console.log('type_test1 type is array? : ', Array.isArray(type_test1))复制代码

那么如果遇到不支持ES6语法的浏览器呢？
这里实现一种更加健壮的Array检测方法

function isArray(value){  
  if (typeof Array.isArray === "function") {  
      return Array.isArray(value);      
  }else{  
      return Object.prototype.toString.call(value) === "[object Array]";      
  }  
}复制代码

• (ES6) Array.from() : 可以将一个类数组对象或可遍历对象转换成真正的数组。

类数组对象（拥有一个 length 属性和若干索引属性的任意对象）
可遍历对象（你可以从它身上迭代出若干个元素的对象，比如有 Map 和 Set 等）

语法：

Array.from(arrayLike[, mapFn[, thisArg]])复制代码

• arrayLike: 想要转换成真实数组的类数组对象或可遍历对象。
• mapFn: 可选参数，如果指定了该参数，则最后生成的数组会经过该函数的加工处理后再返回。
• thisArg:可选参数，执行 mapFn 函数时 this 的值。

// 将可迭代对象（Set 对象）转换成数组
Array.from(new Set(["foo", window])); 

// 使用 map 函数转换数组元素
Array.from([1, 2, 3], x => x + x);      // [2, 4, 6]

// 生成一个数字序列
Array.from({length:5}, (v, k) => k);    // [0, 1, 2, 3, 4]复制代码

tips: 发现了一个小玩意

// 实现字符串反转
let str = 'abcd'
Array.from(str).reverse().join('')复制代码

• Array.of(): 将它的任意类型的多个参数放在一个数组里并返回
  语法：

Array.of(element0[, element1[, ...[, elementN]]])复制代码

?：

Array.of(1);         // [1]
Array.of(1, 2, 3);   // [1, 2, 3]
Array.of(undefined); // [undefined]复制代码

对于不支持的浏览器，可以这样做：

if (!Array.of) {
  Array.of = function() {
    return Array.prototype.slice.call(arguments);
  };
}复制代码

Array 对象方法

栈和队列.pop,.push,.shift和.unshift

• push: 法添加一个或多个元素到数组的末尾(改变原数组)，并返回数组新的长度（length 属性值）

let sports = ["soccer", "baseball"];
let total = sports.push("football", "swimming");

console.log(sports); // ["soccer", "baseball", "football", "swimming"]
console.log(total);  // 4复制代码

tips: 用Array.pus().apply(arr1,arr2)来替代创建一个新数组。这种方法不是用来创建一个新的数组，其只是将第一个第二个数组合并在一起，同时减少内存的使用：

let array1 = [1,2,3];
let array2 = [4,5,6];
console.log(array1.push.apply(array1, array2));复制代码

• pop: 删除一个数组中的最后的一个元素，并且返回这个元素

let colors = ['red', 'yellow', 'white'];

console.log(colors);

let target = myFish.pop();

console.log(colors);
console.log(target);复制代码

.pop方法和.push成对使用，它返回数组的末尾元素并将元素从数组移除。如果数组为空，返回void 0（undefined）。使用.push和.pop我们能轻易模拟出LIFO（后进先出或先进后出）栈 -- 有趣的JavaScript原生数组函数

简易栈（Stack）的实现：

function Stack () {
    this._stack = []
}

Stack.prototype.next = function () {
    return this._stack.pop()
}

Stack.prototype.add = function () {
    return this._stack.push.apply(this._stack, arguments)
}

stack = new Stack()
stack.add(1,2,3)

stack.next()复制代码

• shift: 删除数组的第一个元素，并返回这个元素。该方法会改变数组的长度

  shift 方法移除索引为 0 的元素(即第一个元素)，并返回被移除的元素，其他元素的索引值随之减 1。如果 length 属性的值为 0 (长度为 0)，则返回 void 0(undefined)

// shift
let colors2 = ['red', 'yellow', 'white'];

console.log(colors2);

let target = colors2.shift();

console.log(colors2);
console.log(target2);复制代码

• unshift: 在数组的开头添加一个或者多个元素，并返回数组新的 length 值

let arr = [1, 2];

arr.unshift(0); //result of call is 3, the new array length
//arr is [0, 1, 2]复制代码

用.unshift 和 .shift模拟FIFO（先进先出）队列(Queue)

function Queue () {
    this._queue = []
}

Queue.prototype.next = function () {
    return this._queue.shift()
}

Queue.prototype.add = function () {
    return this._queue.unshift.apply(this._queue, arguments)
}

queue = new Queue()
queue.add(1,2,3)

queue.next()复制代码

本文对你有帮助？欢迎扫码加入前端学习小组微信群：