concat 连接两个或多个数组，并返回结果

concat()可以连接两个或多个数组，并将新的数组返回

不会改变原数组

    var arr1 = [1, 2, 3]
    var arr2 = [4, 5, 6]
    var arr3 = arr1.concat(arr2)
    console.log(arr3);//[1, 2, 3, 4, 5, 6]

join 数组转字符串

数组转字符串，不会改变原数组 将字符串返回

在join（）中指定一个字符串作为参数，这个字符串会成为连接符

不指定连接符，默认使用 逗号作为连接符

var arr1 = [1, 2, 3]
var arr2 = arr1.join()
console.log(arr2);//1,2,3

reverse 反转数组

会修改原数组

var arr1 = [1, 2, 3]
    arr1.reverse()
    console.log(arr1);// [3, 2, 1]

sort 排序

会改变原数组

a - b 升序

b - a 降序

var arr1 = [1, 2, 3]
arr1.sort((a, b) => b - a)
console.log(arr1);//[3, 2, 1]

Array.of 默认值

var arr = Array.of(100)
console.log(arr)//100
console.log(arr.length)// 1

Array.fill填充默认值

var arr = Array(100) //此时是100个空 length是100
var arr = Array(10).fill(0) // 此时是10个0

字符串转数组的几种方法

方法一
var str = "hello,word"
var arr = str.split(",")//['hello', 'word']

方法二 具有length属性才可以转化
from可以将伪数组转化为真实数组
var obj = {
0:"张三",
1:18,
length:2
}
console.log(Array.from(obj)) // ['张三', 18]

indexOf()查找元素

var arr = [1,2,3,4]
arr.indexOf(3) // 返回索引2

var arr = [1,2,3,4,"5"]
arr.indexOf(5) // 返回-1 查找不到返回-1 严格类型查找

var arr = [5,1,2,3,4,5]
arr.indexOf(5,1) //5 arr.indexOf(要查找的元素,查找的起始位置（索引）)

find 查找元素，把元素返回，适合引用 数据类型

let lessons = [{ name: "js" }, { name: "css" }, { name: "java" }]
let status = lessons.find(item => item.name === "js")
console.log(status);//{name: 'js'}

findIndex查找元素，把元素索引位置返回

let lessons = [{ name: "js" }, { name: "css" }, { name: "java" }]
let status = lessons.findIndex(item => item.name === "js")
console.log(status);//0

every 监测数组所有元素是否符合条件

● 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
● 如果所有元素都满足条件，则返回 true。
● 注意： every() 不会对空数组进行检测。
注意： every() 不会改变原始数组

var user = [
{ name: "张三", js: 80 },
{ name: "李四", js: 90 },
{ name: "王麻子", js: 40 }
]
const res = user.every(item => {
return item.js >= 60
})
console.log(res ? "全部及格" : '有同学不及格');//有同学不及格

some（）方法检测数组中的元素是否满足指定条件

some() 方法会依次执行数组的每个元素

● 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
● 如果没有满足条件的元素，则返回false。

注意： some() 不会对空数组进行检测。

注意： some() 不会改变原始数组。

var ages = [3, 10, 18, 20];
let res = ages.some(item => {
return item > 10
})
console.log(res);//true

var ages = [3, 10, 18, 20];
let res = ages.some(item => {
return item > 100
})
console.log(res);//false

filter() 过滤

注意：filter删选所有满足条配件的，find返回第一个满足条件的

注意： filter() 不会对空数组进行检测。

注意： filter() 不会改变原始数组。

let lesson = [
{ name: "张三", age: 13 },
{ name: "里斯", age: 13 },
{ name: "王麻子", age: 14 }
]
const res = lesson.filter(item => {
return item.age == 13
})
console.log(res);
//0: {name: '张三', age: 13}
1: {name: '里斯', age: 13}

map() 映射

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组。

值类型不会改变原数组，引用类型会改变原数组因为是吧地址拿过去了

值类型

