ES6语法说明

最新推荐文章于 2024-05-02 18:12:22 发布

这块显卡不太冷_

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量441

点赞数

分类专栏： js 前端文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_41613766/article/details/126499478

版权

js 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

一、ES6语法说明

1.let 变量声明

let a,b,c;
let d = 1, f = "一", g = [];

//let 不能重复声明
// let start = 'liu';
// let start = 'yuan'; //错误的，已经声明过的变量名

//不存在变量提升
/**
	* 关键字let 不能先使用，后声明
	* 关键字var 可以先使用，后声明
	**/
console.log(xu);
var xu = "xusong";

console.log(wang);		//语法错误,没有先定义
let wang = "wangsulong";

注意： let不能重复声明 ;var 可以重复声明

2.const常量声明

//const 一定要初始化赋值
const constA; //错误

//const 默认常量名大写
const CONST_A = "";

//const 常量不能修改
// CONST_A = "1"; //错误

//const常量数组、对象的元素可以修改,不能修改内存地址
const TEAM = ["1", "2"];
TEAM.push("3"); //正确;向数组添加元素，不会修改TEEM保存的数组地址
// TEAM = 10;  //错误;修改了TEAM的内存地址

3.块级作用域

//es6新增块级作用域
//变量只在{}中有效，{}外无效，let有块级作用域概念，var无块级作用域概念
//if else for while 里let、const属于块级作用域
//es5 作用域 全局、函数、eval

//示例
// const 和let一样，块级作用域,{}外访问不到
{
    var s = "zhang";
    let agr = "321"
    const CONSTB = "123";
}
console.log(CONSTB);  //错误，无法访问
console.log(s);  //正确，可以访问;var无视{}块级作用域

//不影响 作用域链
{
  let demo = "ytt";
  function f() {
    console.log(demo) //可以访问到f(){}块外变量
  }
  f(); 
}

// let 经典案例
//假设有3个class='item'的div
let item = document.getElementsByClassName('item');

for (let i = 0; i < item.length; i++) {
  item[i].onclick = function () {
    item[i].style.background = 'green'
  }
}
//保错，因为 var 全局变量，执行完之后 i变成了 3，就会报空指针错误 使用let声明i，i作用在{}中，就不会有问题

4.解构赋值

//数组解构赋值
let food = ["面包", "酸奶"];
let [chi, he] = food; //可将数组中的元素依此赋值到声明的[]变量中
console.log(chi);
console.log(he);

//对象解构赋值
let ytt = {
  name: "ytt",
  age: 18,
  func: function () {
    console.log("shuijiao")
  }
}
let {func} = ytt; //可将对象中的属性赋值到声明的{}变量中，方法也可赋值
func();

5.模版字符串

//使用``表示模版字符串
let str = `这是ES6新字符串`;

//模版字符串可以直接换行
let strOld = '1' +
    '2'; //es5字符换行必须使用'+'拼接
let strNew = `1
			2`;  //es6 ``模版字符串可直接换行

//模版字符串可以直接拼接字符变量。拼接规则${}
let zhi = '沈腾'
let strPinjie = `独行月球男主是${zhi}`
console.log(strPinjie) //独行月球男主是沈腾

6.对象简化编写

//1.对象可以直接引用变量名,方法名
let name = "liu";
let age = 18;
let func = function () {
  console.log("我在学习")
}
let people = {
  name, //直接引用变量
  age,
  func //直接引用方法
}
people.func()
console.log(people)
//2.对象定义方法简化
let cat = {
  name: "lucy",
  age: 0.5,
  //change: function(){}   之前写法
  change(){
    console.log("我特能吃特能睡")
  }
}
cat.change()

7.箭头函数(重点)

7.1.静态作用域,不能改变

let func1 = function () {
  console.log(this.name);
}
let func2 = () => {
  console.log(this.name)
}
window.name = 'y';
let liu = {
  name: "liu"
}
func1() //y
func2() //y
//call(liu) 指定作用域到liu
func1.call(liu) //liu
func2.call(liu) //y，使用箭头函数，作用域没有发生改变

