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()可以让性能大幅提升。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容