前端JS方法总结

concat() 方法用于连接两个或多个数组。
concat() 方法不会更改现有数组，而是返回一个新数组，其中包含已连接数组的值。
      const arr1 = [1, 2, 3]
      const arr = [4, 5]
      console.log( arr1.concat(arr)) //[1, 2, 3, 4, 5]

entries() 
方法返回一个新的Array Iterator对象，
该对象包含数组中每个索引的键/值对
注释：entries() 不会更改原始数组。
var arr = ["a", "b", "c"];
var iterator = arr.entries();
// undefined

//使用for…of 循环
for (let e of iterator) {
    console.log(e);
}
// [0, "a"]
// [1, "b"]
// [2, "c"]

Object.entries ,是将对象的键和值都取出来形成一个二维数组
   const obj = { name: 'zhangsan', age: 18 }
      console.log(Object.entries(obj))
      //  0: (2) ['name', 'zhangsan']
      // 1: (2) ['age', 18]
      
      
every 返回一个布尔值
every()方法用于检测数组中的所有元素是否都满足指定条件（该条件为一个函数）。
every()方法会遍历数组的每一项，如果有一项不满足条件，则返回false,
       剩余的项将不会再执行检测；
如果遍历完数组后，每一项都符合条，则返回true。
注释：every() 不对没有值的数组元素执行函数。
注释：every() 不改变原始数组。
若收到一个空数组，此方法在一切情况下都会返回 true。

array.every(function(currentValue,index,arr), thisValue)
参数说明：
第一个参数为一个回调函数，必传，数组中的每一项都会遍历执行该函数。
currentValue：必传，当前项的值
index：选传，当前项的索引值
arr：选传，当前项所属的数组对象
第二个参数thisValue为可选参数，回调函数中的this会指向该参数对象。
var arr = [1000, 2000, 3000]
var flag = arr.every(function (a, b, c) {
    console.log(a + "===" + b + "====" + c) 
    //1000===0====1000,2000,3000
    return a > 2000;
    //数组中的每个元素的值都要大于2000的情况,最后才返回true
})
console.log(flag)   //false


filter 返回一个新数组，如果没有任何数组元素通过测试，则返回空数组。
filter() 方法创建数组，其中填充了所有通过测试的数组元素（作为函数提供）。
注释：filter() 不会对没有值的数组元素执行该函数。
注释：filter() 不会改变原始数组。
var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
callback
用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，
该元素，false 则不保留。它接受以下三个参数：
element
数组中当前正在处理的元素。
index可选
正在处理的元素在数组中的索引。
array可选
调用了 filter 的数组本身。
thisArg可选
执行 callback 时，用于 this 的值。

  var words = ['abcd', 'badc', 'css', 'dd']
      const result = words.filter(function (item, index, array) {
        return item.length > 3
      })
      console.log(result)  //['abcd', 'badc']
    
    
find
find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。
find() 方法为数组中的每个元素都调用一次函数执行：
当数组中的元素在测试条件时返回 true 时, 
find() 返回符合条件的元素，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined
null和undefined转boolean，两者都是false
注意: find() 对于空数组，函数是不会执行的。
注意: find() 并没有改变数组的原始值。
array.find(function(currentValue, index, arr),thisValue)，
其中currentValue为当前项，index为当前索引，arr为当前数组
      const arr = [15, 18, 20]
      console.log(arr.find((item) => item > 15)) //18
      console.log(arr.find((item) => item > 18)) //20
      console.log(arr.find((item) => (item = 0))) //undefined
      
      
findIndex
findIndex() 返回数组中通过测试的第一个元素的索引（作为函数提供）
findIndex() 方法为数组中的每个元素都调用一次函数执行：
如果找到函数返回 true 值的数组元素，则返回该数组元素的索引且不会再调用执行函数。
否则返回 -1
注意: findIndex() 对于空数组，函数是不会执行的。
注意: findIndex() 并没有改变数组的原始值。
      const arr = [15, 18, 20]
      console.log(arr.findIndex((item) => item > 15)) //1
      console.log(arr.findIndex((item) => item > 18)) //2
      console.log(arr.findIndex((item) => (item = 0))) //-1     
       

forEach  返回值underfinded
forEach() 方法按顺序为数组中的每个元素调用一次函数。
注释：对于没有值的数组元素，不执行forEach() 方法。
forEach()有三个参数，第一个是function()函数，第二个是对象；
函数里面有三个参数，
第一个是数组的每一项值（必选），
第二个是数组下标（可选），
第三个是原数组（可选）
      var obj = {
        name: 'zhangsan',
        age: 18,
      }
      const arr = [1, 3, 5]
      arr.forEach((item, index, array) => {
        console.log(item, index, array)
        // 1 3 5  // 0,1,2   // [1,3,5]
      })

