目录
一、概念
二、声明变量 let var const 的区别?
2.1?let 关键字声明变量
2.2、const关键字声明变量
2.3 声明变量的总结
三、解构赋值?
3.1数组解构?
3.2对象解构?
四、箭头函数
五、Array的扩展运算符?
5.1、扩张运算符可以运用于合并数组
5.2、将伪数组或可遍历对象转换为真正的数组
5.3、find()方法
5.4、findIndex()方法
5.5、includes方法
六、模版字符串?
七、内置对象扩展
八、新的数据结构Set?
一、概念
ES的全称是ECMAScript,它是由ECMA国际标准化组织,制定的一项脚本语言的标准化规范;新增的好用的语法规范
为什么要使用ES6呢?
以前的JavaScript:
- 变量提升特性增加了程序运行时的不可预测性
- 语法过于松散,实现相同的功能,不同的人可能会写出不同的代码
二、声明变量 let var const 的区别?
2.1?let 关键字声明变量
?使用let声明的变量:变量只能在大括号中进行访问,在大括号的外部是访问不到的;ES6中新增的用于声明变量的关键字
- let声明的变量只在所处于的块级有效
- 块级作用域实际上就是大括号产生的作用域
- 在大括号里,使用let关键字声明的变量才具有块级作用域,使用var声明的变量不具备块级作用域特性
- let好处:防止循环 变量变成全局变量(i)
- 不存在变量提升,只能先声明再使用
- 暂时性死区,也就是说在块级作用域中变量会被整体绑定在整个块级区域,不再受外部代码影响,虽然两个变量名相同但是里面的变量跟外面的变量是没有关系的
案例:
a是没有定义的,也就是说在外面是不可以访问到a的?
if(true) {
let a =10;
}
log(a) //a是没有定义的,也就是说在外面是不可以访问到a的
?let没有变量提升 ,所以不能这样先使用后声明:
//let没有变量提升 ,所以不能这样先使用后声明:
console.log(a) //a is not defined
let a =20;
?大括号里面的tmp变量不会受外部tem变量的影响
//大括号里面的tmp变量不会受外部tem变量的影响
var tmp = 123;
if(true) {
tmp ='abc'; //会报错,报变量没有定义的错
let tmp;
}
2.2、const关键字声明变量
作用:用于声明常量,常量就是值(内存地址)不能变化的量 特点:
- 具有块级作用域------作用在大括号里面
- 声明常量时必须赋初始值
- 常量赋值后,值不能更改,比如简单数据类型:数值、字符串不能更改;复杂数据类型时:不能重新赋值,也就是常量里面的对应的内存地址不可以更改,但是可以修改数据结构中的值比如数组或者对象,里面的值是可以更改的
案例
const ary =[100,200];
ary[0]='a';
ary[1]='b';
ary['a','b']; //是正确的
ary=['a','b']; //但是这种是错误的 不能重新赋值
2.3 声明变量的总结
使用var声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象--函数作用域 值可更改 使用let声明的变量,其作用域为该语句所在的块级内,不存在变量提升--块级作用域? 值可更改 使用const声明的是常量,在后面出现的代码中不能再修改该常量的值--块级作用域? 值不可以更改 ?? 函数的定义、派值、存储的数据不需要变化、数学公式中不变的值,const比let的效率高
三、解构赋值?
很容易的从数组和对象中取值;ES6中允许从数组中提取值,按照对应位置,对应量赋值。对象也可以实现解构
3.1数组解构?
数组解构的基本形式
形式一:变量与数组的值的个数相同
等号左边代表的是解构不是代表的数组是变量;与数组中的值是一一对应的关系
let ary = [1,2,3];
let [a,b,c] = ary;
console.log(a) //a=1
console.log(b) //b=2
console.log(c) //c=3
?形式二:变量与数组中的值的个数不相同? 不对等的值是undefined的
let ary = [1,2,3];
let[a,b,c,d,e]=ary;
//d和e的值是undefined
3.2对象解构?
实际上是属性的匹配如果匹配成功就将对应的值赋给变量
写法一:
let person ={name:'章三',age:20};
let {name,age} =person ; //左边相当于解构
console.log(name) //章三
console.log(age) //20
写法二:变量的名字和对象里面的属性名不一样
myName 和 myAge 属于别名;属性名匹配就将右侧name的值赋值给myName 和 myAge
let person ={name:'章三',age:20};
let{name:myName,age:myAge} = person;
console.log(myName); //章三
console.log(myAge); //20
剩余参数???(...args)表示接受所有的实参
剩余参数语法允许我们将一个不定数量的参数表示为一个数组;就是当实参大于形参的时候,将剩余的参数放入到一个数组中
const sum = (...args) => {
let total = 0;
args.forEach(item => total += item); //item是箭头函数的参数
return total;
};
console.log(sum(10, 20));;
console.log(sum(10, 20, 30));;
?剩余参数和解构搭配使用
let arr =['里斯','斯','里'];
let[s1,...s2] =arr;
console.log(s1); //里斯
console.log(s2); //[斯,里]
四、箭头函数
语法:()=> { }
const fn = () =>{ }
调用函数 fn()
通常给函数定一个变量,函数名字就是变量名字,调用函数就是调用变量名字就可以了? 常量fn的值就等于箭头函数
特点:
- 函数体只有一句代码,且代码的执行结构就是返回值,可以省略大括号 const sum=(num1,num2)=>num1+num;相当于返回num1+num2的值给sum
- 如果形参只有一个,可以省略小括号。const fn = v =>v;返回值是将v的值返回给fn,输出就直接调用fn(20)
五、Array的扩展运算符?
扩展运算符可以将数组或者对象转为用逗号分割的参数序列
let ary =[1,2,3];
console.log(...ary) // 1 2 3
5.1、扩张运算符可以运用于合并数组
方法一: let ary1 = [1,2,3] let ary2 = [4,5,6] let ary3 =[...ary1 , ...ary2];
方法二:
let ary1 = [1,2,3] let ary2 = [4,5,6] let arr1.push(...ary2) 可以将多个参数追加到arr1数组中
?5.2、将伪数组或可遍历对象转换为真正的数组
方法一:
将伪数组转换为真正的数组 oDivs = [...oDivs];
好处:就是可以调用数组下面的方法
let oDivs =document.getElemnetsByTagName("div");
oDivs = [...oDivs];
方法二:
构造函数方法 Array.from() 将伪数组或可遍历对象转换为真正的数组
let arr1 ={
'0':'a',
'1':'b',
'2':'c',
length:3
}
let arr2 =Array.from(arr1) //['a','b','c']
此方法还可以接受第二个参数,作用类似于数组的each方法,用来对每个元素进行处理,将处理后的值放入返回的数组 Array.from(arr1,(item)=>{}) 函数里面的形参item就是当前要处理的值 ?
let arr1 ={
? ? ? '0':20,
? ? ? '1':21,
? ? ? '2':22,
? ? ? length:3 ?
? }
let newary =Array.from(arr1 , item=>item *2)? //函数是将数组中的每个值都乘以2
5.3、find()方法
?用于找出第一个符合条件的数组成员,如果没有找到返回undefined ? 返回值就是你要查找的那个元素
let ary =[{
id:1,
name:'张三'
},
{
id:2,
name:'李三'
}
];
let target =ary.find((item,index)=>item.id ==2)
5.4、findIndex()方法
用于查找处第一个符合条件的数组成员的位置,如果没有找到返回-1 ?
let ary =[1,2,3,4,5,9];
let index = ary.findIndex((value,index) => value>4);
console.log(index) // 4
//注意查找的第一个符合的值 是5 所以返回5的索引号是4
5.5、includes方法
表示某个数组是否包含给定的值,返回布尔值
[1,2,3].includes(2) //true
[1,2,3].includes(4) //false
六、模版字符串?
创建字符串的方式,使用反引号定义 let name = `张三`
特点
let name='张三'
let sayHello = `hello,my name is ${name}`; 就不要用加号拼接字符串了
<script>
let result = {
name: 'zhangsan',
age: 20,
sex: '男'
}
let html = `
<div>
<span>${result.age}</span>
<span>${result.age}</span>
<span>${result.sex}</span>
</div>`
console.log(html);
</script>
const sayHello = function () {
return '哈哈哈 追不到我吧 我就是这么强大';
}
let greet = `${sayHello()}哈哈哈`;
console.log(greet);
七、内置对象扩展
方法 | 说明 | 演示?let str =" Hello world!" | startsWith() | 表示参数字符串是否在原字符的头部,返回布尔值 | str.startsWith('Hello')? //true | endsWith() | 表示参数字符串是否在原字符串的尾部,返回布尔值 | str.endsWith("!")? ? ? ? ?//true | repeat() | 表示将原字符串重复n次,返回一个新字符串 | 'x'.repeat(3)? // 'xxx' |
八、新的数据结构Set?
?新的数据结构类似于数组,但是成员的值都是唯一的,没有重复的值,一般用于搜索,记录搜索历史,过滤掉重复语句
创建:
Set它本身是一个构造函数,用来生成Set数据结构
const? s = new Set()
Set函数可以接受一个数组作为参数,用来初始化
const set = new Set([1,2,3,4,4])
console.log(s.size)? //可以返回s数据结构里面数据的数量
利用它的特点可以实现数组去重
const set =new Set([‘a','a','b','b']) 输出的数据的数量是2它会把重复的值去掉
const arr = [...set];
console.log(arr) //['a','b']
实例方法:
- add(value) :添加某个值,返回Set结构本身
- delete(value) :删除某个值,返回一个布尔值,表示删除是否成功
- has(value) :返回一个布尔值,表示该值是否为Set的成员
- clear() :清楚所有成员,没有返回值
const s = new Set();
s.add(1).add(2).add(3) //向set结构中添加值 链式调用
s.delete(2) //删除set结构中的2值
s.has(1) //表示set结构中是否有1这个值
s.clear() //清楚set结构中的所有值
遍历?
Set结构的实例与数组一样,也拥有forEach方法,用于对每个成员执行某种操作,没有返回值? ?
const s =new Set([‘a','a','b','b']);
s.forEach(value => console.log(value));
|