7.2.不能作为构造函数

var dog = (name, age) =>{
  this.name = name;
  this.age = age;
}
// let you = new dog("xiaohuang", 0.3);
// console.log(you) //不能被当作构造函数 new funName 错误

7.3.不能使用arguments变量

let demo = () => {
  console.log(arguments)
}
// demo() //错误，变量未定义

7.4.箭头函数简写参数简写方法简写

//参数简写
//变量有且只有一个的时候可以省略()
let add = (a) => {
  return a+a;
}
console.log(add(9))
//简化
let add1 = a => {
  return a+a;
}
console.log(add1(9))

//方法简写
//方法区代码尤其只有一行的时候，可以省略{}
let pow = a => a*a;
//注意省略{}, 必须省略 return 关键字
console.log(pow(9))

7.5.经典案例

let arr = [2,3,4,5,10,12,25];
// let ou = arr.filter(function (item) {
//     if (item % 2 === 0) {
//         return true;
//     } else {
//         return false;
//     }
// })

let ou = arr.filter(item => item % 2 === 0)
console.log(ou)

//箭头函数适用于与this无关的回调，定时器，数组方法回调
//不适用this有关回调，事件回调，对象方法

8.函数初始值

//1.es6支持参数默认值
function demo1 (a, b, c=10){
  return a+b+c
}
console.log(demo1(1,2)) //=13
//方法参数可以设置默认值，调用传参就用调用传递的值，否则使用默认值。潜规则->默认参数放在最后

//2.与解构一起使用
//es6之前写法
// function demo2 (dbLine){
//     console.log(dbLine.ip)
//     console.log(dbLine.port)
//     console.log(dbLine.username)
//     console.log(dbLine.password)
// }
//es6解构写法,支持默认值传值
function demo2 ({ip='127.0.0.1', port, username, password}){
  console.log(ip)
  console.log(port)
  console.log(username)
  console.log(password)
}
let dbLine = {
  // ip: 'lcoalhost',
  port: '3306',
  username: 'root',
  password: 'root'
}
demo2(dbLine)

9.rest参数

//es6之前获取方法参数
function funRest0 (){
  console.log(arguments) //Arguments(3) ['小明', '小红', '小刚', callee: ƒ, Symbol(Symbol.iterator): ƒ]
  console.log(typeof arguments) //object
}
funRest0("小明","小红","小刚")

//es6写法
function funRest1 (...args){
  console.log(args) //[1, 2, 3, 4, 5, 6]
  console.log(typeof args) //object
}
funRest1(1,2,3,4,5,6)

//多个参数 rest参数必须放在最后
function funRest3 (a, b, ...args){
  console.log(a) //1
  console.log(b) //2
  console.log(args) //[3, 4, 5, 6]
}
funRest3(1,2,3,4,5,6)

10.es6扩展运算符

//原理；将数组转为参数序列
let classX = ["小明","小红","小刚"];
function demo1 (){
  console.log(arguments); 
}
demo1(classX) //
demo1(...classX)

//应用
//数组合并
let arr1 = [1,2,3];
let arr2 = [4,5,6];
//es6之前
// let arrAll = arr1.concat(arr2);
//es6
let arrAll = [...arr1, ...arr2]
console.log(arrAll) //[1,2,3,4,5,6]

//数组克隆
let arr4 = [...arr1];
console.log(arr4)  //[1,2,3]

//假数组变真数组
function demo2 (){
  console.log(arguments) 
  //es6 扩展运算符
  console.log(...arguments) //[1,2,3]
}
demo2(1,2,3)

11.Symbol 新数据类型

11.1.js 7大数据类型

undefind string symbol object null number boolean

11.2. 使用案例

// symbol 是一个独一无二的值
//创建
let s1 = Symbol();
console.log(typeof s1)

//构造函数
let s2 = Symbol("1");
let s3 = Symbol("1");
console.log(s2 === s3) //false

//对象函数
let s4 = Symbol.for("1")
let s5 = Symbol.for("1")
console.log(s4 === s5) //true

