js常用方法总结(个人笔记)

一、Array数组方法

本质上,数组属于一种特殊的对象。typeof运算符会返回数组的类型是object。
由于数组成员的键名是固定的(默认总是0、1、2...),因此数组不用为每个元素指定键名,而对象的每个成员都必须指定键名。JavaScript 语言规定,对象的键名一律为字符串,所以,数组的键名其实也是字符串。之所以可以用数值读取,是因为非字符串的键名会被转为字符串。

var arr = new Array()

length属性

数组的数字键不需要连续,length属性的值总是比最大的那个整数键大1。

var arr = ['a', 'b'];
arr.length // 2

arr[2] = 'c';
arr.length // 3

arr[9] = 'd';
arr.length // 10

arr[1000] = 'e';
arr.length // 1001

length属性是可写的。如果人为设置一个小于当前成员个数的值,该数组的成员会自动减少到length设置的值。清空数组的一个有效方法,就是将length属性设为0。

var arr = [ 'a', 'b', 'c' ];
arr.length // 3

arr.length = 2;
arr // ["a", "b"]

arr.length = 0;
arr // []

arr.filter(function)

返回的是数组中所有符合条件的元素,组成的一个新的数组;

例子:var arr=[{name:"jack",id:1},{name:"ken",id:2}];

arr.filter(item=>item.id==1)  //[{name:"jack",id:1}]

arr.find(function)

返回的是数组中第一个符合条件的//元素;

例子:var arr=[{name:"jack",id:1},{name:"ken",id:2},{name:"jack",id:3}];

arr.find(item=>item.name==="jack")  //{name:"jack",id:1}

arr.push()

把值追加到数组中,加到最后了---返回值也是追加数据之后的数组长度

arr.pop()

删除数组中最后一个元素,返回值就是删除的这个值

arr.shift()

删除数组中第一个元素,返回值就是删除的这个值

arr.unshift()

向数组的第一个元素前面插入一个新的元素,----返回值是插入后的长度

arr.forEach(function)

遍历数组用---相当于for循环,返回的是undefined,适用于不改变数据的情况,而只是想用数据做一些事情 – 比如存入数据库或则打印出来。

let arr = ['a', 'b', 'c', 'd'];
arr.forEach((letter) => {
 console.log(letter);
});
// a
// b
// c
// d

arr.map(function)

数组中的每个元素都要执行这个函数,把执行后的结果重新的全部的放在一个新的数组中。
map()适用于你要改变数据值的时候。不仅仅在于它更快,而且返回一个新的数组。这样的优点在于你可以使用复合(composition)(map(), filter(), reduce()等组合使用)来玩出更多的花样。

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(value => value * value).filter(value => value > 10);
// arr2 = [16, 25]

arr.indexOf(元素值)

返回的是索引,没有则是返回-1

例子:比如我们设置白名单路由的时候,在白名单数组中的路由不需要判断是否有权限
const whiteList = ['user/login','user/indexPage'];
if(whiteList.indexOf(pathname)>-1) {
// 不需要判断权限访问
}

arr.join("拼接符")

返回的是一个字符串

arr.concat()

concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

var a = [1,2,3];
console.log(a.concat(4,5)); // [1,2,3,4,5]

var arr = ["George","John","Thomas"]
var arr2 = ["James","Adrew"]
var arr3 = ["William"]
console.log(arr.concat(arr2,arr3)) // [George,John,Thomas,James,Adrew,William]

arr.reverse()

反转数组

arr.sort()

排序的,从小到大排序

arr.slice(开始的索引,结束的索引)

把截取的数组的值放在一个新的数组中,但是不包含结束的索引对应的元素值。

arr.splice(开始的位置,要删除的个数,替换的元素的值)

一般是用于删除数组中的元素,或者是替换元素,或者是插入元素。

arr.some(function)和arr.every(function)

