ES6+ 数组字符串操作

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);

最后编辑于：2021.12.19 00:06:36

禁止转载，如需转载请通过简信或评论联系作者。

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,921评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,635评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,393评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,836评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,833评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,685评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,043评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,694评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 42,671评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,670评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,779评论 1赞 332
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,424评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,027评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,984评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,214评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,108评论 2赞 351
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,517评论 2赞 343

ES6+ 数组字符串操作

字符串转数组的几种方法

值类型

引用类型

引用类型 浅拷贝方法

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

[

推荐阅读更多精彩内容

引用类型浅拷贝方法