JavaScript 数组的使用(Array) Date日期对象的使用
前端 JavaScript ES5 学习目录
6. JavaScript IIFE 面向对象 函数中的this
注意我们的每一种的数据类型的话，我们都是会有一些增删改查的操作的，这个也是对数据进行处理的操作的四大模式
所以说。学习这些内置的方法的话，是很利于我们的后续的开发体验的，但是后面还是需要自己抽离方法来使用的
后面我们实现算法的时候，我们做的就有：
冒泡排序 插入排序 选择排序 堆排序 希尔排序 快速排序
编程 = 程序 + 算法
JavaScript 数组Array
注意我们的任何的数据类型都是具备了增删改查的操作的，学习思路是十分简单的清晰的！！！
-
首先我们的以前的数组集是使用的我们的对象来实现操作的我们的数据
- 但是使用对象是有一些很麻烦的一些地方的
- 就是我们使用我们的对象实现我们的操作是需要通过我们的键来实现一些操作的，存储数据的格式是我们的键值对实现的保存
- 但是只不过通过我们的数组就可以实现通过我们的下标（
index）来实现操作我们的数据了 - 我们的数组的话是一种有序的结构
-
创建数组
-
通过
[]来实现创建数组（字面量创建数组）-
// 创建数组的方式，数组的每一个元素item都是具备自己的索引值的index var names = ["juwenzhang", "76433", "水逆信封"] var person = [ {name:"juwenzhang", age: 18}, {name:"76433", age: 18}, {name:"水逆信封", age: 18}, ] console.log(person[1].name) // 76433
-
-
通过
Array()构造器实现创建数组-
var arr01 = new Array() console.log(arr01) // [] var arr02 = new Array("123", "243", "534") console.log(arr02) // [ '123', '243', '534' ] var arr03 = new Array(5) console.log(arr03) // [ <5 empty items> ] console.dir(Array) - 可以实现通过我们的索引来实现获取我们的元素，但是索引是从 0 开始的
-
-
访问数组中的元素item
-
var arr01 = new Array("123", "243", "534") console.log(arr01[1]) // 243
-
-
改变数组中的元素item
-
arr01[1] = "7889" console.log(arr01[1]) // 7889
-
-
新增数组中的元素item
-
arr01[4] = "1001" console.log(arr01) // [ '123', '7889', '534', <1 empty item>, '1001' ]
-
-
删除数组中的元素item
-
// 就是直接实现使用我们的操作符就可以实现删除我们的元素 delete arr01(1) console.log(arr01) // [ '123', <1 empty item>, '534', <1 empty item>, '1001' ]
-
-
-
数组的新增以及删除的其他方法
-
实现在数组的尾部添加和删除元素
push方法，就是实现的是我们的在尾部添加元素pop方法，就是实现的是我们的在尾部实现删除元素-
var arr = [1, 2, 3, 4,] arr.push(5) console.log(arr) // [ 1, 2, 3, 4, 5 ] arr.pop() console.log(arr) // [ 1, 2, 3, 4 ]
-
实现在数组的头部添加和删除元素
unshift就是实现的是在数组的头部添加元素shift就是实现的是在数组中头部删除元素-
var arr = [1, 2, 3, 4,] arr.unshift(5) console.log(arr) // [ 5, 1, 2, 3, 4 ] arr.shift() console.log(arr) // [ 1, 2, 3, 4 ] - 了解过数据结构就可以知道一点，在首部添加以及删除元素实际上是比在尾部要慢很多的，这个就涉及到了我们的算法
-
实现在数组中的中间添加或者替换或者删除元素
splice(start, deleteElement, replaceElement)-
var arr = [1, 2, 3, 4,] /* 第一个参数就是实现的是我们的从哪个位置开始操作我们的元素 第二个参数就是决定了我们的删除元素的个数 第三个元素就是将我们删除的元素替换的元素有那些 */ // 删除元素 arr.splice(1, 1) console.log(arr) // [ 1, 3, 4 ] // 添加元素 arr.splice(1, 0, 7, 8, 9) console.log(arr) // [ 1, 7, 8, 9, 3, 4 ]
-
-
length 属性
- 我们是可以通过这个属性来实现获取我们的数组的长度的
-
var arr = [1, 2, 3, 4,] console.log(arr.length) // 4 // 我们是可以实现通过我们的修改我们的 length 属性实现我们的数组的扩容的操作的 // 实现清空数组的操作： arr.length = 0
-
数组的遍历
-
var arr = [1, 2, 3, 4,] // 使用普通的 for 循环实现遍历 for(var i = 0; i < arr.length; i++) { console.log(arr[i]) } // 使用 for...in... 实现数组的遍历 for(var index in arr){ console.log(arr[index]) } // 使用 for...of... 实现数组的遍历 for(var item of arr) { console.log(item) }
-
-
MDN文档推荐阅读
-
数组的其他方法
arr.slice(begin[, end])实现的就是截取我们的数组，但是不包含 end【类似于字符串中的 slice】arr.concat(arr01, arr02, arr03)实现的是将我们的数组实现拼接到一起，然后返回一个新的数组arr.join("-")就是实现将我们的数组中的元素实现以什么连接符实现连接起来
-
数组的高阶函数的使用
-
arr.find(callbackFn)- 内部实现的时候，里面的元素都会来调用这个函数，最终返回的是满足条件的第一个 item
-
var inventory = [ { name: "apples", quantity: 2 }, { name: "bananas", quantity: 0 }, { name: "cherries", quantity: 5 }, ]; var quantity = inventory.find(function(item, index){ console.log(item, index) }) /* 第一个参数就是每一个元素的本身， 第二个参数就是元素的下标 { name: 'apples', quantity: 2 } 0 { name: 'bananas', quantity: 0 } 1 { name: 'cherries', quantity: 5 } 2 */ var quantity = inventory.find(item => item.name === "bananas").quantity console.log(quantity) // 0 var arr = [1, 2, 3, 4, 5] var new_num = arr.find(item => item > 2) console.log(new_num) // 3
-
arr.forEach(callbackFn)- 实现的也是来遍历我们的数组，里面还是传入一个回调函数
-
var inventory = [ { name: "apples", quantity: 2 }, { name: "bananas", quantity: 0 }, { name: "cherries", quantity: 5 }, ]; /* 第一个参数就是实现的是我们的获取到数组中的每一个 item 第二个参数就是实现的是将我们的数组中每一个item对应的 index 实现遍历 第三个参数就是实现的是需要遍历的数组本身 都是可选的参数 */ inventory.forEach(function(item, index, arr) { console.log(item, index, arr) // 然后我们接下来就可以通过这个方法来实现对 item 进行操作 }) -
var inventory = [ { name: "apples", quantity: 2 }, { name: "bananas", quantity: 0 }, { name: "cherries", quantity: 5 }, ]; /** * 模拟 forEach 的版本一 * @param {Function} fn */ function MyForEach01(fn) { for(var i = 0; i < inventory.length; i++) { fn(inventory[i], i, inventory) } } MyForEach01(function(item, index, inventory) { console.log(item, index, inventory) }) /** * 模拟 forEach 的版本二，把数组作为参数实现传递 * @param {Function} fn * @param {Array} arr */ function MyForEach02(fn, arr) { for(var i = 0; i < arr.length; i++) { fn(arr[i], i, arr) } } MyForEach02(function(item, index, arr){ console.log(item, index, arr) }, inventory) /** * 模拟 forEach 的版本三，就是直接在我们的原型上面实现添加方法，实例方法的书写,源码就是这样实现的 * @param {Function} fn */ Array.prototype.MyForEach03 = function(fn) { for(var i = 0; i < this.length; i++) { fn(this[i], i, this) } } inventory.MyForEach03(function(item, index, arr) { console.log(item, index, arr) }) // 在我们的原型上面实现添加方法，我们就可以实现在所有的实例方法都是可以实现调用这个方法了 // 所以说我们后面的原型链一定掌握好，有很多帮助的
-
还可以了解的一些实例方法
-
arr.flat(Infinity)方法创建一个新的数组，并根据指定深度递归地将所有子数组元素拼接到新的数组中。 -
arr.filter(callbackFn)可以实现的就是将我们的一些满足条件的item全部实现返回 -
arr.map(callbackFn)方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。 -
arr.sort(callbackFn)实现的就是将我们的数组进行排序，可以通过默认的排序，或者通过里面的callback作为条件 -
arr.reduce()就是可以实现的是我们的将数组中的 item 实现累加 -
var inventory = [ { name: "apples", quantity: 2 }, { name: "bananas", quantity: 0 }, { name: "cherries", quantity: 5 }, ]; // 开始实现使用我们其他的高阶方法 // 1.arr.forEach(callbackFn) 就是实现的是我们的对数组进行遍历 inventory.forEach((item, index, arr) => console.log(item, index, arr)) // 2.arr.filter(callbackFn) 就是实现的是我们的对数组进行过滤的，括号里面就是我们的过滤条件 var new_arr = inventory.filter(item => item.quantity % 2 === 0) console.log(new_arr) // [ { name: 'apples', quantity: 2 }, { name: 'bananas', quantity: 0 } ] // 3.arr.map(callbackFn) 就是实现的是对数组进行映射 var new_arr01 = inventory.map(item => item.quantity += 10) console.log(new_arr01) // [ 12, 10, 15 ] // 4.arr.reduce(callbackFn) 相当于就是对数组的累计操作，0 就是我们的初始化值 var arr = [1, 3, 7, 4, 9] var num = arr.reduce(function(preValue, item) { return preValue + item }, 0) console.log(num) // 24 // 注意我们的这些方法是可以直接实现链式调用的 var arr01 = [11, 22, 33, 24, 55, 10] // 首先我们需要实现的是获取数组中的偶数，然后所有偶数的平方实现相加 var total_num = arr01.filter(item => item % 2 === 0) .map(item => item * item) .reduce((preValue, item) => preValue + item, 0) console.log(total_num) // 1160
-
-
JavaScript 中的Date的使用
-
Date对象就是实现的是我们的表示以及处理我们的时间的一个对象
-
使用Dae对象的方式：
new Date()new Date(value)new Date(dateString)new Date().toISOString()-
var date = new Date() console.log(date.toISOString()) // 常用的 console.log(date.toDateString()) // 开始实现获取年份 console.log(date.getFullYear()) // 开始实现获取我们的月份,注意我们的月份是从 0 开始的 console.log(date.getMonth() + 1) // 开始实现获取我们的日期 console.log(date.getDate()) // 开始实现获取我们的小时 console.log(date.getHours()) // 开始实现实现获取我们的分钟 console.log(date.getMinutes()) // 开始实现获取我们的秒 console.log(date.getSeconds()) // 开始实现获取我们的毫秒 console.log(date.getMilliseconds()) // 实现获取周几 console.log(date.getDay())
- 这个部分简单的过一过就行了，不用太认真的，会用就行了
