JavaScript高级之ES6
let
- 变量不能重复声明(var 可以)
- 块级作用域(var不是)
- 不存在变量提升(var存在变量提升,能在声明之前使用变量(undefined))
- 不影响作用域链
const
声明常量
- 一定要赋初始值
- 变量名一般使用大写
- 常量的值不能修改
- 块级作用域
- 对数组和对象里的元素修改,不算对常量的修改(常量指向的地址没有发生变化),不会报错
变量的解构赋值
-
数组的解构
const F4 = ['A', 'B', 'C', 'C']
let [a, b, c, d] = F4
-
对象的解构
const zhao = {
name: '赵本山',
age: '不详',
xiaopin: function() {
console.log("我可以演小品");
}
};
let {name, age, xiaopin} = zhao;
模板字符串
-
声明
let str = `我也是字符串哦`;
console.log(str, typeof str);
-
内容中可以直接出现换行符
let str = `<ul>
<li>aaa</li>
</ul>`
-
变量拼接
let lovest = '胡歌';
let out = `${lovest}是我最喜欢的演员!`;
对象的简化方法
允许直接写入变量和和函数,作为对象的属性和方法
let name = 'zhangsan'
let change = function() {
console.log("change");
}
const school = {
name,
change
}
箭头函数及声明特点
let fn1 = function(a, b) {
return a + b;
}
let fn2 = (a, b) => {
return a + b;
}
-
this是静态的,始终指向函数声明时所在的作用域下的this值
-
不能作为构造函数去实例化对象
-
不能使用arguments变量
-
箭头函数的简写
-
省略小括号,当且仅当形参只有一个的时候
let add1 = (n) => {
return n + n;
}
let add2 = n => {
return n + n;
}
-
省略花括号,当代码体只有一条语句的时候,同时省略return
let pow1 = (n) => {
return n*n;
};
let pow2 = (n) => n*n;
let pow3 = n => n*n;
-
箭头函数应用
<div id="app"></div>
<script>
let app = document.getElementById("app");
app.addEventListener("click", function(){
setTimeOut(() => {
this.style.background = 'pink'
}, 2000);
});
</script>
const arr = [1, 2, 3, 4, 5, 6]
const result = arr.filter(item => item % 2 == 0)
函数参数的默认值设置
-
ES6允许给函数参数赋初始值,一般具有默认值的参数位置靠后
function add(a, b, c = 10) {
return a + b + c;
}
-
与解构赋值结合
function connect({host = "127.0.0.0", username, password, port}) {
console.log(host)
console.log(username)
console.log(password)
console.log(port)
}
connect({
username: 'huaozhi',
password: 'password',
port: '8080'
})
rest参数
ES6引入rest参数,用于获取函数的实参,用来代替arguments
-
ES5获取实参的方式
function data() {
console.log(arguments); // 打印对象
}
data('a', 'b');
-
ES6 rest参数
function data(...args) {
console.log(args); // 打印数组
}
data('a', 'b');
rest参数必须放到参数最后
function data(a, b, ...args) {
console.log(a);
console.log(b);
console.log(args); // 打印数组
}
data(1, 2, 3, 4);
扩展运算符
扩展运算符能够将数组转换为逗号分隔的参数序列
const tfboys = ['a', 'v', 'd', 'w'];
function chunwan() {
console.log(arguments);
}
chunwan(...tfboys) // chunwan('a', 'v', 'd', 'w')
扩展运算符的应用
// 1.数组合并
arr1 = [1,2]
arr2 = [3,4]
arr3 = [...arr1, ...arr2] // [1,2,3,4]
// 2.数组克隆
arr4 = [...arr1] //浅拷贝(引用类型)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)