标签：作用域 默认值 mis time Map集合 表达 原型对象 lis 方式
1.let 变量声明以及特性
声明变量
let a; let b, c, d; let e = 1; let f = 2, g = 3;
特性
1.不能重复声明
2.块级作用域 只在块级作用域有效
3.没有变量提升
4.不影响作用域链
2.const 常量声明以及特性
特性
1.必须有初始值
2.一般常量使用大写
3.常量的值不能修改
4.也是块级作用域
5.对于数组和对象的修改，不算对常量的修改，不会报错（可以对数组和对象进行修改，指向的地址没有改变）
3.变量的解构赋值
1.数组的解构
const RNG = [‘uzi‘, ‘mlxg‘, ‘letme‘, ‘ming‘] let [a, b, c, d] = RNG;// 每个值就是数组的位置对应的值
2.对象的解构
const UZI= { name: ‘自豪‘, age: 22, love: ‘LOL‘， lol: function(){ alert(‘打lol‘) } } let {name, age, love} = UZI;// 每个值是对象中对应的值 let {lol} = UZI; lol();// 使用
4.模板字符串 ``
1.内容中可以直接出现换行符，单引号双引号内容不能直接用换行符（需要通过引号加号拼接）
let str = `lol s10 tes 是冠军`;// 可以这样直接使用换行符
2.直接进行变量的拼接 ${}
let lol = ‘lol十周年‘;
let uzi = `${lol} 中国队夺冠`
5.对象的简写
let name = ‘zhangning187‘; let change = function(){ console.log(‘努力改变‘); } const supwisdom = { name, change }
6.箭头函数及声明特点 =>
let fn = (a, b) => { return a + b; } fn(1, 2);// 3
特点
1.this是静态的，this始终是指向函数声明时所在作用域下的this值，他没有自己的this
2.不能作为构造实例化对象
3.不能使用arguments变量
4.箭头函数的简写
let add = n => {
return n*2; }
省略小括号，当形参有且只有一个的时候可以省略
省略花括号，当代码体只有一条语句的时候,return 必须省略，语句的执行结果就是函数的返回值
let add = n => n*2;
7.函数参数的默认值
1.形参初始值
function add(a, b, c = 10) {// 当不传递c的时候，c的默认值是10，尽量把具有默认值的参数放在后面 return a + b + c; } add (1, 2);// 13
2.与解构赋值结合
function con({name, age, love, height = ‘18‘}) {// 还可以给默认值 console.log(age);// 24 console.log(height);// 没有传递，使用默认值 18 } con({ name: ‘zhangning187‘, age: 24, love: ‘js‘ })
8.rest参数
用于获取参数的实参，用于代替arguments
rest参数是一个数组和es5中的arguments不一样，arguments里面是一个对象
获取实参的方式
function data(a, b, ...args) {// rest 参数必须放到参数的最后面 console.log(a);// 1 console.log(b);// 2 console.log(args);// [3, 4, 5, 6, 7] } data(1, 2, 3, 4, 5, 6, 7);
9.扩展运算符 ...
可以将数组转换为逗号分隔的参数序列，将一个数组分割，并将各个项作为分离的参数序列传递给函数
const RNG = [‘UZI‘, ‘MLXG‘, ‘LETME‘, ‘MING‘]; console.log(...RNG)// UZI MLXG LETME MING 解构之后的序列 console.log(RNG);// [‘UZI‘, ‘MLXG‘, ‘LETME‘, ‘MING‘] 返回的是一个数组 const a = [1,2], b=[3,6]; const c = [...a, ...b];// [1, 2, 3, 6]
10.Symbol 新的原始数据类型，表示独一无二的值
他是javaScript 语言的第七种数据类型，是一种类似于字符串的数据类型
特点
1.Symbol 的值是唯一的，用来解决命名冲突的问题
2.Symbol 值不能与其他数据进行运算，也不能自己运算 + - * /
3.Symbol 定义的对象属性不能使用for in循环遍历，但是可以使用 Reflect.ownKeys 来获取对象的所有键名
创建Symbol let s = Symbol();// s不可见，在内部实现唯一性 let s2 = Symbol(‘zhangning187‘);// 这里面的字符串只是一个标志，Symbol返回的值都是唯一的 let s3 = Symbol(‘zhangning187‘); console.log(s2 == s3);// false，确定唯一性
Symbol.for()方法创建，这是一个对象，这种方式可以得出唯一的Symbol值 let s6 = Symbol.for(‘zhangning187‘); let s8 = Symbol.for(‘zhangning187‘); console.log(s6 ==s8);// true 得到唯一的Symbol值
// USONB you are so niubility 你很牛逼
undefined string Symbol object null number boolean
对象添加Symbol类型的属性
let zn = { up: function(){}, down: function(){}, name: ‘zhangning187‘, age: 24 } // 向对象zn中添加 up down 方法 // zn.up = function(){}// 这个可以添加但是不确定zn中是否存在up方法,可能会覆盖原来的up方法 // 这时候需要考虑通过Symbol添加唯一的方法 // 声明一个对象 let methods = { up: Symbol(), down: Symbol() } zn[methods.up] = function(){ console.log(‘我可以爬楼‘); } zn[methods.down] = function(){ console.log(‘我可以下楼‘); } console.log(zn);// 已经添加唯一的方法 up down let UZI = { name: ‘自豪‘, // Symbol(): function(){},// 这里不能这样直接使用， Symbol()是一个表达式，是一个动态的 [Symbol(‘lol‘)]: function(){ console.log(‘我会打lol‘); }, [Symbol(‘篮球‘)]: function(){// Symbol()中还可以添加描述字符串 console.log(‘我可以打篮球‘) } } console.log(UZI);
11.迭代器（Iterator）
迭代器是一种接口，为各种不同的数据结构提供统一的访问机制，任何数据结构只要部署Iterator接口，就可以完成遍历操作
1.ES6创造了一种新的遍历命令for...of循环，Iterator接口提供for...of消费
2.原生具备iterator接口的数据
Array Arguments Set Map String TypedArray NodeList
3.工作原理
a 创建一个指针对象，指向当前数据结构的起始位置
b 第一次调用对象的next方法，指针自动指向数据结构的第一个成员
c 接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员
d 每调用next方法返回一个包含value和done属性的对象
自定义遍历数据的时候，要想到迭代器
12.生成器函数的声明与调用
生成器函数是ES6提供的一种异步编程解决方案，与传统函数完全不同，就是一个特殊的函数
// 声明 function * gen(){// * 可以靠左，也可以靠右，还可以放在中间 // console.log(‘hello‘); yield ‘2020lpl牛批‘;// yield 语句可以算作函数代码的分隔符 let two = yield ‘uzi 退役了’; console.log(two); yield ‘湖人总冠军‘; } // 执行 let iterator = gen(); // console.log(iterator);// 返回结果是一个迭代器对象 console.log(iterator.next());// 需要执行迭代器对象中的next()方法，才会执行生成器函数 console.log(iterator.next());// 每个next()只会执行里面一个yield语句，这个会输出 ‘uzi 退役了’ // 传递参数 参数将作为上一个yield语句的返回结果 console.log(iterator.next(‘AAA‘));// 第三次调用传递的参数将作为第二个yield 的返回结果 打印为AAA // 使用for of循环遍历输出 for(let v of gen()){ console.log(v);// 依次输出yield语句中的值 }
案例：1s输出 111 2s输出 222 3s输出 333
function one(){ setTimeout(()=>{ console.log(‘111‘) iterator.next(); }, 1000) } function two(){ setTimeout(()=>{ console.log(‘111‘) iterator.next(); }, 1000) } function three(){ setTimeout(()=>{ console.log(‘111‘) }, 1000) } // 生成器函数 function * gen(){ yield one(); yield two(); yield three(); } // 调用生成器函数 let iterator = gen(); iterator.next();
13.Promise 基本使用
Promise 是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果
1 Promise 构造函数 Promise(excutor){}
2 Promise.prototype.then 有两个参数，两个参数都是函数，
Promise对象成功状态执行then中第一个函数，失败执行第二个函数
3 Promise.prototype.catch
// 实例化 const p = new Promise((resolve, reject) => { // 通过resolve，reject这两个函数来改变Promise对象的状态， // resolve会改变p的状态为成功，reject会改变p的状态为失败，然后去执行then里面的方法 // 执行异步操作，以定时器为例，定时器也是异步 setTimeout(()=>{ //let data = ‘异步执行成功‘; // resolve(data);// 调用resolve函数, p会变成一个成功的状态，会执行then中的第一个方法 let err = ‘执行失败‘; reject(err);// 调用reject函数，p会变成一个失败的状态，会执行then中的第二个方法 }, 1000) }) // 成功会调用 promise 对象 then 方法 p.then(value => {// 成功 // console.log(value);// 控制台打印：异步执行成功 }, reason => {// 失败 console.error(reason) })
Promise.prototype.then 特性
// then方法的返回结果是Promise对象，对象状态由回调函数的执行结果决定 const p = new Promise((resolve, reject) => { setTimeout(()=>{ resolve(‘成功‘); reject(‘失败‘); }, 1000); }); // then 的返回结果是一个Promise对象，就是result也是一个Promise对象，它的状态由函数的执行结果决定的 const result = p.then(value => { console.log(value); // 1.如果返回的结果是 非Promise 类型的属性，状态为成功，返回值return 中的值 // 如果不写return，函数内部不写return返回结果是undefined，也不是Promise对象，状态也是成功 // return 123; // 2.是 promise 对象, 该对象返回的状态就决定了then方法返回promise对象状态 return new Promise((resolve, reject)=>{ // resolve(‘ok‘);// then方法返回promise对象状态为成功 reject(‘no‘);// then方法返回promise对象状态为失败 }) // 3.抛出错误 then方法返回promise对象状态为失败，错误值为抛出错误的值 throw new Error(‘出错了‘); }, reason => { console.err(reason); }); console.log(result); // 综上总结，then方法可以链式调用 可以改变回调域的现象 p.then(value=>{}, reason=>{}) .then(value()=>{}).then();
举例：多个请求都返回之后，获取其中的数据
const p = new Promise((resolve, reject)=>{ resolve(‘第一次返回成功‘) }); p.then(value=>{ return new Promise((resolve, reject)=>{ resolve([value, ‘第二次返回成功‘]) }); }).then(value=>{ return new Promise((resolve, reject)=>{ resolve([...value, ‘第三次返回成功‘]) }); }).then(value=>{ console.log(value);// 返回值为三次请求都返回成功以后的值 });
14.集合set
新的数据结构Set（集合），它类似于数组，成员的值都是唯一的，集合实现了iterator接口，所以可以使用扩展运算符和for of遍历
集合的属性和方法
1 size 返回集合的元素个数
2 add 添加一个新元素，返回当前集合
3 delete 删除元素，返回boolean值
4 has 检测集合中是否包含某个元素，返回boolean值
5 clear 清空
// 声明 let s = new Set(); let s2 = new Set([1, 2, 3, 6, 7]); console.log(s2);// 5 s2.add(8);// 添加新元素 console.log(s2);// 输出 {1, 2, 3, 6, 7, 8} s2.delete(8); console.log(s2);// 输出 {1, 2, 3, 6, 7} console.log(s2.has(8));// false // s2.clear();// 清空 let arr = [1, 2, 3, 3, 3, 6, 6, 8]; let arr2 = [1, 3, 6, 7, 8]; // 数组去重 let result = [...new Set(arr)]; // 交集 let result = [...new Set(arr)].filter(item => new Set(arr2).has(item)); // 并集 let result = [...new Set([...arr, ...arr2])]; // 差集 arr有arr2中没有 let result = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));
15.Map集合
类似于对象，也是键值对的集合，但是 键 不限于字符串，各种类型的值（包括对象）都可以当作键，
map也实现了 iterator 接口，所以可以使用扩展运算符和for of进行遍历
1 size 返回 Map 的元素个数
2 set 增加一个新元素，返回当前Map
3 get 返回键名对象的键值
4 has 检测Map中是否包含某个元素，返回boolean值
5 clear 清空集合，返回undefined
// 声明 let m = new Map(); m.set(‘name‘, ‘zhangning‘); m.set(‘change‘, function(){console.log(‘变得更努力‘)});// 键 change 值 一个function let key = {company: ‘supwisdom‘}; m.set(key, [1, 2, 3]);//键 对象 值 数组 m.size;// 获取m个数 m.delete(‘name‘);// 删除键值对 m.get(‘change‘);// 获取键对应的值 // m.clear();// 清空 for(let v of m){console.log(v);}
16.class 类
通过class可以定义类，新的class写法只是让对象原型的写法更加清晰，更像面向对象编程的语法而已。
1 class 声明类
2 constructor 定义构造函数初始化
3 extends 继承父类
4 super 调用父级构造方法
5 static 定义静态方法和属性
6 父类方法可以重写
// es5通过 构造函数实例化 对象的方法
// 人 function People(name, sex) { this.name = name; this.sex = sex; } // 这个height这种添加方式是属于函数对象的，不属于实例对象，这样的属性称之为静态成员 People.height = ‘180‘; People.prototype.height1 = ‘100‘; // 添加方法 People.prototype.play = function(){ console.log(‘打篮球‘); } let zn = new People(‘zhangning‘, ‘男‘); zn.play();// 输出 打篮球 console.log(zn); console.log(zn.height);// 输出 undefined console.log(zn.height1);// 输出 100，必须通过prototype添加才能添加到实例对象上
通过class实现
class People{ // 静态属性 static，对于static 标注的方法属于类，不属于实例对象 static height = ‘100‘; static change(){ console.log(‘我可以改变世界‘); } // 构造方法 名字不能更改（在使用new People的时候会自动执行实例对象上的constructor方法） constructor(name, sex){ this.name = name; this.sex = sex; } // 添加方法必须使用该语法，不能使用es5的完整形式（play: function(){} 这种形式不支持，必须使用play()形式） // 成员属性 play(){ console.log(‘打篮球‘); } } let zn = new People(‘zhangning‘, ‘男‘); console.log(zn); console.log(zn.height);// undefined static 标注的方法属于类，不属于实例对象 console.log(People.height);// 100
使用es5构造函数实现继承
// 举例 chinese 继承 People 属性 function People(name, sex) { this.name = name; this.sex = sex; } People.prototype.play = function(){ console.log(‘打LOL‘); } function Student(name, sex, like, height){ // 通过call方法，改变this值，this指向chinese中的this，也就是chinese的一个实例对象 People.call(this, name, sex); this.like = like; this.height = height; } // 设置子集构造函数原型 Student.prototype = new People;// 这样就会有父级的一个方法 Student.prototype.constructor = Student;// 做一个校正，没有这行代码也无所谓 // 声明子类方法 Student.prototype.photo = function(){ console.log(‘去拍照‘); } // 实例化 const zn = new Student(‘zhangning‘, ‘男‘, ‘打篮球‘, ‘187‘); console.log(zn)
使用es6 class 类 实现继承 及 父类方法的重写
// 声明父类 class People{ // 父类构造方法 constructor(name, sex) { this.name = name; this.sex = sex; } // 父类成员属性 play(){ console.log(‘打LOL‘); } } // 声明子类 使用extends 继承父类 class Student extends People { // 构造方法 constructor(name, sex, like, height){ super(name, sex);// super 就是父类的constructor构造函数，这样调用 this.like = like; this.height = height; } photo(){ console.log(‘去拍照‘); } // 对父类中的play方法进行重写，子类是不能去调用父类的同名方法的， play(){ // super(); 不允许，在普通的成员方法里面是不能出现super()去调用父类的同名方法的，会报错，只能完全重写 console.log(‘我会打LOL，还会打篮球‘); } } const zn = new Student(‘zhangning‘, ‘男‘, ‘打篮球‘, ‘187‘); console.log(zn)
class 中 getter 和 setter 设置
class People{ get like(){ return ‘打篮球‘; } set like(newVal){ // 通过传过来的newVal值，进行操作，改变 like console.log(‘改变like值‘); } } let p = new People(); console.log(p.like)// 输出 打篮球 p.like = ‘LOL‘;// 然后通过 set like 进行操作
17.对象数值扩展
1 Object.is 判断两个值是否完全相等
Object.is(1, 1);// true
和 === 很相似，唯一区别就是 NaN === NaN 为 false， Object.is(NaN, NaN) 为true
2 Object.assign 对象的合并
const c1 = {name: ‘znn‘};
const c2 = {name: ‘zhangning‘, height: 187};
Object.assign(c1, c2);// 如果两个对象中存在相同属性，c2 中覆盖c1中的属性内容
3 Object.setPrototypeOf 设置原型对象
const zn = { name: ‘zhangning‘, } const p = { h: true, sfsfdf: ‘fasfasdf‘ } Object.setPrototypeOf(zn, p);// 设置 zn 的原型里面有 p Object.getPrototypeOf(zn);// 获取 zn 的原型 console.log(zn);// 打印看下
标签：作用域 默认值 mis time Map集合 表达 原型对象 lis 方式
原文地址：https://www.cnblogs.com/zhangning187/p/es6zjzn.html
