ES6学习

1400

let

为什么新增let声明变量关键字

  • var 不好用
  • var 可以重复声明
  • var无法限制修改
  • var没有块级作用域

// 大括号可以看成一个块
var a = 5
{
    var a = 10
    console.log(a);  // 10
}
console.log(a);  // 10
// var 声明的变量不受块作用域限制 可以随意更改
// 通常我们在块级作用域中声明变量 就只想在作用域中使用
// 但是在函数中 var是受限制的
function test() {
    var b = 10
}
console.log(b); // Uncaught ReferenceError: b is not defined
复制代码

使用let声明的变量不能重复声明

let a = 10
let a = 20 
console.log(a) // Uncaught SyntaxError: Identifier 'a' has already been declared
复制代码

使用let在块级作用域中声明的变量 在外部不能使用

{
    let a = 10
    console.log(a)  // 10 在内部可以使用
}
console.log(a) // Uncaught ReferenceError: a is not defined
复制代码

let不存在变量提升

a = 10
console.log(a); // 10
var a 
        
b = 20
console.log(b); // Uncaught ReferenceError: Cannot access 'b' before initialization
let b
复制代码

const

const声明的值不能改变

const A = 10
A++
console.log(A) // Uncaught TypeError: Assignment to constant variable.
复制代码

const声明时必须给值

const A
console.log(A) // Uncaught SyntaxError: Missing initializer in const declaration
复制代码

const只在声明的块级作用域内有效

{
    const A = 10
    console.log(A) // 10
}
console.log(A) // Uncaught ReferenceError: A is not defined
复制代码

const声明的常量不提升

console.log(A) // Uncaught ReferenceError: Cannot access 'A' before initialization
const A = 10
复制代码

const与let一样，不可以重复声明

const A = 10
const A = 20
console.log(A) //Uncaught SyntaxError: Identifier 'A' has already been declared
复制代码

const声明的复合类型的数据（数组，对象）,可以更改里面的值

因为声明的复合类型 数组或者对象本身在存在栈内存中，而数组或对象里面的值和数据放在了堆内存中，堆内存中的变量值是可以更改的(内存中的地址不能改，但是可以改引用的值)

const obj = {
    'name' : 'haoran',
    'age' : 18
}
console.log(obj);
obj.age = 20
console.log(obj.age);
obj = {} // Uncaught TypeError: Assignment to constant variable.
obj = { // Uncaught TypeError: Assignment to constant variable.
    'a' : 1,
    'b' : 2
}
复制代码

Arrow Function

箭头函数的使用

普通函数

function fun(x){
    return x * x
}
console.log(fun(10)) // 100
复制代码

使用箭头函数

const fun = (x) => {return x * x}
console.log(fun(10)) // 100
复制代码

如果只有一个参数 可以不用()

只有一条语句 也不需要加{}和return

const fun = x => x * x
console.log(fun(10)) // 100
复制代码

如果没有参数，获取有多个参数就需要使用()来定义参数列表

// 没有参数
const fun = () => 10 
console.log(fun()) // 10
复制代码

示例：对数组里的数据进行从小到大排序

let arr = [1,5,36,4,564,125,651,134]
// ES5 语法
arr.sort(function(a, b){
    return a - b
})
console.log(arr) // 1, 4, 5, 36, 125, 134, 564, 651
// ES6 语法
arr.sort((a, b) => a - b)
console.log(arr)  // 1, 4, 5, 36, 125, 134, 564, 651
复制代码

注意：箭头函数在返回对象时，必须在对象外加上()

const fun = id => ({id:id, name: 'haoran'})
console.log(fun(10).name) // haoran
复制代码

数组新增的高级方法

数组里有一些值，找出大于10的并且打五折，计算打折后的总价钱

