JavaScript ES6新特性
JavaScript ES6新特性
这篇笔记讲了 ES6 新增的声明变量的方法，箭头函数，剩余参数 扩展运算符(…args)，和ES6中新增的数组字符串方法，和 Set 数据结构
声明变量方法
let 关键字
-
let 声明的变量只在块级作用域有效
- 块级作用域：两个大括号之间
-
原来的作用域是一个函数，用 let 的话作用域变成了
{}之间 -
let 可以防止循环变量变成全局变量
for(let i = 0;i < 2;i++) {}
console.log(i);
// 报错，i 变量未定义
- let 没有变量提升 (也就是不能先使用后定义)
- 暂时性死区：外部同名变量无法穿透大括号作用域
// 暂时性死区
var num = 10;
if(true) {
let num = 20;
console.log(num);
}
// 输出结果 20
const 关键字
- const：声明常量，也就是内存地址不能改变的量
- const 声明的常量有块级作用域 (只能在两个大括号之间使用)
- const 定义的常量时必须赋初始值
- 下面一段代码：
const PI = 3.14;
PI = 100;
// 报错：TypeError: Assignment to constant variable.
const arr = [100,200];
arr[0] = 'a';
arr[1] = 'b';
console.log(arr);
// 输出：['a','b']
arr = ['a','b'];
// 报错
- 这里普通函数修改数据内容的时候会报错，但是复杂数据类型修改数据内容的时候就没有报错，这是为什么呢
- 这里我参考了JS 使用const声明常量的本质（很多人都有误解）里的内容
const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。
但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指针，const只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。
三种声明方法的区别
| var | let | const |
|---|---|---|
| 函数级作用域 | 块级作用域 | 块级作用域 |
| 存在变量提升 | 不存在变量提升 | 不存在变量提升 |
| 值可更改 | 值可更改 | 值不可更改 |
- const 关键字不需要实时监听变量的变化，所以效率要比 var，let 高
解构赋值
- 解构赋值可以把对象或者数组里面的 属性/值 从里面取出，赋给其他的变量
- 例如：
let arr = [1,2,3];
let [a,b,c] = arr;
console.log(a);
// 输出 1
-
里面不止可以使用 let 来定义，还可以使用 var
-
假如变量名比数组里面的内容多，则未分配到内容的变量值为 undefined
-
对象结构同理：
let person = { name: '菜鸟小铭', age: 10 }
let { name, age } = person;
console.log(name);
console.log(age);
// 输出：菜鸟小铭 10
// 可以使用键值对的形式来获取变量
let {name: myname,age: myage} = person;
// 冒号左侧仅用于匹配，冒号右侧的变量用来赋值
console.log(myname);
console.log(myage);
// 输出：菜鸟小铭 10
- 变量名必须和属性名相同才能取到这个变量的值
- 更多解构赋值的应用可以看MDN的解构
箭头函数
- 箭头函数：
() => {}小括号放形参，大括号放函数体 - 通常把箭头函数赋值给一个变量来调用
const fn = () => {
console.log('菜鸟小铭');
}
- 如果函数中只有一句代码，且执行结果就是返回值，可以省略大括号
- 如果形参只有一个，可以省略小括号
function sum(num1,num2) {
return num1 + num2;
}
// 上下两个函数等价
const sum = (num1,num2) => num1 + num2;
- 注意：箭头函数里的 this 指向定义位置的 this
剩余参数
- 当形参大于实参个数时，可以将剩下的参数表示为一个数组
- 和 arguments 很像，但是像箭头函数中没有 arguments，所以用箭头函数举例
- 使用时参数前面加三个点
...args代表接收所有参数
const sum = (...args) => {
let total = 0;
args.forEach(item => total += item);
}
sum(10, 20, 30);
- 剩余参数还可以用在数组中接受多余的参数 (例如返回的是一个数组的函数可以使用这个特性)
- 例如：
let arr = [1, 2, 3];
let [num, ...num2] = arr;
console.log(num); // 1
console.log(num2); // [2, 3]
扩展运算符
- 扩展运算符
...arr把数组或者对象转为参数序列
let arr = [1, 2, 3];
console.log(...ary);
// 等价于 console.log(1,2,3);
// 输出 1 2 3
- 扩展运算符合并数组：
let arr1 = [1, 2];
let arr2 = [3, 4];
let arr3 = [...arr1, ...arr2];
// 也可以使用 push 方法合并数组
arr1.push(...arr2);
- 这个方法和
apply(this, [arr])方法有点像，apply也可以把数组作为参数去调用，只不过他多了一个改变 this 指向的方法
伪数组转换为真正的数组
-
数组与伪数组区别：(参考资料：JS-数组与伪数组)
-
方法1：使用扩展运算符
var divs = document.getElementsByTagName('div');
const ary = [...divs];
-
变成真正的数组以后可以使用数组的方法 (例如 push)
-
方法2：使用
Array.from方法
// divs 是一个伪数组
var arr = Array.from(divs);
- from 方法还有第二个参数，是一个函数，数组中有多少个元素这个函数就被调用多少次
- 例如给数组中每个元素乘以 2
var arr = Array.from(divs, item => item * 2);
数组，字符串的扩展方法
Array 扩展方法
- find 方法，查找数组中第一个满足条件的值，没有找到返回 undefined
- 之前的 forEach 方法
let arr = [{
id: 1,
name: '菜鸟小铭'
}];
let target = arr.find((item, index) => item.id == 1);
// 输出 arr里的对象
- findIndex 方法 找出第一个复合条件的数组索引，没有找到返回 -1
let arr = [1, 5, 10, 15];
let index = arr.findIndex((value, index) => value > 9);
console.log(index); // 2
- includes 方法，数组是否包含给定的值，返回布尔值
let arr = [1, 2, 3];
arr.includes(2);
// true
String 扩展方法
模板字符串
- 模板字符串用反引号定义：
let name = `菜鸟小铭`;
- 模板字符串可以解析变量 (就像 innerHTML 可以解析标签一样)
let name = '菜鸟小铭';
let sayHello = `hello,${name}`;
// 输出 hello,菜鸟小铭
- 模板字符串内部可以换行
let name = `菜
鸟
小
铭`;
console.log(name);
// 菜
// 鸟
// 小
// 铭
- 在模板字符串里可以调用函数，显示函数的返回值
const name = () => {
return '菜鸟小铭';
};
let sayHello = `${name()} hello`;
// 菜鸟小铭 hello
ES6 新增方法
- 判断字符串是否以某字符串开头或结尾，返回布尔值
let str = 'noobming';
str.startsWith('noob');
// true
str.endsWith('ming');
// true
- 将原字符串重复 n 次，返回重复后的字符串
'noobming'.repeat(2);
// "noobmingnoobming"
set 数据结构
-
set 结构类似于数组，但是成员的值都是唯一的，没有重复的值
-
set 是使用构造函数生成 set 数据结构的
-
创建的时候可以传递数组进去，会自动转换为 set 数据结构(不能像数组一样直接在构造函数中写值，需要把他包裹成一个数组传进去)
-
set 数据结构里面有 size 属性，表示里面有多少种类的值
const s = new Set(['1', '2', '3']);
console.log(s.size);
// 数组作为参数
const s1 = new Set([1, 2, 2]);
console.log(s1.size);
// 输出 2
- set 和 array 的互化 (可以利用 set 为数组去重)
const s = new Set([1, 2, 2]);
// 转化为数组
const arr = [...s];
-
set 常用方法：
- add(value)：添加个值，返回 Set 结构本身
- delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
- has(value)：返回一个布尔值，表示该值是否为 Set 的成员
- clear()：清除所有成员，没有返回值
-
set 遍历：同样也用
forEach()方法
s.forEach(value => console.log(value));