let arr = ['js', 'php', 'html']
const res = arr.map(item => {
return item = ${item}入门到放弃
})
console.log(res);// ['js入门到放弃', 'php入门到放弃', 'html入门到放弃']
console.log(arr);//['js', 'php', 'html']

引用类型

let lesson = [
{ name: "张三", age: 13 },
{ name: "里斯", age: 13 },
{ name: "王麻子", age: 14 }
]
lesson.map(item => {
return item.sex = '男'

    })

    console.log(lesson);

//输出结果 改变原数组了
0: {name: '张三', age: 13, sex: '男'}
1: {name: '里斯', age: 13, sex: '男'}
2: {name: '王麻子', age: 14, sex: '男'}

引用类型 浅拷贝方法

let lesson = [
{ name: "张三", age: 13 },
{ name: "里斯", age: 13 },
{ name: "王麻子", age: 14 }
]
const res = lesson.map(item => {
return Object.assign({ sex: '男' },item)
})
console.log(res);
// res输出结果
0: {sex: '男', name: '张三', age: 13}
1: {sex: '男', name: '里斯', age: 13}
2: {sex: '男', name: '王麻子', age: 14}
console.log(lesson);
//lesson输出结果
0: {name: '张三', age: 13}
1: {name: '里斯', age: 13}
2: {name: '王麻子', age: 14}

Object.entries 可以将对象转换为二维数组

let hd = {
name: '你好啊',
year: 12312
}
console.log(Object.entries(hd));

[

[
    "name",
    "你好啊"
],
[
    "year",
    12312
]

]

记录一：扁平化 n 维数组

[1, [2, 3]].flat(2); // [1, 2, 3]
[1, [2, 3, [4, 5]]].flat(3); // [1, 2, 3, 4, 5]

Array.flat(n) 是 ES10 扁平化数组的 api， n 表示维度， n 值为 Infiniti 时维度为无限大。
js 实现：利用递归和数组合并方法 concat 实现扁平
function flatten(arr) {
while(arr.some(item => Array.isArray(item))) {
arr = [].concat(...arr);
}
return arr;
}
flatten([1, [2, 3]]); // [1, 2, 3]

记录二：去重

let arr = [1,2,3,4,1,2,3,4]
Array.from(new Set(arr)); // [1, 2, 3, 4]
[...new Set(arr)]; // [1, 2, 3, 4]

Set 是 ES6 新出来的一种定义不重复数组的数据类型。
Array.from 是将类数组转化为数组。
… 是扩展运算符，将 set 里面的值转化为字符串。

● js 实现：可以根据双层循环过滤掉重复项。

Array.prototype.distinct = function () {
var arr = this,
result = [],
i,
j,
len = arr.length;
for (i = 0; i < len; i++) {
for (j = i + 1; j < len; j++) {
if (arr[i] === arr[j]) {
j = ++i;
}
}
result.push(arr[i]);
}
return result;
};
[1, 2, 2, 3].distinct(); // [1, 2, 3];

记录三：排序

[1, 2, 3, 4].sort(); // [1, 2, 3, 4] 默认是升序
[1, 2, 3, 4].sort((a, b) => b - a); // [4, 3, 2, 1]
sort 是 js 内置的排序方法，参数为一个函数

● js 实现：冒泡排序

Array.prototype.bubleSort = function () {
let arr = this,
len = arr.length;
for (let i = 0; i < len; i++) {
for (let j = i + 1; j < len; j++) {
if (arr[j - 1] > arr[j]) {
[arr[j - 1], arr[j]] = [arr[j], arr[j - 1]];
}
}
}
return arr;
}[(2, 1, 3)].bubleSort(); // [1, 2, 3]

记录四：最大值

Math.max(...[1, 2, 3, 4]); // 4
Math.max.apply(this, [1, 2, 3, 4]); // 4
[1, 2, 3, 4].reduce((prev, cur, curIndex, arr) => {
return Math.max(prev, cur);
}); // 4

记录五：求和

