目录
一、symbol
二、let和const
三、解构赋值
1、数组的解构
2、对象解构
3、字符串解构
四、新的对象和方法
1、Map
2、Set
3、对象新特性
4、扩展运算符
5、()把伪数组变成数组
6、()
五、函数
1、参数默认值
2、不定参
3、箭头函数
六、类
七、模块导入导出
1、导入
2,导出
八、字符串
一、symbol
ES6新增了一种原始数据类型:创建symbol数据类型的值时,需要给Symbol函数传递一个字符串,另外,每个symbol类型值都是独一无二的,即使传递的是相同的字符串。
const sy = Symbol('test'); // 只能用const 否则报错
const sy1 = Symbol('test'); // 只能用const 否则报错
(typeof sy); //'symbol'
sy == sy1; //false
二、let和const
ES6新增了两个声明变量的关键字:let、const。
- let和const声明的变量不存在变量提升,并且同一变量不能重复声明
- let和const关键字有个特性:"暂时性死区,",其内部使用let和const关键字声明的变量与外部作用域中的变量相互隔绝,互不影响。即使是同名变量。
var a = 1; // 这里不能是let关键字定义
function f1() {
(a) //error Cannot access 'a' before initialization
let a = 0;
(a) //0
}
(a); //1
f1()
- const关键字定义的变量,在定义的时候需要赋值,并且这个变量不可改变,引用类型除外
const obj = {
name: "ren",
age:12
};
// obj = {}; //error
= "male";
(obj); //{name: "ren", age: 12, sex: "male"}
三、解构赋值
1、数组的解构
let [a, b, c] = [1, 2, 3];
(a, b, c); //1, 2, 3
let [a, b, c] = [1, , 3];
(a, b, c); //1, undefined, 3
let [a, , b] = [1, 2, 3];
(a, b);//1, 3
let [a, ...b] = [1, 2, 3]; //...是剩余运算符,表示赋值运算符右边除第一个值外剩余的都赋值给b
(a, b);//1, [2, 3]
2、对象解构
let obj = {name: 'ren', age: 12, sex: 'male'};
let {name, age, sex} = obj;
(name, age, sex); //'ren' 12 'male'
let {name:myName, age:myAge, sex:mySex} = obj; //自定义变量名
(myName, myAge, mySex); //'ren' 12 'male'
3、字符串解构
let arr = 'hello';
let [a, b, c, d, e] = arr;
(a, b, c, d, e); //'h', 'e', 'l', 'l', 'o'
四、新的对象和方法
1、Map
点击链接
2、Set
点击链接
3、对象新特性
(1)、创建对象的字面量(字面量:变量的值)方式可以更加简洁。直接使用变量名作为属性、函数体作为方法,最终变量值变成属性值、函数名变成方法名。
let name = 'ren';
let age = 12;
let myself = {
name,
age,
say(){
();
}
};
(myself); //{name:'ren',age:12,say:fn}
(); //'ren'
4、扩展运算符
(1)、拷贝 · (对象、数组操作一样)
let obj = {name: 'ren', age: 12};
let person = {...obj}; // 拷贝对象
(person);//{name: 'ren', age: 12}
obj == person; // false 第一层的对象是深拷贝 所以为false
let another = {sex: 'male'};
let someone = {...person,...another};//合并对象
(someone);//{name:'ren',age:12,sex:'male'}
(2)、合并 (对象、数组操作一样)
let obj = {name: 'ren', age: 12}
let another = {sex: 'male'}
let someone = {...obj, ...another}
(someone); // {name: 'ren', age: 12, sex: 'male'}
5、()把伪数组变成数组
function fn() {
(arguments).forEach( it => {
(it)
})
}
fn(1, 2, 3, 4)
6、()
(1)、合并
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
(target, source1, source2);
target // {a: 1, b: 2, c: 3}
注意,如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。
const target = { a: 1, b: 1 };
const source1 = { b: 2, c: 2 };
const source2 = { c: 3 };
(target, source1, source2);
target // {a: 1, b: 2, c: 3}
(2)、深拷贝还是浅拷贝
①、第一层深拷贝
let srcObj = {'name': 'lilei', 'age': '20'};
let copyObj2 = ({}, srcObj);
('srcObj', srcObj); //'name': 'lilei', 'age': '20'
('copyObj2', copyObj2); //'name': 'lilei', 'age': '20'
="zhangsan";
('srcObj', srcObj); //'name': 'zhangsan', 'age': '20'
('copyObj2', copyObj2); //'name': 'lilei', 'age': '20'
="10";
('srcObj', srcObj); //'name': 'zhangsan', 'age': '20'
('copyObj2', copyObj2); //'name': 'lilei', 'age': '10'
②、对象第一层,第二层浅拷贝
let srcObj = {'name': 'lilei', 'grade': {'chi':"80", 'eng':"100"}};
let copyObj2 = ({}, srcObj);
="zhangsan";
="10";
('srcObj', srcObj); //name: "zhangsan" grade: {chi: "10", eng: "100"}
('copyObj2', copyObj2); //name: "lilei" grade: {chi: "10", eng: "100"}
五、函数
1、参数默认值
function add(a=1, b=2){
return a + b;
}
add(); //3
add(2); //4
add(3, 4); //7
2、不定参
不定参:功能和使用arguments差不多。
function add(...num){
return (function(result, value){
return result + value;
});
}
add(1, 2, 3, 4);//10
3、箭头函数
注意:箭头内部没有arguments、也没有prototype属性
书写方式: 参数 => 函数体
let add = (a,b) => {
return a+b;
}
let print = () => {
('hi');
}
let fn = a => a * a;
//当只有一个参数时,括号可以省略,函数体只有单行return语句时,大括号也可以省略,强烈建议不要省略它们,是真的难以阅读
- 当返回对象时需要加上小括号
const fn = () => ({name: 'ren', age: 12});
- this指向
如果定义对象的方法直接使用箭头函数,那么函数内的this将直接指向window。
var age = 123;
let obj = {
age:456,
say:() => {
();
}
};
(); //123
//对象是没有执行期上下文的(AO对象),定义对象的方法实际上是在全局作用域下,即window
如果你一定要在箭头函数中让this指向当前对象,其实也还是有办法的(但是没必要这么麻烦啊,直接使用普通函数不是更好吗?):
var age = 123;
let obj = {
age: 456,
say: function(){
var fn = () => {
();
}
return fn();
}
};
(); //456
六、类
class 作为对象的模板被引入ES6,你可以通过 class 关键字定义类。class 的本质依然是一个函数
1,创建类
class Ex { //关键字声明方式
constructor(name){
= name;
= () => {
();
}
}
methods(){
('hello ' + );
}
static a = 123;
static m = () => {
();
};
}
//let ex = class{} 字面量方式
var example = new Ex('ren');
(); //'ren'
(); //123
(); //'hello ren'
constructor是创建类必须的方法,当使用new调用类创建实例时,将自动执行该方法,该方法和构造函数类似,默认返回this对象。实例的方法和属性都定义在constructor内部。相当于构造函数的this方式。
类保留了prototype属性,类中的方法不需要使用function关键字,并且方法之间不需要逗号隔开。类中定义的方法实际上还是保存在类的prototype属性上。
使用static关键字定义类的静态属性和方法。类中不能定义共有属性,要想定义实例的共有属性还是需要使用prototype属性:.属性名 copyable
2、类的继承
类的继承通过extends关键字实现。
class Person {
constructor (name,age){
= name;
= age;
}
say(){
( + ':' + );
}
}
class Student extends Person{
constructor (name,age,sex){
super(name,age);
= sex;
}
}
var student = new Student('ren',12,'male');
; //'ren'
; //'male'
(); //'ren:12'
子类继承自父类,不会隐式的创建自己的this对象,而是通过super()引用父类的this。这个过程和在子构造函数内使用父构造函数call(this)很像,但他们有本质的区别。另外,ES6规定,super()必须在子类的this之前执行。所以一般我们把super()放在子类constructor方法的第一行,这样准没错!
七、模块导入导出
1、导入
import ‘模块名称’ from ‘路径’;
import ‘路径’;
- 通过 import...from 的方式引入模块,模块名称实际上相当于定义一个变量,用来接收即将导入的模块。
- 路径可以有很多方式,既可以是绝对路径,也可以是相对路径,甚至只是一个简单的模块名称,更甚至连文件后缀都不需要。当你使用该命令时,系统会自动从配置文件中指定的路径中去寻找并加载正确的文件。
import Vue from "vue";
//完整路劲其实是 "../node_modules/vue/dist/";
通过 import... 的方式一般用来引入样式文件或预处理文件,因为他们不需要用变量来接收。
2,导出
默认导出:export default
export var name = 'ren';
按需导出:export
let name = 'ren'
let age = 12;
export {name, age};
//注意:变量需要用大括号包裹,然后才能向外输出
总结:使用 export 向外输出成员时,可以同时输出多个,并且必须用‘{}’大括号包裹,在其他地方使用 import 导入时,接收成员的变量名必须和这里输出的名称一致,同时,可以根据实际情况,仅接收实际需要的的成员(接收的时候也要用大括号包裹)。
export 向外暴露成员,并且在导入的时候自定义接收名称,那么你可以使用 as 关键字重命名。
let name = 'ren'
let age = 12;
export {name, age};
import {name as myName, age as myAge} from 'url';
export default与export 的不同:①、在同一个模块中,export default 只允许向外暴露一次成员;然后,这种方式可以使用任意的名称接收;
②、export 和 export default 可以在同一模块中同时存在。
let person = {name: 'ren'};
let age = 12;
let address = 'cd';
export default person;
export {age};
export {address};
import man,{age, address} from 'url'
八、字符串
传统:
const a = 5;
const b = 10;
("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
// "Fifteen is 15 and
// not 20."
模板:
const a = 5;
const b = 10;
(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."