let arr = [2, 4, 5, 21, 7, 13, 65, 23, 9, 34]
// 过滤器 filter
let arr1 = arr.filter(function (n) {  // n就代表数组中的每一个值，数组中有几个值就执行多少次，
    // 如果为true 数据将返回到arr1中
    return n >= 10
}
console.log(arr1); // 21, 13, 65, 23, 34 大于10
// 映射 map
let arr2 = arr1.map(function (n) {
    // 映射 返回什么值 就追加到arr2里面
    return n * 0.5
})
console.log(arr2); // 10.5, 6.5, 32.5, 11.5, 17 打折后的
// 汇总 reduce
//数组中有几个值就执行多少次回调函数
//第一次执行的时候 s是0 ，n是数组中的第一个元素(下标是0的)
//第二次执行，s是上次回调函数的返回值，n是第二个元素，以此类推
let sum = arr2.reduce(function(s, n){
    return s + n
})
console.log(sum);//78 
复制代码

还有更简便的方法：使用箭头函数+链式编程

let sum = arr.filter(n => n >= 10).map(n => n * 0.5).reduce((s, n) => s + n)
console.log(sum);  // 78
复制代码

Set和Map

Set

const obj = new Set()
// 添加数据 add()
// 当添加的数据set里面已经有了相同的值，那么是添加不进去的
obj.add(1)
obj.add(2)
obj.add(2)
obj.add(3)
obj.add(['a', 'b'])
console.log(obj); // 1 2 3 ['a','b']
// 判断set中有没有指定值,如果有返回true,没有则返回false
console.log(obj.has(1)); // true
console.log(obj.has(9)); // false
// 删除里面的值,如果成功删除返回true,失败则返回false
obj.delete(1)
console.log(obj.delete(4));  //set中没有这个值 删除失败返回false
console.log(obj.delete(3));  // 删除成功 返回true
console.log(obj);  // 2 ['a','b']
// 得到set的长度
console.log(obj.size); // 2
复制代码

Map

const obj =new Map()
// 使用set方法添加数据，添加是以键值对的形式，要指定键
obj.set('a','1')
console.log(obj); // Map(1) {"a" => "1"}
obj.set('b','2')
obj.set('c','3')
// 获取值 通过下标
console.log(obj.get('b')); // 2
// 注意：添加时候如果下标相同，则会覆盖原有的数据
obj.set('a', '100')
console.log(obj.get('a')); // 100
// 删除的时候要指定下标
obj.delete('a')
// 获取长度
obj.size()
复制代码

字符串新增功能

字符串新方法

  • startsWith 判断以什么字符串开头

  • endsWith 判断以什么字符串结尾

    let url = “www.baidu.com”
    // 判断是不是以https开头
    if(url.startsWith(‘https’)){
    console.log(‘yes’); // yes
    }else {
    console.log(‘no’);
    }
    // 判断是不是以com结尾
    if(url.endsWith(‘com’)){
    console.log(‘yes’); // yes
    }else{
    console.log(‘no’);
    }

模板字符串

  • 增强版的字符串，使用反引号( ` )标识

    // 普通字符串
let name = 'haoran'
let str1 = name+'shishuaige'
console.log(str1);
// 使用` （tab上面）
// 支持换行、变量、标签
let str2 = `
             
             {name}
             haoshuai
             
            `
console.log(str2);
复制代码

ES6解构赋值和三点扩展运算符号

解构赋值

要把数组中的值分别赋给变量

普通方法
let arr = [1, 2, 3]
let a = arr[0]
let b = arr[1]
let c = arr[2]
复制代码

使用解构赋值

// 数组中使用
let arr = [1, 2, 3]
let [a, b, c] = arr
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

// 对象中使用
let obj = { 'name': 'haoran', 'age': 18, 'sex': '男' }
//let {name, age, sex} = obj
let { age, name, sex } = { 'name': 'haoran', 'age': 18, 'sex': '男' }
console.log(name);
console.log(age);
console.log(sex);
复制代码

注意：左右两边的结构必须一样

数组的变量名可以随便起 接收的数量可以少于实际的

对象的变量名必须要跟下标一致，跟顺序没关系，

三点运算符

想把两个数组合并应该怎么解决？

let arr1 = [1, 2, 3, 4]
// 使用 ...数组名
let arr2 = [...arr1, 4, 5, 6]
console.log(arr2);  // [1, 2, 3, 4, 4, 5, 6]
复制代码

三点运算符也可以用在函数中

// 展开
let arr3 = [1, 2, 3]
function test (a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
}
test(...arr3)
// 收集
function test2 (...arr4) {
    console.log(arr4);  // [1, 2, 3, 4, 5]
}
test2(1, 2, 3, 4, 5)
复制代码

类 class

class Person {
    // 构造方法 会自动执行
    constructor(name, age, sex) {
        this.name = name
        this.age = age
        this.sex = sex
    }
    // 写一个方法 直接写方法名+()
    say () {
        console.log(`i am ${this.name}`);
    }
}
// 声明类的时候传入参数，构造函数内的数据就会自动赋值了
const p1 = new Person('haoran', 18, '男')
console.log(p1); // Person {name: "haoran", age: 18, sex: "男"}
// 使用类中的方法
p1.say() // i am haoran

// 继承 extends
// 可以把父类的所有方法都继承过来，也可以进行重写
class Student extends Person {
    constructor(name, age, sex, school) {
        // super 只能写在子类中 代表父类的构造方法 
        super(name, age, sex)
        this.school = school
    }
    // 对父类的say方法进行重写
    say () {
        console.log('hello, my name is xiaohong');
    }
}
const s1 = new Student('xioahong', 16, '女', 'fyjs') // 继承父类的构造方法
console.log(s1);  // Student {name: "xioahong", age: 16, sex: "女", school: "fyjs"}
s1.say()  // hello, my name is xiaohong
复制代码

JSON对象新应用

json简写

let name = "张三"
let age1 = 34
//const obj = {name:'haoran',age:18,sex:'男'}
const obj = {
    name, age: age1, sex: '男', say () {
        console.log(this.name);
    }
} // 当键和变量值一致时 可以简写为一个,方法也可以简写，方法名()
console.log(obj);
// JSON对象串行化  把JSON对象转换成字符串
let str = JSON.stringify(obj)
console.log(str);
// JSON对象反串行化  把字符串转换成JSON对象
let json = JSON.parse(str)
console.log(json);
复制代码

© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
前端
喜欢就支持一下吧
点赞0 分享
AI-robot的头像-一一网
asgbookphp ‘index.php’ 跨站脚本攻击漏洞-一一网
asgbookphp ‘index.php’ 跨站脚本攻击漏洞
asgbookphp ‘index.php’ 跨站脚本攻击漏洞
14年前 2.6W+
机器学习之随机森林回归篇（RandomForestRegressor）-一一网
机器学习之随机森林回归篇（RandomForestRegressor）
机器学习之随机森林回归篇（RandomForestRegressor）
4年前 4202
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS-一一网
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS
4年前 3895
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞-一一网
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞
19年前 3842
Wireshark之抓包文件保存-一一网
Wireshark之抓包文件保存
Wireshark之抓包文件保存
4年前 3406
支付宝生活号H5接入支付宝支付流程-一一网
支付宝生活号H5接入支付宝支付流程
支付宝生活号H5接入支付宝支付流程
3年前 3135
相关推荐
支付宝生活号H5接入支付宝支付流程-一一网
支付宝生活号H5接入支付宝支付流程
支付宝生活号H5接入支付宝支付流程
3年前 3135
手摸手教你实现vue的动态路由（addRoute版）-一一网
手摸手教你实现vue的动态路由（addRoute版）
手摸手教你实现vue的动态路由（addRoute版）
4年前 3118
Unity实用功能之使用TextMeshPro组件-一一网
Unity实用功能之使用TextMeshPro组件
Unity实用功能之使用TextMeshPro组件
4年前 3062
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …-一一网
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …...
4年前 2847
Windi CSS 在 Vue3 + Vite 项目中的使用-一一网
Windi CSS 在 Vue3 + Vite 项目中的使用
Windi CSS 在 Vue3 + Vite 项目中的使用
3年前 2728
vue3 使用 qrcode.vue 生成二维码-一一网
vue3 使用 qrcode.vue 生成二维码
vue3 使用 qrcode.vue 生成二维码
4年前 2621
搜索
开启精彩搜索
世界，您好！-一一网
3.7W+人已阅读
世界，您好！
TOP1
番茄社区无限观看+付费视频破解教程-一一网
番茄社区无限观看+付费视频破解教程
5年前3.2W+人已阅读
TOP2
香蕉视频v3.8.3_VIP会员破解教程-一一网
香蕉视频v3.8.3_VIP会员破解教程
5年前3.1W+人已阅读
TOP3
[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网
密码保护：[桜井宁宁]COS和泉纱雾超可爱写真福利集
5年前2.8W+人已阅读
TOP4
[桜井宁宁] 爆乳奶牛少女cos写真-一一网
密码保护：[桜井宁宁] 爆乳奶牛少女cos写真
5年前2.8W+人已阅读
TOP5
快猫v1.1.7会员破解版_最新快猫vip破解教程大全-一一网
快猫v1.1.7会员破解版_最新快猫vip破解教程大全
5年前2.7W+人已阅读
TOP6
标签云
默认路由黑裙黑群晖麦克风车机鸿蒙系统鸿蒙系统鸿蒙OS鸿蒙驱动软件驱动题库音频剪辑音乐剪辑面板面具静态雷石集群随机阿里云