[1, 2, 3, 4].reduce((prev, cur, curIndex, arr) => {
return prev + cur;
}, 0); // 10

记录六：合并

var a = [1, 2, 3, 4];
var b = [5, 6];
a.concat(b); // [1, 2, 3, 4, 5, 6]
[...a, ...b]; // [1, 2, 3, 4, 5, 6]
[].push.apply(a, b); // [1, 2, 3, 4, 5, 6]
b.map((item) => {
a.push(item);
}); // [1, 2, 3, 4, 5, 6]

记录七：判断是否包含

[1, 2, 3].includes(4); // false
[1, 2, 3].indexOf(4); // -1 表示没有
[1, 2, 3].find(item => item === 3); // 3 如果没有返回 undefined
[1, 2, 3].findIndex(item => item === 3); // 2 如果没有则返回 -1

includes(), find(), findIndex() 是 ES6 的 api。

记录八：类数组转换

类数组：表示有 length 属性，但是不具备数组的方法。

Array.prototype.slice.call(arguments); // arguments 是类数组（伪数组）
Array.prototype.slice.apply(arguments);
Array.from(arguments);
[...arguments];

// 可运行示例
function a () {
return [...arguments];
}
a(1, 2); // array

Array.from({ length: 9 }, () => 0); // [0, 0, 0, 0, 0, 0, 0, 0, 0]

// document.querySelectorAll('.color'); 返回的也是类数组
var targets = document.querySelectorAll('.color');
[].forEach.apply(targets, function(item){
// do something.
});

// slice 实现
Array.prototype.slice = function(start, end) {
var result = new Array();
start = start || 0;
end = end || this.length;
for(var i = start; i < end; i ++){
result.push(this[i]);
}
return result;
}

call、apply：改变 slice 里面的 this 指向 arguments， 所以 arguments 也可以调用数组的方法。
Array.from: 将类数组或可迭代对象创建为数组。
… 将数组扩展为字符串，再定义为数组。

记录九：每项设置值

[1, 2, 3].fill(false); // [false, false, false]
Array.from({ length: 9 }, () => 0); // [0, 0, 0, 0, 0, 0, 0, 0, 0]

fill 是 ES6 的方法。

记录十：单项处理

// every 每项都满足返回 true
[1, 2, 3].every(item => { return item > 2 }); // false

// 有一项满足返回 true
[1, 2, 3].some(item => { return item > 2 }); // true

// 数组过滤
[1, 2, 3].filter(item => { return item > 2 }); // [3]

some、every、filter 是 ES5 的 api。

记录十一：对象、数组转化

Object.keys({ name: "zhangsan", age: 14 }); // ["name", "age"]
Object.values({ name: "zhangsan", age: 14 }); // ["zhangsan", 14]
Object.entries(["zhangsan", 14]); // [["name", "zhangsan"], ["age", 14]]
Object.fromEntries(["name", "zhangsan"], ["age", 14]); // ES10 的 api，Chrome 不支持，firebox 输出 { "name": "张三", "age": 14 }

slice 数组中提取指定的元素

slice从数组中提取指定的元素 该方法不会改变原数组 返回新数组

参数1截取开始位置的索引，包含结束索引

参数2截取结束位置的索引，不好含结束索引

第二个参数可以不写，此时截取从开始索引及往后的所有元素

        var arr = [1, 23, 56, 7, 8, 12]
        var res = arr.slice(1, 4)
        console.log(res);//(3) [23, 56, 7]

splice 删除元素，并向数组添加新元素

可以删除数组中指定的元素 会影响原数组 会将指定的元素从原数组中删除 并将删除的元素作为返回值

参数1开始位置的索引

参数2表示删除的数量

参数3及以后可传递新的元素，元素会插入到开始位置的前面

  var arr = [1, 23, 56, 7, 8, 12]
  arr.splice(1, 4)
  console.log(arr);// [1, 12]

concat 连接两个或多个数组，并返回结果

concat()可以连接两个或多个数组，并将新的数组返回

