ES6语法整理合集

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

ES6语法整理合集
深入浅出ES6
6 【单向链表】单向链表
ES6 JS 类与继承、静态方法
ES6 JS 类与继承、静态方法
JS数组去重
es6 小点收集
合集
ES6基础语法整理
React基础知识点-ES6基础语法

解构赋值

*特别有用，尤其是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}