some方法,只要其中一个为true 就会返回true的,相反,every()方法必须所有都返回true才会返回true,哪怕有一个false,就会返回false;
every()和 some()目的:确定数组的所有成员是否满足指定的条件

 //some()
     let b=numbers.some((item,index)=>{
          if(item%3===0){
            return true;
         }else{
             return false;
         }
     })
//every()
      let numbers = [2, 4, 10, 4, 8];
      let a = numbers.every((item,index)=>{
          if(item%2===0){
              return true;
          }else{
              return false;
          }
      });
     console.log(a)

arr.includes(searchElement, fromIndex)

includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。

[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

arr.reduce()

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

arr.reduce(function(prev,cur,index,arr){
...
}, init);
arr 表示原数组;(可选)
prev 表示上一次调用回调时的返回值,或者初始值 init;(必需)
cur 表示当前正在处理的数组元素;(必需)
index 表示当前正在处理的数组元素的索引,若提供 init 值,则索引为0,否则索引为1;(可选)
init 表示初始值。(可选)

用法:

var arr = [3,9,4,3,6,0,9];

1. 求数组项之和

var sum = arr.reduce(function (prev, cur) {
    return prev + cur;
},0);

由于传入了初始值0,所以开始时prev的值为0,cur的值为数组第一项3,相加之后返回值为3作为下一轮回调的prev值,然后再继续与下一个数组项相加,以此类推,直至完成所有数组项的和并返回。
2. 求数组项最大值

var max = arr.reduce(function (prev, cur) {
    return Math.max(prev,cur);
});

由于未传入初始值,所以开始时prev的值为数组第一项3,cur的值为数组第二项9,取两值最大值后继续进入下一轮回调。
3. 数组去重

var newArr = arr.reduce(function (prev, cur) {
    //短路运算,找假,作用相当于if(prev.indexOf(cur) === -1){prev.push(cur)}
    //补充:if只有一个语句时,可简写成:if prev.indexOf(cur === -1) prev.push(cur)
    prev.indexOf(cur) === -1 && prev.push(cur);
    return prev;
},[]);

arr.fill(value, start, end)

fill() 方法用于将一个固定值来填充替换数组的某些元素。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob", 2, 4);  // ["Banana", "Orange", "Runoob", "Runoob"],end为开区间

arr.flat()

flat()用于将嵌套的多维数组“拉平”,变成一维数组。

flat()默认只会“拉平”一层,如果想要“拉平”多层的嵌套数组,可以将flat()方法的参数写成一个整数,表示想要拉平的层数,默认为1。如果不管有多少层嵌套,都要转成一维数组,可以用Infinity关键字作为参数。

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]
[1, [2, [3, [4, 5]]]].flat(Infinity)
// [1, 2, 3, 4, 5]

Array和 Array.prototype

Array 对象是用于构造数组的全局对象,数组是类似于列表的高阶对象
Array.prototype 属性表示 Array 构造函数的原型,并允许您向所有Array对象添加新的属性和方法。

Array.prototype 的用法

1.给 Array 对象添加新的方法

//给数组添加一个自定义方法duplicator 
 Array.prototype.duplicator = function() {
 let s = this.concat(this) 
   return s
 }
 let t = [1,2,3,4,5].duplicator()
 console.log(t) // [1, 2, 3, 4, 5, 1, 2, 3, 4, 5]

2.把数组方法嫁接到“类似数组的对象”
典型的“类似数组的对象”是函数的arguments对象,以及大多数 DOM 元素集,还有字符串。

//把数组的forEach方法嫁接到字符串上使用
Array.prototype.forEach.call('abc', function (chr) {
  console.log(chr);
});
// a
// b
// c

注:数组的slice方法可以将“类似数组的对象”变成真正的数组。

var arr = Array.prototype.slice.call(arrayLike);

var Obj = function (p) {
this.p = p;
};
var o = new Obj('Hello World!');
o.p
Obj.p

二、String字符串的方法

万物皆对象,字符串和数组都是对象,字符串可以看作是字符组成的数组,数组是特殊形式的对象。