forEach()第二个参数对象，使第一个参数函数的this指向对象 
      arr.forEach(function (item, index, array) {
        console.log(this) //{name: 'zhangsan', age: 18}
      }, obj)
       
from
从具有 length 属性或可迭代对象的任何对象返回 Array 对象。
Array.from(object, mapFunction, thisValue)
    var myArr = Array.from("ABCDEFG");
    console.log(myArr);  //['A', 'B', 'C', 'D', 'E', 'F', 'G'] 
       
       
includes  
用来判断一个数组是否包含一个指定的值，
如果是返回 true，否则false。 
includes() 方法区分大小写
array.includes(element, start)
element为必选项，表示要找的元素，
start为可选项，表示从索引值为几的元素开始，默认为0
    const a=["tom","jj"]
    a.includes("tom")  //true
    const a=[1,2,3,1,3]
    a.includes(1,1)  //true


indexOf
返回某个指定的字符串值在字符串中首次出现的位置
如果不存在为 -1，所以它间接可以判断  字符 在不在字符串里
indexOf() 方法对大小写敏感！
      var str = 'Helloworld!'
      console.log(str.indexOf('Hello')) //0
      console.log(str.indexOf('World')) //-1
      console.log(str.indexOf('world')) //5


isArray
isArray()方法确定对象是否为数组。
如果对象是数组，则此函数返回 true，否则返回 false。
Array.isArray(obj)


join
join() 方法将数组作为字符串返回。
元素将由指定的分隔符分隔。默认分隔符是逗号 (,)
注释：join() 方法不会改变原始数组。
       var fruits = ['Banana', 'Orange', 'Apple']
      console.log(fruits.join()) //Banana,Orange,Apple

map
 使用为每个数组元素调用函数的结果创建新数组。
 按顺序为数组中的每个元素调用一次提供的函数(每遍历一次就得到一个值)
注释：map() 对没有值的数组元素不执行函数。
注释：map() 不会改变原始数组。
      var arr1 = [1, 4, 9]
      const map1 = arr1.map((x) => x * 2)
      console.log(map1) //[2, 8, 18]

      const map2 = arr1.map((x) => {
        if (x == 4) {
          return x * 2
        }
      })
      console.log(map2)  // [undefined, 8, undefined]

substr:截取字符串
*参数1：从哪个下标开始截取
*参数2：截取几个长度

split：根据某个字符分割字符串
特点：如果传入空字符串，那代表把字符串中的每个字符都当做数组的一个元素

toUpperCase() 转大写
toLowerCase() 转小写

数组的方法：
pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。
      const arr = [1, 2, 3]
      console.log(arr.pop()) //3
      console.log(arr)      //[1,2]
      
push() 方法向数组末尾添加新项目，并返回新长度。
      const arr = [1, 2, 3]
      console.log(arr.push(4)) //4
      console.log(arr)  //[1, 2, 3,4]
      
在最后添加
unshift() 方法将新项添加到数组的开头，并返回新的长度。
       const arr = [1, 2, 3]
      console.log(arr.unshift(4)) //4
      console.log(arr)       //[4,1, 2, 3]

shift() 方法移除数组的第一项，改变数组的长度，返回值是被移除的项目。
      const arr = [1, 2, 3]
      console.log(arr.shift(2)) //1
      console.log(arr)      //[ 2, 3]

reverse:
将数组中元素的位置颠倒，并返回该数组。
数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。
      var fruits = ['Orange', 'Apple', 'Mango']
      console.log(fruits.reverse()) // ['Mango', 'Apple', 'Orange']


sort：
sort() 方法对数组的项目进行排序。
排序顺序可以是按字母或数字，也可以是升序（向上）或降序（向下）。
默认情况下，sort() 方法将按字母和升序将值作为字符串进行排序。
这适用于字符串（"Apple" 出现在 "Banana" 之前）。
但是，如果数字按字符串排序，则 "25" 大于 "100" ，因为 "2" 大于 "1"。
      var fruits = ['Banana', 'Apple', 'Mango']
      console.log(fruits.sort());   //['Apple', 'Banana', 'Mango']

toString:  转成字符串
toString() 方法返回包含所有数组值的字符串，以逗号分隔。
注释：toString() 方法不会改变原始数组。


slice() 
方法返回一个新的数组对象，
这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）
原始数组不会被改变。

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]


fill可用于向空数组的初始化，接受一个参数，表示填充的值，返回修改后的数组
arr.fill(value[, start[, end]])
alue
用来填充数组元素的值。
start 可选
起始索引，默认值为0。
end 可选
终止索引，默认值为 this.length。

