js函数进阶和迭代器

一、将函数将函数赋值给一个变量

1.将函数赋值给一个变量

In JavaScript, functions are first class objects. This means that, like other objects you’ve encountered, JavaScript functions can have properties and methods.

一等对象 first-class object（第一类对象）有如下“特权”：

• 可以被赋值给一个变量
• 可以嵌入到数据结构中
• 可以作为参数传递给函数
• 可以作为值被函数返回

看个例子：

const checkThatTwoPlusTwoEqualsFourAMillionTimes = () => {
  for(let i = 1; i <= 1000000; i++) {
    if ( (2 + 2) != 4) {
      console.log('Something has gone very wrong :( ');
    }
  }
};

// Write your code below
const isTwoPlusTwo = checkThatTwoPlusTwoEqualsFourAMillionTimes;
isTwoPlusTwo();
console.log(isTwoPlusTwo.name);

checkThatTwoPlusTwoEqualsFourAMillionTimes

这个例子中，原函数的名字太长，所以我们把这个函数赋给了另一个变量，就像把一个变量赋值给另一个变量一样。

Notice how we assigncheckThatTwoPlusTwoEqualsFourAMillionTimes without parentheses as the value to the isTwoPlusTwo variable. We want to assign the value of the function itself, not the value it returns when invoked.

我们可以用第二个名字调用第一个函数，用第二个名字调用第一个函数时，传参的方式和正常的传参没有区别。

name属性将返回原函数的名称。

2.将函数作为一个参数

js中的函数可以接受另一个函数作为参数，这样的函数叫做A higher-order function。

const higherOrderFunc = param => {
  param();
  return `I just invoked ${param.name} as a callback function!`
}
 
const anotherFunc = () => {
  return 'I\'m being invoked by the higher-order function!';
}
 
higherOrderFunc(anotherFunc);

在这个例子中，higherOrderFunc接受了一个叫做param的参数，这个参数没有带括号，所以我们知道这个参数是一个函数。

然后我们在higherOrderFunc中调用param（），实际上就是调用传进来的那个函数，在这个例子里，param()=anotherFunc（），实际上相当于在higherOrderFunc中对anotherFunc重命名。

3.review

• Abstraction allows us to write complicated code in a way that’s easy to reuse, debug, and understand for human readers.

• We can work with functions the same way we work with any other type of data, including reassigning them to new variables.

• JavaScript functions are first-class objects, so they have properties and methods like any other object.

• Functions can be passed into other functions as parameters.

• A higher-order function is a function that either accepts functions as parameters, returns a function, or both.

二、iterater

1.foreach

.forEach() will execute the same code for each element of an array.

const fruits = ['mango', 'papaya', 'pineapple', 'apple'];

function func(fruit){
 console.log(fruit);
}
fruits.forEach(func);
// Iterate over fruits below

在这个例子中，我们对数组fruits调用foreach方法，foreach的参数是一个函数，这个函数定义了对数组中每个元素的动作。

在这个例子中，调用的这个函数func需要一个参数，foreach方法会自动把数组中的每个元素当作参数传入func函数，然后执行

foreach方法的返回值不确定

如果你不想写一个新函数，也可以直接在括号里定义对数组的操作：

groceries.forEach(groceryItem => console.log(groceryItem));

2.map

.map() works in a similar manner to .forEach()— the major difference is that .map() returns a new array.

const animals = ['Hen', 'elephant', 'llama', 'leopard', 'ostrich', 'Whale', 'octopus', 'rabbit', 'lion', 'dog'];

// Create the secretMessage array below
const secretMessage = animals.map(animal => animal[0]);

console.log(secretMessage.join(''));

const bigNumbers = [100, 200, 300, 400, 500];

// Create the smallNumbers array below
const smallNumbers = bigNumbers.map(num => num/100);

console.log(smallNumbers)

HelloWorld
[ 1, 2, 3, 4, 5 ]

 3.filter() Method

 Like .map(), .filter() returns a new array. However, .filter() returns an array of elements after filtering out certain elements from the original array.

const randomNumbers = [375, 200, 3.14, 7, 13, 852];

// Call .filter() on randomNumbers below
const smallNumbers = randomNumbers.filter(num => num < 250);
console.log(smallNumbers);

[ 200, 3.14, 7, 13 ]

4 .findIndex() 

 .findIndex() on an array will return the index of the first element that evaluates to true in the callback function. 

If there isn’t a single element in the array that satisfies the condition in the callback, then .findIndex() will return -1.

const animals = ['hippo', 'tiger', 'lion', 'seal', 'cheetah', 'monkey', 'salamander', 'elephant'];

const startsWithS=animals.findIndex(animal=>animal[0]==='s');
console.log(startsWithS);

上述代码返回第一个以s开头的单词的位置。

5. .reduce() Method

The .reduce() method returns a single value after iterating through the elements of an array

我们常常用这个方法来更新数组的一些需要计算的信息

const numbers = [1, 2, 4, 10];
 
const summedNums = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue
})
 
console.log(summedNums) // Output: 17

6.some() method和every()method

The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns true if, in the array, it finds an element for which the provided function returns true; otherwise it returns false. It doesn't modify the array.

The every() method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.

const words = ['unique', 'uncanny', 'pique', 'oxymoron', 'guise'];

// Something is missing in the method call below

console.log(words.some((word) => {
  return word.length < 6;
}));

// Use filter to create a new array
const interestingWords=words.filter((word)=>word.length>5);


// Make sure to uncomment the code below and fix the incorrect code before running it

console.log(interestingWords.every((word) => { return word.length>5} ));

这段代码展示了如何使用数组的 `some()` 和 `every()` 方法来检查数组中的元素是否满足特定的条件。

使用 `some()` 方法检查数组中是否存在至少一个单词的长度小于 6 个字符。`some()` 方法接受一个回调函数作为参数，该回调函数对数组中的每个元素进行测试。如果数组中至少有一个元素符合条件（即回调函数返回 `true`），则 `some()` 方法返回 `true`，否则返回 `false`。

接下来，使用 `filter()` 方法创建一个新数组 `interestingWords`，其中包含所有长度大于 5 个字符的单词。`filter()` 方法接受一个回调函数作为参数，该回调函数对数组中的每个元素进行测试。如果数组中的元素符合条件（即回调函数返回 `true`），则它将包含在新数组中，否则不包含。

最后，使用 `every()` 方法检查新数组中的所有单词是否都满足长度大于 5 个字符的条件。`every()` 方法与 `some()` 方法类似，但它要求数组中的所有元素都满足给定的条件。如果数组中的所有元素都满足条件，`every()` 方法返回 `true`，否则返回 `false`。