//symbol不能参与运算比较
// let r1 = s1 + 1; //报错
// let r2 = s1 >= 3; //报错
// console.log(r1, r2)

//给对象添加属性和方案 独一无二
let obj1 = {
  name: 'tt',
  up: '上',
  down: '下'
}
let methods = {
  up: Symbol(),
  down: Symbol()
}
obj1[methods.up] = function () {
  console.log("上")
}
obj1[methods.down] = function () {
  console.log("下")
}
console.log(obj1)

let obj2 = {
  name: 'tt',
  [Symbol("up")]: function () {
    console.log("上")
  }
}
console.log(obj2)

11.3.内置symbol值

Symbol.search
Symbol.split

…

12.迭代器

一种接口，为各种不同数据提供统一的访问机制，任何数据解构，实现Iterator接口(js中的对象属性)均可遍历
es6 遍历 for...of循环
Array, Map, String, Set, arguments 具备for...of遍历

工作原理
1.创建一个指针对象，指向当前数据结构的起始位置
2.第一次调用next对象，指针自动指向数据结构的第一个元素
3.不断调用next方法，指针依次向后移动，知道最后一个元素
4.每调用next(),会返回指针指向的元素的value和done属性

12.1.for…of返回数组value值

es6之前的for…in返回的是数组的key值

let numbers = [1,2,3,4,5,6];
//for...of返回数组value值
for (let number of numbers) {
  console.log(number)
}
//for...in返回数组key值
for (let number in numbers) {
  console.log(number)
}

12.2.模拟iterator迭代器

//查看迭代器Symbol.iterator
let iterator = numbers[Symbol.iterator]();
console.log(iterator)
console.log(iterator.next())

//迭代器应用-自定义遍历数据
const people = {
  name: "tt",
  zc: [
    "btc", "eth", "doge", "sol"
  ],
  [Symbol.iterator](){
    let index = 0;
    return {
      next: () => {
        if (index < this.zc.length) {
          const result = {value: this.zc[index], done: false};
          index++;
          return result;
        } else {
          return {value: undefined, done: true}
        }
      }
    }
  }
}

for (let peopleKey of people) {
  console.log(peopleKey)
}

13.生成器一个特殊的函数

异步编程通常的实现方式是回调函数。例如：node、ajax
生成器函数 * 标识
yield可以分割执行代码块中的代码，每次next执行一段yield代码

13.1异步触发案例

//demo1 定时任务执行
//一秒后输出111 两秒后输出222 三秒后输出333
//es5 写法
{
  setTimeout(() => {
    console.log("111")
    setTimeout(() => {
      console.log("222")
      setTimeout(() => {
        console.log("333")
      }, 3000)
    }, 2000)
  }, 1000)
}

//es6写法
{
  function one (){
    setTimeout(() => {
      console.log("111")
      timeOutFunc.next();
    }, 1000)

  }
  function two (){
    setTimeout(() => {
      console.log("222")
      timeOutFunc.next();
    }, 2000)

  }
  function three (){
    setTimeout(() => {
      console.log("333")
      timeOutFunc.next();
    }, 3000)

  }

  function * timeOut (){
    yield one();
    yield two();
    yield three();
  }

  let timeOutFunc = timeOut();
  timeOutFunc.next();
}

13.2.参数传递使用案例

{
  function one (){
    setTimeout(() => {
      let one = `拿到1，才能去拿2`
      timeOutFunc.next(one);
    }, 1000)

  }
  function two (arg){
    setTimeout(() => {
      let two = `${arg}拿到2，才能去拿3`;
      timeOutFunc.next(two);
    }, 2000)

  }
  function three (arg){
    setTimeout(() => {
      let three = `${arg}拿到3，就结束啦`;
      timeOutFunc.next(three);
    }, 3000)

  }

  function * timeOut (){
    let one1 = yield one();
    console.log(one1)
    let two2 = yield two(one1);
    console.log(two2)
    let three3 = yield three(two2);
    console.log(three3)
  }

  let timeOutFunc = timeOut();
  timeOutFunc.next();
}

14.promise异步编程

promise是es6中的新异步编程写法。

14.1.resolve,reject函数