var arr1 = [];
arr1.fill(6);
console.log(arr1);  //[] 原数组中没有定长度，没有数据可以替换，所以结果仍为空

var arr3 = ['a','b','c'];
arr3.fill(7);
console.log(arr3);  //[7,7,7]，将数组的每一项都替换为7

var arr4 = new Array(5);
arr4.fill(5);
console.log(arr4);//[5,5,5,5,5],将数组的5项都填充为5

接受两个参数，用于指定填充的起始位置和结束位置
var arr2 = [0,0,0];
arr2.fill(3,2,5);
console.log(arr2); //[0,0,3]从第二位填充到第四位，但是数组的长度只有3

var arr5 = [1,2,3,4,5];
arr5.fill(6,2,4);
console.log(arr5); //[1,2,6,6,5]将数组的第二位到第三位填充为6


splice：
可以删除
参数1：开始下标
参数2：结束下标（不包括结束下标）
可以替换
参数1：开始下标 
参数2：结束下标（不包括结束下标）
参数3：要替换的内容
可以添加
参数1：开始下标
参数2：跟开始下标相同
参数3：要添加的内容

splice  （）   下标是从0开始   序号从1开始
传递参数 
splice（2） 表示 从索引2开始删除所有元素

传递参数
splice（1，2）  表示从下标为1开始删除2个元素

传递参数  
splice（0,0,index）表示 从下标为0开始，添加一个新元素为index

var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
var removed = myFish.splice(2, 1, "trumpet");

// 运算后的 myFish: ["angel", "clown", "trumpet", "sturgeon"]
// 被删除的元素: ["drum"]


 some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
 some() 方法会依次执行数组的每个元素：
 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
 如果没有满足条件的元素，则返回false。
 注意： some() 不会对空数组进行检测。
 注意： some() 不会改变原始数组。
 arr.some(fn[, thisArg]) 
 参数 fn是用来测试每个元素的函数，接受三个参数：
 item：数组中正在处理的元素。
 index：数组中正在处理的元素的索引值。
 array：some()被调用的数组。
thisArg:执行 callback 时使用的 this 值。
//例子：检测在数组中是否有大于10的元素
 var a = [11, 50, 40, 3]
      function some(item, index, array) {
        console.log(item)
        return item > 10
      }
      a.some(some)
      //11
      //true
      
//例子：检索数组中是否存在某个值
  function some(t, i, a) {
        if (t == 10) {
          console.log(t + '存在于这个数组')
        }
        console.log(10 + '不存在于这个数组')
      }

      var a = [11, 50, 40, 3]
      a.some(some)
      // 10不存在于这个数组
      // false



Object.keys() 
返回一个由一个给定对象的自身可枚举属性组成的数组,
数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 。
  // 传入对象,返回包含对象可枚举属性和方法的数组
      const obj = {
        name: 'zhangsan',
        age: 18,
      }
      console.log(Object.keys(obj)) //['name', 'age']

      // 传入字符串，返回索引值
      var str = 'Bei'
      console.log(Object.keys(str))  //['0', '1', '2']

      //传入数组，返回索引值
      var str = ['Jing', 'Li']
      console.log(Object.keys(str)) //['0', '1']

      //构造函数，返回空数组或者属性名
      function Person(name, age) {
        this.name = 'zhangsan'
        this.age = 18
      }
      console.log(Object.keys(Person)) //[]
      
常用技巧
let person = {name:"张三",age:25,address:"深圳",getName:function(){}}
Object.keys(person).map((key)=>{
　　person[key] // 获取到属性对应的值，做一些处理
}) 


reduce() 方法接收一个函数作为累加器，
数组中的每个值（从左到右）开始缩减，最终计算为一个值。
函数的返回值存储在累加器中（结果/总计）。
注释：对没有值的数组元素，不执行 reduce() 方法。
注释：reduce() 方法不会改变原始数组。
arr.reduce(callback,[initialValue])
reduce 为数组中的每一个元素依次执行回调函数，
不包括数组中被删除或从未被赋值的元素，
接受四个参数：
初始值（或者上一次回调函数的返回值），
当前元素值，
当前索引，
调用 reduce 的数组。

callback （执行数组中每个值的函数，包含四个参数）
    1、previousValue （上一次调用回调返回的值，
    或者是提供的初始值（initialValue））
    2、currentValue （数组中当前被处理的元素）
    3、index （当前元素在数组中的索引）
    4、array （调用 reduce 的数组）
initialValue （作为第一次调用 callback 的第一个参数。）
//例子1：
      var arr = [1, 2, 3]
      var sum = arr.reduce(function (prev, cur, index, arr) {
        console.log(prev, cur, index)
        return prev + cur
      })
      console.log(arr, sum)
      //    1 2 1
      //    3 3 2
      //    [1, 2, 3] 6
     // index是从1开始的，
     第一次的prev的值是数组的第一个值。数组长度是3，但是reduce函数循环2次

