数组,对象,字符串常用方法集结

数组,对象,字符串常用方法集结

一、数组常用方法汇总

(一)最原始的方法:
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

猜你喜欢

转载自blog.csdn.net/luofei_create/article/details/116720938