目录
- 数据的重要性能【遍历、转换、生成、查找】
数组遍历
ES5中遍历有多少种办法？
- for循环
- forEach
- every
- for-in
ES6新增for-of
- 为什么es6要新增一个for-of？
- for-of不能间接遍历对象? —— 对于可迭代接口
- 劣势和毛病
将伪数组转换成数组
- 什么是伪数组？
- ES5的转换
- ES6的转换
创立新数组
- ES5
ES6
- Array.from
- Array.of
- Array.prototype.fill
数组中查找元素
- ES5
ES6
- Array.prototype.find
- Array.prototype.findIndex
函数参数
- Array.from(arrayLike,mapFn,thisArg)
- Array.of(element0[,element1...])
- Array.fill(value,start,end)
- Array.find(callback[, thisArg])
- Array.findIndex(callback[, thisArg])
- ES6-ES10学习幅员
数据的重要性能【遍历、转换、生成、查找】
数组遍历
ES5中遍历有多少种办法？
const arr = [1,2,3,4,5]for循环
for (let i = 0;i < arr.length; i++) { console.log(arr[i]) // 1 2 3 4 5}forEach
数组遍历办法
arr.forEach(function(item){ console.log(item) //1 2 3 4 5})代码简洁上看，forEach比for循环写法要简洁。
然而forEach不反对reak和continue，每个元素必须遍历到
// for循环能够应用break管制遍历进行for (let i = 0;i < arr.length; i++) { if(arr[i] === 2){ break } console.log(arr[i]) // 1}// for循环能够应用continue管制遍历跳过for (let i = 0;i < arr.length; i++) { if(arr[i] === 2){ continue } console.log(arr[i]) // 1 3 4 5}//forEach不反对break和continuearr.forEach(function(item){ if(item === 2) { break // or continue 都会报错 Unsyntactic break 语法不反对 } console.log(item)})arr.forEach(function(item){ if(item === 2) { return false //跳过本此循环 相似continue } console.log(item) // 1 3 4 5})every
数组遍历办法
arr.every(function(item){ console.log(item) // 1})// every继不持续遍历取决于返回值，为true则持续遍历，false退出。默认是false// 如果要全副遍历实现 须要返回truearr.every(function(item){ console.log(item) // 1 2 3 4 5 return true})// 能够通过返回的true or false 来管制循环arr.every(function(item){ if(item === 2) { return false //相当于for循环中的break } console.log(item) // 1 return true})for-in
for-in自身是未object遍历的，而不是为数组。尽管能够遍历数组，然而有瑕疵。
for-in中能够应用continue和break，然而不反对写return，会报错Illegal return statement
// 之所以数组能够用for-in取遍历// 是因为1.数组是对象的一种 2.数组是可遍历的for (let index in arr) { console.log(index, arr[index])}// 0 1// 1 2// 2 3// 3 4// 4 5//瑕疵一：// 因为arr是一个对象，所以能够定义属性并赋值arr.a = 8for (let index in arr) { console.log(index, arr[index])}// 再次进行遍历// 0 1// 1 2// 2 3// 3 4// 4 5// a 8 这个时候a不是索引，而是字符串，如果这里咱们还是认为遍历之后只是返回索引就容易呈现bug//瑕疵二：for(let index in arr) { if(index === 2) { continue } console.log(index, arr[index])}// 0 1// 1 2// 2 3// 3 4// 4 5//为什么能够应用continue然而continue却没有起作用//因为这个时候index是字符串而不是索引//解决办法一：只判断值，不判断类型for(let index in arr) { if(index == 2) { continue } console.log(index, arr[index])}// 0 1// 1 2// 3 4// 4 5//解决办法二：将index隐式转化成数字类型for(let index in arr) { if(index * 1 === 2) { continue } console.log(index, arr[index])}// 0 1// 1 2// 3 4// 4 5for-of(ES6新增)
// item不是下标，间接是值，且能够应用break终止循环for(let item of arr) { console.log(item) // 1 2 3 4 5}为什么es6要新增一个for-of？
要判断一个对象是不是可遍历的，不能说其是不是一个数组 or Object。ES6容许用户自定义数据结构，这种数据结构既不是数组，也不是Object，然而都是可遍历的。这种数据结构进行遍历，不能用数组的也不能用for-in，就须要新增一种for-of去遍历
举例子：
// 定义一个数据结构，想要遍历拿到类别中的最低值const Price = { A: [1.5, 2.3, 4.5], B: [3, 4, 5], C: [0.5, 0.8, 1.2]}for (let key in Price) { console.log(key, Price[key]) // [1.5, 2.3, 4.5] // [3, 4, 5] // [0.5, 0.8, 1.2]}// 应用for-in只能返回数组，无奈间接把三个最低值遍历进去for-of不能间接遍历对象? —— 对于可迭代接口
for-of能够用来遍历Set构造和Map构造，然而不能够间接遍历object，因为其不是可遍历的对象，Iterable接口没有实现。
上面看一下：数组、Set和Map的原型对象上有迭代器
对象办法下面没有
那么咱们调用一下数组下面的iterator办法
const arr = ['foo', 'bar', 'baz']console.log(arr[Symbol.iterator]())// 返回一个iterator的对象，其原型对象下面有next办法// Array Iterator {} // __proto__: Array Iterator// next: ƒ next() // Symbol(Symbol.toStringTag): "Array Iterator"// __proto__: Objectconst iterator = arr[Symbol.iterator]()console.log(iterator.next()) // { value: 'foo', done: false }console.log(iterator.next()) // { value: 'bar', done: false }console.log(iterator.next()) // { value: 'baz', done: false }console.log(iterator.next()) // { value: undefined, done: true }能够看到for-of外部的循环规定，外面有一个迭代器。只有对象能够实现Iterable接口就能够应用for-of进行循环。上面对一个对象进行可迭代革新。
劣势和毛病
| 循环形式 | 劣势 | 毛病 | 特点 |
|---|---|---|---|
| for循环 | 反对break和continue | 不反对return | |
| forEach | 写法比for简洁明了 | 全副遍历，不反对break和continue | return false相当于continue |
| every | 能够反对相似for的break和continue | ||
| for-in | 能够遍历object | 遍历数组的时候存在瑕疵 | 不反对return |
| for-of(ES6新增) | 能够遍历除数组和object之外可遍历的数据结构，反对break和continue | 不反对return |
- return只能用在函数体内，呈现在代码的任何中央都会报错
将伪数组转换成数组
什么是伪数组？
简略了解：
具备一些数组的个性：可遍历、有长度。然而不能间接调用数组的API，相似于 arguments 和 DOM nodeList。
严格了解：
- 依照索引形式存储数据
- 具备length属性
{0:'2',1:'b',length:2} 这种类型都能够称之为伪数组
为什么要将伪数组转换成数组？
如果想要应用数组的API，就须要将伪数组转换为数组
ES5的转换
let args = [].slice.call(arguments) //collection// arguments 只能在函数体内应用// ES6曾经废除arguments的应用let imgs = [].slice.call(document.querySelectorAll('img')) // NodeListES6的转换
Array.from
let args = Array.from(arguments)let imgs = Array.from(document.querySelectorAll('img'))大抵说一下Array.from这个函数
Array.from(arrayLike,mapFn,thisArg)<br/>
第一个参数：伪数组，必须<br/>
第二个参数：遍历函数，非必须<br/>
第三个函数：this对象，非必须
举一个例子：
初始化一个长度为5的数组
//ES5 let array = Array(5)array.forEach(function (item) { item = 1})console.log(array) // [empty × 5] forEach只会遍历存在的元素//应用for循环能够遍历，然而仍旧是先申明，后赋值for (let i = 0, len = array.length; i < len; i++) { array[i] = 1}console.log(array) // [1,1,1,1,1]// 先将数组转化为5个空字符串数组，而后每个遍历赋值let arr = Array(6).join(' ').split('').map(item => 1)console.log(array) // [1,1,1,1,1]// ES6//应用Array.from能够达到初始化并填充的成果let array = Array.from({ length: 5 }, function () { return 1 })console.log(array) // [1,1,1,1,1]// 下面之所以第一个参数能够传{ length: 5 }，是因为第一个参数应该传伪数组//应用Array.fill能够疾速实现初始化并填充let array = Array(5).fill(1)console.log(array) //[1,1,1,1,1]创立新数组
ES5
let array = Array(5)let array = ['', ''] //无奈定义长度，只能每个都初始化为空字符串ES6
Array.from
let array = Array.from({ length: 5 })Array.of
let array = Array.of(1,2,3,4,5) //参数是依此放进去的元素，能够一个参数能够多个console.log(array) //[1,2,3,4,5]Array.prototype.fill
let array = Array(5).fill(1) //参数是依此放进去的元素，能够一个参数能够多个console.log(array) //[1,1,1,1,1]Array.fill(value,start,end)<br/>
第一个参数：填充值<br/>
第二个参数：起始地位，默认为数组的开始<br/>
第三个函数：完结地位，默认为数组的完结<br/>
[start,end)
let array = [1, 2, 3, 4, 5]console.log(array.fill(8, 2, 4)) // [1,2,8,8,5]数组中查找元素
ES5
查找元素包含看元素在不在数组中，也包含依据某个条件去筛选。
// 一let array = [1, 2, 3, 4, 5]let find = array.filter(function (item) { return item === 3})console.log(find) // [3]// 能找到没找到都返回一个数组，依据数组的长度判断数组中有或者没有元素let find = array.filter(function (item) { return item % 2 === 0})console.log(find) // [2,4]// 如果数组中数据特地大，只是要有还是没有，并不要所有的数据// 二// 应用every也能够进行判断然而咱们须要额定定义变量let isExtarray.every(function (item) { if (item === 3) { isExt = item return false } return true})console.log(isExt) // 3ES6
Array.prototype.find
找到查找元素返回其值，找不到返回undefined
let array = [1, 2, 3, 4, 5]let find = array.find(function(item){ return item === 3})console.log(find) // 2---以后值let find1 = array.find(function(item){ return item === 6})console.log(find1) // undefined---没有找到let find2 = array.find(function(item){ return item % 2 === 0})console.log(find2) // 2---找到2就不再持续找了Array.prototype.findIndex
找到查找元素返回其索引地位，找不到返回-1
let find = array.findIndex(function(item){ return item % 2 === 0})console.log(find) // 1---索引地位函数参数
Array.from(arrayLike,mapFn,thisArg)
第一个参数：伪数组，必须<br/>
第二个参数：遍历函数，非必须<br/>
第三个函数：this对象，非必须
Array.of(element0[,element1...])
参数：任意个参数，依此成为数组的元素
Array.fill(value,start,end)
第一个参数：填充值<br/>
第二个参数：起始地位，默认为0<br/>
第三个函数：完结地位，默认为this.length<br/>
[start,end)
Array.find(callback[, thisArg])
第一个参数：回调函数，接管三个参数，element、index、array<br/>
第二个参数：this对象
Array.findIndex(callback[, thisArg])
第一个参数：回调函数，接管三个参数，element、index、array<br/>
第二个参数：this对象