初学es6

简介: 初学es6

本周的主要学习内容为es6的基本知识,再次学习到了更多的知识,受益匪浅,以下为部分知识点

let与const

let:

1.变量不可以重复使用
2.块级作用域:只在声明所在的块级作用域内有效
3.不存在变量提升(“变量提升”现象,即变量可以在声明之前使用,值为`undefined,但let不存在变量提升)

const:

1.一定要赋初始值
2.一般常量是用大写(潜规则)
3.常量的值不能修改
4.块级作用域
5.对于数组和对象的元素修改,不算作对常量的修改,不会报错

解构赋值

  • 数组的解构赋值
//对数组内元素直接赋值
let [a,b,c] = [1,2,3]
let [foo,[[bar],baz]] = [1,[[2],3]]
//解构赋值允许指定默认值
let [foo = true] = [];
console.log(foo);//结果为true
let [x,y='b'] = ['a']  // x='a',y='b'
  • 对象的解构赋值
let {f00,bar} = {foo:‘aaa’,bar:‘bbb’};
//foo=‘aaa’,bar=‘bbb’
let {foo} = {bar:‘baz’};
//foo = undefined 解构失败,变量的值等于undefined

对象的结构也可以取默认值,默认值生成的条件是:对象的属性值严格等于undefined

8ccdc4e813f54a56a85dddd9c59448da.png

结构也可以用于嵌套结构的对象

e5d7bcd62dac465ca0890da175caf0ec.png

  • 字符串的解构赋值

字符串被转换成了一个类似数组的对象

0aeed754036448179e626b077d9fbadf.png

类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值

1215634c3c4f463d9ada481466c2e96d.png

  • 数值和布尔值的解构赋值

解构赋值时,如果等号右边不是对象或数组时,则会先转换为对象。null和undefined 无法转换为对象,所以无法进行解构

  • 函数参数的解构赋值
function add([x,y]){
  return x + y;
}
add([1,2]);  // 3

函数的参数也可使用默认值

function move({x = 0, y = 0}){
  return [x, y];
}
move({x: 3, y: 8}); //[3, 8]
move({x: 3}); //[3, 0]
move({}); //[0, 0]
move(); // [0, 0]

注意,下面写法会得到不一样的解构

function move({x, y} = {x = 0, y = 0}){
  return [x, y];
}
move({x: 3, y: 8}); //[3, 8]
move({x: 3}); //[3, undefined]
move({}); //[undefined, undefined]
move(); // [0, 0]

箭头函数

1.箭头函数中的this是静态的,

2.不能作为构造实例化对象

3.不能使用argument 变量

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

4.箭头函数的简写

(1)当形参只有一个的时候,省略小括号

d81eda64d99b470db2c1aafe1c7e4a89.png

(2)当花括号省略后,代码只有一条,此时return 必须省略而且语句的执行结果就是函数的返回值

037956faee2248b3945415737e1f16b7.png

【…】扩展运算符

1.将数组转化为逗号分隔的参数系列

e49501c7983b4bd5a66c5c71be07427b.png

2.合并数组

92c9d1b75e854510ab59cb89f315297e.png

3.克隆数组

3c6b1a07036541d096da2ba9de5908ca.png

4.将伪数组变成真数组

f87e437dcbea4facbfdab4292b558985.png

es6的基本内容也学的差不多了,在接下来写页面的过程中,希望能够顺利运用所学知识,顺利完成界面。


目录
相关文章
|
2月前
|
前端开发
关于es6
关于es6
13 0
|
3月前
|
JSON JavaScript 前端开发
浅谈ES5与ES6
浅谈ES5与ES6
47 3
|
7月前
|
存储 JavaScript 前端开发
ES6
ES6
51 1
|
前端开发 JavaScript API
|
JavaScript 前端开发 索引
ES9,ES10
ES9,ES10
75 0
|
JSON 资源调度 JavaScript
ES6 Day01
ES6 Day01
81 0
|
前端开发 容器
ES6 Day04
ES6 Day04
80 0
|
JavaScript 前端开发 Java
浅析-ES6
后端项目搭建完毕,接下来就是前端页面了。不过在这之前需要一些准备工作。我们需要学习ES6的语法标准。
浅析-ES6
|
JavaScript 前端开发 Java
ES6+
ES6+
165 0
|
前端开发 JavaScript 网络架构
一篇文章带你学会整个ES6
ES 全称 EcmaScript,是脚本语言的 规范 ,而平时经常编写的 JavaScript ,是 EcmsScript 的 一种实现 ,所以 ES 新特性其实是指 JavaScript 的新特性 。
105 0