ES6教程笔记

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

什么是ES

ES全称 EcmaScript 是一种脚本语言的规范 Javascript为ES的实现
Ecma 是一个组织 Ecma组织

相关问答

Q1: 为什么要学习ES6?

ES6的版本变动内容最多,具有里程碑意义
ES6加入了许多新的语法特性
ES6是前端的发展趋势,就业必备技能

Q2: ES6兼容性查看

Q3: 正式学习

let变量声明以及声明特性

点击查看代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

</head>
<body>
<script>
//声明变量
let a;
let b,c,d;
let e=100;
let f=521,g='zhangsan',h=[];
</script>
</body>
</html>

变量不能重复声明
块级作用域全局,函数,eval(if , else ,while,for)
不存在变量提升(不允许在未声明前使用)
不影响作用域链

{
	let school = '尚硅谷;
	function fn(){
		console.log(school);
	}
	fn();
}

const定义常量

const SCHOOL='尚硅谷'

必须定义初始值
一般常量命名使用大写
常量值不能修改
块级作用域
对于数组和对象的元素修改,不算对常量的修改,不会报错(主要原因是因为地址的变化)
const TEAM=['UZI','MLXG','Ming','LetMe']; TEAM.push('Meiko');

解构赋值

ES6允许按照一定模式从数组和对象中提取值,对变量进行赋值

        // 1. 数组的结构
        const F4 = ['小沈阳','刘能','赵四','宋小宝'];
        let [xiao, liu, zhao, song] = F4;
        console.log(xiao);
        console.log(liu);
        console.log(zhao);
        console.log(song);

        // 2. 对象的解构
        const zhao = {
            name: '赵本山',
            age: '不详',
            xiaopin: function(){
                console.log("我可以演小品");
            }
        };

        let {name, age, xiaopin} = zhao;
        console.log(name);
        console.log(age);
        console.log(xiaopin);
        xiaopin();

        let {xiaopin} = zhao;
        xiaopin();

模板字符串

使用反引号标识 `
内容中可以直接出现换行符
可以直接变量拼接

let lover = '小沈';
let out = `${lover}是最棒的程序员`;

简化对象写法

允许在大括号内直接写入变量和函数,作为对象的属性和方法

        let name = '尚硅谷';
        let change = function(){
            console.log('我们可以改变你!!');
        }
        const school = {
            name,
            change,
            improve(){
                console.log("我们可以提高你的技能");
            }
        }

箭头函数

允许使用箭头(=>) 定义函数

#原来
let fn = function(){

}
#现在
let fn = (a,b)=>{
	return a+b;
}

this是静态的.this 始终指向函数声明时所在的作用域下的this的值
不能作为构造实例化对象
不能使用arguments变量
箭头函数简写
- 省略小括号,当形参有且只有一个的时候
```
	let add = n => {
		return n + n;
	}