//例子2：
    var arr = [1, 2, 3]
      var sum = arr.reduce(function (prev, cur, index, arr) {
        console.log(prev, cur, index)
        return prev + cur
      }, 0)
      console.log(arr, sum)
      //    0 1 0
      //    1 2 1
      //    3 3 2
      //    [1, 2, 3] 6
      // index是从0开始的，
      第一次的prev的值是我们设置的初始值0。数组长度是3，reduce函数循环3次
//例子3：
   var arr = []
      var sum = arr.reduce(function (prev, cur, index, arr) {
        console.log(prev, cur, index)
        return prev + cur
      })
      //报错，"TypeError: Reduce of empty array with no initial value"
     //但是要是我们设置了初始值就不会报错，如下：
       var arr = []
      var sum = arr.reduce(function (prev, cur, index, arr) {
        console.log(prev, cur, index)
        return prev + cur
      }, 0)
      console.log(arr, sum)  // [] 0
      
//例子4：简单用法
      var arr = [1, 2, 3, 4]
      var sum = arr.reduce((x, y) => x + y)
      var mul = arr.reduce((x, y) => x * y)
      console.log(sum) //求和，10
      console.log(mul) //求乘积，24
      
//例子5：高级用法
 1、计算数组中每个元素出现的次数
   let names = ['jack', 'Bob', 'tom']
      let nameNum = names.reduce((pre, cur) => {
        if (cur in pre) {
          pre[cur]++
        } else {
          pre[cur] = 1
        }
        return pre
      }, {})
      console.log(nameNum) //{jack: 1, Bob: 1, tom: 1}
      
2、数组去重
  let arr = [1, 2, 4, 4, 1]
      let newArr = arr.reduce((pre, cur) => {
        if (!pre.includes(cur)) {
          return pre.concat(cur)
        } else {
          return pre
        }
      }, [])
      console.log(newArr) // [1, 2, 4]
      
3、将二维数组转化为一维
  let arr = [
        [0, 1],
        [2, 3],
      ]
      let newArr = arr.reduce((pre, cur) => {
        return pre.concat(cur)
      }, [])
      console.log(newArr) // [0, 1, 2, 3]
      
4、将多维数组转化为一维
  let arr = [
        [0, 1],
        [2, 3],
        [4, [5, 6, 7]],
      ]
      const newArr = function (arr) {
        return arr.reduce(
          (pre, cur) =>
            pre.concat(Array.isArray(cur) ? newArr(cur) : cur),
          []
        )
      }
      console.log(newArr(arr)) //[0, 1, 2, 3, 4, 5, 6, 7]
      
5、对象里的属性求和
  var result = [
        {
          subject: 'math',
          score: 10,
        },
        {
          subject: 'chinese',
          score: 20,
        },
      ]
      var sum = result.reduce(function (prev, cur) {
        return cur.score + prev
      }, 0)
      console.log(sum) //30



递归计算数组
      const array = [5, [[4, 3], 2, 1]]

      function fn(data) {
        if (!Array.isArray(data)) {
          return data
        }

        return data.reduce((pre, cur) => {
          return fn(pre) - fn(cur)
        })
      }

      console.log(fn(array))


Object.values(obj)
obj：被返回可枚举属性值的对象。
  把一个对象的值转换为数组
返回一个数组，其元素是在对象上找到的可枚举属性值。
属性的顺序与通过手动循环对象的属性值所给出的顺序相同。
     var obj = { foo: 'bar', baz: 42 }
      console.log(Object.values(obj)) // ['bar', 42]

      var obj = { 0: 'a', 1: 'b', 2: 'c' }
      console.log(Object.values(obj)) // ['a', 'b', 'c']


Object.defineProperty ()
管理对象
// 以现有对象为原型创建对象
Object.create()

// 添加或更改对象属性
Object.defineProperty(object, property, descriptor)

// 添加或更改对象属性
Object.defineProperties(object, descriptors)

// 访问属性
Object.getOwnPropertyDescriptor(object, property)

// 以数组返回所有属性
Object.getOwnPropertyNames(object)

// 访问原型
Object.getPrototypeOf(object)

// 以数组返回可枚举属性
Object.keys(object)




ES6里的一些方法都常用
forEach
map
以上两个
都是循环遍历数组中的每一项
forEach和map方法里每次执行匿名函数都支持3个参数，参数分别是item（当前
 每一项）、index（索引值）、arr（原数组）
匿名函数中的this都是指向window
只能遍历数组

二、区别
    1.forEach()
     没有返回值。
     2.map() 
     有返回值，可以return 出来。