Map()函数

let arr = [

{age:1,name:"小里"}，

{age:1,name:"小里"}，

{age:1,name:"小里"}，

]

let result = arr.map(obj=>return obj.name)

此时即生成了一个由name字段组成的新数组

反引号(`)的作用

语法

ES6 模板字符串(Template String)是增强版的字符串，用反引号(`)标识，它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量

"hello" + str + "world !"

`hello ${str} world !`

[`value${key}`]

JS数组技巧

1. 数组去重

这里只展示两种可行的方法，一种是使用.from()方法，第二种是使用扩展运算符...

let fruits = ["banana","apple","orange","watermelon","apple","orange","grape","apple"]

// 第一种方法

let uniqueFruits =Array.from(new Set(fruits))

//第二种方法

let uniqueFruits2 = [...new Set(fruits)]

2 .替换数组中的特定值

我们可用使用.splice(start, value to remove, valueToAdd)，并在其中传递三个参数，这些参数指定了要在哪里开始修改，要更改多少个值以及新增加的值。

let fruits = ["banana","apple","orange","watermelon","apple","orange","grape","apple"]

fruits.splice(0,2,"potato","tomato")

console.log(fruits)// returns ["potato", "tomato", "orange", "watermelon", "apple", "orange", "grape", "apple"]

3. 不使用.map()映射数组

也许每个人都知道数组的.map()方法，但是可以使用另一种方案来获得相似的效果，并且代码非常简洁。这里我们可用.from()方法。

let friends = [

{name:'John',age:22},

{name:'Peter',age:23},

{name:'Mark',age:24},

{name:'Maria',age:22},

{name:'Monica',age:21},

{name:'Martha',age:19},

]

let friendsNames =Array.from(friends, ({name}) => name)

console.log(friendsNames)//returns ["John", "Peter", "Mark", "Maria", "Monica", "Martha"]

4. 清空数组

您是否有一个包含所有元素的数组，但出于任何目的都需要对其进行清理，并且不想一个一个地删除元素？只需一行代码即可完成。要清空数组，您需要将数组的长度设置为0，仅此而已！

let fruits = ["banana","apple","orange","watermelon","apple","orange","grape","apple"];

fruits.length =0;

console.log(fruits);// returns []

5. 数组转对象

碰巧我们有一个数组，但是出于某种目的，我们需要一个具有此数据的对象，而将数组转换为对象的最快方法是使用众所周知的扩展运算符...。

let fruits = ["banana","apple","orange","watermelon"];

let fruitsObj = {...fruits};

console.log(fruitsObj)// returns {0: “banana”, 1: “apple”, 2: “orange”, 3: “watermelon”, 4: “apple”, 5: “orange”, 6: “grape”, 7: “apple”}

6. 用数据填充数组

在某些情况下，当我们创建一个数组时，我们想用一些数据填充它，或者我们需要一个具有相同值的数组，在这种情况下，.fill()方法提供了一种简单而干净的解决方案。

let newArray =newArray(10).fill('1')

console.log(newArray)// returns [“1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”]

7. 合并数组

除了使用.concat()方法，我们也可以使用扩展运算符...。

varfruits = [“apple”, “banana”, “orange”];

varmeat = [“poultry”, “beef”, “fish”];

varvegetables = [“potato”, “tomato”, “cucumber”];

varfood = […fruits, …meat, …vegetables];

console.log(food);// [“apple”, “banana”, “orange”, “poultry”, “beef”, “fish”, “potato”, “tomato”, “cucumber”]

8. 求数组的交集

这也是您在任何Javascript面试中面临的最普遍的挑战之一，因为它展示了你是否可以使用数组方法以及你的逻辑是什么。

var numOne = [0,2,4,6,8,8];

var numTwo = [1,2,3,4,5,6];

var duplicatedValues = [...new Set(numOne)].filter(item=>numTwo.includes(item))

console.log(duplicatedValues);// returns [2, 4, 6]

方法2

var a = new Set([1, 2, 3]);var b = new Set([4, 3, 2]);var intersect = new Set([...a].filter(x => b.has(x))); // {2, 3}

9. 数组并集

var a = new Set([1, 2, 3]);var b = new Set([4, 3, 2]);var union = new Set([...a, ...b]); // {1, 2, 3, 4}

10.数组差集

var a = new Set([1, 2, 3]);var b = new Set([4, 3, 2]);var difference = new Set([...a].filter(x=> !b.has(x))); // {1}

11. 从数组中删除虚值

首先，让我们定义虚值。在Javascript中，虚值有false, 0, „”, null, NaN, undefined。现在，我们可以找到如何从数组中删除此类值。为此，我们将使用.filter（）方法。

var mixedArr = [0, “blue”, “”,NaN,9,true,undefined, “white”,false];

var trueArr = mixedArr.filter(Boolean);

console.log(trueArr);// returns [“blue”, 9, true, “white”]

12. 从数组中获取随机值

有时我们需要从数组中随机选择一个值。为了以简单，快速和简短的方式创建它并保持我们的代码整洁，我们可以根据数组长度获取随机索引号。让我们看一下代码：

var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];

var randomColor = colors[(Math.floor(Math.random() * (color.length)))]

