超简单!10分钟学会工作中最长用的ES6
程序员文章站
2023-12-21 13:07:40
...
知识点概览
- let与const
- class extends super
- 箭头函数
- 字符串模板
- 结构赋值
- 函数的default
- rest …
const用于声明产量 声明时必须赋值
let声明的变量只在代码块内有效 同一个变量let只能声明一次
{
let a =1;
}
console.log(a); //undefined
还有一个常见的用法是 使用let代替闭包
使用闭包
var button = document.getElementsByTagName('button');
for(i=0;i<button.length;i++){
(function(i){
button[i].onclick=function(){
alert(i+1)
}
}(i))
}
使用let
var button = document.getElementsByTagName('button');
for(let i=0;i<button.length;i++){
alert(i)
}
使用let 能省去不少代码 还避免了内存泄露
-
class extends super
常用于React+TS的开发中
一般class组件的格式
class Homde extends React.Component{ constructor(props){ super(props) } }
-
箭头函数
箭头函数的特性:箭头函数没有固定的this指向,它的this永远指向它的上一级作用域,即是上级上下文中的this 如果你能分清动态作用域和静态作用域(js的词法作用域)话很容易理这点 this的指向不是由声明的位置决定,而是跟调用的位置有关
一般的函数
function add(x,y){
return x+y
}
箭头函数
const add = (x,y)=>{
return x+y;
}
当函数体内只有retun语句的时候 可以简写为
const add = (x,y)=>x+y;
当函数参数只有一个时可以省略括号
如
const a = function(a){
return a+1;
}
可以写为
const a = a=>a+1
字符串模板
一般情况下我们想在字符串中使用变量时需要使用字符串拼接,但模板字符串提供以一种更简单的语法糖${}来访问变量
普通字符串
var name = '老王';
const str1 = "hello,大家好,我是"+name+""
模板字符串
const str2=`
hello,大家好,我是${name}
`
值得注意的是,模板字符串可以使用回车换行
结构赋值
ES6允许按照一定格式从数组和对象中提取值为变量赋值
let a =1;let b =2;
let obj ={a:a,b:b}
用es6可以写为
let obj ={a,b}
反过来可以这么写
let c = {a:1,b:2}
let {a,b}=c;
console.log(a,b)//1,2
- default 默认值
下面的例子调用animal的时候忘记传传参数了一般的做法是type = type|| ‘cat’ 来指定默认值
function animal(type){
type = type|| 'cat';
console.log(type)
}
如果使用es6可以直接这样写
function animal(type='cat'){
console.log(type)
}
在redux中的reducer.js有这样的一段代码也用到了default默认值
defaultValue={name:'ian',age:21};
export default (state=defaultValue,action)=>{
return state;
}
7.rest …
function person(...types){
console.log(types); // ['老王','老李','老赵']
}
persons('老王','老李','老赵');
rest有一种更常见的用法
var persons = ['老王','老李','老赵'];
var myperson = [...persons,1,2,3,5];
推荐阅读