ES6 数组转换及查找

JSON是一种轻量级的数据交换格式,也是我们前端工程师们常用的数据类型,通过接口访问到的json数组,我们可以很快的渲染到页面中.

Array.from 转换成数组

let beline = {
  0 : 'beline',
  1 : 92,
  2 : 'beline.com',
  length: 3
}
let arr =  Array.from(beline)
console.log(arr)

我们使用ES6的Array.from()函数,把json数组转化成一个数组对象.页面输出结果为:

 

image.png

Array.of 字符串转换成输入

在工作中,如果接口返回的是一个字符串,我们需要把里面的值转换成数组

let data  = '3,4,5,6'
let arr = Array.of(data)
console.log(arr) 

页面输出结果为

 

image.png

find() 实例方法

实例方法就是指数组本身就带有的方法,不需要调用Array对象.可以直接在数组上使用,find()方法可以查找数字和字符串,如果return的内容找不到,返回undefined.

// find() 实例方法
let arr = [1,2,3,4,5,6,7,8]
let nameList = ['beline', 'tang', 'tom']
/**
 * find()
 * value 查找的值
 * index 索引
 */
// 数字查找
console.log(arr.find((value, index, arr) => {
  return value > 5   // 6
}))

// 字符串查找
console.log(nameList.find((value, index, arr) => {
  return value ==='beline'   // beline
}))

// index 查找
console.log(nameList.find((value, index, arr) => {
  return index === 1   // tang
}))

fill() 替换数组内容

通过fill()方法可以替换数组中的内容,这里需要传入3个参数

• value 需要替换的新的内容
• indexStr 需要被替换的数组的开始下标
• indexEnd 需要被替换的数组的结束下标

/**
 * fill(value, indexStr, indexEnd) 数组替换
 * 1. value 需要替换的新的内容
 * 2. indexStr 需要被替换的数组的开始下标
 * 3. indexEnd 需要被替换的数组的结束下标
 */
// 替换下标为1的数组内容
 let arr = ['1', '2', '3']
 arr.fill('belinetang', 1, 2)
 console.log(arr) // ["1", "belinetang", "3"]

数组循环

• for(of)
  我们可以通过es6提供的for(of) 的形式便利数组

/**
 * 数组循环
 */
let arr = ['beline', 'tang', 'tom']
// 便利数组
for(let val of arr) {
  console.log(val)
}
// 输出下标
for(let val of arr.keys()) {
  console.log(val)
}
// 输出下标和值同时输出
for(let val of arr.entries()) {
  console.log(val)
}

页面输出结果:

 

image.png

 

我们会发现上面这种方式并不是我们经常需要的数组便利形式,我们希望通过结构自己控制的方式进行展示,那么我们可以通过下面的方式进行:

/**
 * 数组循环
 */
let arr = ['beline', 'tang', 'tom']
// 输出下标和值同时输出
for(let [index, val] of arr.entries()) {
  console.log(`编号:${index}号=====>${val}`)
}

页面输出结果:

 

image.png

注意: 这里需要注意一点的是let [index, val]的顺序必须是前面是下标,后面是值

• 数组循环 map()
  另外,我们还可以使用map()方法来便利数组,其好处是代码更简单了.通过数组调用map方法,然后通过两个参数(一个参数也可以,就只用到val的值的时候只需要一个参数)来便利数组.具体如下

/**
 * 数组循环 - map
 */
let arr = ['beline', 'tang', 'tom']
arr.map((val, index) => {
  console.log(`编号:${index}号=====>${val}`)
})

注意: 这里传入的参数 值是放在第一个的,下标作为第二个参数,和前面的相反.

• 数组循环 forEach
  与map方法类似,forEach也可以达到同样的效果

/**
 * 数组循环 - forEach
 */
let arr = ['beline', 'tang', 'tom']
arr.forEach((val, index) => {
  console.log(`编号:${index}号=====>${val}`)
})

手动循环 entries()

在项目中偶尔需要用到手动循环数组的情况,就可以通过以下方式进行,多用于不规则循环

/**
 * 手动循环 - entries
 */
let arr = ['beline', 'tang', 'tom']
let list = arr.entries();
console.log(list.next().value);
console.log('----------------');
console.log(list.next().value);
console.log('****************');
console.log(list.next().value);

... 方式给函数传值

/**
 * ES6 语法 ...
 * 数组给function传值
 */
let arr = ['beline', 'tang', '哟西大人']

function obj(a,b,c) {
  console.log(a, b, b)
}
obj(...arr)

页面输出结果:

 

image.png

in 的用法

在数组中遇到没有内容的情况,但是进行数据页面渲染的时候,就会出现问题,这个时候我们就可以用到in

/**
 * ES6 语法 in
 * 通过in来判断数组下是否有内容
 */
let arr = ['beline', , 'tang']
console.log(0 in arr ) // true
console.log(1 in arr ) // false
console.log(2 in arr ) // true