ES6语法第三天

目录

一、数组的拓展方式

1、拓展运算符(Spread Operator): ...

2、includes:查询数组中是否包含这个值(返回布尔值,使用===)

3、find() item, index, arr 返回找到的第一个符合条件的内容

4、findIndex:返回第一个符合条件的索引  没有就返回-1

在数组的拓展方式中,以下方式为数组迭代方式

5、forEach:自行遍历,没有返回值,拼接字符串,求和

6、map:映射一个新数组,数组扁平化

7、filter:过滤,筛选

8、some:查找,true/false

9、every:查找,当每一项都符合条件时返回true,否则返回false

10、reduce((total, item){},初始值)  

二、数组扁平化

        1、arr.flat( n )

        2、数组转字符串,再转数组

        3、数组转JSON字符串 保留原格式 replace(/[|\]/g,"")

        4、使用concat拼接空数组可以降维一层

        5、.some() 方法接受一个回调函数作为参数,该回调函数会对数组中的每个元素执行测试。

判断数组的四种方式

三、 ES6 引入的两种新的数据结构

1、Set(集合)

2、Map(映射)

四、this指向以及修改方式

this 指向

修改this指向

三种方式的不同点

        1、调用方式不同:

        2、传参方式不同:

        3、返回值不同:


一、数组的拓展方式

1、拓展运算符(Spread Operator): ...

        扩展运算符 ... 允许一个数组表达式或者字符串在字面量中被展开。这在函数调用时传入多个参数或者在创建新数组时合并数组时非常有用。

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];
 //[1, 2, 3, 4, 5]

2、includes:查询数组中是否包含这个值(返回布尔值,使用===)

  console.log(arr1.includes('2'));

3、find() item, index, arr 返回找到的第一个符合条件的内容

  let a = arr.find(function (item, index, arr) {
    return item.name === "b"
  })
  console.log(a);

4、findIndex:返回第一个符合条件的索引  没有就返回-1

  var b = arr.findIndex(function (item) {
    return item.name == "e"
  })
  console.log(b);

在数组的拓展方式中,以下方式为数组迭代方式

5、forEach:自行遍历,没有返回值,拼接字符串,求和

  arr.forEach(function (item) {
    item.flag = false
  })
  console.log(arr);

6、map:映射一个新数组,数组扁平化

  let c = arr.map(function (item) {
    return item.name
  })
  console.log(c);

7、filter:过滤,筛选

  let d = arr.filter(function (item) {
    return item.name == "b"
  })
  console.log(d);

8、some:查找,true/false

        当找到第一符合条件的元素,终止循环,返回true

 let e = arr.some(function (item) {
    return item.name == "b"
  })
  console.log(e);

9、every:查找,当每一项都符合条件时返回true,否则返回false

        只要有一项不符合条件,就会终止循环,返回false

  let f = arr.every(function (item) {
    return item.tel == "13344445555"
  })
  console.log(f);

10、reduce((total, item){},初始值)  

        return total += item  对数组中的每个元素执行一个累加操作

  var g = arr.reduce(function (total, item) {
    return total += item.price * item.number
  }, 0)
  console.log(g);

二、数组扁平化

        多维数组使用扁平化将高维数组转为低维数组

        1、arr.flat( n )

                改变其中的n值来改变要扁平化的层数,可以在其中写入 Infinity(无穷大)来保证完全扁平化

    let newArr = arr.flat(Infinity)
    console.log(newArr);
        2、数组转字符串,再转数组
    let newArr1 = arr.toString().split(",").map(item => Number(item))
    console.log(newArr1);
        3、数组转JSON字符串 保留原格式 replace(/[|\]/g,"")
    let newArr2 = JSON.stringify(arr).replace(/\[|\]/g, "")
    console.log(newArr2);
        4、使用concat拼接空数组可以降维一层
    let arr1 = [1, 2]
    [].concat(1, 3, [4, [5, 6]])
        5、.some() 方法接受一个回调函数作为参数,该回调函数会对数组中的每个元素执行测试。
    console.log(arr.some(item => {
        return Array.isArray(item);
    }
    ));