```
- 省略花括号,当代码体只有一条语句的时候
  let pow = n => n * n;

rest参数

用于获取函数的实参,用来代替arguments(Java可变参数 ...)
能将数组转为逗号分隔的{参数序列} (入参使用)

Symbol

原始数据类型,第七种数据类型,类似字符串的数据类型
特点
- Symbol的值时唯一的,用来解决命名冲突的问题
- Symbol值不能与其他数据进行运算
- Symbol定义的对象属性不能使用 for...in 循环,但是可以使用Reflect.ownKeys来获取对象的所有键名

迭代器

写法 for(let item of list)

生成器

属于函数
作为异步编程使用

Promise

promise是ES6引入的异步编程的新解决方案(重要)

        //实例化 Promise 对象
        const p = new Promise(function(resolve, reject){
            setTimeout(function(){
                //
                // let data = '数据库中的用户数据';
                // resolve
                // resolve(data);

                let err = '数据读取失败';
                reject(err);
            }, 1000);
        });

        //调用 promise 对象的 then 方法
	p.then(
		//成功回调
		function(value){
			console.log(value);
		},
		//失败回调
		function(reason){
			console.error(reason);
		}
	)

then方法例子

//创建 promise 对象
        const p = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                resolve('用户数据');
                // reject('出错啦');
            }, 1000)
        });

        //调用 then 方法  then方法的返回结果是 Promise 对象, 对象状态由回调函数的执行结果决定
        //1. 如果回调函数中返回的结果是 非 promise 类型的属性, 状态为成功, 返回值为对象的成功的值

        // const result = p.then(value => {
        //     console.log(value);
        //     //1. 非 promise 类型的属性
        //     // return 'iloveyou';
        //     //2. 是 promise 对象
        //     // return new Promise((resolve, reject)=>{
        //     //     // resolve('ok');
        //     //     reject('error');
        //     // });
        //     //3. 抛出错误
        //     // throw new Error('出错啦!');
        //     throw '出错啦!';
        // }, reason=>{
        //     console.warn(reason);
        // });

        //链式调用
        p.then(value=>{

        }).then(value=>{

        });

catch方法例子

        const p = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                //设置 p 对象的状态为失败, 并设置失败的值
                reject("出错啦!");
            }, 1000)
        });

        // p.then(function(value){}, function(reason){
        //     console.error(reason);
        // });

        p.catch(function(reason){
            console.warn(reason);
        });

Set

es6可以使用类Java中的集合Set

        //声明一个 set
        let s = new Set();
        let s2 = new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿']);

        //元素个数
         console.log(s2.size);
        //添加新的元素
         s2.add('喜事儿');
        //删除元素
         s2.delete('坏事儿');
        //检测
         console.log(s2.has('糟心事'));
        //清空
         s2.clear();
         console.log(s2);

        for(let v of s2){
            console.log(v);
        }

Set集合实践

数组去重

	let arr = [1,2,3,4,5,4,3,2,1];
		let result = [...new Set(arr)];
		console.log(result);

交集

	let arr2 = [4,5,6,5,6];
	let s2 = new Set(arr2);// 4 5 6
	let result = [...new Set(arr)].filter(item => {
		if(s2.has(item)){
			return true;
		}else{
			return false;
		}
	});
	let result = [...new Set(arr)].filter(item => new Set(arr2).has(item));
	console.log(result);

并集

	let arr = [1,2,3,4,5,4,3,2,1];
	let arr2 = [4,5,6,5,6];
	let union = [...new Set([...arr, ...arr2])];

差集

	let arr = [1,2,3,4,5,4,3,2,1];
	let arr2 = [4,5,6,5,6];
	let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));
	console.log(diff);

Map

声明Map
let m = new Map();
添加元素

	//基本类型
	m.set('name','黑子桑');
	//object类型
	let key = {
		school:'算力'
	};
	m.set(key,['北京','上海','深圳']);
	//函数
	m.set('show',()=>{
		console.log('ES6真神奇');
	})

获取长度
m.size
删除
m.delete('name');
获取
m.get('show');
清空
m.clear();
由于实现了Symbol.iterator方法所以可以使用迭代

	for(item of m){
		console.log(m);
	}

Class

ES6 中引入了Class(类)概念,接近与传统语言写法
ES6的class 可以看作为语法糖
知识点
- class 声明类
- constructor 定义构造函数初始化
- extends 继承父类
- super 调用父级构造方法
- static 定义静态方法和属性
- 父类方法可以重写

	//手机
        function Phone(brand, price){
            this.brand = brand;
            this.price = price;
        }

        //添加方法
        Phone.prototype.call = function(){
            console.log("我可以打电话!!");
        }

        //实例化对象
        let Huawei = new Phone('华为', 5999);
        Huawei.call();
        console.log(Huawei);

        //class
        class Shouji{
            //构造方法 名字不能修改
            constructor(brand, price){
                this.brand = brand;
                this.price = price;
            }

            //方法必须使用该语法, 不能使用 ES5 的对象完整形式
            call(){
                console.log("我可以打电话!!");
            }
        }

        let onePlus = new Shouji("1+", 1999);

        console.log(onePlus);

静态成员

	class Phone{
            //静态属性
            static name = '手机';
            static change(){
                console.log("我可以改变世界");
            }
        }

        let nokia = new Phone();
        console.log(nokia.name);
        console.log(Phone.name);

继承

	class Phone{
            //构造方法
            constructor(brand, price){
                this.brand = brand;
                this.price = price;
            }
            //父类的成员属性
            call(){
                console.log("我可以打电话!!");
            }
        }

        class SmartPhone extends Phone {
            //构造方法
            constructor(brand, price, color, size){
                super(brand, price);// Phone.call(this, brand, price)
                this.color = color;
                this.size = size;
            }

            photo(){
                console.log("拍照");
            }

            playGame(){
                console.log("玩游戏");
            }

            call(){
                console.log('我可以进行视频通话');
            }
        }

        const xiaomi = new SmartPhone('小米',799,'黑色','4.7inch');
        // console.log(xiaomi);
        xiaomi.call();
        xiaomi.photo();
        xiaomi.playGame();

get/set

	class Phone{
            get price(){
                console.log("价格属性被读取了");
                return 'iloveyou';
            }

            set price(newVal){
                console.log('价格属性被修改了');
            }
        }

        //实例化对象
        let s = new Phone();

        // console.log(s.price);
        s.price = 'free';

数值扩展

Number.EPSILON 是 JavaScript 表示的最小精度 EPSILON 属性的值接近于 2.E-16
二进制和八进制

	//二进制
        let b = 0b1010;
	//八进制
        let o = 0o777;
	//十进制
        let d = 100;
	十六进制
        let x = 0xff;
        console.log(x);

Number.isFinite 检测一个数值是否为有限数
Number.isNaN 检测一个数值是否为 NaN
Number.parseInt Number.parseFloat字符串转整数
Number.isInteger 判断一个数是否为整数
Math.trunc 将数字的小数部分抹掉
Math.sign 判断一个数到底为正数负数还是零

对象方法扩展

Object.is 判断两个值是否完全相等
Object.assign 对象的合并
Object.setPrototypeOf 设置原型对象 Object.getPrototypeof

模块化

模块化优势
- 防止命名冲突
- 代码复用
- 高维护性
模块化语法
- export 用于规定模块的对外接口
- import 用于输入其他模块提供的功能

资料来源于尚硅谷...

正文

什么是ES

相关问答

let变量声明以及声明特性

const定义常量

解构赋值

模板字符串

简化对象写法

箭头函数

rest参数

Symbol

迭代器

生成器

Promise

Set

Map

Class

数值扩展

对象方法扩展

模块化

相关阅读

phpcms指定栏目跳转，php页面跳转方法

sqlserver服务配置为空白，sqlserver服务异常的解决方法

mysql数组去重复数据，mysql去重的三种方法

c语言定义复数指针，c语言复数加法的正确方法

macos降级方法，macbook降级回旧系统

c面向对象设计方法，面向对象的设计

面向对象是命令式，面向对象方法原理

HTML5兼容以前HTML4下浏览器，html5浏览器兼容性解决方法

目录[+]