ES6+ 数组字符串操作

作者: 贺大大i | 来源:发表于2021-12-18 21:14 被阅读0次

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

ES6+ 数组字符串操作

字符串转数组的几种方法

值类型

引用类型

引用类型浅拷贝方法

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

[

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

ES6+ 数组字符串操作

字符串转数组的几种方法

值类型

引用类型

引用类型 浅拷贝方法

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

[

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

引用类型浅拷贝方法