块级作用域let和const
let声明变量,const声明常量;都是块级作用域
//通常用var声明的变量,会有变量提升例如:
!function(bool){
if(bool){
var test='test';
}else{
console.log(test);//undefined,说明test变量确实是被申明了,否者会打印test is not defined
}
}(false)
!function(bool){
if(bool){
let test='test';
}else{
console.log(test)//is not defined ,说明test未被申明,
//只存在if(bool){ let test='test';}作用域里面,可以理解为{}里面即是申明变量的作用域
}
}(false)
//const申明常量,改变其值,会报错,例如:
const name='ouyang';
name='wei';// Assignment to constant variable.
var arr=[];
for(var i=0;i<10;i++){
arr.push(
function(){
console.log(i);
}
)
}
arr.forEach(function(fun){
fun();//10次10,只就是var申明i导致的,循环10,i的值一直在改变;
})
//如果用let来申明i,又会怎么样呢?
var arr=[];
for(let i=0;i<10;i++){
arr.push(
function(){
console.log(i);
}
)
}
arr.forEach(function(fun){
fun();//从0打印到9,这说明用let的变量的作用域,
//只存在function(){console.log(i)};
})
//又或者用闭包来写
var arr=[];
for(var i=0;i<10;i++){
arr.push(
(function(args){
return function(){
console.log(args);
}
})(i)
)
};
console.log(arr);
arr.forEach(function(fun){
fun();
})
模板字符串
拼接字符串 用${}来划界
//${}字符串拼接
//es5
var name='ouyang';
console.log(name+'wei');//ouyangwei
//es6
console.log(`${name}wei`);//ouyangwei注意用``
反引号``
//es5用反斜来拼接多行字符
var text='hello \
ouyang';
console.log(text);//hello ouyang
//es6直接用反引号
var words=`hello
world!`
console.log(words);//hello(换行)
//world!
// 1.includes:判断是否包含然后直接返回布尔值
let str = 'hahay'
console.log(str.includes('y')) // true
// 2.repeat: 获取字符串重复n次
let s = 'he'
console.log(s.repeat(3)) // 'hehehe'
//如果你带入小数, Math.floor(num) 来处理
变量的解构赋值
es6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构
\\数组解构赋值
let [a,b,c]=[1,2,3];
\\对象解构
let {foo,bar}={foo:"aaa",bar:"bbb"}
\\字符串解构
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
写法属于“模式匹配”,只有等号两边的模式相同,左边的变量就会被赋予相应的值,如果解构不成功,变量的值就等于undefined
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
let [x, , y] = [1, 2, 3];
x // 1
y // 3
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []
不完全解构,即左边的变量,与右边的值个数不匹配,能匹配几个就是几个
let [x, y] = [1, 2, 3];
x // 1
y // 2
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4
函数
默认值
//默认值
function fun(num){
var num=num||20;
console.log(num);
}
fun(0)//20因为0被当成false;
//es6的默认值问题
function fun1(num=20){
var num=num;
console.log(num);
}
fun1(0)//0
//与解构赋值默认值结合使用
function foo({x,y=5}){
console.log(x,y);
}
foo({})//undefined 5
foo({x:1})// 1 5
foo({x:1,y:2})//1 2
foo()//typeError:Cannot red property 'x' of undefined
rest 参数
ES6引入rest参数(形式为:...变量名),用户获取函数的多余参数,rest参数搭配的变量是一个数组,改变量讲多余的参数放入数组中,可以替换arguments
function add(...values){
let sum=0;
for(var val of values){
sum+=val;
}
return sum;
}
add(2,5,3)
name属性
函数name属性,返回该函数的函数名
function foo(){}
foo.name//foo
箭头函数(=>)
箭头函数,例子:
var f=v => v
//等同于
var f=function(v){
return v;
}
//多个参数或不需要参数的时候,使用园括号
var f = () => 5
//等同于
var f=function(){
return 5;
}
var sum=(num1,num2) => num1+num2;
//等同于
var sum=function(num1,num2){
return num1+num2;
}
如果要返回对象,必须在对象外面加上括号
let getTempItem = id => ({id:id,name:'temp'});
//等同于
let getTempItem=function(id){
return {
id:id,
name:'temp'
}
}
箭头函数this的指向问题,函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象
function foo(){
setTimeout(function(){
console.log('id:',this.id);
},1000);
}
var id=21;
foo.call({id:42});//id:21
//setTimeout全局函数,this指向全局变量
//如果换成箭头函数呢?
function fun(){
setTimeout(()=>{
console.log('id:',this.id);
},1000);
}
fun.call({id:42});//id:42
//说明箭头函数this指向其定义的对象
对象表达式
const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}
// 等同于
const baz = {foo: foo};
promise对象
promise异步编程的一种解决方案,比传统的解决方案,回调函数和事件,更合理和强大。
所谓promise
,简单来说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。promise是一个对象,从它可以获取异步操作的消息。promise提供统一的api,各种异步操作都可以用同样的方法进行处理。