JS ES6常用语法
const 关键字
const关键字作用是是声明常量(一旦声明就无法修改)
- 没有变量提升
- 有块级作用域
- 不能重复声明
- 声明时必须要初始化
- 不能重新赋值
// 没有变量提升
console.log(num); // 报错
const num = 100;
// 有块级作用域
{
const num = 200;
}
console.log(num); // 报错
// 不能重复声明
const num = 300;
const num = 400; // 报错
console.log(num);
// 声明时必须要初始化
const num;
console.log(num); // 报错
// 不能重新赋值
const num = 10;
num = 20; // 报错
console.log(num);
let 与 const 关键字
let 关键字
let 和 var 区别
var和 let作用都是声明变量的,有以下特点
var关键字
- 1.有变量提升
- 2.没有块级作用域,它是函数作用域
- 3.可重复声明
- 4.可重新赋值
// 变量提升
console.log(age);
var age = 38; // undefined
// 没有有块级作用域
for (var i = 0; i < 10; i++) {
}
console.log(i); // 10
// 重复声明
var num = 10;
var num = 20;
console.log(num); // 20
// 可以重新赋值
var num = 10;
num = 20;
console.log(num); // 20
let关键字
- 1.没有变量提升
- 2.有块级作用域
- 3.不可重复声明
- 4.可重新赋值
// 没有变提升
console.log(age); // 报错
let age = 38;
// 没有块级作用域
for (let i = 0; i < 10; i++) {
}
console.log(i); // 报错
// 不能重复声明
let num = 10;
let num = 20;
console.log(num); // 报错
// 可以重新赋值
let num = 10;
num = 20;
console.log(num); // 20
解构赋值
在ES6里解构赋值就是怎么声明的,就怎么给它赋值
对象解构赋值
取对象中的属性的值,赋值给变量
let obj = {
name: "波波",
age: 38,
gender: "男",
score: 100,
};
// ES5
let name1 = obj.name;
let age1 = obj.age;
let gender1 = obj.gender;
let score1 = obj.score;
console.log(name1, age1, gender1, score1); // 波波 38 男 100
// ES6第一种
let {
name: name1,
age: age1,
gender: gender1,
score: score1
} = obj;
console.log(name1, age1, gender1, score1); // 波波 38 男 100
// ES6第二种
let {
name: name,
age: age,
gender: gender,
score: score
} = obj;
console.log(name, age, gender, score); // 波波 38 男 100
// ES6第三种
// 如果声明的变量名和对象变量名一致,那就可以简写
let {
name,
age,
gender,
score
} = obj;
console.log(name, age, gender, score); // 波波 38 男 100
给对象添加一个默认值,对象内部不会改变
let {
name,
age,
gender,
score,
height = 180
} = obj;
console.log(name, age, gender, score, height); // 波波 38 男 100 180
console.log(obj); // { name: '波波', age: 38, gender: '男', score: 100 }
数组解构赋值
是把数组中每一个元素的值依次赋值给变量。
let arr = [10, 20, 30, 40];
// ES5
let num1 = arr[0];
let num2 = arr[1];
let num3 = arr[2];
let num4 = arr[3];
console.log(num1, num2, num3, num4); // 10 20 30 40
// ES6
let [num1, num2, num3, num4] = arr;
console.log(num1, num2, num3, num4); // 10 20 30 40
解构赋值结合函数声明
形参有多个
// ES5
function test1(obj) {
console.log(obj.name, obj.age, obj.gender);
}
test1({
name: '波波',
age: 38,
gender: "男"
}); // 波波 38 男
// ES6
function test2({ name, age, gender }) {
console.log(name, age, gender);
}
test2({
name: '波波',
age: 38,
gender: "男"
}); // 波波 38 男
箭头函数
是匿名函数的一个简写,有以下规则:
- function 改成 =>,=> 可以读成 goesto
- 如果只有一个形参,那就可以省略形參小括号
- 如果不是一个形参,0个或者多个形参,那就不能省略这个形参小括号
- 如果函数体只有一句话,那就可以省略函数体的大括号
- 如果函数体只有一句话,并且这一句话是 return返回值,那 return` 也要省略
- 如果函数体不是一句话,那就不能省略这个大括号
// 普通的匿名函数
let fn = function (name) {
console.log("我的名字是" + name);
}
fn("波波"); // 我的名字是波波
// 箭头函数
let fn = name => console.log("我的名字是" + name);
fn("波波"); // 我的名字是波波
// 变化过程
let fn1 = function (name) {
return name + '你好吗?';
}
let fn1 = (name) => {
return name + '你好吗?';
}
let fn1 = name => {
return name + '你好吗?';
}
let fn1 = name => name + '你好吗?';
对象成员的简写
let name = '千里';
let age = 18;
let gender = '男';
let score = 100;
- 声明一个对象,对象里面有name,age,gender.score属性,希望这些属性的值是上面对应变量的值
// ES5
var obj = {
name: name,
age: age,
gender: gender,
score: score,
sayHi: function () {
console.log('哈哈,你好!');
}
}
console.log(obj);
obj.sayHi();
// {
// name: '千里',
// age: 18,
// gender: '男',
// score: 100,
// sayHi: [Function: sayHi]
// }
// 哈哈,你好!
// ES6:对象成员简写
let obj = {
name,
age,
gender,
score,
sayHi: function () {
console.log('哈哈,你好!');
}
}
console.log(obj);
obj.sayHi();
// {
// name: '千里',
// age: 18,
// gender: '男',
// score: 100,
// sayHi: [Function: sayHi]
// }
// 哈哈,你好!
拓展(展开)运算符
对象展开
用 … + 对象名 来复制对象全部属性
// 声明一个对象
let chinese = {
skin: '黄色皮肤',
hair: '黑色头发',
sayHi() {
console.log('你好,你吃了吗?');
}
}
// 声明一个对象
let zhuBo = {
skill: '眺唱rap打篮球,老铁双击666',
song: "唱大碗宽面"
}
let linge = {
...chinese,
...zhuBo,
}
console.log(linge);
// {
// skin: '黄色皮肤',
// hair: '黑色头发',
// sayHi: [Function: sayHi],
// skill: '眺唱rap打篮球,老铁双击666',
// song: '唱大碗宽面'
// }
数组展开
用 … + 数组名 来复制数组内全部的值
用途:
- 数组拼接
- 用 Math.max()或 Marh.min()来求数组里的最大值和最小值
let arr1 = [10, 20, 30];
let arr2 = [...arr1, 40, 50];
console.log(arr1); // [ 10, 20, 30 ]
console.log(arr2); // [ 10, 20, 30, 40, 50 ]
// 求数组中的最大值
let arr1 = [10, 8, 7, 66, 65, 34];
let max1 = Math.max(...arr1);
console.log(max1); // 60
数据类型 Set
Set 类型和数组类似,就是不能放一样的元素
用途:数组去重
语法结构:
new Set(arr);
- 参数:arr 是一个数组
// 基本使用
let set1 = new Set([10, 20, 30, 40, 10, 20, 30, 50]);
console.log(set1); // Set { 10, 20, 30, 40, 50 }
// 数组去重
let arr = [10, 20, 30, 40, 10, 20, 30, 50];
let set1 = new Set(arr);
console.log(set1); // Set { 10, 20, 30, 40, 50 }
let arrNew = [...set];
console.log(arrNew); // [ 10, 20, 30, 40, 50 ]
模板字符串
字符串种类 | 符号 | 特点 |
---|---|---|
普通字符串 | ’‘ 或 " " | 没有格式,里面也不能写变量 |
模板字符串 | `` | 会保留原样字符串格式,以及可以占位. 可以放变量和函数 格式是:${变量名} |
// 模板字符串
let autor = `波波`;
let str1 = `
静夜思
${autor}
床前明月光,
地上写两双。
举头望明月,
低头思阿香。
`;
console.log(str1);
// 静夜思
// 波波
// 床前明月光,
// 地上写两双。
// 举头望明月,
// 低头思阿香。
function test() {
return `hhhh`;
}
console.log(`${test()}`); // hhhh
补充:数组方法
- forEach();
let arr = [10, 20,30, 40];
arr.forEach(function( item, index) {
//item就是遍历出来的每一个项
//index就是遍历出来每-项对应的索引.
// console. log(item, index);
console.log(item + 10);
});
map()
- 遍历数组的,有返回值
let arr = [10, 20, 30 , 40];
let arrNew = arr.map(function( item, index) {
//item就是遍历出来的每一项
//ipdex就是遍历出来的每一项对应的索引
// console.log(item, index);
return item*item
});
console.log(arrNew);//[ 100, 400, 900, 1600 ]
filter(); 过滤器
- filter()方法会返回一个新的数组,新的数组中的元素是通过检查后符合条件的元素.
let arr=[10,20,11,23,45,67,88]
let arrNew = arr.filter((item,index)=>{
//item就是遍历出来的每一项
//index遍历出来的每一项对应的索引
// console . log (item, index);
return item % 2 == 0如果条件成立,会返回当前项,如果条件不成立,不会返回当前项
})
console.log(arrNew);//[ 10, 20, 88 ]