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