Es6简单介绍(不限于)

# Es6简单介绍(不限于)

# 一. let、const

    {
        let a = 1
    }
    console.log(a)

1
2
3
4

var let const
变量声明提升 1.不会提升;
2.只在当前块级作用域生效
1,2同let,
3.已声明的变量不可修改

# 二. 模板字符串

var str = '字'
var str2 = `模板${str}符串`
console.log(str2) // 模板字符串

1
2
3

# 三. 解构赋值

let o = {
    a: 1,
    b: 2,
    c: 3
}
const { a, b, c } = o
console.log(a, b, c) // 1, 2, 3

1
2
3
4
5
6
7

这种情况不好理解的话,可以参考下面import用法来理解

test.js

let a = 111, b = [1,2,3], c = function () {}
export {
  a, b, c
}

1
2
3
4

main.js

import { a } from './test.js'

1

# 四. 展开运算符

基本用法: 将一个变量中的所有元素添加到另一个变量中

var o1 = { a: 1, b:2, c:3}
var o2 = {...o1}
o1 === o2 // false

1
2
3

说明展开运算符可以完成浅拷贝

var o1 = { a: 1, b: 2, c: {d: 4}}
var o2 = {...o1}
o1.a = 11
o1.c.e = 5
console.log(o1) // { a: 11, b: 2, c: {d: 4, e: 5}}
console.log(o2) // { a: 1, b: 2, c: {d: 4, e: 5}}

1
2
3
4
5
6

二级对象中修改就不行了,需要注意

# 五. 循环

var a = [1,2]
a[4] = null
a[5] = undefined
console.log(a) // [1, 2, empty x 2, null, undefined]

// map
a.map(x => x*2) // [2, 4, empty × 2, 0, NaN]
// 由此了解: '(null相乘为0, undefined相乘NaN, empty相乘无变化)'

// filter
a.filter(x => x*2) // [1, 2]

// reduce,map和filter的结合,功能更强,i是索引,arr就是a
// 可做做累计运算,以下累乘,x初始为a[0],y初始a[1]。
// 第一次循环完了后,x变成了x*y = 2,y = a[2]...
a.reduce( (x, y, i, arr) =>  x*y ) // NaN 

// flat 和filter相似,但是只能过滤empty。
a.flat(x => x*2) // [1, 2, null, undefined]

// flat还可以扁平化数组,但只能有二级数组
[1,2,3,[4,5]].flat() // [1,2,3,4,5]
[1,2,3,[4,5,[6]]].flat() // [1,2,3,4,5,[6]]

// every
[1,2,''].every( x => x) // false

// some
[1,2,''].some( x => x) // true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# 六. async/awit

setTimeout( () => {
  console.log('timeout')
}, 1000)
console.log('start')
// 先打印哪个,后打印哪个

1
2
3
4
5

原文:大专栏  Es6简单介绍(不限于)

原文地址:https://www.cnblogs.com/jimmykeji/p/11657388.html

时间: 2024-10-03 10:12:45

Es6简单介绍(不限于)的相关文章

es6简单介绍

1.ECMAScript 6 简介 2.let和const命令 3.变量的解构赋值 4.字符串的扩展之模板字符串 5.正则的扩展 6.数值的扩展 7.函数的扩展 8.数组的扩展 9.对象的扩展 10.类 1.ECMAScript 6 简介 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了.它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言. ECMA:国际标准组织 2.l

Vue学习【第二篇】:ES6简单介绍

ECMAScript 6 简介 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了.它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言. ECMA:国际标准组织 let,var和const命令 const:是用来定义一个常量的 const a ='hello' //const就是定义一个常量 //常量是不能修改的 let:是用来定义一个块级作用域的变量 let和val都是用

简单介绍什么是协程及其在ES6中的实现方式

协程,英文名coroutine,是一种执行过程可以被暂停和恢复的方法.各个协程之间相互协作完成一个任务. 让我们来看一个关于发挥协程作用的例子.假定我们有一个生产者和消费者的关系,生产者创建物品并将物品添加到一个队列,消费者从队列中取出物品并使用该物品.为了提高效率,生产者会一直创建并添加物品,直到队列满为止,队列满时通知运行环境调用消费者:消费者会一直取出并使用物品,直到队列空为止,队列空时通知运行环境调用生产者.下面是使用协程实现这个关系的伪代码: var q := new queue co

client高性能组件化框架React简单介绍、特点、环境搭建及经常使用语法

[本文源址:http://blog.csdn.net/q1056843325/article/details/54729657 转载请加入该地址] 明天就是除夕了 预祝大家新春快乐 [ ]~( ̄▽ ̄)~* 天天饭局搞得我是身心疲惫= = 所以更新比較慢 今天想跟大家分享的就是这个大名鼎鼎的React框架 简单介绍 React是近两年非常流行的框架 流行到什么程度呢? 我看了一下Github上的数据 React达到了5w8+的star 在JavaScript中star排名第4 受欢迎程度可见一斑

python的列表,元组和字典简单介绍

引 入 java                                   python 存取多个值:数组或list集合 ------------------------> 列表,元组 key-value格式:    Map        ------------------------>    字典 自己学习发现,java跟python这两门面向对象语言在数据类型的定义上,很多思想都是互通的,这里不说java,简单介绍一下python的列表,元组和字典. 一.列表 List: 最通

javascript的return语句简单介绍

javascript的return语句简单介绍:return语句在js中非常的重要,不仅仅具有返回函数值的功能,还具有一些特殊的用法,有个清晰的把握是非常有必要的.下面就结合实例简单介绍一下return语句的作用.一.用来返回控制和函数结果:通常情况,return语句对于一个函数是很有必要的,因为往往需要函数在一系列的代码执行后会得到一个期望的返回值,而此值就是通过return语句返回,并且将控制权返回给主调函数.语法格式: return 表达式 代码实例如下: function add(){

Object-c集合的简单介绍

一.简单介绍 NSArray/NSMutableArray NSSet/NSMutableSet NSDictionary/NSMutableDictionary NSArray.NSSet.NSDictionary是不可变的,创建的时候初始化 NSMutableArray.NSMutableSet.NSMutableDictionary是可变的 二.使用介绍 NSArray是有序的数组 NSMutableArray *myArray=[[NSMutableArray alloc] init];

plsql的环境与介绍:环境的搭建和plsql的简单介绍

PLSQL编程 1.环境的搭建 (1)创建一个存储表空间 SQL> conn /as sysdbaConnected. SQL> create tablespace plsql datafile '/u01/oracle/oradata/ORCL/plsql01.dbf' size 1G; Tablespace created. (2)创建PLSQL用户SQL> create user plsql identified by plsql default tablespace plsql;

CSS之box-sizing的用处简单介绍

前几天才发现有 box-sizing 这么个样式属性,研究了一番感觉很有意思, 通过指定容器的盒子模型类型,达到不同的展示效果 例如:当一个容器宽度定义为 width:100%;  之后,如果再增加 padding 或者 border 则会溢出父容器,是向外扩张的 如果使用该样式,指定为 box-sizing: border-box; 则 padding 和 border 就不会再溢出,而是向内收缩的,这个效果感觉非常实用, 特别是 input 和 textarea 等 现在设置 100% 再直