箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
箭头函数：
ES6 允许使用「箭头」（=>）定义函数。
*/
let fn1 = (a, b) => {
return a + b;
}
// 调用函数
let result = fn1(1, 2);
console.log(result);
// this 是静态的.this 始终指向函数声明时所在作用域下的 this 的值。
function getName() {
console.log(this.name);
}
let getName2 = () => {
console.log(this.name);
}
// 不能作为构造实例化对象
let Person = (name, age) => {
this.name = name;
this.age = age;
}
let me = new Person('xiao', 30);
console.log(me);
// 不能使用 arguments 变量
let fn2 = () => {
console.log(arguments);
}
fn2(1, 2, 3);
// 箭头函数的简写
// 省略小括号, 当形参有且只有一个的时候
let add = n => {
return n + n;
}
console.log(add(9));
// 省略花括号, 当代码体只有一条语句的时候, 此时 return 必须省略
//而且语句的执行结果就是函数的返回值
let pow = n => n * n;
console.log(pow(8));
</script>
</head>
<body>
</body>
</html>
参数默认值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
参数默认值:
ES6 允许给函数参数赋值初始值
*/
// 形参初始值 具有默认值的参数, 一般位置要靠后(潜规则)
function add(a, c = 10, b) {
return a + b + c;
}
let result = add(1, 2);
console.log(result);
// 与解构赋值结合
function connect({ host = "127.0.0.1", username, password, port }) {
console.log(host)
console.log(username)
console.log(password)
console.log(port)
}
connect({
host: 'atguigu.com',
username: 'root',
password: 'root',
port: 3306
})
</script>
</head>
<body>
</body>
</html>
rest参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
rest参数：
ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments
*/
// ES5 获取实参的方式
function date1() {
console.log(arguments);
}
date1('白芷', '阿娇', '思慧');
// rest 参数
function date2(...args) {
console.log(args);// filter some every map
}
date2('阿娇', '柏芝', '思慧');
// rest 参数必须要放到参数最后
function fn(a, b, ...args) {
console.log(a);
console.log(b);
console.log(args);
}
fn(1, 2, 3, 4, 5, 6);
</script>
</head>
<body>
</body>
</html>
spread扩展运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
spread扩展运算符:
『...』 扩展运算符能将『数组』转换为逗号分隔的『参数序列』
*/
// 声明一个数组
const a = ['a', 'b', 'c'];
// 声明一个函数
function chunwan() {
console.log(arguments);
}
chunwan(...a);// chunwan('a','b','c')
// 数组的合并
const kuaizi = ['王太利', '肖央'];
const fenghuang = ['曾毅', '玲花'];
const zuixuanxiaopingguo1 = kuaizi.concat(fenghuang);
const zuixuanxiaopingguo2 = [...kuaizi, ...fenghuang];
console.log(zuixuanxiaopingguo2);
// 数组的克隆
const sanzhihua = ['E', 'G', 'M'];
const sanyecao = [...sanzhihua];// ['E','G','M']
console.log(sanyecao);
// 将伪数组转为真正的数组
const divs = document.querySelectorAll('div');
const divArr = [...divs];
console.log(divArr);// arguments
</script>
</head>
<body>
</body>
</html>
