这里写目录标题
一、解构赋值
ES6允许从数组中提取值,按照对应位置,对变量赋值,对象也可以实现赋值。
1、数组解构
数组解构:允许我们按照一一对应的关系从数组中提取值然后将值赋值给变量。数组变量和值分为两种情况
(1)数组中变量和值数量一致
let ary = [1,2,3];
let [a,b,c] = ary; //等号左边中括号就表示从数组中提取值
console.log(a) //1
console.log(b) //2
console.log(c) //3
(2)数组中变量和值数量不一致
let ary = [1,2,3];
let [a,b,c,d,e] = ary;
console.log(a)
console.log(b)
console.log(c)
console.log(d)
console.log(e)
2、对象解构
对象解构:允许我们使用对象的名字匹配对象的属性,匹配成功将对象属性的值赋值给变量。以下有两种写法:
let person = {name:'anni',age:30,sex:'女'};
let {name,age,sex} = person;
console.log(name)
console.log(age)
console.log(sex)
let person = {name:'anni',age:18,sex:'女'};
let {name: myname} = person; //冒号左边只用于属性匹配,冒号右边的是真正的变量
let {age: myage} = person;
let {sex: sex} = person;
console.log(myname);
console.log(myage);
console.log(sex);
二、扩展运算符
1、扩展运算符可以将数组拆分为以逗号分隔的参数序列。
let ary = ["a","b","c"]
//...ary //"a","b","c"
console.log(...ary) //a,b,c
console.log("a","b","c") //a,b,c
2、扩展运算符可以应用合并数组
//第一种方法
let ary1 = [1,2,3];
let ary2 = [3,4,5];
let ary3 = [...ary1,...ary2];
console.log(ary3);
//第二种方法
let ary1 = [1,2,3];
let ary2 = [3,4,5];
ary1.push(...ary2);
console.log(ary1);
3.给函数传递参数
var arr1=[10,20,13,56,67]
var max = Math.max(...arr1) //可以看作var max = Math.max(10,20,13,56,67)
console.log(max) //结果为67
4.用来复制对象(注意书写的顺序问题)
var obj = {name:'Jack',age:18}
console.log(obj) // {name: 'Jack', age: 18}
var obj2 = {
gender:'男',
name:'Rose',
...obj //注意:展开书写的顺序问题,在有相同成员的时候
}
console.log(obj2)
//结果为 {gender: '男', name: 'Jack', age: 18}
三、箭头函数
1、箭头函数的写法
为什么叫箭头函数( Arrow Function )?因为它的写法,看上去就是一个箭头:(=>)
const doubleValue = function(value){
return value * 2;
}
上述这个函数表达式,如何改写成箭头函数那?
第一步:去掉function;
第二步:在value值后面加上胖括号(=>)
const doubleValue = (value)=>{
return value * 2;
}
console.log(doubleValue(3)); //结果为 6
结果正确表示改写成功啦!
2、箭头函数注意点
- 如果形参
只有一个,则小括号可以省略;
函数体如果只有一条语句,则花括号可以省略,并省略return,
函数的返回值为该条语句的执行结果;- 箭头函数
this 指向声明时所在作用域下 this 的值;
- 箭头函数不能作为构造函数实例化;
- 不能使用 arguments;
const greeting = ()=>{
console.log('hi~');
}
greeting(); //结果为 hi~
const hi = (name)=>{
return "hello" + name;
}
console.log(hi("Anni")) //结果为 helloAnni
const nums = (a,b)=>{
return a+b;
}
console.log(nums(1,2)); //结果为3
//单行函数体的简单写法
const greeting = ()=> console.log('hi~');
greeting(); 结果为 hi~
const hi = name=> "hello" + name;
console.log(hi("Anni")) //结果为 helloAnni
const nums = (a,b)=> a+b;
console.log(nums(1,2)); //结果为3
//多行函数是不能去掉中括号和return 的,
//简化前
const age = [15,17,18];
const res = age.filter(function(age){
const nextAge = age + 1;
return nextAge > 18;
})
console.log(res); //结果为 [18]
//简化后
const age = [15,17,18];
const res = age.filter(age=>{
const nextAge = age + 1;
return nextAge > 18;
})
console.log(res); //结果为 [18]
3、箭头函数的不适用
看下面这个例子:
const btn = document.getElementById(‘Button');
btn.addEventListener('click', () => {
console.log(this === window); // => true
this.innerHTML = 'Clicked button';
});
这里是会有问题的,因为 this 指向了 window,而不是调用它的 btn .
解析:当为一个 DOM 事件绑定回调函数后,触发回调函数时的 this,需要指向当前发生事件的 DOM 节点,也就是这里的 btn。当回调发生时,浏览器会用 btn 的上下文去调用处理函数。箭头函数的this是静态的,始终指向函数声明时所在作用域下的this的值,所以最后的 this.innerHTML 等价于 window.innerHTML,那么问题就在这里了。
解决办法:用函数表达式代替箭头函数。像这样:
btn.addEventListener('click', function() {
console.log(this === btn); // => true
this.innerHTML = 'Clicked button';
});
这样this 便指向了调用它的 btn 。结果就能正常啦!
四、模板字符串
板字符串是ES6中非常重要的一个新特性。比如在处理嵌入表达式、多行字符串、字符串中插入变量、字符串格式化等方面的应用。模板字符串使用反钩号( `` ),而不是单引号或双引号。
const name = 'Anni'
const age = 14
console.log(`大家好,我是${name},今年${age}岁了`) //大家好,我是Anni,今年14岁了
// 等价于
console.log("大家好,我是" + name +",今年" + age + "岁了")
五、Set 和 Map
1、Set含义和基本用法
新数据结构Set。类似于数组,但是成员的值都是唯一的。所以可以用于数组去重。
const s = new Set();
s.add(1);
s.add(2);
s.add(3);
s.add(1);
console.log(s);
打印结果中表现出set 去重的作用。
1)Set 实例的属性:
- Set.prototype.constructor:构造函数,默认就是Set函数。
- Set.prototype.size:返回Set实例的成员总数。
2)Set 实例的方法
主要分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)。
操作方法:
- Set.prototype.add(value):添加某个值,返回 Set 结构本身。
- Set.prototype.delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
- Set.prototype.has(value):返回一个布尔值,表示该值是否为Set的成员。
- Set.prototype.clear():清除所有成员,没有返回值。
const s = new Set();
s.add(1);
s.add(2);
s.add(3);
s.add(1);
s.add(3);
console.log(s); //{1,2,3}
s.delete(3) //true
s.has(3); //false
s.clear(s); //无返回值
3)Set 遍历方法:
-
Set.prototype.keys():返回键名的遍历器(由于 Set 结构没有键名,只有键值(或者说键名和键值是同一个值),所以keys方法和values方法的行为完全一致。)
-
Set.prototype.values():返回键值的遍历器
-
Set.prototype.entries():返回键值对的遍历器
-
Set.prototype.forEach():使用回调函数遍历每个成员
注意:Set的遍历顺序是插入顺序。比如使用 Set 保存一个回调函数列表,调用时就能保证按照添加顺序调用。
Array.from方法可以将 Set 结构转为数组。
const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items);
这就提供了去除数组重复成员的另一种方法。
function dedupe(array) {
return Array.from(new Set(array));
}
dedupe([1, 1, 2, 3]) // [1, 2, 3]
2、Map含义和基本用法
ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。
1)Map 结构的实例有以下属性和操作方法。
size 属性
:size属性返回 Map 结构的成员总数。Map.prototype.set(key, value)
:set方法设置键名key对应的键值为value,然后返回整个 Map 结构。如果key已经有值,则键值会被更新,否则就新生成该键。
set方法返回的是当前的Map对象,因此可以采用链式写法。Map.prototype.get(key)
:get方法读取key对应的键值,如果找不到key,返回undefined。Map.prototype.has(key)
:has方法返回一个布尔值,表示某个键是否在当前 Map 对象之中。
-Map.prototype.delete(key)
:delete方法删除某个键,返回true。如果删除失败,返回false。Map.prototype.clear()
:clear方法清除所有成员,没有返回值。
const person = new Map();
person.set('name','Anni');
person.set('age',18);
person.set('gender','女')
console.log(person); // {'name' => 'Anni', 'age' => 18, 'gender' => '女'}
person.get("name"); //'Anni'
person.get('age'); //18
person.size; //3
person.has('age'); //true
person.set('age',23); //{'name' => 'Anni', 'age' => 23, 'gender' => '女'} map会更新新的值
person.delete('age'); //true
2)遍历方法
Map 结构原生提供三个遍历器生成函数和一个遍历方法。
Map.prototype.keys()
:返回键名的遍历器。Map.prototype.values()
:返回键值的遍历器。Map.prototype.entries()
:返回所有成员的遍历器。Map.prototype.forEach()
:遍历 Map 的所有成员。
需要特别注意的是,Map 的遍历顺序就是插入顺序。
const map = new Map([
['F', 'no'],
['T', 'yes'],
]);
for (let key of map.keys()) {
console.log(key);
}
// "F"
// "T"
for (let value of map.values()) {
console.log(value);
}
// "no"
// "yes"
for (let item of map.entries()) {
console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"
// 或者
for (let [key, value] of map.entries()) {
console.log(key, value);
}
// "F" "no"
// "T" "yes"
// 等同于使用map.entries()
for (let [key, value] of map) {
console.log(key, value);
}
// "F" "no"
// "T" "yes"
上面代码最后的那个例子,表示 Map 结构的默认遍历器接口(Symbol.iterator属性),就是entries方法。
map[Symbol.iterator] === map.entries
// true
3、与其他数据结构的互相转换
1)Map 转为数组
const map = new Map()
.set(num, 7)
.set({a: 3}, ['abc']);
[...myMap]
// [ [ num, 7 ], [ { a: 3 }, [ 'abc' ] ] ]
2)数组 转为 Map
将数组传入 Map 构造函数,就可以转为 Map。
new Map([
[num, 7],
[{a: 3},['abc']]
])
// Map {
// num => 7,
// Object {a: 3} => ['abc']
// }
六、字符串方法
传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。
- includes():返回布尔值,表示是否找到了参数字符串。
- startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
- endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
let s = 'Hello Anni!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('n') // true
这三个方法都支持第二个参数,表示开始搜索的位置(从0开始)。
let s = 'Hello Anni!';
s.startsWith('Anni', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
s.includes('Hello', 0) // true
上面代码表示,使用第二个参数n时,endsWith的行为与其他两个方法有所不同。它针对前n个字符
,而其他两个方法针对从第n个位置直到字符串结束。