一、ES6变量声明
- var 声明的变量，没有“块级作用域”的限制；
- let / const 声明的变量，具有“块级作用域”。
var a = 1;
let b = 2;
const c = 3;
let fn = function() {
console.log(4)
}
}
console.log(a); // 1
console.log(b); // 报错ReferenceError，undefined
console.log(c); // 报错ReferenceError，undefined
fn(); // ReferenceError: fn is not defined
- var 声明的变量存在“变量提升”，let / const没有。
function fn() {
console.log(tmp);
if (false) {
// var tmp 变量提升
var tmp = 'hello world';
}
}
fn()
- const 声明的是常量，不能被修改。
c = 2; // TypeError报错
二、解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。函数中可以通过解构数组返回多个结果
- 数组解构赋值
let arr = [1, 'hello', [100,200], {a:1, b:2}, true, undefined];
let [a, b, c, d, e, f] = arr
console.log(a,b,c,d,e,f)
- 使用解构赋值，交换两个变量的值
let x = 1, y = 2;
[x, y] = [y, x]
console.log(x, y)
- 对象解构赋值
let obj = {
a: 1,
b: [1,2,3],
c: false,
d: {name: 'geekxia', age: 10 }
}
let { a, b, c, d, e } = obj
console.log(a, b, c, d, e)
// 别名
let { b: bb } = obj
console.log(bb)
三、字符串方法扩展
// 获取指定索引处理字符
console.log(str.charAt(0))
// 查询字符串中是否包含指定片段，如果存在返回索引号，如果不存在返回-1
console.log(str.indexOf('name0'))
// 判断字符串是否包含指定片段，返回布尔值
console.log(str.includes('geekxia'))
// 判断字段串是否以指定片段开头，返回布尔值
console.log(str.startsWith('he'))
// 判断字段串是否以指定片段结尾，返回布尔值
console.log(str.endsWith('he'))
// 对字符串重复n次,返回新的字符串
console.log(str.repeat(2))
// 对字符串进行头部补全,返回新的字符串
console.log(str.padStart(100, '01'))
// 对字符串进行尾部补全,返回新的字符串
console.log(str.padEnd(100, '01'))
四、Math方法扩展
ES6 在 Math 对象上新增了 17 个与数学相关的方法。
// 去除小数点部分
console.log(Math.trunc(5.5))
// 判断指定值是正数(1),负数(-1),还是零(0)
console.log(Math.sign(0))
// 计算立方根
console.log(Math.cbrt(-8))
// 计算两个数的平方和的平方根
console.log(Math.hypot(3, 4))
// 指数运算符
console.log(2**4)
五、函数扩展
- 函数与解构赋值结合使用
function add ({ a = 0, b = 0 }) {
console.log(a + b)
}
add({a:2, b:3}) // 5
add({a:2}) // 2
add({}) // 0
add() // 报错
- 函数的 rest 参数
function sum(...values) {
let total = 0;
for (let value of values) {
total += value
}
console.log(total)
}
sum(1,2,3)
// 允许尾逗号
sum(1,2,3,4,5,)
六、箭头函数
- 书写方法
//箭头函数只能用于匿名函数
//语法格式
var box = function(){}//原来的写法
var box = () => {};//这就是箭头函数
//调用方式和常规函数一样使用
var box = () => {
console.log(1)
}
box();
function box(){}
box() => {};//报错：声明式函数不能用箭头函数方式书写
document.onclick = () => {//事件处理程序使用
console.log("onclick");
}
var obj = {
fn : () => {//对象方法中使用
console.log("obj");
}
}
obj.fn();
setTimeout(() => {//定时器中使用
console.log("setTimeout");
},100);
(function(){
console.log(2);
})();//匿名函数的自执行
(() => {
console.log(2);
})();//匿名函数的自执行中使用箭头函数
- 箭头函数的参数
function box(a,b){
console.log(a,b);
}
box(1,3)
var box = (a,b) => {//与常规函数一样传参
return a+b;//返回 值也一样使用
}
console.log(box(3,7));
//只有一个参数时，可以 省略小括号
var box = a => {
console.log(a+5);
}
box(3);
var box = a,b => {//超过一个不能省略小括号
console.log(a+b);
}
box(3,6);
var box = => {
console.log(3);//没有参数也不能省略小括号
}
box(3,6);
//只有一行语句可以 省略大括号，自动返回结果
var box = a => a+3;//很少这种情况
console.log(box(4));
var box = a => b = 9;
七、扩展运算符
扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。
- 数组的操作、合并
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr = [...arr1, ...arr2, 7, 8, 9, 10];
console.log(arr)
- 与解构赋值配合，实现数组的截取
let arr = [1, 2, 3, 4, 5, 6]
let [a, b, ...arr1] = arr
console.log(arr1)
- 对象的操作、合并：
let obj1 = { a:1, b:2 }
let obj2 = { c:3, d:4 }
let obj = { ...obj1, ...obj2, e:5, a:6 }
console.log(obj)
- 与解构赋值配合，操作对象：
let obj = { a:1, b:2, c:3, d:4, e:5 }
let { a, b, ...obj1 } = obj
console.log(obj1)