不会改变原数组

        var arr1 = [1, 2, 3]
        var arr2 = [4, 5, 6]
        var arr3 = arr1.concat(arr2)
        console.log(arr3);//[1, 2, 3, 4, 5, 6]

join 数组转字符串

数组转字符串，不会改变原数组 将字符串返回

在join（）中指定一个字符串作为参数，这个字符串会成为连接符

不指定连接符，默认使用 逗号作为连接符

  var arr1 = [1, 2, 3]
        var arr2 = arr1.join()
        console.log(arr2);//1,2,3

reverse 反转数组

会修改原数组

    var arr1 = [1, 2, 3]
        arr1.reverse()
        console.log(arr1);// [3, 2, 1]

sort 排序

会改变原数组

a - b 升序

b - a 降序

   var arr1 = [1, 2, 3]
        arr1.sort((a, b) => b - a)
        console.log(arr1);//[3, 2, 1]

Array.of 默认值

var arr = Array.of(100)
 console.log(arr)//100
 console.log(arr.length)// 1

Array.fill填充默认值

var arr = Array(100) //此时是100个空 length是100
var arr = Array(10).fill(0) // 此时是10个0

字符串转数组的几种方法

方法一
var  str = "hello,word"
var arr = str.split(",")//['hello', 'word']

方法二  具有length属性才可以转化
from可以将伪数组转化为真实数组
var obj = {
    0:"张三",
    1:18,
    length:2
}
console.log(Array.from(obj)) // ['张三', 18]

indexOf()查找元素

var arr = [1,2,3,4]
arr.indexOf(3) // 返回索引2

var arr = [1,2,3,4,"5"]
arr.indexOf(5) // 返回-1  查找不到返回-1 严格类型查找

var arr = [5,1,2,3,4,5]
arr.indexOf(5,1) //5  arr.indexOf(要查找的元素,查找的起始位置（索引）)

find 查找元素，把元素返回，适合引用 数据类型

let lessons = [{ name: "js" }, { name: "css" }, { name: "java" }]
    let status = lessons.find(item => item.name === "js")
        console.log(status);//{name: 'js'}

findIndex查找元素，把元素索引位置返回

let lessons = [{ name: "js" }, { name: "css" }, { name: "java" }]
    let status = lessons.findIndex(item => item.name === "js")
        console.log(status);//0

every 监测数组所有元素是否符合条件

• 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。

• 如果所有元素都满足条件，则返回 true。

• 注意： every() 不会对空数组进行检测。
  注意： every() 不会改变原始数组

  var user = [
            { name: "张三", js: 80 },
            { name: "李四", js: 90 },
            { name: "王麻子", js: 40 }
        ]
        const res = user.every(item => {
            return item.js >= 60
        })
        console.log(res ? "全部及格" : '有同学不及格');//有同学不及格
  

some（）方法检测数组中的元素是否满足指定条件

some() 方法会依次执行数组的每个元素

• 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
• 如果没有满足条件的元素，则返回false。

注意： some() 不会对空数组进行检测。

注意： some() 不会改变原始数组。

  var ages = [3, 10, 18, 20];
        let res = ages.some(item => {
            return item > 10
        })
        console.log(res);//true


   var ages = [3, 10, 18, 20];
        let res = ages.some(item => {
            return item > 100
        })
        console.log(res);//false

filter() 过滤

注意：filter删选所有满足条配件的，find返回第一个满足条件的

注意： filter() 不会对空数组进行检测。

注意： filter() 不会改变原始数组。

  let lesson = [
            { name: "张三", age: 13 },
            { name: "里斯", age: 13 },
            { name: "王麻子", age: 14 }
        ]
        const res = lesson.filter(item => {
            return item.age == 13
        })
        console.log(res);
//0: {name: '张三', age: 13}
  1: {name: '里斯', age: 13}

map() 映射

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组。

值类型不会改变原数组，引用类型会改变原数组因为是吧地址拿过去了

