美文网首页
ES6语法整理合集

ES6语法整理合集

作者: Web_Fei | 来源:发表于2020-03-06 22:35 被阅读0次

解构赋值

*特别有用,尤其是ajax赋值

let [a,b,c] = [12,4,5]
console.log(a,b,c)  //12,4,5
注意:左右两边结构要保持一直

json:

let {name,age,job} = {
    name:'hany',
    age:18,
    job:'程序员'
}

字符串模板

``字符串模板--优点:可以随意换行 `${变量名}`
let name = '韩梅梅'
let age = 19
let str = `这个人叫${name},今年${age}岁`
console.log(str) //这个人叫韩梅梅,今年19岁

字符串的相关操作

1.字符串查找
str.indexOf(要找的东西),返回索引位置,没有找到返回-1
str.includes(要找的东西),返回值true或者false

2.判断浏览器
console.log(navigator.userAgent.includes('Chrome')) true/false

3.字符串是否以谁开头
str.startsWith(检测东西)

4.字符串是否以谁结尾
str.endsWith(检测东西)

5.重复字符串
str.repeat(次数)

6.填充字符串
let str = 'apple'
let padstr = 'xxx'
let endstr = 'xxx'

str.padStart(整个字符串长度,填充东西)
console.log(str.padStart(str.length+padstr.length,padstr))

str.endStart(整个字符串长度,填充东西)
console.log(str.endStart(str.length+endstr.length,endstr))

扩展运算符,Rest运算符(...方法)

...: [1,2,3,4]->...[1,2,3,4]->1,2,3,4
...: 1,2,3,4,5->...1,2,3,4,5->[1,2,3,4,5]

剩余参数用法:必须放到最后

function show(a,b,...c){
    console.log(a,b) //1,2
    console.log(c) //[3,4,5]
}
show(1,2,3,4,5)

数组相关方法

Array.from()
作用:把类数组(获取一组元素,Arguments...)对象转成数组
观点:只要具备length就可以使用

let array = {
    0: 'apple',
    1: 'orange',
    2: 'mango',
    3: ['people1','people2','people3'],
    'length': 4
}
let arr = Array.from(array )
console.log(arr) // ['apple','orange','mango',['people1','people2','people3']]

Array.of()
作用:把一组值,转成数组

let arr = Array.of('apple','banana','orange')
console.log(arr) // ["apple", "banana", "orange"]

arr.find()
作用:找出第一个符合条件的数组成员,如果没找到就返回undefind

let arr =  [1,9,20,60,100,61,101,300]
let newarr = arr.find((val, index, arr) => {
     return val > 200
})
console.log(newarr) //300

arr.findIndex()
作用:查找符合条件数组成员下标,没有找到返回-1

let arr =  [1,9,20,60,100,61,101,300]
let newarr = arr.findIndex((val,index,arr)=>{
     return val>200
})
console.log(newarr) // 7

arr.fill()
作用:填充 arr.fill(填充的东西,开始位置,结束位置)

let arr = new Array(10)
arr.fill('默认',1,3)
console.log(arr) //[empty, "默认", "默认", empty × 7]

arr.includes()
作用:arr.includes(要找的东西)查找数组中是否有某个值,返回值true或者false

arr.forEach()
代替普通for循环

let arr = ['one','two','three','four','five']
arr.forEach((val,index,arr)=>{
     console.log(val,index,arr)
     //val是值  index下标  arr数组
})

arr.map()
非常有用,做数据交互"映射",正常情况下,需要配合return,返回一个新数组,若是没有return,相当于forEach

let arr = [
    {title:'标题1',read:50,hot:100},
    {title:'标题2',read:60,hot:200},
    {title:'标题3',read:70,hot:300},
    {title:'标题4',read:80,hot:400},
]
let newarr = arr.map((val,index,arr)=>{
    let newjson = {}
    newjson.head = `新${val.title}`
    newjson.click = val.read + 100
    newjson.heat = val.hot * 2
    return newjson
})
console.log(newarr)
//[{title:'新标题1',read:150,hot:200},{title:'新标题2',read:160,hot:400},{title:'新标题3',read:170,hot:600},{title:'新标题4',read:180,hot:800}]

注意:平时只要用map,一定要有return

arr.filter()
过滤,过滤一些不合格的"元素",如果回调函数返回true,则保留下来

let arr = [
    {title:'标题1',read:50,hot:100},
    {title:'标题2',read:60,hot:200},
    {title:'标题3',read:70,hot:300},
    {title:'标题4',read:80,hot:400},
]
let newarr = arr.filter((val,index,arr)=>{
    return val.hot == 100
})
console.log(newarr)//[{title:'标题1',read:50,hot:100}]

arr.some()
类似查找,数组里面某一个元素符合条件,返回true

let arr = ['one','two','three','four','five']
let newarr = arr.some((val,index,arr)=>{
    return val == 'three'
})
console.log(newarr)//true

arr.every()
数组里面所有元素都要符合条件,才返回true

let arr = [1,3,5,7,9]
let newarr = arr.every((val,index,arr)=>{
     return val%2 == 1
})
console.log(newarr)//true

箭头函数

let show = function(){}
let show = ()=>{}

注意:
1.this的问题,定义函数所在的对象,不在是运行所在的对象
2.箭头函数里面没有arguments,用'...'
3.箭头函数不能当构造函数

对象相关用法

Object.is()
作用:用来比较两个值是否相等

Object.is('a','a') //true
Object.is(NaN,NaN) //true
Object.is(+0,-0)   //false

Object.assign()
作用:用来合并对象,合并参数

let 新对象 = Object.assign(目标对象,source1,source2,source3...)
let json1 = {a:1}
let json2 = {b:2}
let json3 = {c:3}
let newObj = Object.assign({},json1,json2,json3) //{a:1,b:2,c:3}

相关文章

  • ES6语法整理合集

    解构赋值 *特别有用,尤其是ajax赋值 json: 字符串模板 字符串的相关操作 1.字符串查找str.inde...

  • 深入浅出ES6

    本迷你书是InfoQ特别推出的深入浅出ES6专栏合集迷你书,传送门ECMAScript 定义了: 语言语法 - 语...

  • 6 【单向链表】单向链表

    昨天写链表出现了一些问题,而且现有教材有些代码陈旧,没有使用ES6语法,于是啃了一天的ES6,笔记还在整理,整理好...

  • ES6 JS 类与继承、静态方法

    一 类 ES6以前的语法 console.log("----------------------ES6以前的语法-...

  • ES6 JS 类与继承、静态方法

    一 类 ES6以前的语法 console.log("----------------------ES6以前的语法-...

  • JS数组去重

    1、ES6语法filter()去重 2、ES6语法new Set()去重

  • es6 小点收集

    今天整理一下es6目前知道的几个小点,这周把es6的新语法看熟悉 let ,const 首先为啥要引进let ,c...

  • 合集

    JavaScript合集 ES6 ES6新特性原生实现一个promiseSymbol 实例 JavaScript读...

  • ES6基础语法整理

    1. 声明变量let和const let声明的变量引入了块级作用域 const声明的常量不允许重新赋值 2. 箭头...

  • React基础知识点-ES6基础语法

    ES6语法

网友评论

      本文标题:ES6语法整理合集

      本文链接:https://www.haomeiwen.com/subject/qslarhtx.html