const关键字
作用:声明变量,常量就是值(内存地址)不能变化的量。
具有块级作用域
if(true){
const a=10;
}
console.log(a); //a is not defined
声明常量时必须赋值
const PI; //使用const关键字必须赋初始值
常量赋值后,值不能修改
const PI=3.14;
PI=100;//赋值后不能修改,修改将修改地址
ary[0] = 123;//可以进行修改
let关键字
let关键字就是用来声明变量的使用lef关键字声明的变量具有块级作用域
在一个大括号中 使用let关键字声明变量才具有块级作用域var关键字是不具备这个特点
防止循环变量变成全局变量
先声明在使用// 使用let关键字声明的变量没用变量提升
例子:
// let关键字就是用来声明变量的
let a = 10;
console.log(a); 只能局部访问
let、const、var区别
1、使用var声明变量,其作用域为该语句所在的函数内,且存在变量提升现象
2、使用let声明的变量,其作用域为该语句所在的代码块内,不存在变量提升
3、使用const声明变量,在后面出现的代码中不能再修改常量的值。如果使用的值不需要修改或变化使用const关键字
变量提升:就是可以先使用在声明
Var Let Const
函数级作用域 块级作用域 块级作用域
变量提升 不存在变量提升 不存在变量提升
值可更改 值可更改 值不可更改
解构赋值
Es6允许从数组中提取,按照对应的位置,对变量赋值。对象也可以实现解构
数组解构
let [a, b, c] = [1, 2, 3];
console.log(a);
console.log(b);
console.log(c);
let ary = [1, 2, 3];
let [a, b, c] = ary;
console.log(a);
console.log(b);
console.log(c);
如果解构不成功,变量的值为undefined
let [foo] = [];
let [bar, fool] = [1];
console.log(bar);//1
console.log(fool);// undefined
对象解构
按照一定模式,从数组或对象中提取,将提取出来的值赋给另外的变量
对象解构允许使用变量的名字匹配对象的属性 匹配成功将对象属性的值赋值给变量
let person = {
name: 'zhangsan',
age: 20
}
let {
name,
age
} = person;
console.log(name);//zhangsan
console.log(age);//20
第二种
let {
name: myName
} = person;
console.log(myName);//zhangsan
箭头函数
(形参)=>{}
const fn=()=>{}
函数体中只有一句代码,且代码执行结果就是返回值,可以省略大括号。
const sum = (n1, n2) => n1 + n2;
const result = sum(10, 20);
console.log(result);
在箭头函数中形参只有一个 形参外侧的小括号也可以省略
const fn = v => {
alert(v);
}
fn(20);
const fn=v=>v;
箭头函数不绑定this关键字, 箭头函数没有自己的this关键字, 如果在箭头函数中使用this, this关键字指向的是函数定义位置的上下文this
function fn() {
console.log(this);
return () => {
console.log(this);
}
}
const obj = {
name: 'zhangsan'
};
// 将函数this指向obj
const resFn = fn.call(obj);
resFn();
剩余参数语法允许将一个不定数量的参数表示为一个数组
const sum = (...args) => {
let total = 0;
args.forEach(item => total += item);
return total;
};
console.log(sum(10, 20));
console.log(sum(10, 20, 30));
const sum (first,...args) => {
console.log(firsr); //10
console.log(args); //[20,30]
};
sum(10,20,30);
剩余参数和解构配合使用
let students = ['wangwu', 'zhangsan', 'lisi'];
let [s1, ...s2] = students;
console.log(s1); //'wangwu'
console.log(s2); //['zhangsan','lisi']
扩展运算符
扩展运算符可以将数组或对象转为逗号分隔的参数序列
let ary = [“a”, “b”, “c”];
console.log(…ary)
console.log(“a”, “b”, “c”)
扩展运算符应用于数组合并
let ary1 = [1, 2, 3];
let ary2 = [4, 5, 6];
let ary3 = [...ary1, ...ary2];
console.log(ary3)
扩展运算符转换为数组
将类数组或可遍历对象转换为真正的数组
var oDivs =document.getElementsByTagName('div');
console.log(oDivs)
var ary = [...oDivs];
构造函数方法Array.from()
将类数组或可遍历对象转换为真正的数组
var arrayLike = {
"0": "张三",
"1": "李四",
"2": "王五",
"length": 3
}
var ary = Array.from(arrayLike);
console.log(ary) //["张三", "李四", "王五"]
乘2
var arrayLike = {
"0": "1",
"1": "2",
"length": 2
}
var ary = Array.from(arrayLike, item => item * 2)
console.log(ary) //[2, 4]
findlndex();
用于找出第一个符合条件的数组成员位置,如果没有找到返回-1
let ary = [10, 20, 50];
let index = ary.findIndex(item => item > 15);
console.log(index)
includes()
判断数组中是否包含某一个值,返回布尔值
[1,2,3].includes(2)//true
[1,2,3].includes(4)//false
let ary = ['a', 'b', 'c'];
let result = ary.includes('a');
console.log(result);
find()
用于找出第一个符合条件的数组成员,如果没有找到就返回undefined 查找数组中符合的条件
var ary = [{
id: 1,
name: '张三'
}, {
id: 2,
name: '李四'
}];
let target = ary.find(item => item.id == 3);
console.log(target)
String的扩展方法
Es6创建字符串的方式,使用反引号定义(位置在tab键上面)
模板字符串
模板字符串可以解析变量,使用
{name}; console.log(sayHello); </script> 模板字符串可以换行 let html =
div>
{result.name}
; console.log(html); 在摸板板字符串中可以调用函数。 const sayHello = function() { return '哈哈哈追不到我吧就是这么强大'; }; let greet =
${sayHello()}哈哈哈哈`;
console.log(greet); //哈哈哈追不到我吧就是这么强大哈哈哈哈
starsWith和endsWith()
starsWith();表示字符串是否在原字符串的头部,返回布尔值
endsWith();表示参数字符串是否在原字符串的尾部,返回布尔值