javascript中的部分ECMA6写法(ES6)
定义变量的新方法
let 定义变量
let i = 10;
console.log(i)//输出10
let定义的变量有独立的块作用域 它只在块作用域中有效
{
let i = 10;
}
console.log(i);//i is not defined
const定义变量
const i = 10;
i = 20;
const定义的变量不可以改变值
let i = 10;
i = 2;
console.log(i);//报错
const定义的变量也有独立的块作用域 它只在块作用域中有效
{
const i = 10;
}
console.log(i);//i is not defined
箭头函数
用来简写函数
let fn = function(){
console.log(123)
}
//可以简写成
let fn = ()=>{
console.log(123)
}
//带参数的写法
let fn = (a,b)=>{
console.log(a,b)
}
//只有一个形参可以省略括号
let fn = a =>{
console.log(a)
}
//如果箭头函数函数块只有一行代码,可省略大括号 并且代码块中的值会被return
let fn = a => a+1;
匿名函数
匿名函数不能独立存在,要么命名,要么赋值给变量、事件
/匿名函数自调用
!function(){//匿名函数前加感叹号
console.log(123)
}()
~function(){//匿名函数前加波浪号
console.log(123)
}()
(function(){//把匿名函数包在小括号里
console.log(123)
})()
解构赋值
解构对象
对象的解构赋值:定义变量+{你要对象里的键}=所在对象
解构赋值并且命名变量:定义变量+{你要对象里的键:命名}=所在对象
let obj={
name:"张三",
age:"18"
}
let {name} = obj;//定义变量+{你要对象里的键}=所在对象
let{name:a}=obj;//定义变量+{你要对象里的键:命名}=所在对象
console.log(name)//张三
console.log(a)//张三
多重解构
定义变量+{你要对象里的对象:二级对象的键}=所在对象
定义变量+{你要对象里的对象:二级对象的键:命名}=所在对象
let obj={
name:"张三",
age:18,
wife:{
name:"赵四",
age:"18"
}
}
let {wife:a}=obj;
console.log(a)//{name: "赵四", age: "18"}
let{wife:{name:b}}=obj
console.log(b)//赵四
解构数组
普通数组解构
let arr = [1,2,3];
let [a] = arr;
console.log(a)//输出1 在数组里拿出第一个值给a
let [a,b] = arr;
console.log(a,b)//输出1 2 arr数组会拿出第二个值给第二个变量b
多维数组解构
let arr = [1,2,3,[4,5,6]]
let [a,b,c,[aa]]=arr;
console.log(aa)//输出4
模板字符串
使用反引号书写 简便不用添加拼接符号 变量用${变量}写入 可换行书写
var name ="张三";
var i=
`
<tr>
<td>${name}<td>
<tr>
`
console.log(i)//输出字符串中所有的字符 与文本书写一模一样
展开运算符
将一个数组展开传参给一个函数(类似于遍历)
let arr =[1,2,3]
let fn = function(a,b,c){
console.log(a,b,c)
}
fn(...arr)//输出123 ...arr代表展开数组 传入fn 触发fn
合并运算符
将多个实参合并为一个数组
function fn(...arr){
console.log(arr);
}
fn(1,2,3)//输出数组[1,2,3]
一些字符串方法
字符串.startsWith(“字符”) 判断字符串是否是某个字符开头
字符串.endsWith(“字符”) 判断字符串是否是某个字符结尾
字符串.includes(“字符”) 判断字符串中是否有某个字符
this关键字
div.onclick=function(){
console.log(this)//此时的this是div
}
function fn(){
console.log(this)//此时的this是window
}
setTimeout(function(){
console.log(this)//此时的this指向window
}, 1000)
~function(){
console.log(this)//指向window
}()
总结:
1、普通函数中,this代表window(自调用函数)
2、事件函数中,this代表事件源
3、定时器函数中,this代表window
4、在对象的方法中,方法中的this 指向对象{1,2,方法}
改变this的指向
call方法调用函数
function fn(){
console.log(this);//此时是window
}
fn.call(1);//输出{1} 改变指向为call因为是call调用的函数
apply方法调用函数
let arr = [10,20]
function fn(a,b){
console.log(this);//此时是window
console.log(a+b);
}
fn.apply(1);//输出{1} 改变指向
fn.apply(0,arr)//输出30 apply第二个值可以传参数组或伪数组
伪数组和数组的区别:
伪数组含有一个length属性,并且不能使用数组的方法