判断数组的四种方式

        四种方法都可以用来检查一个变量是否为数组,但在不同的JavaScript环境中,它们的可靠性和适用性可能会有所不同。例如,在存在多个全局执行上下文(如浏览器中的多个窗口)的情况下,instanceof可能会失效,因为不同的执行上下文可能有自己的Array构造函数。而Array.isArray()Object.prototype.toString.call()则不受这种限制,因此在实际编程中更为推荐使用。        

    console.log(Array.isArray(arr));
    //true
    //Array.isArray() 是ES5引入的一个方法,
    //用于确定传递的值是否是一个数组。如果是数组,则返回true,否则返回false。
    

    console.log(arr instanceof Array);
    //true
    //instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的prototype属性。
    //在这个例子中,如果arr是数组,则arr的原型链上会有Array.prototype,所以返回true。


    console.log(arr.constructor === Array);
    //true
    //每个JavaScript对象都有一个constructor属性,指向创建该对象的构造函数。
    //对于数组来说,这个属性指向Array构造函数。
    //所以这个表达式检查arr.constructor是否等于Array,如果是,则返回true。


    console.log(Object.prototype.toString.call(arr));
    //[object Array]
    //这个方法是通过调用Object.prototype.toString()方法并传入要检查的对象来获取对象的类型。
    //对于数组,这个方法会返回"[object Array]"字符串。
    //这是一种更通用的方法,可以用来确定对象的具体类型,因为它不依赖于构造函数。

三、 ES6 引入的两种新的数据结构

1、Set(集合)

        set是一种集合数据结构,它存储唯一的值,无论是原始值还是对象引用。Set 对象保存值的唯一性是通过使用其内部算法,在添加新元素时比较它们来实现的。

        存储唯一值:Set 数据结构只允许存储唯一的值,无论是原始值或者是对象引用。

        无序:Set 中的元素没有特定的顺序。

        键值对:Set 只包含值,不包含键。

        常用方法:add(value) 添加元素,delete(value) 删除元素,has(value) 检查元素是否存在,clear() 清空所有元素。

2、Map(映射)

        map是一种键值对的集合,它是无序的。任何值都可以作为一个键或一个值。

        键值对:Map 数据结构存储的是键值对,任何值(对象和原始值)都可以作为一个键或一个值。

        有序:Map 中的元素按照插入顺序排列。

        键的唯一性:Map 中的键必须是唯一的,但值可以重复。

        常用方法:set(key, value) 添加或更新键值对,get(key) 获取键对应的值,delete(key) 删除键值对,has(key) 检查键是否存在,clear() 清空所有键值对。

Set(集合)和Map(映射),区别在存储和操作数据的方式,Set存储唯一值,Map存储键值对,Set元素无序,Map元素有序,Set存值,Map存键值对,Set和Map键唯一,Set常用方法add,delete,has,clear,Map常用方法set,get,delete,clear。

四、this指向以及修改方式

this 指向

1.普通函数,this指向window

2.立即执行函数,this指向window

3.定时器,this指向window

4.事件函数,this指向事件源

5.构造函数,构造函数实例化,this指向实例

6.对象中函数this指向该对象

修改this指向

call()

方法.call(需要修改的this指向,参数1,参数2,参数3...)

apply()

方法.apply(需要修改的this指向,[参数1,参数2,....])

bind()

方法.bind(需要修改this指向,参数1,参数2,...)

三种方式的不同点

        1、调用方式不同:

                call和apply都是立即调用,bind返回函数体,需要手动调用

        2、传参方式不同:

                call和bind都是枚举形式传参,apply为数组形式传参

        3、返回值不同:

                call和apply返回的是函数执行的结果,bind返回的是函数体

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值