js方法总结与数组去重

1 数组去重方法

1.1 Set方法去重

let arr=[...new Set(arr)]

1.2 双重循环

Array.prototype.unique = function(){
  cost newArray=[];
  let isRepeat;
  for(let i = 0; i < this.length; i++){
    isRepeat = false;
    for(let j = 0; j < newArray.length; j++){
      if(this[i] === newArray[j]){
        isRepeat = true;
        bread;
}
}
if(!isRepeat){
    newArray.push(this[i])
}
  }
return newArray;
}

1.3 Array.prototype.indexOf()实现去重

基本思路：如果索引不是第一个索引，说明是重复值

  • 利用Array.prototype.filter()过滤功能
  • Array.prototype.indexOf()返回的是第一个索引值
  • 只将数组中元素第一次出现的返回
  • 之后出现的将被过滤掉
// 第一种方式
Array.prototype.unique = function(){
  return this.filter((item, index) => {
    return this.indexOf(item) === index;
  })
}

// 第二种方式
Array.prototype.unique = function () {
  const newArray = [];
  this.forEach(item => {
    if (newArray.indexOf(item) === -1) {
      newArray.push(item);
    }
  });
  return newArray;
}

1.4 Array.prototype.includes()方式去重

Array.prototype.unique = function () {
  const newArray = [];
  this.forEach(item => {
    if (!newArray.includes(item)) {
      newArray.push(item);
    }
  });
  return newArray;
}

1.5 Array.prototype.reduce()方式去重

Array.prototype.unique = function () {
  return this.sort().reduce((init, current) => {
    if(init.length === 0 || init[init.length - 1] !== current){
      init.push(current);
    }
    return init;
  }, []);
}

2 技巧总结

2.1 判断对象的数据类型

注意传入 type 参数时首字母大写
const isType = (type)=>{
    return target =>{
        return `[object ${type}]` == Object.prototype.toString.call(target)
    }
}

// 判断数组
const isArray = isType('Array');
console.log(isArray([])); //true

// 判断对象
const isObject = isType('Object');
console.log(isArray({})); //true

2.2 JS字符串常用方法总结

  1. toLowerCase(): 把字符串转为小写，返回新的字符串。
var str="Hello World";
var str1=str.toLowerCase();
console.log(str); //Hello World
console.log(str1); //hello world
  1. toUpperCase(): 把字符串转为大写，返回新的字符串。
var str="hello world";
var str1=str.toUpperCase();
console.log(str); //hello world
console.log(str1); //HELLO WORLD
  1. charAt(): 返回指定下标位置的字符。如果index不在0-str.length(不包含str.length)之间，返回空字符串。
var str="hello world";
var str1=str.charAt(6);
console.log(str1);//w
  1. charCodeAt(): 返回指定下标位置的字符的unicode编码,这个返回值是 0 - 65535 之间的整数.
    注意：如果index不在0-str.length(不包含str.length)之间，返回NaN。
var str="hello world";
var str1=str.charCodeAt(1);
var str2=str.charCodeAt(-2); //NaN
console.log(str1); //101
  1. indexOf(): 返回某个指定的子字符串在字符串中第一次出现的位置
    注意：indexOf()方法对大小写敏感，如果子字符串没有找到，返回-1。第二个参数表示从哪个下标开始查找，没有写则默认从下标0开始查找
var str="Hello World";
var str1=str.indexOf("o");
var str2=str.indexOf("world");
var str3=str.indexOf("o",str1+1);
console.log(str1); //4 默认只找第一个关键字位置，从下标0开始查找
console.log(str2); //-1 没有找到
console.log(str3); //7
  1. lastIndexOf(): 返回某个指定的子字符串在字符串中最后出现的位置
    注意：lastIndexOf()方法对大小写敏感，如果子字符串没有找到，返回-1。第二个参数表示从哪个下标开始查找，没有写则默认从最后一个字符处开始查找。
