es6语法糖

ES6的出现让我们写代码的效率大大提升,让我们一起来学习一下吧!

1.let

• let用于声明变量，有块级作用域
• let不允许重复声明,否则会报错
• let不存在变量提升(暂时性死区),不能先使用后声明

下来我们结合代码来区分一下let与var

//var问题

//变量提升,会打印出结果
console.log(name)
var name = "张全错"

//变量覆盖,下边的会重新赋值,结果打印张全错
var name = "张力"
var name = "张全错"
console.log(name)

//没有块级作用域,可以打印i
function name() {
	for(var i = 0; i < 24; i++) {
	
	}
	console.log(i)
}
name()

//let不会存在以上问题

//不存在变量提升,直接报错
console.log(name)
var name = "张全错"

//不允许重新赋值,直接报错
var name = "张力"
var name = "张全错"
console.log(name)

//有块级作用域,外部无法打印循环体里的变量,直接报错
function name() {
	for(var i = 0; i < 24; i++) {
	
	}
	console.log(i)
}
name()

以上就是let所有的特性了,在定义变量的时候建议大家使用let

2.const

• const与let的特性基本是一样的
• const定义一个常量,一旦声明,常量的值就不能改变
• const变量名通常全部大写

//可以打印成果
const word = ['a','b','c']
word.push('e')
console.log(word)

//内存地址发生改变直接报错
word = []

const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。上面代码中，常量word储存的是一个地址，这个地址指向一个数组。不可变的只是这个地址，即不能把word指向另一个地址，但数组本身是可变的，所以依然可以为其添加新元素。

3.解构赋值

//数组解构

let [a,b,c] = [1,2,3]
console.log(a,b,c)

//,占位符 打印出来詹姆斯
let arr = ["科比","库里","詹姆斯","杜兰特"]
let [,,c] = arr
console.log(c)

//对象结构

//打印出库里
let mvp = {
	name:'库里',
	age: 35,
}
let {name} = mvp
console.log(name)

//展开运算符,打印出{c:3,d:4}
let {a,b,...word} = {a:1,b:2,c:3,d:4}
console.log(word)

4.模板字符串

let str1 = 'Patience is'
let str2 = ' the key in life'
//普通字符串拼接
console.log(str1+str2)
//模板字符串拼接
console.log(`${str1}${str2}`)

这样看起来好像普通字符串更方便一点,但模板字符串除了作为普通字符串，还可以用来定义多行字符串，可以在字符串中加入变量和表达式,继续往下看。

function success() {
	return "一定会成功"
}
let string = `张全错${success()}`
console.log(string)
//张全错一定会成功

5.箭头函数

• 箭头函数本身没有作用域(无this),this指向上一层作用域
• 箭头函数属于函数表达式，不存在变量提升
• 箭头函数没有arguments动态参数，但是有剩余参数...arr

//普通函数
function add(num) {
    return num + 10
}
console.log(add(10))

//箭头函数单个参数写法
const add = num => num + 10
console.log(add(10))

//箭头函数多个参数写法
const add = (num1,num2) => {
	return num1 + num2
}
console.log(add(1,2))

//剩余参数
const add = (...arr) => {
	let sum = 0
	for(let i = 0; i < arr.length; i++) {
		sum+=arr[i]
	}
	return sum
}
console.log(add(1,2,3))

//箭头函数没有this,向上一层找到fn函数,所以this指向obj
const obj =  {
	name: "张力",
	age: 22,
	fn: function() {
		console.log(this)
		const fns = () => {
			console.log(this)
		}
		fns()
	}
}
obj.fn()

6.展开运算符

 展开运算符(...)将一个数组进行展开，下面看两个简单的例子

//求数组最大值和最小值
const arr = [24,30,23,35]
console.log(Math.max(...arr))
console.log(Math.min(...arr))

//合并数组
const arr1 = [1,2,3]
const arr2 = [4,5,6]
const arr3 = [...arr1,...arr2]
console.log(arr3) //[1, 2, 3, 4, 5, 6]

剩余参数和展开运算符都是(...)，他俩的区别到底是啥呢？

剩余参数: 函数参数使用，得到真数组

展开运算符: 数组中使用，数组展开

map

数组map方法又叫映射，能够处理数据，并返回一个数组

const arr = ['科比','库里','杜兰特']
const newArr = arr.map(function(ele,index){
    return `${ele}MVP`
})
console.log(newArr) //["科比MVP", "库里MVP", "杜兰特MVP"]

好啦就先更新到这了！