数组,对象,字符串常用方法集结
一、数组常用方法汇总
(一)最原始的方法:
1.转成字符串
- 把数组转换为字符串:JavaScript 方法 toString() 把数组转换为数组值(逗号分隔)的字符串
- join() 方法也可将所有数组元素结合为一个字符串。
2.增删
- pop() 方法从数组中删除最后一个元素:
- push() 方法(在数组结尾处)向数组添加一个新的元素:
- shift() 方法会删除首个数组元素,并把所有其他元素“位移”到更低的索引。shift() 方法返回被“位移出”的字符串:
- unshift() 方法(在开头)向数组添加新元素,并“反向位移”旧元素unshift() 方法返回新数组的长度。
- length 属性提供了向数组追加新元素的简易方法:
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits[fruits.length] = "Kiwi"; // 向 fruits 追加 "Kiwi"
- 既然 JavaScript 数组属于对象,其中的元素就可以使用 JavaScript delete 运算符来删除:
var fruits = ["Banana", "Orange", "Apple", "Mango"]; delete fruits[0]; // 把 fruits 中的首个元素改为 undefined
使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之。
3.拼接数组
- splice() 方法可用于向数组添加新项:
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2, 0, "Lemon", "Kiwi");
第一个参数(2)定义了应添加新元素的位置(拼接)。
第二个参数(0)定义应删除多少元素。
其余参数(“Lemon”,“Kiwi”)定义要添加的新元素。
- 使用 splice() 来删除元素
通过聪明的参数设定,您能够使用 splice() 在数组中不留“空洞”的情况下移除元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1); // 删除 fruits 中的第一个元素
//第一个参数(0)定义新元素应该被添加(接入)的位置。
//第二个参数(1)定义应该删除多个元素。
//其余参数被省略。没有新元素将被添加。
4.合并(连接)数组
- concat() 方法通过合并(连接)现有数组来创建一个新数组:
- concat() 方法不会更改现有数组。它总是返回一个新数组。
- concat() 方法可以使用任意数量的数组参数:
var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3); // 将arr1、arr2 与 arr3 连接在一起
//concat() 方法也可以将值作为参数:
var arr1 = ["Cecilie", "Lone"];
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]);
5.裁剪数组
- slice() 方法用数组的某个片段切出新数组。
- slice() 方法创建新数组。它不会从源数组中删除任何元素。
- slice() 可接受两个参数,比如 (1, 3),该方法会从开始参数选取元素,直到结束参数(不包括)为止。
- 如果结束参数被省略,比如第一个例子,则 slice() 会切出数组的剩余部分。
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3);
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(2);
6.自动 toString()
- 如果需要原始值,则 JavaScript 会自动把数组转换为字符串。下面两个例子将产生相同的结果:
- 所有 JavaScript 对象都拥有 toString() 方法。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
(二)比较常用且重要的方法
1.排序
- sort() 方法是最强大的数组方法之一
//sort() 方法以字母顺序对数组进行排序:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
//reverse() 方法反转数组中的元素。您可以使用它以降序对数组进行排序:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort(); // 对 fruits 中的元素进行排序
fruits.reverse(); // 反转元素顺序
/*默认地,sort() 函数按照字符串顺序对值进行排序。不过,如果数字按照字符串来排序,则 "25" 大于
"100",因为 "2" 大于 "1"。正因如此,sort() 方法在对数值排序时会产生不正确的结果。我们通过一
个比值函数来修正此问题: */
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){
return a - b});
//使用相同的技巧对数组进行降序排序:
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){
return b - a});
//比值函数:比较函数的目的是定义另一种排序顺序。比较函数应该返回一个负,零或正值,这取决于参数:
function(a, b){
return a-b}
//当 sort() 函数比较两个值时,会将值发送到比较函数,并根据所返回的值(负、零或正值)对这些值进行排序。
//以随机顺序排序数组
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){
return 0.5 - Math.random()});
//查找最高(或最低)的数组值:JavaScript 不提供查找数组中最大或最小数组值的内建函数。不过,在对数组进行排序之后,您能够使用索引来获得最高或最低值。升序排序:
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){
return a - b});
// 现在 points[0] 包含最低值
// 而 points[points.length-1] 包含最高值
//降序排序:
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){
return b - a});
// 现在 points[0] 包含最高值
// 而 points[points.length-1] 包含最低值
//您可以使用 Math.max.apply 来查找数组中的最高值:
function myArrayMax(arr) {
return Math.max.apply(null, arr);
}
//您可以使用 Math.min.apply 来查找数组中的最低值:
function myArrayMin(arr) {
return Math.min.apply(null, arr);
}
- 排序对象数组
var cars = [
{
type:"Volvo", year:2016},
{
type:"Saab", year:2001},
{
type:"BMW", year:2010}];
//即使对象拥有不同数据类型的属性,sort() 方法仍可用于对数组进行排序。解决方法是通过比较函数来对比属性值:
cars.sort(function(a, b){
return a.year - b.year});
//比较字符串属性会稍复杂:
cars.sort(function(a, b){
var x = a.type.toLowerCase();
var y = b.type.toLowerCase();
if (x < y) {
return -1;}
if (x > y) {
return 1;}
return 0;
});
1.Array.map()方法
此方法是将数组中的每一个元素调用一个提供的函数,结果作为一个新的数组返回,并没有改变原来的数组
let arr = [1,2,3,4]
let newArr = arr.map(x => x*2) //返回新数组[2,4,6,8]
2.Array.forEach()方法
此方法是将数组中的每个元素执行传进提供的函数,没有返回值,等同于for循环,改变原来的数组,注意和map方法的区分
let arr = [1,2,3,4]
arr.forEach(function(item,index,val){
item = item*2
//因为没有返回值,所以可以在这里执行想要的方法
})
3.Array.filter()方法
这个方法是将所有的元素进行判断,将满足条件的元素作为一个新的数组返回
let arr =[1,2,3,4,5]
const isBig = function (value) {
value = value >= 3
return value
}
const isBig = value => value >=3 //一样的
let arr2 = array.filter(isBig)
console.log(arr2);
4.Array.every()方法
这个方法是将所有元素进行判断返回一个布尔值,如果所有的元素都满足条件就会返回true ,否则为false
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
5.Array.reduce()
reduce() 方法在每个数组元素上运行函数,以生成(减少它)单个值。
reduce() 方法在数组中从左到右工作。另请参阅 reduceRight()。
reduce() 方法不会减少原始数组。
这个例子确定数组中所有数字的总和:
var numbers1 = [45, 4, 9, 16, 25]; var sum = numbers1.reduce(myFunction); function myFunction(total, value, index, array) { return total + value; }
请注意此函数接受 4 个参数:
- 总数(初始值/先前返回的值)
- 项目值
- 项目索引
- 数组本身
//上例并未使用 index 和 array 参数。可以将它改写为:
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
//reduce() 方法能够接受一个初始值:
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction, 100);
function myFunction(total, value) {
return total + value;
}
二、关于对象的问题
(一) 项目遇到的方法:
- 将对象直接拷贝到数组可以使用扩展运算符
form.applyForm.push({ …serviceInfo })
- 将数组拷贝到对象中,并且将数组转化成对象
this.serviceInfo = { …applyForm[index] } 这里的applyForm就是一个数组,index表示索引值
- 将对象值清空
Object.keys(serviceInfo).map(item => { serviceInfo[item] = ’ '; })
- 添加和删除属性
1.为对象添加动态属性
obj.userName = “admin”;
obj.passWord = “123456”;
2.移除属性
delete obj.passWord;
console.log(obj);
(一) 最原始的方法:
1.原型链上方法:
//1. hasOwnProperty():返回一个布尔值,指示对象自身属性中是否具有指定的属性(也就是,是否有指定的键)
let object1 = new Object();
object1.property1 = 42;
object1.hasOwnProperty('property1'); // true
object1.hasOwnProperty('toString'); // false
//2. isPrototypeOf():用于测试一个对象是否存在于另一个对象的原型链上
function Foo() {
}
function Bar() {
}
function Baz() {
}
Bar.prototype = Object.create(Foo.prototype);
Baz.prototype = Object.create(Bar.prototype);
let baz = new Baz();
Baz.prototype.isPrototypeOf(baz); // true
Bar.prototype.isPrototypeOf(baz); // true
Foo.prototype.isPrototypeOf(baz); // true
Object.prototype.isPrototypeOf(baz); // true
2.常用的对象方法
1.toString(): 返回一个表示对象的字符串
let o = new Object();
o.toString(); // '[objdec object]' 当对象需要调用toString()方法时会被自动调用.
2.valueOf(): 返回指定对象的原始值
let b = {
name:'小明', age:18}
b.valueOf() //{name:'小明', age:18}
3.Object.assign(): 用于将所有可枚举性的值从一个或多个源对象复制到目标对象。它将返回目标对象
let target = {
a: 1, b: 2 };
let source = {
b: 4, c: 5 };
let returnedTarget = Object.assign(target, source);
target; // { a: 1, b: 4, c: 5 }
returnedTarget; // { a: 1, b: 4, c: 5 }
4.Object.create():创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。即创建一个以指定的对象为原型的子对象。
5.Object.setPrototypeOf():设置一个指定的对象的原型 ( 即, 内部[[Prototype]]属性)到另一个对象或null。
6.Object.getPrototypeOf():返回指定对象的原型(内部[[Prototype]]属性的值)。
7.Object.defineProperties():直接在一个对象上定义新的属性或修改现有属性,并返回该对象。
let obj = {
};
Object.defineProperties(obj, {
'property1': {
value: true,
writable: true
},
'property2': {
value: 'Hello',
writable: false
}
});
obj.property1; // true
obj.property2; // 'Hello'
8.Object.defineProperty():会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象
let o = {
};
let bValue = 1;
Object.defineProperty(o, "b", {
get : function(){
return bValue;
},
set : function(newValue){
bValue = newValue;
console.log('bValue变了');
},
enumerable : true,
configurable : true
});
console.log(o.b); //1
o.b = 2; //'bValue变了'
9.Object.keys():会返回一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用for…in循环遍历该对象时返回的顺序一致
10.Object.values():返回一个给定对象自身的所有可枚举属性值的数组,值的顺序与使用for…in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )
11.Object.entries():返回一个给定对象自身可枚举属性的键值对数组,其排列与使用for…in循环遍历该对象时返回的顺序一致(区别在于 for-in 循环还会枚举原型链中的属性)
12.Object.fromEntries():把键值对列表转换为一个对象,是Object.entries()的逆操作
let obj = {
a: 1, b: 2, c: 3 };
let keys = Object.keys(obj);
let values = Object.values(obj);
let entries = Object.entries(obj);
keys; // ['a','b','c']
values; // [1,2,3]
entries; // [['a',1],['b',2],['c',3]]
let fromEntries = Object.fromEntries(entries);
fromEntries; // {a: 1, b: 2, c: 3}
13.Object.is():判断两个值是否是相同的值
Object.is('foo', 'foo'); // true
Object.is(window, window); // true
Object.is('foo', 'bar'); // false
Object.is([], []); // false
var foo = {
a: 1 };
var bar = {
a: 1 };
Object.is(foo, foo); // true
Object.is(foo, bar); // false
Object.is(null, null); // true
// 特例
Object.is(0, -0); // false
Object.is(0, +0); // true
Object.is(-0, -0); // true
Object.is(NaN, 0/0); // true