promise是一个构造函数，函数行参是一个 function(resolve, reject){}。resolve, reject两个全都是function(){}，成功调用resove方法，失败调用reject方法。

14.2.then 函数

promise还有一个then函数，用于执行promise的异步函数。因为then函数返回的也是一个promise，所以then可以链式调用

14.3.定义调用案例

//定义promise函数 定义resolve, reject两个函数
let p = new Promise(function (resolve, reject) {
  setTimeout(function () {
    // let result1 = "成功"
    // resolve(result1)
    let result = "失败"
    reject(result)
  }, 1000)
})

//then回调
p.then(function (value) {
  console.log(value)
}, function (reason) {
  console.error(reason)
})

//Promise 对象的then方法，返回的也是一个 Promise对象可以进行链式调用
p.then(value => value).then(value => {

}, reason => {

}).then(...);

14.4.参数传递案例

let p1 = new Promise((resolve, reject) => {
  resolve(`成功`)
});

p1.then(value => {
  return new Promise(resolve => {
    let v1 = `第二个成功`
    resolve(value+","+v1)
  })
}).then(value => {
  return new Promise(resolve => {
    resolve(value +","+ "第三个成功")
  })
}).then(value => {
  console.log(value);
})

14.5.异常调用案例

let p2 = new Promise((resolve, reject) => {
    reject("错误")
})

//promise使用then可以用于成功和失败方法回调, catch可以仅适用于异常方法回调
p2.catch(reason => {
    console.log(reason)
})

15.集合

15.1Set

es6提供新的数据解构Set, 类似于java的Set()集合,去重。Set实现了Iterator接口,可以进行for…of遍历

//声明
let s = new Set();
//初始化赋值声明
let s2 = new Set(['大', '小', '多', '少', '大']);
console.log(s2) //输出{'大', '小', '多', '少'} 去掉重复元素

//api说明
s2.add('前'); //增加 add
//console.log(s2) //输出{'大', '小', '多', '少', '前'}
s2.delete('大'); //删除 delete 
//console.log(s2) //输出{'小', '多', '少', '前'}
console.log(s2.size) //输出4 元素个数 size
console.log(s2.has('小')) //输出true 检测数组是否存在 has
s2.clear(); //清空数组 clear
//console.log(s2) //输出{}

15.1.1使用案例

let arr = [1,2,3,4,5,6,1,2,3];
let arr2 = [4,5,6,7,8];
//去重数组
let result = [...new Set(arr)];

//交集
let item2 = new Set(arr2);
let result2 = result.filter(item =>  item2.has(item))
console.log(result2) //输出 [4, 5, 6]

//并集
let result3 = [...new Set([...arr, ...arr2])];
console.log(result3) //输出 [1, 2, 3, 4, 5, 6, 7, 8]

//差集
let item4 = new Set(arr2);
let result4 = result.filter(item =>  !item4.has(item))
console.log(result4) //输出 [1, 2, 3]

15.2.Map

Map实现了Iterator接口,可以进行for…of遍历, …运算符进行遍历

以下是Map的常用api演示案例

let m = new Map();
//添加
m.set("name", "lucy");
console.log(m) //{'name' => 'lucy'}
//key不仅仅是字符串,可以为其他类型 value也可以是其他类型
let object = {
  "age": 6
}
m.set(object, () => {
  console.log("key是对象，value是一个方法")
})

//获取
console.log(m.get("name")) //lucy
console.log(m.get(object)) /**
         * 结果
         * () => {
         *             console.log("key是对象，value是一个方法")
         *         }
         */
//遍历
for (let mElement of m) {
  console.log(mElement)
}

//删除
m.delete("name")
console.log(m)

//清空
m.clear();
console.log(m) //空

16.Class

es6引入Class。class功能, es5基本都可以做到。es6只是让对象写法更为清晰

16.1.es5时class写法

//定义对象构造方法
function Phone (brand, price){
  this.brand = brand;
  this.price = price;
}

//定义对象方法
Phone.prototype.sol = function () {
  console.log("定义对象方法")
}

