ES6新增语法
什么是ES6 ?
ES的全称是ECMAScript,它是由ECMA国际标准化组织制定的一项脚本语言的标准化规范。
一、let
es6中新增的用于声明变量的关键字
- 具有块级作用域，let声明的变量只在所处于的块级有效
- 不存在变量提升
- 暂时性死区
二、const
用于声明常量
- 具有块级作用域
- 声明变量时必须赋值
- 常量赋值后，值不能修改
三、解构赋值
从数组中提取值，按照对应位置，对变量赋值，对象也可以解构。
1.数组解构
let [a,b,c] = [1,2,3]
console.log(a)
console.log(b)
console.log(c)
//如果解构不成功，返回undefined2.对象解构
let person = {name:'zs', age: 18}
let {name, age} = person
console.log(name) //zs
console.log(age) //18
//还可以起别名
let{name: myname, age:myage} = person
console.log(myname) //zs
console.log(myage) //18四、箭头函数
函数的快捷写法。
- 不需要 function 关键字来创建函数，省略 return 关键字
- 继承当前上下文的 this 关键字， 箭头函数不绑定this关键字，箭头函数中的this,指向的是函数定义位置的上下文this。
() => {}const fn = () => {}
箭头函数小细节：
- 当你的函数有且仅有一个参数的时候，是可以省略掉括号的；
- 当你函数中有且仅有一个表达式的时候可以省略{}
五、模板字符串
- 模板字符串中可以解析变量。
let name = 'zs'
let say = `hello，我的名字叫${name}`
console.log(say)- 模板字符串中可以换行
let zs = { name: 'zs', age:11}
let html = `
${zs.name}
${zs.age}
`
console.log(html)- 在模板字符串中可以调用函数。
const sayHello = function(){
return '哈哈哈哈'
}
let greet = `${sayHello()}`
console.log(greet) //哈哈哈哈六、剩余参数
let arr1 = ['zs', 'ls', 'ww']
let [a, ...b] = arr1
console.log(a) //zs
console.log(b) //ls, ww七、扩展运算符
let arr = [1,2,3]
...arr //1,2,3
console.log(...arr) //1 2 3
console.log(1,2,3) //1 2 3- 用于合并数组
//方法一
let arr1 = [1,2,3]
let arr2 = [4,5,6]
let arr3 = [...arr1, ...arr2]
//方法二
arr1.push(...arr2)- 将伪数组转换为真正的数组
var divs = document.querySelectoer('div')
console.log(divs) //伪数组
var arr = [...divs]
console.log(arr) //正真的数组
arr.push('a') //可以使用数组方法八、构造函数方法Array.from()
将伪数组转换为真正的数组。
1.用法一
//伪数组
let arrayLike = {
'0':'zs',
'1':'ls',
'2':'ww',
length: 3
}
var arr = array.from(arrayLike)
console.log(arr) //['zs', 'ls', 'ww']2.用法二
方法还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。
let arrayLike = {
'0': 1,
'1': 2
}
let arr = array.from(arrayLike, item => item*2)
console.log(arr) //[2,4]九、实例方法
1. find()
用于找出第一个符合条件的数组成员，如果没有找到返回undefined
let arr = [{id:1, name:'zs'},{id:2, name:'ls'}]
let target = arr.find( item => item.id == 2)
console.log(target)2. findIndex()
用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1
let arr = [1,5,10,22,35]
let target = arr.findIndex( item => item>20 )
console.log(target) //33. includes()
表示某个数组是否包含给定的值，返回布尔值。
let arr1 = [1,2,3]
let arr2 = [4,5,6]
let target = arr1.includes(3)
console.log(target) //true十、字符串方法
1. startsWith()
表示参数字符串是否在原字符串的头部，返回布尔值
let str = 'hello lfl 2020'
let a = str.startsWith('hello')
console.log(a) //true2. endsWith
表示参数字符串是否在原字符串的尾部，返回布尔值
let b = str.endsWith('2020')
console.log(b) //true3. repeat()
repeat方法表示将原字符串重复n次，返回一个新字符串。
console.log('x'.repeat(5)) //'xxxxx'十一、set数据结构
它类似于数组，但是成员的值都是唯一的，没有重复的值。
- Set本身是一个构造函数， 用来生成Set数据结构。
const s = new Set()
console.log(s.size) //0- Set函数可以接受一个数组作为参数，用来初始化。
const s = new Set([1,2,3,4,5])
console.log(s.size) //5const s = new Set([1,1,1,2,2,2])
console.log(s.size) //2- 利用set数据结构做数组去重
const s = new Set([1,1,1,2,2,2])
let arr = [...s]
console.log(arr) //[1,2]set数据结构的实例方法
- add(value)：添加某个值,返回Set结构本身
const s = new Set()
s.add(1).add(2).add(3)- delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
s.delete(1)- has(value)：返回一个布尔值，表示该值是否为Set的成员
s.has(2)- clear(）：清除所有成员，没有返回值
s.clear()set数据结构的遍历
Set结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。
const s = new Set([1,2,3,4,5])
s.foreach( value => { console.log(value)} )