var str="Hello World";
var str1=str.lastIndexOf("o");
var str2=str.lastIndexOf("world");
var str3=str.lastIndexOf("o",str1-1);
console.log(str1); //7
console.log(str2); //-1
console.log(str3); //4
  1. slice(): 返回字符串中提取的子字符串。
    注意：
  • 如果只有一个参数，则提取开始下标到结尾处的所有字符串
  • 两个参数，则提取第一个参数（包含）到第二个参数（不包含）之间的字符
  • 如果是负数，-1为字符串的最后一个字符
var str="Hello World";
var str1=str.slice(2); //如果只有一个参数，则提取开始下标到结尾处的所有字符串
var str2=str.slice(2,7); //两个参数，提取下标为2，到下标为7但不包含下标为7的字符串
var str3=str.slice(-7,-2); //如果是负数，-1为字符串的最后一个字符。提取从下标-7开始到下标-2但不包含下标-2的字符串。前一个数要小于后一个数，否则返回空字符串

console.log(str1); //llo World
console.log(str2); //llo W
console.log(str3); //o Wor
  1. substring(): 提取字符串中介于两个指定下标之间的字符
    注意：
  • 参数不接受负数，其余和slice一样
var str="Hello World";
var str1=str.substring(2)
var str2=str.substring(2,2);
var str3=str.substring(2,7);
console.log(str1); //llo World
console.log(str2); //如果两个参数相等，返回长度为0的空串
console.log(str3); //llo W
  1. substr(): 返回从指定下标开始指定长度的的子字符串
    注意：
  • 如果没有指定length,返回从下标开始处结尾处的所有字符串。
var str="Hello World";
var str1=str.substr(1)
var str2=str.substr(1,3);
var str3=str.substr(-3,2);
console.log(str1); //ello World 
console.log(str2); //ell
console.log(str3); //rl
  1. split(): 把字符串分割成字符串数组。
var str="AA BB CC DD";
var string1="1:2:3:4:5";
var str1=str.split("");//如果把空字符串 ("")用作分割符，那么字符串的每个字符之间都会被分割
var str2=str.split(" "); //以空格为分隔符
var str3=str.split("",4); //4指定返回数组的最大长度
var str4=string1.split(":");
console.log(str1); // ["A", "A", " ", "B", "B", " ", "C", "C", " ", "D", "D"]
console.log(str2); //["AA" "BB" "CC" "DD"]
console.log(str3); //["A", "A", " ", "B"]
console.log(str4); // ["1", "2", "3", "4", "5"]
  1. replace(): 在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
var str="hello WORLD";
var reg=/o/ig; //o为要替换的关键字，不能加引号，否则替换不生效，i忽略大小写，g表示全局查找。
var str1=str.replace(reg,"**")
console.log(str1); //hell** W**RLD

12.match(): 返回所有查找的关键字内容的数组。

var str="To be or not to be";
var reg=/to/ig;
var str1=str.match(reg);
console.log(str1); //["To", "to"]
console.log(str.match("Hello")); //null