//实例对象并调用对象方法
let sanxing = new Phone("三星", 8999);
console.log(sanxing)
sanxing.sol();

16.2.es6时class写法

//声明class
//定义构造函数constructor
class Shouji {
  //定义构造函数
  constructor(brand, price) {
    this.brand = brand;
    this.price = price;
  }

  //定义对象方法
  sol(){
    console.log("es6定义方法")
  }
}
//实例化
let apple = new Shouji("apple", 11999);
console.log(apple)
apple.sol()

//集成父类 extends
//调用父类构造方法 super
//静态方法static
//父类方法重写

//声明继承父类的子类
class Apple extends Phone {
  constructor(brand, price, color, size) {
    super(brand, price);
    this.color = color;
    this.size = size;
  }

  palyGame () {
    console.log("打游戏")
  }

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

  //子类重写父类方法
  call(){
    //js只能重写父类方法不能进行 super 调用
    console.log("视频通话")
  }
}

//实例
let apple = new Apple("iphone", 11999, "深海蓝", 6.5);
console.log(apple)
apple.call()
apple.palyGame()
apple.photo()

16.3.get set方法

js 的get set 方法更像是一个触发器。当属性的值改变触发 set 方法，当属性获取值时触发 get 方法

class People {
  get age (){
    console.log("获取年龄")
  }
  set age (age){
    console.log("修改年龄")
  }
}

let my = new People();
my.age; //获取对象属性值 调用属性对应的get方法
my.age = 27; //设置对象属性值，调用属性对应set方法
my.age;

17.es6常用api说明

es6增加了很多实用性的api, 本章主要讲解Number, Math, Oject类的方法。

17.1Number

//Number.EPSILON
Number.EPSILON 

//表示Number最小进度 用于浮点运算中
console.log(0.1+0.2) //0.30000000000000004
console.log(0.1+0.2 === 0.3); //false

//优化
function panduan (a, b){
  if (Math.abs(a - b) < Number.EPSILON) {
    return true;
  } else {
    return false;
  }
}
console.log(panduan(0.1+0.2, 0.3)) //true

//2进制0b 8进制0o 10进制 16进制0x

//api
Number.isFinite() //判断是否为有限数 10/3 为无限数
Number.isNaN() //判断是否为NaN
Number.parseInt() //转整数
Number.parseFloat() //转浮点数
Number.isInteger() //判断是否为整数

17.2.Math

Math.trunc() //抹除浮点数小数部分
Math.sign() //判断 正数 0 负数

17.3.Object

Object.is() //判断两个对象是否完全相等
console.log(NaN === NaN) //false
console.log(Object.is(NaN, NaN)) //true

Object.assign() //对象合并 用做配置合并

Object.setPrototypeOf() //设置原型对象 不重要
Object.getPrototypeOf()

18.模块化

类似于java语言中的java文件
防止明明冲突代码冲突易维护提供复用

模块化产品介绍

规范      产品
CommonJS  NodeJS Browserify
AMD       requireJS
CMD       seaJS

18.1.export

export 将js文件中需要暴露的变量方法等透传给 import 引入对象

//方法一 分别暴露
export let name = "小明";
//方法二 统一暴露
let age = 23;
export {age}
//方法三 默认暴露
export default {
    name: "test",
    test: function test(){
        console.log("测试继承")
    }
}

18.2.import

引用通过export命令透传出来的变量和方法

//import
//通用引入  文件中所有export的数据都将被引入
//from '...' 指定export透传的文件路径
import * as m1 from '...'
console.log(m1)

//解构赋值形式
import {name as name2, age} from '...'

//导入默认赋值形式
import {default as m3} from '...'

//简便模式 只针对default 默认暴露
import m3 from '...'

19.babel工具使用

es6语法并非所有浏览器支持，在程序发行前可将 es6 语法的程序使用 babel 转换为es5语法，从而提升程序的兼容性。详细说明待补充…

主要工具：babel-cli browserify

使用说明

1.下载工具
2.babel命令转译 es5  转译到 ./dist/...
3.browserify 打包

20.npm包安装

npm类似java中的maven。相似说明待补充…