JS数组对象常用方法

一、数组新增方法

1.1 forEach 方法 迭代或者遍历

没有返回值，本质上等同于 for 循环，
不支持 continue，用 return false 或 return true 代替。
不支持 break，用 try catch/every/some 代替,详情见JavaScript forEach() 方法

array.forEach(function(currentvalue, Index, arr))

arr.forEach 过后，就开始便利数组，里边的 funciton 是回调函数

• currentvalue：数组当前项的值
• index：数组当前项的索引
• arr：数组对象本身

示例：

 // forEach  迭代(遍历)数组
 let arr = [1,2,3]
 arr.forEach(function (value,index,array){
   console.log(`第${index}个,值是:${value},隶属于${array}`);
 })

结果：

案例，求和：

let arr = [1,2,3]
let sum = 0
arr.forEach(value => sum+=value)
console.log(sum); // 6

1.2 filter 过滤数组

array.filter(function(currentValue,index,arr))

• filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有素组， 主要用于筛选数组

• 注意： 它直接返回一个新数组

• currentValue ：数组当前项的值

• index: 数组当前项的索引

• arr: 数组对象本身

实例：

// filter 过滤or筛选数组
let arr = [12, 64, 88, 7,8,9,13,100, 5, 10]
let newArr = arr.filter(function (value, index) {
  // return value >= 20  // 取出大于等于20的数
  return value % 2 == 0  //取出所有偶数
})
console.log(newArr); //[12, 64, 88, 8, 100, 10]

1.3 some 返回布尔值

array.some(function(currentvalue, index, array))

some()方法用于检测数组中是否有满足条件的元素

注意 ：它返回值是布尔值,如果查找到这个元素，就返回true，如果查找不到返回 false

如果找到第一个满足条件的元素则 终止循环 不在继续查找

• currentvalue：数组当前项的值
• index：数组当前项的索引
• array：数组对象本身

some 与 filter 的区别：

• filter 査找满足条件的元素返回的是一个数组而且是把所有满足条件的元素返回回来
• some也是查找满足条件的元素是否存在,返回的是一个布尔值,如果查找到第一个满足条件的元素就终止循环

1.4 find 返回第一个元素值 或者 undefined

find() 方法返回数组中满足条件的第一个元素的值。否则返回 undefined。

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);// 12

let ary = [{
  id: 1,
  name: "张三"
}, {
  id: 2,
  name: "李四"
}];
let target = ary.find(item => item.id == 2)
console.log(target); // {id: 2, name: "李四"}

1.5 findIndex 返回第一个索引或者 -1

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));//3

1.6 indexOf 返回第一个索引

indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4

console.log(beasts.indexOf('giraffe'));
// expected output: -1

1.7 findIndex 与 indexOf 对比

1、findIndex()和indexOf方法实现都是通过循环遍历查找。

2、findIndex()的应用场景要比indexOf广泛一些，可以查找大于等于小于，表达式可以随便写，indexOf就只能在第一层查找相等的值。

3、findIndex()实际上相当于一个for循环，只不过找到了你不需要自己退出。

1.8 trim 去除字符串两端空白

去除两端的空白字符，返回一个新的字符串

//  trim() 去除字符串两端的空白
let str = "  andy   "
console.log(str);
let newStr = str.trim()
console.log(newStr);

效果：

1.9 includes 是否包含指定元素

includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。

注意 使用 includes()比较字符串和字符时是区分大小写。

语法:
arr.includes(valueToFind[, fromIndex])
valueToFind

• 需要查找的元素值。

fromIndex 可选

• 从fromIndex 索引处开始查找 valueToFind。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜 （即使从末尾开始往前跳 fromIndex 的绝对值个索引，然后往后搜寻）。默认为 0。

console.log([1,2,3].includes(2)) // true
console.log([1,2,3].includes(4)) // false

二、对象新增的方法

2.1 Object.defineProperty方法

为指定对象设置或修改属性。

Object.defineProperty(obj,prop,descriptor)

• obj：必需。目标对象
• prop：必需。需定义或修改的属性的名字
• descriptor：必需。目标属性所拥有的特性

Object. defineproperty{}第三个参数 descriptor说明：以对象形式{}书写

• value：设置属性的值默认为 undefined
• writable：值是否可以重写。 默认为 afalse
• enumerable：目标属性是否可以被枚举。默认为 false
• configurable：目标属性是否可以被删除或是否可以再次修改特性,默认为 false

示例：

// Object.defineProperty()  定义新属性或修改原有的属性
let obj = {
  id: 1,
  pname: "小米",
  price: 1999
}

// 新增
Object.defineProperty(obj, 'num', {
  value: 1000,
})
// 修改
Object.defineProperty(obj, 'pname', {
  value: "华为"
})
// 设置权限
Object.defineProperty(obj, 'id', {
  // writable 不允许修改  默认值:false
  writable: false
})

// enumerable是否可遍历  configurable可删除或修改特性
Object.defineProperty(obj, 'address', {
  value: "中国山东",
  // 是否可重写
  writable: false,
  // enumerable默认值为false  不允许遍历
  enumerable: false,
  // configurable 如果为false 则不能删除属性或修改特性 默认为false 
  configurable: false
})
Object.defineProperty(obj, 'address', {
  value: "中国山东",
  // enumerable: true, //再次修改会报错
})


obj.id = 2 // 没效果,改不动  因为 writable 为 false
delete obj.address //删除没效果  因为 configurable 为false  能删除属性或修改特性

console.log(obj); // {id: 1, pname: "华为", price: 1999, num: 1000, address: "中国山东"}
console.log(Object.keys(obj)); //["id", "pname", "price"]

在我们最后 console.log(Object.keys(obj))的时候，可以发现 居然只有三个key，num和address都不见了，这是为什么呢？

答案是因为 enumerable设置为了false（默认即为false）,该属性被设置为了false的值不能被枚举(遍历)，所以只有三个key

2.2 keys 方法

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组。

示例：

var obj = {
    id: 1,
    pname: '小米',
    price: 1999,
    num: 2000
};
var arr = Object.keys(obj);
console.log(arr);
arr.forEach(function(value) {
    console.log(obj[value]);
})

结果：