ES6 学习(二)-- 字符串/数组/对象/函数扩展

文章目录

  • [1. 模板字符串](#1. 模板字符串)
    • [1.1 ${} 使用](#1.1 ${} 使用)
    • [1.2 字符串扩展](#1.2 字符串扩展)
      • [(1) ! includes() / startsWith() / endsWith()](#(1) ! includes() / startsWith() / endsWith())
      • [(2) repeat()](#(2) repeat())
  • [2. 数值扩展](#2. 数值扩展)
    • [2.1 二进制 八进制写法](#2.1 二进制 八进制写法)
    • [2.2 ! Number.isFinite() / Number.isNaN()](#2.2 ! Number.isFinite() / Number.isNaN())
    • [2.3 inInteger()](#2.3 inInteger())
    • [2.4 ! 极小常量值Number.EPSILON](#2.4 ! 极小常量值Number.EPSILON)
    • [2.5 Math.trunc()](#2.5 Math.trunc())
    • [2.6 Math.sign()](#2.6 Math.sign())
  • [3. 数组扩展](#3. 数组扩展)
    • [3.1 扩展运算符](#3.1 扩展运算符)
    • [3.2 Array.from()](#3.2 Array.from())
    • [3.3 Array.of()](#3.3 Array.of())
    • [3.4 find() / findIndex()](#3.4 find() / findIndex())
    • [3.5 fill()](#3.5 fill())
    • [3.6 ! flat() / flatMap()](#3.6 ! flat() / flatMap())
  • [4. 对象扩展](#4. 对象扩展)
    • [4.1 对象简写](#4.1 对象简写)
    • [4.2 对象属性 表达式](#4.2 对象属性 表达式)
    • [4.3 扩展运算符 ...](#4.3 扩展运算符 ...)
    • [4.4 Object.assign()](#4.4 Object.assign())
    • [4.5 Object.is()](#4.5 Object.is())
  • [5. 函数扩展](#5. 函数扩展)
    • [5.1 参数默认值](#5.1 参数默认值)
    • [5.2 rest 参数](#5.2 rest 参数)
    • [5.3 name 属性](#5.3 name 属性)
    • [5.4 ! 箭头函数](#5.4 ! 箭头函数)

1. 模板字符串

之前字符串的痛点写法:

本来是 let oli = "

  • kerwin

  • "; 如果字符串中间换行,那么字符串会断开:
    只有加上 \ 才可以:
    标签中间的内容如果想要是可变的,还需要将kerwin 换成变量,使用字符串拼接的方法进行书写,这种写法实在是很麻烦,现在可以采用一种新方法。(反引号:Tab键)

    数组中数据可以使用遍历来获取,也可以通过使用数组的map 映射方法来获取。


    数组上传到页面中会强行的转换成字符串的形式,数据会被 "," 隔开;

    可以写为newlist.join("") 利用空字符串连接

    1.1 ${} 使用

    1. ${ 变量 } 替换了之前字符串拼接方式(引引加加);
    2. ${ 表达式 }
    3. ${ 函数 }

    1.2 字符串扩展

    (1) ! includes() / startsWith() / endsWith()

    1. includes()

      -- 判断字符串中是否存在指定字符(串)

      // true

      // false

      // true

      表示从字符串的索引 1 处开始查找

    2. startsWith()

      // true

      startsWith() 同时也可以添加参数,与includes() 函数参数表示含义相同。

    3. endsWith()

      // true

      // true

      注意:endsWith() 在该处的含义是w 之前的部分是不是以r 结尾的。

    (2) repeat()

    let myname = kerwin

    // kerwinkerwin

    //

    // kerwinkerwin

    //

    2. 数值扩展

    2.1 二进制 八进制写法

    2.2 ! Number.isFinite() / Number.isNaN()

    减少全局性方法,使得语言逐步模块化

    1. Number.isFinite()
    2. Number.isNaN()

      它们与传统的全局方法isFinite() 和isNaN() 的区别在于,传统方法先调用Number(0将非数值的值转为数值,再进行判断,而这两个新方法只对数值有效,Number.isFinite() 对于非数值一律返回false ,Number.isNaN() 只有对于NaN才返回true ,非NaN一律返回false 。

    2.3 inInteger()

    inInteger() -- 判断是否是整数

    2.4 ! 极小常量值Number.EPSILON

    它表示1与大于1的最小浮点数之间的差,2.220446049250313e-16。

    javascript 复制代码
    function isEqual(a,b){
    return Math.abs (a-b)<Number.EPSILON
    3
    console.log(isEqual(0.1+0.2,0.3))//true
    conso1e.1og(0.1+0.2===0.3)//fa1se

    2.5 Math.trunc()

    将小数抹掉,返回一个整数

    javascript 复制代码
    console.log(Math.trunc(1.2))//1
    console.log(Math.trunc(1.8))//1
    console.log(Math.trunc(-1.8))//-1
    console.log(Math.trunc (-1.2))//-1

    2.6 Math.sign()

    Math.sign 方法用来判断一个数到底是正数、负数、还是零。对于非数值,会先将其转换为数值。

    javascript 复制代码
    Math.sign(-100)//-1
    Math.sign(100)//+1
    Math.sign(0)//+0
    
    Math.sign(-0)//-0
    Math.sign("kerwin")/NaN

    3. 数组扩展

    3.1 扩展运算符

    之前复制数组写法:

    ... 展开符写法:

    利用解构赋值和... 展开符复制数组(浅复制):

    3.2 Array.from()

    之前所说的arguments 是类数组结构,不能使用filter() 等方法,但是现在可以使用Array.from() 将类数组结构转换成真数组,就可以使用相关数组方法来。

    3.3 Array.of()

    可以将一组值转换成数组,

    // [ ] (一个长度为3 的空数组)

    // [ 3 ]

    3.4 find() / findIndex()

    1. find() / findIndex() -- 正着寻找

      // 14
      // 3
    2. findLast() / findLastIndex()
      这两个方法在ES13出现。

    // 15

    // 4

    3.5 fill()

    // ['kerwin','kerwin','kerwin']

    // [11,'kerwin',33]

    3.6 ! flat() / flatMap()

    // [1,2,3,Array(3)] [1,2,3,4,5,6]

    数组数据为对象时使用flat() :

    // {...}, {...}

    使用flatMap() :

    // ['安庆','安阳','鞍山','北京',·'保定','包头']

    4. 对象扩展

    4.1 对象简写

    1. 函数简写:

    简写为

    let obj = {

    name,

    ...

    }

    4.2 对象属性 表达式

    // {a: 'kerwin'}

    [ ]也可以进行字符串拼接:[name+'bc']等

    4.3 扩展运算符 ...

    对象扩展运算符 ... ES9才出现

    // {name: "tiechui", age: "100", }

    对象展开合并遇到同名属性后者回复该前者的属性值!

    4.4 Object.assign()

    // {name: "tiechui", age: "100"}

    此处与对象扩展符不同的是,对象扩展符例子中obj1 的name 属性值在对象合并展开时不会发生改变;而此处则会发生改变。

    如果不想要obj1 的属性值发生改变,可以使用以下方法:

    4.5 Object.is()

    判断两个数是否相等

    1. 判断NaN 和NaN 是否相等
      之前使用== 和 === 判断NaN==/===NaN结果都为false ;

    // true

    // false

    // false

    // true
    2. 判断+0 和-0 是否相等

    // false
    // true

    5. 函数扩展

    5.1 参数默认值

    // aaa get true

    // bbb get true

    5.2 rest 参数

    rest 参数 形式是"... 变量名"

    javascript 复制代码
    function test(data){
            console.log(data);
        }
        test(1, 2, 3, 4, 5)

    // 1

    javascript 复制代码
    function test(...data){
            console.log(data);
        }
        test(1, 2, 3, 4, 5)

    // Array(5)

    5.3 name 属性

    // test

    5.4 ! 箭头函数

    箭头函数写法简洁!

    语法格式:

    1. 函数{ }中只有return 语句,写法更加简洁:

    2. 如果返回对象时需要注意: 使用( ) 将返回的对象括起来

      // {name:'kerwin',age:100}

    3. 只有一个参数可以省略( )

    4. 无法访问arguments,无法new

    5. !没有this(也有说法说是指向了它的父作用域)

      普通函数的痛点:

      在函数内部定义定时器,定时器中的this 指向window

      // window

      // 发送undefined到后端,获取列表数据

    使用箭头函数:

相关推荐
也无晴也无风雨25 分钟前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang1 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational2 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、4 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
郝晨妤5 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
别忘了微笑_cuicui6 小时前
elementUI中2个日期组件实现开始时间、结束时间(禁用日期面板、控制开始时间不能超过结束时间的时分秒)实现方案
前端·javascript·elementui