变量定义的新方式： let/ const
let 特性：
-
不允许重复声明
-
没有变量提升（预解析）
-
块级作用域（一对
{}包括的区域称为一个代码块，let声明的变量只在该代码块起作用）
例子1 ：简单的打印数据
使用 var:
这里还是要推荐下小编的web前端学习 群 : 569146385，不管你是小白还是大牛，小编我都欢迎，不定期分享干货，包括 小编自己整理的一份最新的web前端资料和0基础入门教程，欢迎初学和进 阶中的小伙伴。在不忙的时间我会给大家解惑。
-
for(var i = 0; i<10 ; i++ ){ -
setTimeout(()=>console.log(i)) // 执行10次，全都打印 10 -
}
使用 let:
-
for(let i = 0; i<10 ; i++ ){ -
setTimeout(()=>console.log(i)) // 执行10次，打印 0 - 9 -
}
之前我们要实现这样的打印，必须使用闭包：
-
for(var i = 0; i<10;i++){ -
(function(j){ -
setTimeout(()=>console.log(j)) // 执行10次，打印 0 - 9 -
})(i) -
}
例子二：在网页中常常会有切换 tab ，展示对应的信息的需求，我们使用 var 来处理时，常常使用的自定义属性，来保存点击的索引。 btns[i].index=i。用于找到对应的元素。：
html模板：
-
<style type="text/css"> -
div{display:none} -
.show{display:block;} -
.active{background:red;} -
</style> -
<button class="active">1</button> -
<button>2</button> -
<button>3</button> -
<div class="show">11111</div> -
<div >22223</div> -
<div >33333</div>
js:
-
var btns = document.querySelectorAll('button') -
var divs = document.querySelectorAll('div') -
for (var i=0 ;i<btns.length;i++){ -
btns[i].index=i -
btns[i].onclick=function(){ -
for(var j=0 ;j<btns.length;j++){ -
btns[j].className='' -
divs[j].className='' -
} -
this.className='active' -
divs[this.index].className='show' -
} -
}
使用 let：
-
var btns = document.querySelectorAll('button') -
var divs = document.querySelectorAll('div') -
for (let i=0 ;i<btns.length;i++){ -
/*可以看到这里少了保存的索引的操作*/ -
btns[i].onclick=function(){ -
for(let j=0 ;j<btns.length;j++){ -
btns[j].className='' -
divs[j].className='' -
} -
this.className='active' -
divs[i].className='show' -
} -
}
const 除了具备上述 let 的特性外，还有自己的一个特性：定义之后的值，是固定不变不能被修改的。
值得注意的是下面这两种情况是不会报错的：
-
{ -
const a = {value:1} -
a.value = 2 -
console.log(a) // {value:2} -
-
const b = [1,2,3] -
b.push(4) -
console.log(b) // [1,2,3,4] -
}
解构赋值
ES6 允许按照一定的模式，从数组和对象中提取值，这样就称为解构
数组：按照对应的顺序解构
-
{ -
var arr = [[1,2,3],[4,5,6],[7,8,9]] -
var [a,b,c] = arr -
// a : [1,2,3] -
// b : [4,5,6] -
// c : [7,8,9] -
// 用法1 -
var x = 1; -
var y = 2; -
[y,x] = [x,y] -
console.log(x,y) // 2 1 -
}
对象按照对应的名称一一对应进行解析：
-
{ -
var obj={ -
get:function(){ -
return 'get' -
}, -
value:1, -
data:[1,2,3], -
str:'string' -
} -
var {str,get,data} = obj -
console.log(str) // string -
console.log(get()) //get -
console.log(data) // [1,2,3] -
}
模板字符串
模板字符串 是增强版的字符串，使用反引号（```）作为标识 。可以当做普通字符串使用，也可以用来定义多行字符串（会保留换行）。或者在字符串中嵌入变量。
在模板字符串，需要引用变量使用 ${变量名} 的形式。在 {}可以进行运算，也可以引用对象属性。
-
{ -
var name = 'xiaoming' -
var age = 19 -
var str = `my name is ${name} ,my age is ${age}` -
console.log(str) //"my name is xiaoming ,my age is 19" -
}
扩展
Array.from(arrayLike[,mapFn[,thisArg]])
-
arrayLike: 想要转换成真实数组的类数组对象或可遍历对象。 -
mapFn: 可选参数，如果指定了该参数，则最后生成的数组会经过该函数的加工处理后再返回。 -
thisArg: 可选参数，执行 mapFn 函数时 this 的值。方法用于将两类对象转为真正的数组：类似数组的对象和可遍历的对象（包括 ES6 新增的数据结构 Set 和 Map ）
-
{ -
// NodeList对象 -
let ps = document.querySelectorAll('p'); -
Array.from(ps); -
// 将可迭代对象（Set 对象）转换成数组 -
Array.from(new Set(["foo", window])); // ["foo", window] -
// 使用 map 函数转换数组元素 -
Array.from([1, 2, 3], x => x + x); // [2, 4, 6] -
// 将类数组对象（arguments）转换成数组 -
(function () { -
var args = Array.from(arguments); -
return args; -
})(1, 2, 3); // [1, 2, 3] -
}
而在这之前，我们要转类数组对象，只能用这样的形式: [].slice.call(ps)
当然或许你根本不需要转，因为我们有 forof 了,只要有遍历接口的类型，它就可以进行遍历 （ Set, String, Array, NodeList等等）
-
{ -
// NodeList对象 -
let ps = document.querySelectorAll('p'); -
for (let v of ps){ -
console.log(v) -
} -
//当然你可能同样需要下标： `arr.keys()`,`arr.values()`,`arr.entries()` -
for (let [i,item] of ps.entries()){ -
console.log(i,item) -
} -
}
Object.assign()：拷贝源对象自身的可枚举的属性到目标对象身上
-
{ -
var obj = { a: 1 }; -
var copy = Object.assign({}, obj); -
console.log(copy); // { a: 1 } -
}
值得注意的是， Object.assign()执行的是浅拷贝。假如源对象的属性值是一个指向对象的引用，它也只拷贝那个引用值。
-
{ -
let a = { b: {c:4} , d: { e: {f:1}} } -
let g = Object.assign({},a) -
g.d.e = 32 // 设置 g.d.e 为 32 -
console.log(g) // {"b":{"c":4},"d":{"e":32}} -
console.log(a) // {"b":{"c":4},"d":{"e":32}} -
}
如果你需要的不是合并，而只是普通 json对象的复制，建议使用 JSON.parse(JSON.stringify(a))，这样不会有上面的副作用产生。
函数参数默认值。定义默认值得参数必须是尾参数，因为函数形参定义默认值后该参数可以被忽略
-
{ -
function fn(a,b=2){ -
return {a,b} -
} -
console.info(fn(1)) //{a: 1, b: 2} -
}
rest参数：用于获取获取函数的多余参数。与参数默认值一样，必须为尾参数
-
{ -
function foo(a,b,...args){ -
console.info(args) -
} -
foo(1,2,3,4,5,6) // [3, 4, 5, 6] -
}
扩展运算符 ...：它好比 rest 参数的逆运算。可以将一个数组转为用逗号分隔的参数序列。
-
{ -
// 更好的 apply 方法，例如我们在算最大值的时候： -
var arr = [1,2,3,4,5] -
console.info(Math.max.apply(null,arr)) -
console.info(Math.max(...arr)) // 使用扩展运算符 -
console.info(Math.max(1,2,3,4,5)) // 最终都会被解析成这样 -
-
// 当然还能这样用 -
var str = 'string' -
var arr = [...str,4,5] // ["s", "t", "r", "i", "n", "g", 4, 5] -
-
}
箭头函数 ArrowFunctions：箭头函数并不是用来替代现有函数而出现的，并且也无法替代。它是用来作为回调函数使用的，主要是为了简化回调函数的写法。 主要有三个特性：
-
箭头函数自身没有
this。函数内的this指向箭头函数 定义时所在的对象 ，而不是使用时所在的对象。 -
箭头函数内部，不存在
arguments对象 -
不可以当作构造函数，不可以使用
new指令。
简单用法，简化回调：
-
{ -
// 我们都知道数组的 sort 并不是根据数值大小来排序的，需要排序时，要通过回调函数的形式来确定排序方式 -
var arr = [7,8,9,10] -
arr.sort() // [10, 7, 8, 9] -
arr.sort(function(a,b){return a-b}) // [7, 8, 9, 10] -
arr.sort((a,b)=> a - b ) // 箭头函数简化。当仅有一条语句时，有一个隐式的 return -
}
没有 arguments
-
{ -
var foo = (a,b,c)=>{ -
console.log(a,b,c) -
console.log(arguments) -
}; -
foo(1,2,3) -
// 1 2 3 -
// Uncaught ReferenceError: arguments is not defined -
}
不要在对象的方法中使用箭头函数：
-
{ -
window.name='window'; -
var obj = { -
name:'obj', -
getName: function(){ -
console.log(this.name) -
} -
} -
obj.getName() // obj -
var getName = obj.getName -
getName() // window， this 总是指向调用者 -
//----------------- -
var obj = { -
name:'obj', -
getName: () =>{ -
console.log(this.name) -
} -
} -
obj.getName() // window -
/** -
这里由于对象 a，并不能构成一个作用域。所以会再往上达到全局作用域，所以 this 指向 window.. -
*/ -
}
扫一扫
2253
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
