博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ES6笔记01
阅读量:4553 次
发布时间:2019-06-08

本文共 3147 字,大约阅读时间需要 10 分钟。

一、ECMAScript 6

ECMAScript 6.0,简称ES6,第一个版本是在2015年6月进行发布,所以也称之为《ECMAScript 2015 标准》(简称 ES2015)。

JavaScript是ECMAScript的一种实现(分支),遵循ECMAScript标准的。目前主流浏览器已经可以完美兼容和使用ES6。

二、let 和 const

var 存在的问题:

  • var 不能用于定义常量
  • var可以重复声明变量
  • var 前两存在变量提升
  • var 不支持块级作用域

let 和 const 可以解决以上问题

(1) 不可以重复声明变量

let name = 'Astro';let name = 'nurato';console.log(name);//运行结果:Identifier 'name' has already been declared

(2)不存在变量提升

console.log(name);let name = 'Astro';// 运行结果:ReferenceError: name is not defined

(3)可以定义常量

不能给常量重新赋值,但如果是引用类型的话可以进行修改。

const PI = 3.14;PI = 3;console.log(pi);//运行结果:Assignment to constant variable.

//引用类型const  GD= {name:'Astro',intro:'Astro 就是阿童木'};GD.name = '阿童木';console.log(GD);// 运行结果:{name: "阿童木", intro: "Astro 就是阿童木"}//intro: "Astro 就是阿童木"//name: "阿童木"//__proto__: Object...........

(4)块级作用域

如果用var定义变量,变量是通过函数或者闭包拥有作用域;但,现在用let定义变量,不仅仅可以通过函数/闭包隔离,还可以通过块级作用域隔离。

块级作用域用一组大括号定义一个块,使用 let 定义的变量在大括号的外部是访问不到的,此外,let声明的变量不会污染全局作用域。

{    let a = '鸣人';}console.log(a);// 执行结果:ReferenceError: a is not defined
if(1){let str = '123';}console.log(str);// 执行结果:ReferenceError: str is not defined

(5)高级排他(不使用闭包)

    
Title
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

三、解构赋值

用于分解js中对象的机构

(1)用于数组结构

let nameArr = ['张三','李四','王五'];// 普通写法let name1 = nameArr[0];let name2 = nameArr[1];let name3 = nameArr[2];//结构写法let[name1,name2,name3] = nameArr;

(2)对象的解构

//写法1let{name,age,sex} = {name:'张三',age:1,sex:'男'}console.log(name, age, sex);//运行结果:张三 1 男
//写法2:结构重命名let{name:gName,age:gAge,sex:gSex} = {name:'张三',age:1,sex:'男'};console.log(gName, gAge, gSex);//运行结果:张三 1 男
//  写法3: 可以设置默认值let{name,age,sex='女'} = {name:'李四',age:18}console.log(name, age, sex);// 运行结果:李四 18 女
// 写法4 省略结构let [,,sex] = ['王五',20,'男'];console.log(sex);// 运行结果: 男

(3)应用场景举栗子

在封装ajax的GET和POST请求时, 就可以运用到解构的知识点,代码如下:

// 普通写法function ajax(options) {let method = options.method || 'GET';let data = options.data || {};// ..........}// 结构写法function ajax({method="GET", data}) {console.log(method, data);}ajax({method:"POST",data:{"id":1,"name":"张三"}});

四、延展操作符

(1)延展数组

let arr1 = [ 'a', 'b', 'c'];let arr2 = [1, 2, 3];let result = [...arr1, ...arr2];console.log(result); //  [ "a", "b", "c", 1, 2, 3 ]

(2)延展对象

let smallDog = {name:'小黑', age: 1};let bigDog = {name: '大白', age: 2};let dog = {...smallDog, ...bigDog};console.log(dog); // {name: "大白", age: 2}// 注意:  如果对象中的属性一致, 会被覆盖

(3)应用场景

function getMinValue() {console.log(Math.min(...arguments));}getMinValue(1,2,7)// 1

五、ES6字符串操作

(1)新增字符串方法

[1]startsWith()

let url = 'http://www.fesco.com.cn';console.log(url.startsWith('http'));// true

[2]endsWith

let url = 'http://www.fesco.com.cn';console.log(url.endsWith('cn'));//true

[3]includes() 判断字符串中是否包含 XX

let str = 'skyblue and astro';console.log(str.includes('ast')); //true

[4]repeat() 拷贝n份

let str = 'hello';console.log(str.repeat(20)); //打印出50个hello

[5]padStart() / padEnd()

  • padStart()用于头部补全,padEnd()用于尾部补全;

  • 第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串。

let y1 = '2030'.padEnd(10, '1');console.log(y1);//2030111111let y2 = '11-22'.padStart(10, '2030-MM-DD');console.log(y2); //2030-11-22

转载于:https://www.cnblogs.com/friday69/p/10019878.html

你可能感兴趣的文章
bzoj4196 [Noi2015]软件包管理器——树链剖分
查看>>
kafka源码阅读环境搭建
查看>>
UI设计
查看>>
androidtab
查看>>
Windows Phone 自定义弹出框和 Toast 通知
查看>>
如何生成静态页面的五种方案
查看>>
php 事件驱动 消息机制 共享内存
查看>>
剑指offer 二叉树的bfs
查看>>
LeetCode Maximum Subarray
查看>>
单元测试框架"艾信.NET单元测试工具(AssionUnit)"开发---第二步
查看>>
git 项目最常用命令总结
查看>>
[Arduino] 在串口读取多个字符串,并且转换为数字数组
查看>>
4.1.6 Grundy数-硬币游戏2
查看>>
图像处理的软件
查看>>
Sql 2000系统表 语句查询表结构
查看>>
day 37 并发编程和操作系统的发展史 + 进程
查看>>
面试问题总结
查看>>
让我们再聊聊浏览器资源加载优化
查看>>
underscore demo
查看>>
CSS hack
查看>>