#值类型 
let arr = ['js', 'php', 'html']
        const res = arr.map(item => {
            return item = `${item}入门到放弃`
        })
        console.log(res);// ['js入门到放弃', 'php入门到放弃', 'html入门到放弃']
        console.log(arr);//['js', 'php', 'html']


#引用类型
 let lesson = [
            { name: "张三", age: 13 },
            { name: "里斯", age: 13 },
            { name: "王麻子", age: 14 }
        ]
        lesson.map(item => {
            return item.sex = '男'

        })
    
        console.log(lesson);
//输出结果 改变原数组了
0: {name: '张三', age: 13, sex: '男'}
1: {name: '里斯', age: 13, sex: '男'}
2: {name: '王麻子', age: 14, sex: '男'}

#引用类型 浅拷贝方法
   let lesson = [
            { name: "张三", age: 13 },
            { name: "里斯", age: 13 },
            { name: "王麻子", age: 14 }
        ]
        const res = lesson.map(item => {
          return  Object.assign({ sex: '男' },item)
        })
        console.log(res);
// res输出结果
0: {sex: '男', name: '张三', age: 13}
1: {sex: '男', name: '里斯', age: 13}
2: {sex: '男', name: '王麻子', age: 14}
        console.log(lesson);
//lesson输出结果
0: {name: '张三', age: 13}
1: {name: '里斯', age: 13}
2: {name: '王麻子', age: 14}

Object.entries 可以将对象转换为二维数组

 let hd = {
      name: '你好啊',
      year: 12312
    }
 console.log(Object.entries(hd));

#[
    [
        "name",
        "你好啊"
    ],
    [
        "year",
        12312
    ]
]

浅拷贝的几种方法[浅拷贝不能深层次拷贝]

let hd = {
      name: '你好啊',
      year: 12312
    }

    // 浅拷贝的几种方法
    let obj = { ...hd }
    obj.name = '132'
    console.log(obj);//{name: '132', year: 12312}
    console.log(hd);//{name: '你好啊', year: 12312}
方法2

   let obj = Object.assign({}, hd)
    obj.name = 'hello'
    console.log(obj);//{name: 'hello', year: 12312}
    console.log(hd);//{name: '你好啊', year: 12312}

深拷贝

 案例1
 let hd = {
      name: 'hello',
      year: 999,
      user: {
        name: "word"
      }
    }

    function copy(object) {
      let res = {}
      for (const key in object) {
        res[key] = typeof object[key] == 'object' ? copy(object[key]) : object[key]
      }
      return res
    }

    let data = copy(hd)
    data.user.name = 'hello word'
    console.log(JSON.stringify(data, null, 2));
    console.log(JSON.stringify(hd, null, 2));

/*
{
  "name": "hello",
  "year": 999,
  "user": {
    "name": "hello word"
  }
}
index.html:34 {
  "name": "hello",
  "year": 999,
  "user": {
    "name": "word"
  }
}
*/
案例2
 let hd = {
      name: 'hello',
      year: 999,
      user: {
        name: "word"
      },
      arr: [123, 456]
    }
    function copy(object) {
      let res = object instanceof Array ? [] : {}
      for (const [k,v] of Object.entries(object)) {
        res[k] = typeof v== 'object' ? copy(v) : v
      }
      return res
    }
    let data = copy(hd)
    data.arr.push(789)
    console.log(JSON.stringify(data, null, 2));
    console.log(JSON.stringify(hd, null, 2));
/*
{
  "name": "hello",
  "year": 999,
  "user": {
    "name": "word"
  },
  "arr": [
    123,
    456,
    789
  ]
}
index.html:54 {
  "name": "hello",
  "year": 999,
  "user": {
    "name": "word"
  },
  "arr": [
    123,
    456
  ]
}
*/

使用闭包 实现区间筛选

  var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
        function between(a, b) {
            return function (v) {
                return v > 2 && v < 7
            }
        }
        console.log(arr.filter(between(2, 7)));

方法2

    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
     var a = arr.filter(item => {
             if (item > 2 && item < 7) return item
        })
        console.log(a);