str.length

字符串的长度;

str.charAt(索引)

返回的是指定索引位置的字符串;

str.concat(字符串2,字符串3...)

返回的是拼接后的字符串;

str.indexOf(要找的字符串,开始查找的位置)

返回的是这个字符串第一个所在位置的索引值,没有则返回-1;

str.replace(原来的字符串,新的字符户串)

返回的是替换之后的字符串;

str.slice(开始的索引,结束的索引)

截取字符串,类似于数组方法,截取不到结束位置的字符串;

str.split("以什么为切割点",返回的个数(默认返回所有))

   例子: var str = "a=1&b=2";

   str.split("&");  //["a=1","b=2"]

   str.split("&",1)  //["a=1"]

str.substr(开始的位置,个数)

也是用于截取字符串;

str.substring(开始的索引,结束的索引)

返回截取后的字符串,不包含结束的索引的字符串,与slice一样;

str.toLowerCase()

转小写;

str.toUpperCase()

转大写;

str.trim()

干掉字符串两端的空格。

str.startsWith()

检测字符串是否以某个字符开头

str.endsWith()

检测字符串是否以某个字符结尾

三、Object对象方法

Object.keys()

该方法返回一个数组,遍历对象所有的可枚举属性,类似于for in。

1.传入对象,返回属性名

var obj = {"a":"124","b":"345"}

console.log(Object.keys(obj))   //["a","b"]

2.传入字符串,返回索引

var str = 'ab123';

console.log(Object.keys(str))  //["0","1","2","3","4"]

3.传入数组,返回索引

var arr = ["a","b","c"];

console.log(Object.keys(arr));  //["0","1","2"]

Object.values()

返回一个给定对象自己的所有可枚举属性值的数组。

var obj1 = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(obj1)); // ['b', 'c', 'a']
 
var obj2 = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj2)); // ['a', 'b', 'c']

Object.assign()

语法: Object.assign(target, ...sources);sources对象可以有多个;用于将所有可枚举属性的值从一个或多个源对象合并到目标对象,如源对象中有与目标对象重复的值,则会覆盖目标对象的值。它将返回目标对象。

const object1 = {
  a: 1,
  b: 2,
  c: 3
};
const object2 = Object.assign({c: 4, d: 5}, object1);
console.log(object2); // { c:3, d:5,a:1, b:2 }

Object.getOwnPropertyNames()

// Object所有的属性方法
Object.getOwnPropertyNames(Object)
(24) ["length", "name", "prototype", "assign",
 "getOwnPropertyDescriptor", "getOwnPropertyDescriptors",
 "getOwnPropertyNames", "getOwnPropertySymbols", "is", 
"preventExtensions","seal", "create", "defineProperties", 
"defineProperty", "freeze", "getPrototypeOf", "setPrototypeOf", 
"isExtensible", "isFrozen", "isSealed", "keys", "entries", 
"fromEntries", "values"]
//Array所有的属性方法
Object.getOwnPropertyNames(Array.prototype)
(33) ["length", "constructor", "concat", "copyWithin", "fill",
 "find", "findIndex", "lastIndexOf", "pop", "push", "reverse", 
"shift", "unshift", "slice", "sort", "splice", "includes",
 "indexOf", "join", "keys", "entries", "values", "forEach", 
"filter", "flat", "flatMap", "map", "every", "some", "reduce",
 "reduceRight", "toLocaleString", "toString"]

Object.freeze()

Object.freeze()方法可以冻结一个对象。一个被冻结的对象再也不能被修改;
冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。
此外,冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。

const obj = {
 property: 42
};
const obj2 = Object.freeze(obj);
obj.property = 33;// Throws an error in strict mode 会抛出异常
console.log(obj.property);// expected output: 42   值没有被改变

如果你有一个巨大的数组或Object,并且确信数据不会修改,使用Object.freeze()可以让性能大幅提升。

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

推荐阅读更多精彩内容