13. 反转数组

var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];

var reversedColors = colors.reverse();

console.log(reversedColors);// returns [“brown”, “black”, “yellow”, “orange”, “purple”, “pink”, “navy”, “green”, “white”, “blue”]

14. .lastIndexOf（）方法

在Javascript中，有一个有趣的方法，它允许查找给定元素的最后一次出现的索引。例如，如果我们的数组有重复的值，我们可以找到它最后一次出现的位置。让我们看一下代码示例：

var nums = [1,5,2,6,3,5,2,3,6,5,2,7];

var lastIndex = nums.lastIndexOf(5);

console.log(lastIndex);// returns 9

15. 对数组中的所有值求和

var nums = [1,5,2,6];

var sum = nums.reduce((x, y) =>x + y);

console.log(sum);// returns 14

16. 数组对象去重

let person = [

     {id: 0, name: "小明"},

     {id: 1, name: "小张"},

     {id: 2, name: "小李"},

     {id: 3, name: "小孙"},

     {id: 1, name: "小周"},

     {id: 2, name: "小陈"},

];

let obj = {};

let peon = person.reduce((cur,next) => {obj[next.id] ? "" : obj[next.id] = true && cur.push(next);  return cur;},[])

//设置cur默认类型为数组，并且初始值为空的数组

console.log(peon);

// (4) [{…}, {…}, {…}, {…}]0: {id: 0, name: "小明"}1: {id: 1, name: "小张"}2: {id: 2, name: "小李"}3: {id: 3, name: "小孙"}length: 4__proto__: Array(0)

17.数组里是否包含某元素

array.includes(searcElement[,fromIndex])

此方法判断数组中是否存在某个值，如果存在返回true，否则返回false

var arr=[1,2,3,4];

if(arr.includes(3))

console.log("存在");

else

console.log("不存在");

1. find()与findIndex()

find()方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

[1,2,5,-1,9].find((n) =>n <0)

//找出数组中第一个小于 0 的成员

// -1

find()方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。

findIndex()方法的用法与find()方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

[1,2,5,-1,9].findIndex((n) =>n <0)

//返回符合条件的值的位置（索引）

// 3

2. filter()

filter()方法使用指定的函数测试所有元素，并创建一个包含所有通过测试的元素的新数组。

filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或等价于 true 的值的元素创建一个新数组。那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。filter 不会改变原数组。

vararr = [10,20,30,40,50]

varnewArr = arr.filter(item=>item >30);

console.log(newArr);//[40, 50]

//数组去重

vararr = [1,2,2,3,4,5,5,6,7,7,8,8,0,8,6,3,4,56,2];vararr2 = arr.filter((x, index,self)=>self.indexOf(x) === index)console.log(arr2);// [1, 2, 3, 4, 5, 6, 7, 8, 0, 56]

3. forEach()

遍历数组全部元素，利用回调函数对数组进行操作，自动遍历整个数组，且无法break中途跳出循环，不可控，不支持return操作输出，return只用于控制循环是否跳出当前循环。

回调有三个参数：第一个参数是遍历的数组内容，第二个参数是对应的数组索引，第三个参数是数组本身。

vararr = [1,2,3,4,5,] ;

arr.forEach(function(item,index){

console.log(item);

});

这个方法是没有返回值的，仅仅是遍历数组中的每一项，不对原来数组进行修改；

但是可以自己通过数组的索引来修改原来的数组；

varary = [12,23,24,42,1];

varres = ary.forEach(function(item,index,input){

input[index] = item*10;

})

console.log(res);//--> undefined;

console.log(ary);//--> 通过数组索引改变了原数组；

4. some() 和 every()

every()与some()方法都是JS中数组的迭代方法，只返回布尔值。

every()

判断数组中是否每个元素都满足条件

只有都满足条件才返回true；

只要有一个不满足就返回false；

some()

判断数组中是否至少有一个元素满足条件

只要有一个满足就返回true

只有都不满足时才返回false

// 判断数组arr1是否全是偶数// 判断数组arr2是否至少有一个偶数

vararr1=[1,2,3,4,5];

vararr2=[1,4,6,8,10];

console.log(

arr1.every(function(value, index, array){

returnvalue %2==0;

})

);// false

console.log(

arr2.some(function(value, index, array){

returnvalue %2==0;

})

);// true

5. map()

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组。

array.map(function(currentValue,index,arr), thisValue)

vardata = [1,2,3,4];

vararrayOfSquares = data.map(function(item){//接收新数组

returnitem * item;

});

alert(arrayOfSquares);// [1, 4, 9, 16]

6. includes()

includes()方法用来判断一个数组是否包含一个指定的值，如果是则返回true,否则false.

arr.includes(searchElement)

arr.includes(searchElement, fromIndex)

参数说明

searchElement必须。需要查找的元素值。

fromIndex可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0

let isAudit = carInfo.plan.map(item => item.processId).includes('c4747cd45f855d1d00108b500a6be152')

let site = ['runoob','google','taobao'];

site.includes('runoob'); //true

site.includes('baidu'); //false

从某个位置开始搜索

site.includes('runoob',2); //false

site.includes('google',1); //true

ES6 语法自我总结(不仅限于ES6)