ES6-let变量声明
let细节:
- let 声明的变量,在代码块中,则作用域在代码块中
var声明的变量,在代码块中,作用域没有限制 - var 可以声明多次
let只能声明一次 - let 不存在变量提升
var 存在变量提升
变量提升就是指某个变量在前面没有定义,但是后面定义了,在前面用这个变量时不会报错,只是认为没有值
<script type="text/javascript">
console.log('x=', x)
var x = 'tom'
</script>
而使用let时:
<script type="text/javascript">
console.log('x=', x)
let x = 'tom'
</script>
ES6-const常量
- 常量在定义时,需要赋值
- 常量赋值后不能修改
不赋值或者后面修改都会报错
ES6-数组解构
- 解构赋值是对赋值运算符的扩展
- 是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值
- 主要有两种形式:数组解构和对象解构
<script type="text/javascript">
let arr = [1, 2, 3]
//如果要看某个变量的类型
console.log('arr=>', arr)
console.log('============================')
//数组解构[取出元素]
//1.传统
let x = arr[0], y = arr[1], z = arr[2]
console.log(x, y, z)
console.log('============================')
//2.ES6风格
let [a, b, c] = arr
console.log(a, b, c)
console.log('============================')
let [num1, num2, num3] = [100, 200, 300]
console.log(num1, num2, num3)
</script>
ES6-对象结构
<script>
let user = { name: '张三', age: 20 }
//传统方式取出属性-解构
console.log(user.name, ' ', user.age)
console.log('============================')
//ES6对象解构
// 1.把 monster对象的属性,赋值给{name, age}
// 2.{name, age}的取名 name 和 age 要和 user 对象的属性名保持一致
// 3.使用{},不要使用[]
// 4.{name, age} 顺序没有要求
let { name, age } = user
console.log('name=', name, 'age=', age)
console.log('============================')
//还有其他的形式,比如方法上使用对象解构
function f1({ name, age }) {
console.log('f1-name=', name, 'f1-age=', age)
}
f1(user)
</script>
ES6-模板字符串
- 模板字符串使用反引号 ` 将字符串包裹
- 可用作普通字符串
- 可用来定义多行字符串,即可换行字符串原生输出
- 字符串插入变量和表达式,使用
${}
- 字符串中调用函数
<script>
let str1 = `for(int i = 0; i< 10; i++){
System.out.println("i=" + i);
}`
console.log('str1=', str1)
console.log('============================')
let name = 'zhangsan'
//当解析 ${} ,就找最近的name遍历,进行替换
let str2 = `名字=${name}`
console.log(str2)
console.log('============================')
function sayHi(name) {
return 'hi' + ' ' + name;
}
let name1 = 'lisi'
let str3 = `${sayHi(name1)}`
console.log(str3)
</script>
ES6-对象声明简写
<script>
const age = 20
const name = 'zhangsan'
//传统
let user = { name: name, age: age }
//ES6
// 1. {name, age} 表示对象的属性名是name, age
// 2. 属性name的值是从变量/常量 name 来的
let user1 = { name, age }
console.log("user=>", user1)
</script>
ES6-对象方法简写
<script>
//传统
let user = {
name: 'zhangsan',
age: 20,
sayHi: function () {
console.log('name=', this.name, 'age=', this.age)
}
}
user.sayHi();
console.log('============================')
//ES6
let user1 = {
name: 'zhangsan',
age: 20,
sayHi() {
console.log('name=', this.name, 'age=', this.age)
}
}
user1.sayHi()
</script>
ES6-对象运算符扩展
<script>
let cat = {
name: '小花猫',
age: 2
}
//拷贝对象(深拷贝)
let cat1 = { ...cat }
cat1.name = '大花猫'
console.log('cat=>', cat)
console.log('cat1=>', cat1)
//合并对象[深拷贝,合并后的对象指向新的空间]
let user = {
name: 'lisi',
age: 20
}
let student = {
gender: '男',
address: '北京市'
}
let user_student = { ...user, ...student }
console.log("user_studnet=>", user_student)
</script>
ES6-箭头函数
- 箭头函数提供更加简洁的函数书写方式
- 基本语法是:
(参数列表) => {函数体}
- 箭头函数没有参数或有多个参数,要用()括起来,箭头函数只有一个参数,可以省略()
- 箭头函数函数体有多行语句,用{}包裹,表示代码块
- 函数体只有一行语句,并且需要返回结果时,可以省略{},结果会自动返回
- 箭头函数多用于匿名函数的定义
<script>
//传统
var f1 = function (n) {
return n * 2
}
console.log('传统=' + f1(2))
//ES6
let f2 = (n) => {
return n * 2
}
console.log('ES6=' + f2(3))
let f3 = n => n * 2
console.log('ES6=' + f3(4))
</script>