1.let定义
可以同时定义多个变量,不存在变量提升，块级作用域，不影响作用域链
let a = 3,b = 10, c = 'hello Amy';
2.const声明变量以及特点
声明常量，一定要赋初始值，一般常量使用大写。eg: const SCHOOL = '中科'
常量的值不能修改，块级作用域；
对于数组和对象的元素修改，不算做对常量的修改，不会报错
3.ES6变量的解构赋值
对象的解构赋值：
const zhao = {
name: '赵本山',
age: 60,
getAge: function(){
console.log('我今年60了');
}
}
let {name,age,getAge} = zhao;
console.log('name'+ name); //name赵本山
console.log('age'+ age);//age60
console.log('getAge'+ getAge());//我今年60了注意：必须属性名和定义的let变量名一致
4.ES6模板字符串
使用方式反引号：``;内容中可以使用换行符；可以变量拼接；
let name = 'Amy';
let ming = `${name}今天去上学`;
console.log(ming); //Amy今天去上学5.对象的简洁写法
let name = '小明';
let age = function(){
console.log('今天16岁了');
}
const ming = {
name,//完整写法（name: name,）
age,//完整写法（age: age,）
}
console.log('ming',ming);6.箭头函数及使用特点
1）this始终是静态的，this始终指向函数声明时所在作用域下的this的值。
function getName() {
console.log(this.name)
}
let getName2 = () => {
console.log(this.name)
}
window.name = '小明';
const school = {
name: 'ATGUIGU'
}
//直接调用: this指向window对象
getName(); //小明
getName2(); //小明
//call方法调用
getName.call(school); //ATGUIGU
getName2.call(school); // 小明（箭头函数this静态的，始终指向getName2申明时候this的值）
2）箭头函数不能作为构造函数实例化对象
let Person = (name,age) => {
this.name = name;
this.age = age;
}
let me = new Person('ming',23);
console.log(me) //报错：TypeError: Person is not a constructor
let Person = function(name,age){
this.name = name;
this.age = age;
}
let me = new Person('ming',23);
console.log(me) //Person {name: "ming", age: 23}3)不能使用arguments变量
let fn = () => {
console.log(arguments);
}
fn(1,2,1) //报错： arguments is not defined实例：箭头函数：点击div，2s后变成粉色
<div id='yyy'></div>
<script>
//箭头函数应用
//需求1：点击div 2s后颜色变成粉色
let sdr = document.getElementById('yyy');
sdr.addEventListener("click",function(){
setTimeout(() => {
//这里使用箭头函数，this指向函数声明时得值
this.style.background = 'pink';
},2000)
})
</script>实例： 从数组中筛选偶数
//从数组中返回偶数的元素
const end = arr.filter(item => {
if(item %2 == 0){
return true
}
})
console.log(end) //[6,8]7.函数参数的默认值设置
//ES6允许给函数赋值初始值；
//形参初始值 具有默认值的参数，一般位置要靠后（潜规则）
与解构赋值结合
function connect({host,username,password,port}){
console.log(host); //localhost
console.log(username); //root
console.log(password);//root
console.log(port);//8086
}
connect({host: 'localhost',username: 'root', password: 'root',port: 8086})8.rest参数
用于获取函数的实参，用来代替arguments
//es5获取实参的方式： 返回的是一个对象
function data(){
console.log(arguments)
}
data('小华','小明','小兰') //["小华", "小明", "小兰", callee: ƒ, Symbol(Symbol.iterator): ƒ]
/*es6获取实参的方式：返回的是一个数组（这样可以使用数组的方法，比如
map,filter,some,every等）*/
function data(...args){
console.log(args); // ["小华", "小明", "小兰"]
}
data('小华','小明','小兰')
//rest参数必须放在最后
function data(a,b,...args){
console.log(a); //1
console.log(b); //2
console.log(args); //5,6,7
}
data(1,2,5,6,7);9.扩展运算符
//【...】扩展运算符能将数组转换为逗号分隔的【参数序列】
//扩展运算符的应用
//1.数组合并
let arr = [1,2,3];
let arr2 = [5,7,9];
//1)es5的方法
let arr3 = arr.concat(arr2);
console.log(arr3) //[1,2,3,5,7,9]
//1)es6的方法
let arr3 = [...arr,...arr2];
console.log(arr3) //[1,2,3,5,7,9]
//数组的克隆
let arr = [2,3,5,6]
let arr1 = [...arr];
console.log(arr1)10.symbol的基本使用
1）symbol不能与其他数据进行运算
2）用symbol来创建对象的属性
11.迭代器
迭代器是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作。
1)for…of
let array = ['孙悟空','唐僧','猪八戒','沙僧'];
for(let i of array){
console.log(i)//孙悟空 唐僧 猪八戒 沙僧
}
for(let i in array){
console.log(i);//0 1 2 3
console.log(array[i])//孙悟空 唐僧 猪八戒 沙僧
}12.生成器-------函数（异步编程，纯回调函数）
function * gen(){
console.log('hello everyone');
}
let init = gen();//直接调取不能执行
init.next()//只有调取next()才能打印出结果13.Promise------解决回调地狱问题
14.Set集合
类似于数组，但它的成员的值都是唯一的。
1)size：返回集合的元素个数
2）add: 增加一个新元素，返回当前集合。
3）delete: 删除元素，返回boolean值
4）has: 检测集合中是否含有某个元素，返回boolean值。
const s = new Set(['小学','中学','大学','大专','大学']);
console.log(s) //{"小学", "中学", "大学", "大专"} let arr = [1,2,3,1,2,7,4,3];
//1.数组去重
let s = [...new Set(arr)];
console.log(s) //[1, 2, 3, 7, 4] let arr = [1,2,3,1,2,7,4,3];
//2.交集
let arr2 = [4,5,6,2];
//首先arr去重，然后通过filter()方法判断arr2是否包含arr的项，有返回true,没有返回false
let result = [...new Set(arr)].filter((item) => {
let s2 = new Set(arr2);
if(s2.has(item)){
return true;
}else{
return false;
}
})
console.log(result) //[2,4] //3.并集
let arr = [1,2,3,1,2,7,4,3];
let arr2 = [4,5,6,2];
let arr1 = [...arr,...arr2];
let arr4 = [...new Set(arr1)];
console.log(arr4) //[1, 2, 3, 7, 4, 5, 6] //4.差集
let arr = [1,2,3,1,2,7,4,3];
let arr2 = [4,5,6,2];
let arr1 = [...new Set(arr)].filter((item) => {
let arr3 = new Set(arr2);
if(arr3.has(item)){
return false;
}else{
return true;
}
})
console.log(arr1) // [1, 3, 7]15.Map:他类似于对象，也是键值对的集合。但它的键的范围不限于字符串，各种类型的值都可以当作键。
1)size：返回Map的元素个数
2）set: 增加一个新元素，返回当前Map。
3）get: 返回键名对象的键值
4）has: 检测Map中是否含有某个元素，返回boolean值。
5) clear: 清空集合，返回undefined
let m = new Map();
m.set('name','中科');
console.log(m.get('name')) //中科16.class介绍
class Person{
constructor(brand,price){
this.brand = brand;
this.price = price;
}
call(){
console.log('我是测试员');
}
}
let onePerson = new Person('one','200');
onePerson.call() //我是测试员 //静态成员
class Person{
static name = '小花',
static age = '18',
static change(){
console.log('我是一名学生');
}
}
let hua = new Person();
console.log(hua.name) //会报错，name属性是静态属性，无法访问 //class继承
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
call(){
console.log('今天天气不错');
}
}
class Teacher extends Person{
constructor(name,age,sex){
super(name,age);
this.sex = sex;
}
help(){
console.log('今天还要上班');
}
}
let per = new Teacher('xiaoming',25,'女');
console.log(per.name)//xiaoming
per.help()//今天还要上班
per.call()//今天天气不错17.ES6数值扩展
//Number.EPSILON 是javascript 表示的最小精度
//EPSILON 属性的值接近于2.22E-16;
function equal(a,b){
if(Math.abs(a-b) < Number.EPSILON){
return true;
}else{
return false;
}
}
console.log(equal(0.1+0.2,0.3))18.ES6对象扩展
//ES6对象方法扩展
Object.is 判断两个值是否完全相等
console.log(Object.is(500,501)) //false
console.log(Object.is(NaN,NaN)) // true
console.log(NaN === NaN) //false
Object.assign 对象的合并
const ip = {
host: 'localhost',
port: 3045,
name: 'root',
password: '30783',
test: 'ceshi'
}
const ip1 = {
host: 'baidu',
port: 3006,
name: 'hua',
password: '3063',
}
console.log(Object.assign(ip,ip1))
//{"host":"baidu","name":"hua","password":"3063","port":3006,"test":"ceshi"}19.ES7新特性
// includes判断数组是否包含该元素
let arr = [1,5,6,7];
console.log(arr.includes(5)) // true
//** 代表10次方
console.log(2 ** 10) //102420.对象方法扩展
let school = {
name: '希望小学',
cities: ['北京','上海','昆明'],
xueke: ['前端','Java','大数据','运维'],
}
// for(let i in school){
// console.log(i)
// }
console.log(Object.keys(school)); //["name", "cities", "xueke"]
console.log(Object.values(school))
//0: "希望小学"
//1: (3) ["北京", "上海", "昆明"]
//2: (4) ["前端", "Java", "大数据", "运维"]
console.log(Object.entries(school)) //["name", "希望小学"]
// ["cities", Array(3)]
//["xueke", Array(4)]
扫一扫
1900
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
