目录
1.var,let,const的区别
1.1 var
语法格式: var 变量名;
- 该关键字定义作用域为全局。(全局变量)
var
声明的变量会被提升至作用域的顶部。你可以在变量声明之前使用它,此时变量的值为undefined
。虽然变量会被提升,但变量的赋值不会被提升。因此,在变量声明之前试图访问该变量时,其值仍是undefined
。(变量提升)- 可以多次使用 var 声明同一个变量名,而不会引发语法错误。(重复声明)
1.2 let
语法格式: let 变量名;
- 只在最近的 { } 内有效。(块级作用域)
- let不存在变量提升,var声明的变量在浏览器解析js代码的时候就会创建,但是let在js代码执行的时候才创建。(不存在变量提升)
- 同级作用域中不允许重复声明变量!出现同名变量会报错!(不允许重复声明)
- 变量在没有被声明之前不允许使用。(未声明不可使用)
1.3 const
声明一个只读的常量。一旦声明,常量的值就不能改变。语法格式: const 变量名=常量值;
其特点在let特点的基础上多一个不可变性。
- 声明的时候必须初始化,并且值不可以改变。(不可变性)
- 只在 { } 中有效。(块级作用域)
- 不可向上提升,不可重复声明(所有的变量不可重复)。(不存在变量提升,不允许重复声明)
- 变量在没有被声明之前不允许使用。(未声明不可使用)
注:虽然 const
变量本身不可重新赋值,但如果是对象或数组的话,其内部的属性是可以修改的。
1.4 区别总结
- var:具有函数作用域,变量提升,可以重复声明。
- let:具有块级作用域,变量不可提升,不能重复声明,可以重新赋值。
- const:具有块级作用域,变量不可提升,不能重复声明,不能重新赋值。
2.解构赋值
2.1 基本解构化赋值
给变量a,b赋值。
let[a,b]=[12,14]; console.log(a); console.log(b);
2.2 数组取值
在数组中取值
let arr=["嘿嘿","哈哈","嘻嘻"]; let[s1,s2]=arr; console.log(s1);//嘿嘿 console.log(s2);//哈哈
2.3 对象解构化赋值和取值
- 对象解构化赋值
//对象解构化赋值 var obj={ name:"张三", age:20, test:function(){ console.log("我是对象中定义的函数") } }
- 对象解构化取值
//对象解构化赋值 var obj={ name:"张三", age:20, test:function(){ console.log("我是对象中定义的函数") } } //传统方式取值 let name=obj.name; let age=obj.age; //解构化取值 let{name,age}=obj; console.log(name+"---"+age); //传统方式,使用函数 obj.test(); //解构化方式,使用函数 //取出对象obj里面为名为test的函数。 let{test}=obj; test();
2.4 Math对象的解构化使用
Math对象的解构使用
//Math对象的使用 console.log(Math.ceil(3.14));//向上取整 4 console.log(Math.floor(3.14));//向下取整 3 console.log(Math.round(6.8));// 四舍五入 7 // 使用结构化后,使用更加简洁 let{ceil,floor,round}=Math; console.log(ceil(9.21)); let{log}=console; log("aaaa");
注意:如果要将一个已经声明的变量用于解构赋值,必须非常小心
3. 字符串扩展
3.1 新增字符串遍历方式
格式:
- for (let 变量名 of 字符串){
//循环代码
}
注意: :let后定义的变量值为每次遍历的字符串的字符的值。
- 还能遍历其他的可迭代(iterable)对象,如数组 (
Array
),字符串 (String
),映射 (Map
),集合 (Set
)类数组对象等等。
3.2 模版字符串
let url = "www.zyp.com";
2let a2 = "<a href='" + url + "'></a>"; // 字符串拼接
3let a3 = `<a href='${url}'></a>`; // 使用模板字符串
4
5console.log(a2); // 输出: <a href='www.zyp.com'></a>
6console.log(a3); // 输出: <a href='www.zyp.com'></a>
3.3 字符串的函数扩展
- includes():返回布尔值,表示是否找到了参数字符串。
- startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
- endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
注:这三个方法都支持第二个参数,表示开始搜索的位置
- repeat():返回一个新字符串,表示将原字符串重复 n 次。
- padStart()和padEnd():字符串补全长度的功能。如果某个字符串不够指定 长度,会在头部或尾部补全。 padStart() 用于头部补全, padEnd() 用于尾 部补全。
- trimStart()和trimEnd():它们的 行为与 trim() 一致, trimStart() 消除字符串头部的空格, trimEnd() 消除尾部 的空格。它们返回的都是新字符串,不会修改原始字符串。
- at() :接受一个整数作为参数,返回参数指定位置的字符,支持负 索引(即倒数的位置)。
注意:如果参数位置超出了字符串范围, at() 返回 undefined
4.数组扩展
4.1 新增扩展运算符spread ( ... )
(1)将一个数组转为用逗号分隔的参数序列。
(2)替代函数的 apply 方法:由于扩展运算符可以展开数组,所以不再需要 apply 方法,将数组转 为函数的参数了。
(3)合并数组:
4.2 新增数组方法
(1)Array.from()
方法用于将类数组转为真正的数组,常见的类数组有三类:
- arguments
- 元素集合
- 类似数组的对象
①arguments:是一个类数组对象,它包含了传递给函数的所有实参。
②元素集合
③类似数组的对象(了解即可)
(2)Array.of()
Array.of() 方法用于将一组值,转换为数组。
5.对象的扩展
5.1 属性和方法的简洁表示
ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。
5.2 属性名表达式
ES6 允许字面量定义对象时,用表达式作为对象的属性名,即把表 达式放在方括号内。
5.3 扩展运算符(...)
ES2018 将这个运算符引入了对象。
5.4 箭头函数
ES6 允许使用“箭头”( => )定义函数。可以优化函数的使用,但不是替换以前的函数声明方案使用,一般在函数作为参数传递的时候使用箭头。
箭头函数式使用规则
注意:对于普通函数来说,内部的 this 指向函数运行时所在的对象,但是箭头函数没有自己的 this 对象,内部的 this 是引用外层的 this对象。