JavaScript ES6新增语法
程序员文章站
2023-12-22 22:14:28
...
一、声明关键字
Let:
- 基础功能与var一样
- 全局变量不会绑定到window对象
- 没有提升
- 不允许重复声明
- 块级作用域(只要是花括号就是作用域)
- 暂时性死区(声明之前不允许使用)
const:
- 功能与let一致
- const声明的是常量,声明时候立即赋值,之后不能再修改(const不允许修改地址,但可以改值)
- 一般声明一次再不回改变的变量使用const
二、解构赋值
- 数组的解构赋值(从左到右顺序,依次解构,变量多了就为undefined)
let arr = [3,4,5,6];
let age = arr[0];
let sex = arr[1];
let num = arr[2];
let abc = arr[3];
let qwe = arr[4];
let [sex,age,num,abc,qwe] = arr;
console.log(age)
console.log(sex)
console.log(num)
console.log(abc)
console.log(qwe) //undefined
- 字符的解构赋值(从左到右的顺序,依次解构,变量多了就为undifined)
var str = "hello world";
var [a,b,c,d,e,f,g] = str;
console.log(a)
console.log(b)
console.log(c)
console.log(d)
console.log(e)
- 对象的解构赋值(按照键名一一对应,不存在的键名为undefined)
var obj = {
name:"admin",
sex:1,
age:18
}
var name = obj.name
var {sex,age,name} = obj;
console.log(name)
console.log(age)
console.log(sex)
- 解构赋值一般用于函数的传参和函数返回值
function fn([a,b,c,d,e]){}
var arr = [2,3,4,5,6]
fn(arr)
function fn(){
return {
year:2020,month:12,date:31
}
}
var {tear,month,date} = fn()
快速交换两个变量的值
var a = 10;
var b = 20;
var [a,b] = [b,a]
console.log(a)
console.log(b)
三、字符的方法
- 新的字符方法
var str = "hello";
console.log(str.repeat(5));
console.log(str.includes("a"));
console.log(str.startsWith("e"));
console.log(str.endsWith("o"));
- 字符转编码:
str.codePointAt()
- 编码转字符:
String.formCodePoint()
- 新增字符串模版(字符串的拼接方式)
var s1 = "这是字符" + "这是拼接的字符";
var s2 = `这
也
是
字
符
${ s1 }`;
console.log(s1);
console.log(s2);
四、箭头函数(()=>{}
)
特点:
- 不能直接存在,必须作为值存在
- 语法极简
- 当有且只有一个形参时,可以省略小括号
- 当有且只有返回语句时,可以省略return关键字和花括号
- 伤害了代码的可读性
- 当有且只有返回语句,返回的是对象时,要么不能省略花括号和return,要么将对象使用小括号包裹起来
- 箭头函数没有自己的this,内部的this回自动使用外层this
- 箭头函数不能被new执行
使用场景:
- 回调函数
- 返回值
- 小范围使用
var f = ()=>{
console.log(1);
}
f();
var fn = a=>{
console.log(a)
}
fn("hello")
var fn = a=>"hello " + a;
console.log(typeof fn);
五、展开运算符(...
)
类似与解构赋值,展开复杂数据(数组和对象)
- 取数组最大值最小值
var arr = [34,56,87,25,69];
console.log(Math.max(...arr));
var arr = [34,56,87,25,69];
ES6中取数组的最大或最小值
console.log(Math.max(...arr));
var obj = {
name:"admin"
}
var people = {
age:18,
sex:1,
...obj
}
console.log(people)
var obj = {
name:"admin"
}
var obj2 = {...obj}
obj2.name = "root";
console.log(obj)
console.log(obj2)
console.log(...obj)
console.log(name:"admin")
六、symbol数据类型
- 一种新的数据类型,特点类似于字符
- 一旦被创建,不可更改不与任何数据相同,自身相等,用来做标记量(字典量)
- 使用在固定的不可被改变的标记量
var s1 = Symbol();
var s2 = Symbol();
console.log(s1);
console.log(s2);
console.log(typeof s2);
console.log(s1 === s1);
console.log(s1 === s2);
七、set和map
set:
重复的参数,不会添加,类型为对象,没有索引号和字符长度
使用for - of
遍历;s.siez
查看长度(可用于数组去重)
var s = new Set([4,5,2,1]);
s.add("hello")
s.add(4)
s.add("4")
console.log(s);
console.log(typeof s);
console.log(s[0])
console.log(s.length)
for(var i of s){
console.log(i);
}
console.log(s.size)
Array.from(set([3,3,2,4,5])) //一行代码实现数组去重
map:
set(“键”,值),对象添加属性的方法
- 添加的属性键值为:
键=>值
连接 - 类型为对象,
size
查看字符长度 - get(“键”)获取属性值
- 使用
for-of
遍历
var m = new Map();
m.set("name","admin");
m.set("age",18);
m.set("sex",1);
m.set("show",function(){});
console.log(m)
console.log(typeof m)
console.log(m.size)
console.log(m[0])
console.log(m.length)
console.log(m.get("name"))
console.log(m.get("sex"))
console.log(m.get("age"))
for(var i of m){
console.log(i)
}