JS原生方法

箭头函数和this的用法

1.先看一下箭头函数=>

  • (x)=> x+6等价于
function(x){
    return x+6
}
  • let varible = (n1 , n2) => n1 + n2;等价于
var varible = function(n1 , n2){
    return n1 + n2;
}
  • 若没有参数,也必须有()即let sum= () => 1+2;等价于
let sum = function(){
    return 1+2;
}
  • 若需要返回一个自定义对象,用()括起来
let item = id => ({
    id : id;
    name : "abc"
})
// 等价于
let item = function( id ){
    return {
        id : id;
        name : "abc"
    };
};
  • 应用:使用定制比较器排列数组
let result = values.sort((a,b) => a-b);

2.this用法

  • this是一个指针,指向环境作用域(上下文)
  • 指得是调用函数的对象
  • 用法
    • 全局调用
var a;
function get_a(){
    return this.a;
}
* 对象方法的调用,值得时上级对象
function get_a(){
    console.log(this.a)
}

var p = {};
p.a = 3;
p.run = get_a;
p.run();        //3
* 构造函数中使用,指的是创建的对象
* apply调用

理解一下这个方法(满足条件返回true):Array.some(function(v,i),thisArgs)
thisArgs时function函数中this的指向,如果thisArgs是String类型,this会对应截取这个字符串
【Eg】

let arr = [4,5,8,9];
var newArr_1 = arr.some(unction(v,i,arr){
    console.log(arr); /[4,5,8,9]]
    console.log(this); //{this: 'this'}
    v>=2;
},{this:'this'})
console.log(re); //2

var newArr_2= arr.some(function(v,i,arr){
    console.log(this); //输出一下是什么结果????????????
    v>=10;
},'_this')
console.log(re2); //undefined

2.map, reduce, find, filter, forEach, includes

1. map映射

var new_array = arr.map(callback[, thisArg]) 
  • 应用:反转字符串
var str = '12345';
Array.prototype.map.call(str, function(x) {   //同时利用了call()方法
  return x;
}).reverse().join(''); 

2.filter过滤:找到满足条件的数保存到新的数组中

arr.filter((item, index, this) => {
    condition(item)
}

3.forEach 遍历数组的每一个元素

//forEach
array.forEach(callback(currentValue, index, array){
    //do something
}, this)
//或者
array.forEach(callback(currentValue, index, array){
    //do something
})  

另外还有一个each

//$.each()
$(selector).each(function(index,element))  //注意参数的顺序

举例data.forEach(function(v,i, a){ a[i] = v + 1; });

  • forEach和map的区别
    • forEach返回值为undefined,map返回一个新的数组,对原数组没有影响
    • forEach没有办法跳出循环,$each()为每个元素规定运行函数,可以返回布尔值,跳出循环
  • forEach遍历整个数组,不会中途跳出或终止循环,若想中途停止循环,需要抛出一个一场

4.find方法:找出第一个符合条件的数据

Array.find(function(v,i,arr),thisArgs}

v:数组值
i:索引
arr:当前数组
thisArgs:fn函数中this指向

5.findIndex方法:返回符合条件的第一个数据的索引

array.findIndex(function(currentValue, index, arr), thisValue)
findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素的索引位置位置。
findIndex() 方法为数组中的每个元素都调用一次函数执行:
当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。
如果没有符合条件的元素返回 -1
注意: findIndex() 对于空数组,函数是不会执行的。
注意:findIndex() 并没有改变数组的原始值

6.includes

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容