您的当前位置:首页正文

js数组,对象学习与其他知识

2024-11-10 来源:个人技术集锦

数组,对象方法和数组相等判断的学习

一.数组方法

forEach()

forEach() 方法对数组的每个元素执行一次给定的函数。

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// "a"
// "b"
// "c"

使用方式为arr.forEach(callback(currentValue [, index [, array]])[, thisArg]) 。
重点
1.如果使用箭头函数表达式来传入函数参数, thisArg 参数会被忽略,因为箭头函数在词法上绑定了 this 值
2.返回值为undefined
3.forEach() 方法按升序为数组中含有效值的每一项执行一次 callback 函数,那些已删除或者未初始化的项将被跳过

// three被跳过了。
//当到达包含值 "two" 的项时,整个数组的第一个项被移除了,这导致所有剩下的
// 项上移一个位置。因为元素 "four" 正位于在数组更前的位置,所以 "three" 会被跳过。   
// forEach()不会在迭代之前创建数组的副本。
var words = ['one', 'two', 'three', 'four'];
words.forEach(function(word) {
  console.log(word);
  if (word === 'two') {
    words.shift();
  }
});
// one
// two
// four

4.forEach() 被调用时,不会改变原数组,也就是调用它的数组( callback 函数在被调用时可能会改变原数组,(就是可以间接的改变原数组))

// 处理列表数据
  @action dealEmployeeInfos(data) {
    data.forEach((item) => { // 会对原数据修改
      const Obj = item;
      const {
        directSupervisor, numberOneLeader,
      } = item;
      const a = directSupervisor.users;
      const b = numberOneLeader.users;
      const directSupervisors = this.dealEmployeeInfoData(a);
      const numberOneLeaders = this.dealEmployeeInfoData(b);
      Obj.directSupervisors = directSupervisors;
      Obj.numberOneLeaders = numberOneLeaders;
      Obj.f = 1;
      item.directSupervisor = 1; // 会报错不能直接修改
      console.log(Obj.f); // 1
      console.log(Obj); // 含有obj.f
      console.log(item); // 含有obj.f
    });
    return data; // 修改后的数据
  }

5.forEach() 为每个数组元素执行一次 callback 函数;与 map() 或者 reduce() 不同的是,它总是返回 undefined 值,并且不可链式调用。
6. 除了抛出异常以外,没有办法中止或跳出 forEach() 循环。

Array.prototype.every()

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold)); //  true

使用方式为arr.every(callback(element[, index[, array]])[, thisArg])
注意:
every 和数学中的"所有"类似,当所有的元素都符合条件才会返回true。若传入一个空数组,无论如何都会返回 true。如果发现了不符合的,every 方法将会立即返回 false。
callback 只会为那些已经被赋值的索引调用。不会为那些被删除或从未被赋值的索引调用。

// 普通版
function isBigEnough(element, index, array) {
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough);   // false
[12, 54, 18, 130, 44].every(isBigEnough); // true
// 箭头函数版
[12, 5, 8, 130, 44].every(x => x >= 10); // false
[12, 54, 18, 130, 44].every(x => x >= 10); // true

二.对象方法

hasOwnProperty()

hasOwnProperty() 方法会返回一个布尔值,指示对象自身属性中是否具有指定的属性(也就是,是否有指定的键)。

const object1 = {};
object1.property1 = 42;

console.log(object1.hasOwnProperty('property1'));
// true

console.log(object1.hasOwnProperty('toString'));
// false

console.log(object1.hasOwnProperty('hasOwnProperty'));
// false

含义:所有继承了 Object 的对象都会继承到 hasOwnProperty 方法。这个方法可以用来检测一个对象是否含有特定的自身属性;该方法会忽略掉那些从原型链上继承到的属性(如果指定的属性在指定的对象或其原型链中in运算符返回true)。

Object.keys()

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。

var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

// array like object with random key ordering
var anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']

// getFoo is a property which isn't enumerable
var myObj = Object.create({}, {
  getFoo: {
    value: function () { return this.foo; }
  }
});
myObj.foo = 1;
console.log(Object.keys(myObj)); // console: ['foo']

Object.assign()

1.Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// Object { a: 1, b: 4, c: 5 }

使用方式:Object.assign(target, …sources)
2.如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。

3.Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象()。

4.该方法使用源对象的[[Get]]和目标对象的[[Set]],所以它会调用相关 getter 和 setter。因此,它分配属性,而不仅仅是复制或定义新的属性

5.String类型和 Symbol 类型的属性都会被拷贝。

// 拷贝 symbol 类型的属性
const o1 = { a: 1 };
const o2 = { [Symbol('foo')]: 2 };

const obj = Object.assign({}, o1, o2);
console.log(obj); // { a : 1, [Symbol("foo")]: 2 } (cf. bug 1207182 on Firefox)
Object.getOwnPropertySymbols(obj); // [Symbol(foo)]

6.在出现错误的情况下,例如,如果属性不可写,会引发TypeError,如果在引发错误之前添加了任何属性,则可以更改target对象。Object.assign 不会在那些source对象值为 null 或 undefined 的时候抛出错误。
7.继承属性和不可枚举属性不能拷贝。

// 继承属性和不可枚举属性是不能拷贝的
const obj = Object.create({foo: 1}, { // foo 是个继承属性。
    bar: {
        value: 2  // bar 是个不可枚举属性。
    },
    baz: {
        value: 3,
        enumerable: true  // baz 是个自身可枚举属性。
    }
});

const copy = Object.assign({}, obj);
console.log(copy); // { baz: 3 }

三.js中判断两个数组是否相等的方法

1、 将两个数组转成字符串比较,但是发现他们只是顺序不相等也被当做不相等

[1,2,3].toString()== [3,2,1].toString() // false

2、我们可以先把数组排序按照从小到大的顺序sort()函数

[1,2,3].sort().toString()== [3,2,1].sort().toString() 
//true 这样的就是"1,2,3"=="1,2,3"结果是相等的

3、如果数组里的元素是标量,非object类型,可以使用==比较数组里的元素:

scalarArrayEquals(array1,array2) {
return array1.length==array2.length &&
array1.every(function(v,i) { return v === array2[i]});
}
显示全文