我的第一篇文章
掘金真是一个非常不错的平台,随便写点东西,希望以后可以写出好的文章,第一次不知道发些什么东西,多多包涵,还不太会使用,慢慢学习
第一次分享一些es6语法吧
新的关键字
let const
let 和 var 区别
//let定义的变量不会提升(不存在预解析)
//let定义的变量不能重复定义
//let定义的变量不在window上
//在循环中,let定义的变量会被限制
//let自己会创建一个块级作用域 {}在大括号中使用,出了大括号就不能使用 //if/switch/for...
//const定义的变量值不能改 - 常量
// 不在window上
// 没有提升
// 不能重复定义
// 创建一个块级作用域
// 不允许重新赋值(值不能改)
// 声明的时候必须赋值
箭头函数
es6中提供了一种定义函数的方式(简写函数)
function fn(){
console.log(123)
}
var fn = function(){}
var fn = ()=>{}
fn()
//如果箭头函数的形参只有一个,那就可以省略小括号
var fn = function(a){
a++
console.log(a)
}
var fn = a=>{
a++
console.log(a)
}
//如果箭头函数的代码只有一行,那就可以省略大括号
var fn = a=>console.log(++a)
//注意如果箭头函数的代码只有一行,且有return关键字,也省略
var bool = arr.every(function(v){
return v.checked
})
var bool = arr.every(v =>v.checked)
函数默认值
function fn(a,b=2){ // 形参默认值 - 形参可选项
return a+b
}
模板字符串
es6提供了一种定义字符串的方法: `` 反引号
var str = asdff
//怎么定义就怎么输出 ,可以让一个字符串分多行定义
var a = `
aaa
`
var a = 10;
var str = 小明今年${a}岁 //拼接方便
解构赋值
var obj = {
name:'zhnagsan',
age:'12'
}
var {name,age} = obj
console.long(name,age)
//普通的解构赋值:变量名和键名要保持一致
//给解构出来的数据取别名
var{name:a,age}
console.log(a,age)
var obj = {
name:'zhnagsan',
age:'12'
wife:{
name:''
age:''
}
}
var {wife} = obj
var {name,age} = wife
var {wife:{name,age}} = obj; //多重解构
//数组
var arr = [1,2,3,4]
var [a] = arr; //按顺序来取
var [_,_,_,d] = arr
console.log(d)
var arr = [
1,
[
2,
3
]
]
//数组的多重解构
var [_,[a,b]] = arr
...运算符
es6提供了...运算符
将多可以个值合并成一个数组,也将一个数组展开成多个值
//计算多个值得和
function fn(...arr){
var res = arr.reduce((a,b)=>a+b)
}
fn(1,2,3)
fn(1,2,3,4,5)
//展开
function fn(1,2,3){
console.log(a+b+c)
}
var arr = [2,3,4];
fn(...arr)
var arr = [1,5,3,6,9,8,5,3] //计算最大值
Math.max(..arr)
对象的简写方式
var age = '12'
var obj = {name:name,age,age}
//简写:当键和值使用的变量名相同,就可以简写
var obj = {name,age}
function eat(){
console.log(123)
}
var obj ={
name,age,eat
}
//另一种方式简写
var obj ={
name,
age,
eat(){console.log(1223)}
}
检测数据类型
//js所有底层数据都是对像
Object.prototype.toString.call(数据)
//伪数组
本质是一个对象
伪数组会有length属性,用来描述有多少元素
不能使用数组方法
//伪数组转成数组
//遍历
var arr = []
for(var i =0;i<wei.length,i++){
arr.push(wei[i])
}
//利用系统提供的方法转换
Array.prototype.slice.call(wei)
常见的为数组
//元素集合
//argumens
function fn(){
//函数中的arguments关键字可以将所有的实参收集起来
console.log(argyments)
}
fn(1,2,3)
this关键字
可以写在任何一个地方,在不同的地方意思也不一样
//1、全局中表示window
//2、在普通函数中也是代表window
//3、在事件中:this代表事件源
//4、自调用函数:window
//5、定时器:window
//6、对象方法中:this代表当前对象
//7、箭头函数:this代表当前箭头函数所在作用域的this //this代表箭头函数上一行代码中的this
//从对象方法看 --- this代表对象
//8、构造函数中的this代表new出来的对象
上下文调用模式
//改变this的指向
function fn(){cl(this)}
fn() /// window
//call - 调用函数
var obj = {name,“张三”}
fn.call(obj) //调用过程中将this改变 this就是 obj
//有参数
function fn(a,b){cl(a+b);cl(this)}
fn.call(obj,1,2) //从call方法的第二个参数开始传入实参
//apply - 调用函数
fn.apply()
fn.apply(obj)
//有形参
fn.apply(obj,[1,2]) // apply把实参作为数组传入
//bind方法 - 复制函数
var fun = fn.bind(obj) //复制过程中改变this指向
fun()
// function fn(a){
// console.log(a);
// }
document.onclick = function(){
setTimeout( function(){
console.log(this); --document
}.bind(this) )
}