JavaScript에서 화살표 기능을 사용하는 방법

이 글은 JavaScript Video Tutorial에 대한 관련 지식을 제공합니다. 주로 문법 규칙, 약어 규칙, 일반적인 응용 프로그램 등 화살표 기능과 관련된 문제를 소개합니다. 모두에게 도움이 되기를 바랍니다.

【관련 추천: JavaScript 동영상 튜토리얼, web front-end】

화살표 함수

ES6에는 함수의 새로운 약어가 있습니다---화살표 함수의 등장. 코드의 양이 많아지면 코드가 더욱 우아해 보일 뿐만 아니라 이 포인팅 문제도 해결됩니다. 화살표 기능을 사용하는 방법을 자세히 설명하겠습니다.

문법 규칙

• 이전 방법

function foo1(){}var foo2 = function(name,age){
	console.log("函数体代码"，this,arguments);
  console.log(name,age);}

• 화살표 함수 작성 완료

var foo3 = (name,age) => {
	console.log("箭头函数的函数体")
  console.log(name,age);}

• 화살표 함수는 배열을 순회합니다.

• 내가 글을 쓰던 방식

var names = ["abc","cba","nba"];names.forEach(function(item)){
	console.log(item);})

• 화살표 함수 작성법

names.forEach((item,idx,arr)=>{
  console.log(item,idx,arr);
	} )

setTimeout(()=>{
	console.log("setTimeout");},3000)

약어 규칙

• 화살표 함수에 함수가 하나만 있는 경우 ()를 생략할 수 있습니다

