初识Es6

最新推荐文章于 2024-07-29 13:58:45 发布

Lianna.

最新推荐文章于 2024-07-29 13:58:45 发布

阅读量54

点赞数

文章标签： javascript html5

本文链接：https://blog.csdn.net/m0_55316631/article/details/120430478

版权

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

介绍：

# JS由三部分组成：

DOM: document Object model (文档对象模型)

BOM: window (浏览器对象模型)

ECMAScript 语法

ECMAScript 2015 == ES6

ECMAScript - 252

# 介绍

-ECMAScript和JavaScript

-ECMA是标准，JS是实现

-类似HTML5是标准,IE10、Chrome、FF都是实现

-换句话来说，将来也能有其他XXXScript来实现ECMA

-ECMAScript简称ECMA或者ES

-目前版本

-低级浏览器主要支持ES 3.1

-高级浏览器正在从ES5 过度到ES6 ES12

# 1.什么是ES6 ?

ECMAScript 6.0 的简称 ECMA-2015

是JavaScript语言的下一代标准

已经在2015年6月正式发布了。

# 2.什么是ECMAScript ?

ECMA是制定JS的标准化组织

ECMAScript规定了浏览器脚本语言的标准

# 3.ECMAScript和javascript的关系 ?

ECMAScript是JavaScript的规格(标准)

JavaScript是ECMAScript的一种实现

# 4.ES6的优势

严谨简洁

# Js 的六种数据类型

三种基本数据类型(Number,Boolean,String)

两种特殊数据类型(undefined,null)

一种复合型引用型(object)

# JS 第七种数据类型

Symbol 表示独一无二的值

扩展运算符 ...rest 参数的逆运算将一个数组转为用逗号分割的参数序列

rest 参数 fn(...arr) 接收多余的参数转换数组

// # let const块级作用域(let定义的变量 const定义的常量)

// var 没有块级作用域 let和const拥有块级作用域

if(true){

var a = 100

let b = 200

}

console.log(a) //100

console.log(b) //报错

// const 必须在声明变量的时候就赋值，不能先声明变量在赋值)

const PI;

PI = 3.1415 //错误

const PI = 3.1415 //正确

// # 解构赋值：从数组和对象中提取值，对变量进行赋值，这被称为解构

// 数组

let [a,b,c] = [1,2,3]

//解构不仅可以用于数组还可以用于对象

let { foo,bar } = {foo:'aaa',bar:'bbb'}

console.log(foo,bar) // aaa bbb

//函数参数

function add([x,y]) {

return x + y

}

console.log(add([1,2])) // 3

//字符串的解构赋值

let [a,b,c,d,e] = 'hello'

console.log(a,b,c,d,e) // h e l l o

//解构赋值使用场景

let jsonData = {

id:7,

status:'ok',

data:['要放假啦','要回家啦']

}

let{id,status,data:str} = jsonData

console.log(id,status,str) // 7 'ok' ['要放假啦','要回家啦']

//交换变量

let a = 1;

let b = 2;

[a,b] = [b,a]

console.log(a,b) // 2 1

// # set数据解构

// ES6提供了新的数据解构 set没有重复元素的类似数组的数据结构

// Map 键值对的双列集合

// JavaScript的对象(object),本质上是键值对的集合(Hash结构)，但是只能用字符串当做键，这给她的使用带来了很大的限制

// Map也是键值对，但是键的范围不限于字符串，各种类型的值都可以当做对象

const s = new Set();

const arr = [1,2,3,4,5,6,7]

arr.forEach(function (i) {

console.log(i)

s.add(i)

})

console.log(s) //1 2 3 4 5 6 7

// Set删除

const set = new Set([1,2,3]);

set.delete(1)

console.log(set) // 2 3

// Set清除所有没有返回值

const set = new Set([1,2,3])

set.clear()

console.log(set) // Set(0) {}

//将set结构转为数组

const set = new Set([1,2,3]);

const arr = Array.from(set)

console.log(arr) // (3) [1,2,3]

// # 函数

//ES6允许为函数的参数设置默认值，即直接写在参数定义的后面

//(好处：1、简洁 2、阅读人可以立刻意识到哪些参数可以省略不用查看函数体和文档)

function log(x,y = 'world') {

console.log(x,y);

}

log('Hello'); //Hello World

// # 箭头函数( => )

var f = v => v

//等同于

var f = function (v) {

return v

}

console.log(f('烧烤')) //烧烤

// # promise

// Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大

// 所谓`Promise`，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

// 从语法上说，Promise 是一个对象，从它可以获取异步操作的消息

// 缺点：promise的缺点:

// 1. 无法取消`Promise`，一旦新建它就会立即执行，无法中途取消

// 2. `promise`内部抛出的错误，不会反应到外部

// 3. 当处于`Pending`状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）

//函数封装

function fn() {

return new Promise((resolve,reject) => {

setTimeout(() => {

resolve('小龙虾')

},1000)

})

}

//函数调用

fn().then(data => {

console.log(data) //小龙虾

})

</script>

</body>

</html>

Lianna.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识Es6

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title&...
复制链接

扫一扫