精华内容
下载资源
问答
  • es6 flat扁平化数组
    千次阅读
    2019-07-25 11:20:36

    var arr = [555,[888,[99]], , 999];

    console.log(arr.flat(Infinity)) // [555, 888, 99, 999]

    // 

    flat()默认只会拉平一层,flat(n)拉平n层,Infinity无限次

    flat()会跳过空格,返回新数组不改变原数组

    更多相关内容
  • es6 数组扁平化

    2021-03-30 16:55:02
    该方法返回一个新数组,对原数据没有影响。 [1, 2, [3, 4]].flat() // [1, 2, 3, 4] 1 2 上面代码中,原数组的成员里面有一个数组,flat()方法将子数组的成员取出来,添加在原来的位置。 flat()默认只会“拉平”一...

    数组的成员有时还是数组,Array.prototype.flat()用于将嵌套的数组“拉平”,变成一维数组。该方法返回一个新数组,对原数据没有影响。

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


    上面代码中,原数组的成员里面有一个数组,flat()方法将子数组的成员取出来,添加在原来的位置。

    flat()默认只会“拉平”一层,如果想要“拉平”多层的嵌套数组,可以将flat()方法的参数写成一个整数,表示想要拉平的层数,默认为1。

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


    上面代码中,flat()的参数为2,表示要拉平两层的嵌套数组。

    如果不管有多少层嵌套,都要转成一维数组,可以用Infinity关键字作为参数。

    [1, [2, [3]]].flat(Infinity)
    // [1, 2, 3]
    


    如果原数组有空位,flat()方法会跳过空位。

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


    flatMap()方法对原数组的每个成员执行一个函数,相当于执行Array.prototype.map(),然后对返回值组成的数组执行flat()方法。该方法返回一个新数组,不改变原数组。

    // 相当于 [[2, 4], [3, 6], [4, 8]].flat()
    [2, 3, 4].flatMap((x) => [x, x * 2])
    // [2, 4, 3, 6, 4, 8]
    


    flatMap()只能展开一层数组。

     

    展开全文
  • 将二维数组转化成一维数组,就是数据扁平化 let arr = [ ["小明",18], ["小刚",18], [ [ 1,[3,4] ] ] ] console.log(arr.flat(3))//向下提取n层 如果嵌套好多层可以arr.flat(Infinity) ...

    将二维数组转化成一维数组,就是数据扁平化

    let arr = [
        ["小明",18],
        ["小刚",18],
        [
            [
                1,[3,4]
            ]
        ]
    ]
    console.log(arr.flat(3))//向下提取n层

    如果嵌套好多层可以arr.flat(Infinity)

    arr.fill

    arr.includes

    let arr = [0,1,2,3,4]
    // arr.fill("a",2,20)
    //从第二位开始检索
    let flag = arr.includes(3,4)
    console.log(flag)

    字符串新增方法

    startsWith

    endsWith 

    let str = "我要成为大神"
    //从第四位开始检查是"大神"开始
    console.log(str.startsWith("大神",4))
    //只看前四位,false
    console.log(str.endsWith("大神",4))

    repeat

        let str = "a"
        //让a重复30次
        console.log(str.repeat(30))

    模板字符串

    做字符串拼接的实用方法

    let p = document.querySelector("p");
    let name = "小明"
    let age = 20
    let school = "初中"
    p.innerHTML = `今年<strong>${name}</strong>就要<strong>${age}</strong>岁了,终于升入${school}了`

    ${}模板字符串的插值表达式

    和普通字符串的区别,模板字符串可以换行

    插值可以是值或者是函数

    let p = document.querySelector("p");
    let name = function(){
        return "小明2"
    }
    let age = 20
    let school = "初中"
    p.innerHTML = `今年<strong>${name()}</strong>就
    要<strong>${age>13?age:"保密"}</strong>岁了,终于升入${school}了`

    可以用三目表达式

    新增对象方法

    对象新增写法

    let a = 0;
    let b = 1;
    let obj = {
        a:a,
        b:b
    }
    
    //简洁表示
    let obj ={
        a,
        b,
        c(){
        console.log("d")
    }
    }

    简洁表示

    对象合并

    let obj = {
        a:1,
        b:2
    }
    let obj2 = {
        ...obj,
        c:3,
        d:4
    }
    //把obj合并到obj2中
     Object.assign(obj2,obj)
    console.log(obj2)

    或者 obj2 = Object.assign({},obj2,obj)

    把obj2和obj1合并到{}

    或者使用展开运算符

    对象比较Object.is(value1,value2)

    比较两个对象是否相等

    展开全文
  • 数组扁平化去重用到的ES6

    千次阅读 2019-03-09 03:18:36
    数组扁平化 //arr.flat() //arr.toString().split(",") 复制代码数组去重 // Array.from(new Set(arr)) // [...new Set(arr)] 复制代码数组元素变为number类型 // arr.map(Number) 复制代码 总而言之,上结果 Array...

    数组扁平化

    //arr.flat()
    //arr.toString().split(",")
    复制代码

    数组去重

    // Array.from(new Set(arr))
    // [...new Set(arr)]
    复制代码

    数组元素变为number类型

    // arr.map(Number)
    复制代码

    总而言之,上结果

    Array.from(new Set(arr.flat(Infinity)));
    [...new Set(arr.flat(Infinity))];
    [...new Set(arr.toString().split(','))];
    Array.from(new Set(arr.toString().split(',')));
    复制代码

    理解涉及到的ES6数组方法

    flat()

    用于将嵌套的数组“拉平”,变成一维的数组。该方法返回一个新数组,对原数据没有影响。

    [1, 2, [3, 4]].flat()
    // [1, 2, 3, 4]
    [1, 2, [3, 4]].toString().split(",")
    // [1, 2, 3, 4]
    复制代码

    Set 用法

    ES6 提供的新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。利用这个属性我们可以实现数据的去重。Set本身是一个构造函数,用来生成 Set 数据结构。

    const s = new Set();
    [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
    console.log(s) // Set(4) {2, 3, 5, 4}
    
    console.log(new Set([2, 3, 5, 4, 5, 2, 2])) // Set(4) {2, 3, 5, 4}
    复制代码

    扩展运算符 ...

    含义

    可以将一个数组,转换为用逗号隔开的参数序列。

    console.log(...[1,2,3]) // 1,2,3
    console.log(1,...[2,3,4],5) // 1,2,3,4,5
    
    // 函数调用
    var items = [1,2,3]
    arr.push(...items) // 将1,2,3从后添加到数组arr中
    function add(x,y){
        return x+y;
    }
    add(...[1,2]) // 3
    
    // 与函数参数结合使用
    function f(w,x,y,z){}
    f(1,...[2,3],4) 
    
    // 替代apply方法
    Math.max.apply(null,[2,3,4]) // 4
    Math.max(...[2,3,4]) // 4
    // 等同于
    Math.max(2,3,4)
    
    // 扩展元素后面可以放置表达式
    var arr = [
        ...(x>0?['a']:[]), // ...[]不产生任何效果
        'b'
    ]
    复制代码
    应用
    复制数组
    // ES5
    var arr1 = [1,2,3];
    var arr2 = arr1.concat();
    // ES6
    var arr3 = [...arr1];
    复制代码
    合并数组
    var a1 = [{name:'张三'}];
    var a2 = [{name:'李四'}];
    // ES5
    var a3 = a1.concat(a2);
    //ES6
    var a4 = [...a1,...a2];
    复制代码

    需要注意的是以上代码实现的都是浅拷贝

    字符串

    扩展运算符可以将字符串转换为真正的字符

    console.log([...'hello']) //['h','e','e','l','l','o']
    // 这种做法可以正确识别四个字节的Unicode字符
    'x\uD83D\uDE80y'.length // 4
    [...'x\uD83D\uDE80y'].length // 3
    //上面代码的第一种写法,JavaScript 会将四个字节的 Unicode 字符,识别为 2 个字符。
    
    // 实现获取字符串长度
    [...str].length
    复制代码
    实现了 Iterator 接口的对象

    任何定义了遍历器(Iterator)接口的对象,都可以用扩展运算符转为真正的数组。

    let nodeList = document.querySelectorAll('div');
    let array = [...nodeList];
    // 作为一个类数组对象,扩展运算符可以将其转为真正的数组,原因就在于NodeList对象实现了 Iterator 。
    
    let arrayLike = {
      '0': 'a',
      '1': 'b',
      '2': 'c',
      length: 3
    };
    // 因为没有部署Iterator接口,扩展运算符无法将其转化为数组
    let arr = [...arrayLike]; // TypeError: Cannot spread non-iterable object.
    复制代码
    Map 和 Set 结构,Generator 函数

    具备Iterator接口

    let map = new Map([
      [1, 'one'],
      [2, 'two'],
      [3, 'three'],
    ]);
    let arr = [...map.keys()]; // [1, 2, 3]
    复制代码

    对于那些不含Iterator接口的类数组对象可以利用Array.from()将其转换为数组

    Array.from()

    Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。

    let arrayLike = {
        '0': 'a',
        '1': 'b',
        '2': 'c',
        length: 3
    };
    // ES5的写法
    var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
    // ES6的写法
    let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
    复制代码

    所谓类数组的对象,本质特征只有一点,即必须有length属性。因此,任何有length属性的对象,都可以通过Array.from方法转为数组,而此时扩展运算符就无法转换。

    Array.from({ length: 3 });// [ undefined, undefined, undefined ]
    复制代码

    对于还没有部署该方法的浏览器,可以用Array.prototype.slice方法替代

    const toArray = (() =>
      Array.from ? Array.from : obj => [].slice.call(obj)
    )();
    复制代码

    Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。

    Array.from(arrayLike, x => x * x);
    // 等同于
    Array.from(arrayLike).map(x => x * x);
    Array.from([1, 2, 3], (x) => x * x); // [1, 4, 9]
    
    // 取出一组 DOM 节点的文本内容。
    let spans = document.querySelectorAll('span.name');
    // map()
    let names1 = Array.prototype.map.call(spans, s => s.textContent);
    // Array.from()
    let names2 = Array.from(spans, s => s.textContent)
    
    // 返回各种数据的类型。
    function typesof(){
        return Array.from(arguments,value=>typeof value)
    }
    typesOf(null, [], NaN)// ['object', 'object', 'number']
    
    // 获取字符串长度 避免Unicode问题
    Array.from(str).length
    复制代码

    关于Array.of()

    Array.of方法用于将一组值,转换为数组。这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。

    Array.of(3, 11, 8) // [3,11,8]
    Array.of(3) // [3]
    Array.of(3).length // 1
    // Array
    Array() // []
    Array(3) // [, , ,]
    Array(3, 11, 8) // [3, 11, 8]
    // ES5实现Array.of()
    function ArrayOf(){
      return [].slice.call(arguments);
    }
    复制代码

    参考文章:阮一峰ES6入门

    最近算是终于找到了一份算是非常详尽基础的ES6教程,再也不用担心学不会ES6了。强烈推荐!

    转载于:https://juejin.im/post/5c8253e8e51d453e3576414e

    展开全文
  • ES6 flat 与数组扁平化

    千次阅读 2020-10-17 19:43:55
      flat 用于将多维数组拉平(扁平化),不影响原数组,返回新的数组。 [1, 2, [3, [4]]].flat() // [1, 2, 3, [4]]   仅有一个参数depth,用于指定拉平的深度,默认值为1。若depth指定为非正数,将返回原数组,...
  • 1 什么是扁平化? 我去找了一下维基百科,上面并没有关于扁平化的直接解释,只有一个扁平化组织释义。 先来说一下,与扁平化对立的组织:金字塔组织,这个众所周知,它表现的层级结构就是一个金字塔式的形状。 扁平...
  • js数组转为树形结构 树形结构数据扁平化
  • 做树形数据时会有需要处理进行扁平化的操作来拿到里面的每一个孩子的id值,又要保留原有的树去做渲染,利用深拷贝+递归方法完成,直接上代码 const arr1=deepClone(arr) moveChildrenLevel(arr) /** * 树形扁平化 * ...
  • 手册地址:... flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。 语法:var newArray = arr.flat([depth]) dep...
  • 适用于支持ES6语法的项目中。...因此通过遍历出有规律的name,然后通过Form表单提交所有数据,再去处理数据,将其转为分类的结构化数据,作为参数传给后端。 const obj = { id0: 'id000', id1: 'id001', ...
  • 我们都知道当面对一些多维数组转化成一维数组的时候都比较麻烦,但es6的flat方法就会帮我们节约很多时间,而且对原数据也不会有影响。 [1, 2, 3, 4, [5], 6].flat() // [1, 2, 3, 4, 5, 6] 在上面代码中,原数组的...
  • 数据扁平化

    2020-09-11 00:13:17
    数组的扁平化,就是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。 一、递归 循环数组元素,如果还是一个数组,就递归调用该方法 var arr = [1, [2, [3, 4]]]; function flatten(arr) ...
  • 扁平化数据转换成树形数据 formatTree(obj) { let copyedObj = JSON.parse(JSON.stringify(obj)) // 深拷贝源数据 return copyedObj.filter(parent => { let findChildren = copyedObj.filter(child => { ...
  • let data = [ {exist: "false", appId: "1", name: "组织管理1", menuId: 1, id: 1, type: "menu", parentId: "root"}, {exist: "false", appId: "1", name: "组织管理2", menuId: 2, id: 2, type: ...
  • * 将扁平化数据转换成树结构数据 * @param {Array} list 扁平数据 */ function dealTreeData(list) { // 创建一个用ID作Key的对象 let map = {} // 创建一个空数组,用来接收传入的数组 let listData = [] //...
  • 一、用ES6提供的flat() 方法实现 <script> let arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10 ] //flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与...
  • es6学习

    2022-03-24 10:23:30
    ES6使用前言一、取值二、合并数据三、关于if中的判断条件四、数据扁平化五、获取对象属性值指数运算符 `**,**=`链判断运算符` || ,?? ,?.`逻辑赋值运算符`||=、&&=、??=`六、输入框非空的判断七、异步函数...
  • // [1,[2],3,4,5] 使用reduce函数实现数组扁平化 使用reduce函数实现数组的扁平化主要用到下面的几个API。 reduce concat reduce重点是理解其回调函数的两个参数,主要是什么意思,分别是pre,cur。其中pre代表的是...
  • js实现数组扁平化的6种方法

    千次阅读 2022-02-12 15:48:13
    数组扁平化就是将一个多维数组转换为一个一维数组 [1,[2,[3,4,5]]] ==> [1,2,3,4,5] 实现方法 下面就来介绍一下js中实现数组扁平化的6种方式: 1、递归实现 普通的递归思路很容易理解,就是通过循环递归的方式,...
  • 接下来我们来一波反向操作,封装一个可以将树形结构的数据扁平化的方法。这种场景在业务中还是很常见的,比如一个级联选择器,有时候你需要判断某个id或者某个字段,是否存在于该级联选择器的多维数组中,亦或者你...
  • 对于下边这个深层嵌套数组,我们在某些环境可能需要将它进行扁平化(转换为一维数组),比如评论系统种,评论数据可能就会深层嵌套。所以我给大家带来了下边几种方法。 let arr = [1, [2, 3, 4], [3, 5, [1, [4]]]];...
  • js中数组扁平化处理

    2022-01-24 22:35:11
    经典面试题,项目中用js数组操作的地方很多,js数组扁平化是其中一种 什么是数组扁平化? 数组扁平化就是将一个多维数组转换为一个一维数组 实现基本方式 1、对数组的每一项进行遍历。 2、判断该项是否是数组。 3...
  • 你不知道的JS之数据扁平化处理

    千次阅读 2018-09-18 17:24:41
    什么是扁平化扁平化概念的核心意义是:去除冗余、厚重和繁杂的装饰...不难想象,我们为什么要让数据扁平化。那是为了更加能够让信息更加的凸显出来 对于多维数组,扁平化的目的就是让他降维。 以此为知识点...
  • 扁平菜单示例如下:var menu_list = [{id: '1',menu_name: '设置',menu_url: 'setting',parent_id: 0}, {id: '1-1',menu_name: '权限设置',menu_url: 'setting.permission',parent_id: '1'}, {id: '1-1-1',menu_name...
  • var arr = [{ "Id": "123", "Name": "温小鹿第一层", "children": [{ "Id": "456", "Name": "温小鹿第二层", "children": [{ "Id": "789", "Name": "温小鹿第三
  • 数组扁平化的方式

    千次阅读 2019-01-10 20:55:53
    1.利用concat、es6拓展运算符、some、Array.isArray、递归、reduce //法一 function flatArr(arr) { //concat方法每次会拉平一层 let newArr = [].concat(...arr); return newArr.some(Array.isArray) ? flatArr...
  • JS数据扁平化

    2021-12-02 06:11:12
    最近找到了一些数据扁平化的精品文章,这里分享给大家,希望对大家有所帮助 什么是扁平化 数组的扁平化,就是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。 举个例子,假设有个名为 ...
  • 数组扁平化概念数组扁平化是指将一个多维数组变为一维数组[1, [2, 3, [4, 5]]] ------> [1, 2, 3, 4, 5]复制代码实现1. reduce遍历数组每一项,若值为数组则递归遍历,否则concat。function flatten(arr){return ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,596
精华内容 1,038
关键字:

es6 数据扁平化