ES 6 Series 5: Extensions to arrays

“Code Tailor “provides technology related information and a series of basic articles for front-end developers. Follow the wechat public account” Rookie of Xiaohe Mountain “to get the latest articles.

preface

Before we start, we want to let you know that this article is a summary of the chapter “Expanding Arrays” in ECMAScript6 introduction by Yvong Nguyen. If you already know the following items, you can skip this section and go straight to the topic exercises

• Extended operators and their applications
• Common methods for adding arrays

If you are a little bit forgotten about some parts, 👇🏻 is ready for you!

Learning links

Array extension learning

Summary to summarize

Extended operator

The spread operator (spread) is three points (…) . It is like the inverse of the REST argument, turning an array into a comma-separated sequence of arguments.

console.log(... [1.2.3]) / / 1 2 3

console.log(1. [2.3.4].5) // 1, 2, 3, 4, 5

// This operator is mainly used for function calls
function add(x, y) {
  return x + y
}

const numbers = [4.38] add(... numbers)/ / 42
Copy the code

Extend the application of operators

1. Copy the array

// ES5
const a1 = [1.2]
const a2 = a1.concat()

a2[0] = 2
a1 / / [1, 2]

// ES6
const a1 = [1.2]
/ / write one
const a2 = [...a1]
/ / write two
const [...a2] = a1
Copy the code

2. Merge arrays

const arr1 = ['a'.'b']
const arr2 = ['c']
const arr3 = ['d'.'e']

// Merge array of ES5
arr1.concat(arr2, arr3)
// [ 'a', 'b', 'c', 'd', 'e' ]

// Merge array of ES6
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
Copy the code

3. The string

Extension operators can also turn strings into true arrays.

; [...'hello']
// [ "h", "e", "l", "l", "o" ]
Copy the code

Commonly used method

• Array.from(): Used to convert array-like objects and traversable objects into true arrays

let arrayLike = {
  0: 'a'.1: 'b'.2: 'c'.length: 3,}let arr2 = Array.from(arrayLike) // ['a', 'b', 'c']
Copy the code

Array.from can also take a second argument, similar to the map method of arrays, that is used to process each element and place the value in the returned Array.

Array.from(arrayLike, (x) = > x * x)
/ / is equivalent to
Array.from(arrayLike).map((x) = > x * x)

Array.from([1.2.3].(x) = > x * x)
/ / [1, 4, 9]
Copy the code

• join(): assembles the elements of the array into a string toseparatorIf omitted, the default comma is used. The method takes only one argument: the delimiter.

var arr = [1.2.3]
console.log(arr.join()) / / 1, 2, 3
console.log(arr.join(', ')) // 1, 2, 3
Copy the code

• push(): accepts any number of arguments, appends them to the end of the array, and returns the length of the array.
• pop(): Removes the last item from the end of the array, reducing the value of the arraylengthValue, and then returns the removed item.

var arr = ['Kang'.'Ming'.'Wang']

var count = arr.push('Li')
console.log(count) / / 4
console.log(arr) // ["Kang", "Ming", "Wang", "Li"]

var item = arr.pop()
console.log(item) // Li
console.log(arr) // ["Kang", "Ming", "Wang"]
Copy the code

• map()The: method creates a new array with the result that each element in the array is the return value of a call to the supplied function once.

const array1 = [1.4.9.16]

// pass a function to map
const map1 = array1.map((x) = > x * 2)

console.log(map1)
// expected output: Array [2, 8, 18, 32
Copy the code

• filter(): “filter” function, each item in the array runs the given function, returns an array that meets the filter criteria.

const words = ['spray'.'limit'.'elite'.'exuberant'.'destruction'.'present']

const result = words.filter((word) = > word.length > 6)

console.log(result)
//["exuberant", "destruction", "present"]
Copy the code

• reduce()The: method performs a Reducer function (in ascending order) that you provide on each element in the array, summarizing its results into a single return value.

const array1 = [1.2.3.4]
const reducer = (accumulator, currentValue) = > accumulator + currentValue

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer))
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5))
// expected output: 15
Copy the code

The reducer function receives four parameters:

• Accumulator (ACC)
• Current Value (CUR)
• Current Index (IDX)
• Source Array (SRC)

The return value from your Reducer function is assigned to the accumulator and is remembered in each iteration of the array and eventually becomes the final single result value.

The title self-test

What is the output of the following code?

function f(x = 0, y = 0) {
  console.log(x + y)
}
const args = [0.1]
f(-1. args,2. [3])
Copy the code

• A: - 1
• B: 0
• C: 2
• D: 5

What is the output of the following code?

const a = []
a.push()
a.push(' ')
a.push(null)
a.push(NaN)
a.push(0)
a.push('0')
console.log(a.join(' '))
Copy the code

• A: undefined
• B: NaN00
• C: undefinedNaN00
• D: nullNaN00

Write a function to find the sum of values greater than 100 in the array

const array = [68.90.389.192.102.56]
const arrTest = (arr) = > {
  let array1= arr.filter((item) = >item>100)// Filter out all values greater than 100
  return array1.reduce((item, sum) = > sum + item)// add values greater than 100
}

console.log(arrTest(array));/ / 683
}
Copy the code

ES 6 series array extension, we end here, thank you for your support to the author! Your attention and praise will be the strongest motivation for us to move forward! Thank you!