2.3 js中数组常用方法总结

  1. Array.map 此方法是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组
    let arr = [1, 2, 3, 4, 5]
    let newArr = arr.map(x => x*2)
    //arr= [1, 2, 3, 4, 5]   原数组保持不变
    //newArr = [2, 4, 6, 8, 10] 返回新数组
  1. Array.forEach() 此方法是将数组中的每个元素执行传进提供的函数，没有返回值，注意和map方法区分
   let arr = [1, 2, 3, 4, 5]
   num.forEach(x => x*2)
   // arr = [1, 2, 3, 4, 5]  数组改变,注意和map区分
  1. Array.filter() 此方法是将所有元素进行判断，将满足条件的元素作为一个新的数组返回
    let arr = [1, 2, 3, 4, 5]
    const isBigEnough = value = value >= 3
    let newArr = arr.filter(isBigEnough )
    //newNum = [3, 4, 5] 满足条件的元素返回为一个新的数组
  1. Array.every() 此方法是将所有元素进行判断返回一个布尔值，如果所有元素都满足判断条件，则返回true，否则为fals
    let arr = [1, 2, 3, 4, 5]
    const isLessThan4 = value => value < 4
    const isLessThan6 => value => value < 6
    arr.every(isLessThan4 ) //false
    arr.every(isLessThan6 ) //true
  1. Array.some() 此方法是将所有元素进行判断返回一个布尔值，如果存在元素都满足判断条件，则返回true,若所有元素都不满足，则返回false
    let arr= [1, 2, 3, 4, 5]
    const isLessThan4 = value => value < 4
    const isLessThan6 = value => value > 6
    arr.some(isLessThan4 ) //true
    arr.some(isLessThan6 ) //false
  1. Array.reduce() 此方法是所有元素调用返回函数，返回值为最后结果,传入的值必须是函数类型
    let arr = [1, 2, 3, 4, 5]
   const add = (a, b) => a + b
   let sum = arr.reduce(add,0)// 累加
  1. Array.push() 此方法是在数组的后面添加新加元素，此方法改变了数组的长度：
    let arr = [1, 2, 3]
    arr.push(4)
    console.log(arr) //[1, 2, 3, 4]
    console.log(arr.length) //4
  1. Array.unshift() 此方法是将一个或多个元素添加到数组的开头，并返回新数组的长度：
    let arr = [1, 2, 3, 4, 5]
    arr.unshift(6, 7)
    console.log(arr) //[6, 7, 1, 2, 3, 4, 5]
    console.log(arr.length) //7
  1. Array.pop() 此方法在数组后面删除最后一个元素，并返回数组，此方法改变了数组的长度：
    let arr = [1, 2, 3, 4, 5]
    arr.pop()
    console.log(arr) //[1, 2, 3, 4]
    console.log(arr.length) //4
  1. Array.shift() 此方法在数组后面删除第一个元素，并返回数组，此方法改变了数组的长度：
    let arr = [1, 2, 3, 4, 5]
    arr.shift()
    console.log(arr) //[2, 3, 4, 5]
    console.log(arr.length) //4
  1. Array.isArray() 判断一个对象是不是数组，返回的是布尔值
let arr  = [];
console.log(Array.isArray(arr));// true
  1. Array.concat() 此方法是一个可以将多个数组拼接成一个数组
let arr1 = [1, 2, 3]
  arr2 = [4, 5]
  let arr = arr1.concat(arr2)
  console.log(arr)//[1, 2, 3, 4, 5]
  1. Array.toString() 此方法将数组转化为字符串：
let arr = [1, 2, 3, 4, 5];
   let str = arr.toString()
   console.log(str)// 1,2,3,4,5
  1. Array.join() 此方法也是将数组转化为字符串：
let arr = [1, 2, 3, 4, 5];
   let str1 = arr.toString()
   let str2 = arr.toString(',')
   let str3 = arr.toString('##')
   console.log(str1)// 12345
   console.log(str2)// 1,2,3,4,5
   console.log(str3)// 1##2##3##4##5
  1. Array.splice(开始位置， 删除的个数，元素) 万能方法，可以实现增删改
    let arr = [1, 2, 3, 4, 5];
     let arr1 = arr.splice(2, 0 'haha')
     let arr2 = arr.splice(2, 3)
     let arr1 = arr.splice(2, 1 'haha')
     console.log(arr1) //[1, 2, 'haha', 3, 4, 5]新增一个元素
     console.log(arr2) //[1, 2] 删除三个元素
     console.log(arr3) //[1, 2, 'haha', 4, 5] 替换一个元素
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,928评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,192评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 159,468评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,186评论 1赞 286
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,295评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,374评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,403评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,186评论 0赞 269
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,610评论 1赞 306
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,906评论 2赞 328
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,075评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,755评论 4赞 337
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,393评论 3赞 320
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,079评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,313评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,934评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,963评论 2赞 351