name.forEach(item =>{console.log(item);}

• 필터 () 화살표 기능을 사용하면 조건에 맞는 숫자를 효율적으로 필터링할 수 있습니다.

var newNums = nus.filter(item =>{
  return item % 2;})

• 함수 본문에 실행 코드 한 줄만 있는 경우에는 {}를 생략할 수 있습니다.

• 그리고 이 코드 줄의 반환 값은 전체 함수의 반환 값이 됩니다. 함수이므로 return

names.forEach(item => console.log(item));

를 추가할 필요가 없습니다.

• filter() 함수는 한 줄로만 실행되므로 직접 생략할 수 있습니다. {}

varans = worker.filter( item=>item % 2 )

• 기본 반환 값이 객체인 경우, 그런 다음 이 객체는 ()

을 추가해야 합니다. 참고: 반응에서는 redux가 자주 사용됩니다.
화살표 함수가 실행자의 중괄호와 객체의 중괄호를 동시에 만나면 화살표 함수는 구별할 수 없다는 것을 알 수 있습니다.

var arrFn = () =>{} //此大括号是执行体

var arrFn = () =>{ name : "why"}// 此大括号是对象

그래서 실행자를 구별하려면 ()를 추가해야 합니다 the object

var arrFn = () =>({ name : "why"})

Common apps

map

map() 메소드는 JS의 Array에 정의되어 있으며, 배열의 요소는 호출 후 원래 배열에서 처리된 값입니다. 기능.
주목할 가치가 있습니다:

• map() 함수는 빈 배열을 감지하지 않습니다.
• map() 함수는 원래 배열을 변경하지 않고 새 배열을 형성합니다.
• array.map(function(currentValue, index, arr), thisIndex)array.map(function(currentValue, index, arr), thisIndex)

参数说明：

• function（currentValue，index，arr）：必填
  • 数组中的每个元素都会执行这个函数。
  • currentValue：必填，表示当前元素的值。
  • index：可选，当前元素的索引也就是第几个数组元素。
  • arr：可选，当前元素属于的数组对象。
• thisValue：可选，对象作为该执行回调时使用，传递给函数，用作“this”的值。

例1：对原数组进行平方后赋值给新数组。

let arry = [1,2,3,4];let newArray = array.map((item)=>{
  return item*item;})

也可以化简成下面一行代码。

let newArray = array.map(item =>item * item)

例2：对原数组的偶数进行平方后赋值给新数组。

filter

filter() 用于对数组进行过滤。

• 原理是它创建一个新数组，新数组的元素是通过检查指定数组中符合条件的所有元素。
• filter把传入的函数依次作用在每一个元素，然后根据返回值是true还是false决定保留还是丢弃元素。
• Array.filter(function(currentValue, indedx, arr), thisValue)

매개변수 설명:

function(currentValue, index, arr): 필수
• 배열의 모든 항목 각 요소는 이 기능을 실행합니다.
  • currentValue: 필수, 현재 요소의 값을 나타냅니다.
  • index: 선택 사항입니다. 현재 요소의 인덱스는 배열 요소입니다.
  • arr: 선택 사항이며 현재 요소가 속한 배열 개체입니다.
thisValue: 선택 사항, 개체는 실행 콜백으로 사용되며 함수에 전달되고 "this"의 값으로 사용됩니다.

예 1: 원래 배열을 제곱하고 새 배열에 할당합니다.

let newArray = array.filter(item=>item%2===0).map(item =>item * item)

는 다음 코드 줄로 단순화할 수도 있습니다.

  let array = [1, 2, 3, 4];
  let newArray = array.filter((item,idx)=>idx%2===0).map(item =>item * item)

예 2: 원래 배열의 짝수를 제곱하고 새 배열에 할당합니다.

filter🎜🎜🎜filter()는 배열을 필터링하는 데 사용됩니다. 🎜🎜🎜🎜새로운 배열을 생성하고, 지정된 배열의 조건에 맞는 모든 요소를 ​​검사하여 새 배열의 요소를 확인하는 것이 원칙입니다. 🎜🎜filter는 전달된 함수를 각 요소에 차례로 적용한 다음 반환 값이 true인지 false인지에 따라 요소를 유지할지 아니면 삭제할지 결정합니다. . 🎜🎜Array.filter(function(currentValue, indedx, arr), thisValue)🎜🎜🎜매개변수 설명: 🎜🎜🎜function(currentValue, index, arr): 필수 🎜🎜배열의 모든 항목 각 요소는 이 기능을 실행합니다. 🎜🎜currentValue: 필수, 현재 요소의 값을 나타냅니다. 🎜🎜index: 선택 사항입니다. 현재 요소의 인덱스는 배열 요소입니다. 🎜🎜arr: 선택 사항이며 현재 요소가 속한 배열 개체입니다. 🎜🎜🎜🎜thisValue: 선택 사항, 개체는 실행 콜백으로 사용되며 함수에 전달되고 "this"의 값으로 사용됩니다. 🎜🎜

var newArray = array.filter((item,idx,arr)=>arr.indexOf(item) === idx)

🎜예 3: 원래 배열의 짝수 첨자를 제곱하고 새 배열에 할당합니다. 🎜

var ans = arr.filter(item=>item%2).map(item=>item*item).reduce((x,y)=>x+y,0);

🎜예제 4: arr 매개변수를 교묘하게 사용하여 배열의 중복을 제거합니다.🎜

function foo(){
	console.log("foo",this);}foo()//windowfoo.apply("aaa")//aaa

🎜예제 2: 원래 배열의 짝수를 제곱한 후 누적합을 구합니다. 🎜

reduce

• 用于遍历数组，可以设置初始值，大大增强了代码的可读性，同时还有一个参数可以做累计计算。
• array.reduce((pre, cur, index, arr)，init）

参数说明：

• function（(pre, cur, index, arr)）：必填
  • pre: 必填，积累值
  • cur： 必填。当前元素。
  • index： 可选。当前下标。
  • arr： 可选。当前数组。
• init: 可选。传递给函数的初始值，但传入参数为两个时，init 是累计值 pre的初始值。

如果reduce的参数只有一个，那么累计值的初始值是数组的第一个值。

如果reduce的参数有两个，那么积累值初始值就是设置好的 参数init初始值。

在每一次迭代中，返回的值都作为下一次迭代的 pre累计值。

var ans = arr.filter(item=>item%2).map(item=>item*item).reduce((x,y)=>x+y,0);

箭头函数中的this使用

普通函数中是有this的标识符

function foo(){
	console.log("foo",this);}foo()//windowfoo.apply("aaa")//aaa

箭头函数中，压根没有this。

var bar = ()=>{console.log("bar",this)}bar()//windowbar.apply("AAA")//window

concat

concat（）方法是用于连接两个或多个数组。

var arr  = [1, 2, 3, 4];
var arr2 = [7, 8, 9, 10];
var ans = [].concat(arr,arr2);
console.log(ans);//输出：(8) [1, 2, 3, 4, 7, 8, 9, 10]

this的查找规则

因为箭头函数中没有this的标识符，所以当箭头函数内部开始调用this时。

JavaScript引擎就从作用域由里到外的找含有this指向的作用域。

var obj ={
	name:"obj",
  foo:function(){
    var bar = ()=>{
      console.log("bar",this);
    }
    return bar;
  }}

• 第一层 bar箭头函数：没有。
• 第二层 function 函数：指向obj。

所以例子中的 this 指向obj。

var obj ={
	name:"obj",
  foo:()=>{
  	var bar =()=>{
      console.log("bar:",this);
    }
    return bar;
  }}

• 第一层 bar箭头函数：没有。
• 第二层 foo箭头函数：没有。
• 第三层 全局作用域：指向window。

所以例子中的 this 指向window。

模拟网络发送请求

• 封装 request 工具函数

function request(url,callback){
  	var res = ["abc","cba","nba"];
    callback(res);}

• 实际操作的位置
  • 早期的写法

因为此时传入 request 的function ，就是 request 定义中的 callback（）。
所以 function 中的参数就是 request 定义中的 res 数组，然后赋值给了 此对象中names
但因为 function 是个回调函数的this 的指向是 window，所以需要在外层的函数中，规定一个_this指向当前对象。

 var _this = this;

然后 将获取过来的 res 数组 赋值给 _this 中的names

  _this.name = [].concat(ans);

var obj = {
	names:[],
  network:function(){
    var _this = this;
    request("/names",function(ans){
    _this.name = [].concat(ans);
  })}

• 箭头函数的写法

因为箭头函数本身是没有 this的，js引擎会由内往外的找 this的指向。
发现 外层的 函数 this指向obj，于是 this 就指向了 obj。

var obj = {
	names:[],
  network:function(){
    request("/names",(ans)=>{
    this.name = [].concat(ans);
  })}

【相关推荐：javascript视频教程、web前端】

위 내용은 JavaScript에서 화살표 기능을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!