es6 加载json

转载

AI领域布道师 2024-07-06 16:30:04

文章标签 es6 加载json 数组 ES6 字符串 文章分类 架构后端开发

javaScript 高级05

1. ES6

ES6的概念：ES6就是ECMAScript，就是脚本语言的标准化体现，2016年之后出现的统称为ES6。
学习ES6是大势所趋，它更加方便我们程序员的开发工作。

2. ES6新增关键字

2.1 let

let 是ES6中新增的声明变量的语法

结构： let num（变量名）= 66（值）;

特点：

不存在变量提升（即页面预加载时的变量、方法声明提升到前排）
console.log(a); // a is not defined
let a = 20;
存在块级作用域（let 声明的变量只在所处于的块级作用域有效）
if (true) {
let a = 10;
}
console.log(a) // a is not defined
暂时性死区
利用let声明的变量会绑定在这个块级作用域，不受外界干扰。就是说如果在当前块级作用域中，使用了let 的变量的话，它会优先找自己，如果自己没有，才找外面
var a =12;
if(true){
console.log(a );
// let a = 10;// 如果这个局部作用域中没有声明这个变量的话，结果就是两个12，如果这个变量声明在后就会报错，因为let声明的变量不存在变量提升，而且具有暂时性死区的特性，会绑定这个变量和作用域
}
console.log(a );

循环情景(拿到循环索引号)

//此题的关键点在于每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，函数执行时输出的是自己上一级（循环产生的块级作用域）作用域下的i值.
 let arr = [];
 for (let i = 0; i < 2; i++) {
     arr[i] = function () {
         console.log(i);
     }
 }
 arr[0](); // 0
 arr[1](); // 1

// 因为异步任务的缘故，方法会在循环结束前保持排队状态，所以 i = 2 （即循环结束）时 才会执行方法里面的函数。如果想要跟随i的变化来同步执行函数的话要写成一个立即执行函数或者如上写法。
 var arr = [];
 for (var i = 0; i < 2; i++) {
     arr[i] = function () {
         console.log(i);
     }
 }
 arr[0](); // 2
 arr[1](); // 2

2.2 const

const 是声明常量的关键字
常量就是一个值（内存地址）不允许变化的量
常量不能重新进行赋值，如果是基本数据类型，不能更改值，如果是复杂数据类型，不能更改地址值
特点：

具有块级作用域
if (true) {
const a = 10;
}
console.log(a) // a is not defined
// 但是它在内部没有找到这个变量的话也会去外面找
const a =12;
if(true){
console.log(a ); // 12
// const a = 10;
}
console.log(a ); // 12
声明常量时必须同时赋值，因为常量是不能被修改的。
const PI = 3.14;
PI = 100; // Assignment to constant variable.
const ary = [100, 200];
ary[0] = ‘a’;
ary[1] = ‘b’;
console.log(ary); // [‘a’, ‘b’];
ary = [‘c’, ‘d’]; // Assignment to constant variable

3. 解构赋值

ES6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构。
数组解构：

// var arr = [1, 2, 3];
let [a, b, c] = [1, 2, 3];// 可以写 arr 
 console.log(a)//1
 console.log(b)//2
 console.log(c)//3
//如果解构匹配不成功，变量的值为undefined，即为不存在。

对象解构：

let person = { name: 'zhangsan', age: 20 };
 let { name, age } = person;
 console.log(name); // 'zhangsan'
 console.log(age); // 20
 let {name: myName, age: myAge} = person; // myName myAge 属于别名
 console.log(myName); // 'zhangsan'
 console.log(myAge); //  20

小结

解构赋值就是把数据结构分解，然后给变量进行赋值
如果结构不成功，变量跟数值个数不匹配的时候，变量的值为 undefined
数组解构用中括号包裹，多个变量用逗号隔开，对象解构用花括号包裹，多个变量用
逗号隔开
利用解构赋值能够让我们方便的去取对象中的属性跟方法

4. 箭头函数（重要）

ES6中新增的定义函数的方式

() => {} //()：代表是函数； =>：代码规范特殊符号，指向哪一个代码块；{}：函数体
const fn = () => {}//代表把一个函数赋值给fn，相当于函数定义了

函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号；如果形参只有一个，可以省略小括号

//es6写法
 const fn = v => v; // v 是形参也是被输出的那个

箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this

const obj = { name: '张三'}
 function fn () {
     console.log(this);//this 指向 是obj对象
     return () => {
         console.log(this);
     }
 }
 const resFn = fn.call(obj);//this 指向 的是箭头函数定义的位置，那么这个箭头函数定义在fn里面，而这个fn指向是的obj对象，所以这个this也指向是obj对象
 resFn();

小结

箭头函数中不绑定 this，箭头函数中的this指向是它所定义的位置，可以简单理解
成，定义箭头函数中的作用域的this指向谁，它就指向谁
箭头函数的优点在于解决了 this执行环境所造成的一些问题。比如：解决了匿名函数
this指向的问题（匿名函数的执行环境具有全局性），包括setTimeout和setInterval
中使用this所造成的问题

示例：

var age = 100;
var obj = {
age: 20,    
say: () => {    
alert(this.age)        
}    
}
obj.say();//箭头函数this指向的是被声明的作用域里面，而对象是没有作用域的，所以箭头函数虽然在对象 obj 中被定义，但是this指向的是全局作用域window

5. 剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组，不定参数定义方式，这种方式很方便的去声明不知道参数情况下的一个函数

function sum (first, ...args) {
     console.log(first); // 10
     console.log(args); // [20, 30]
 }
 sum(10, 20, 30)
// 剩余参数和解构配合使用
let students = ['wangwu', 'zhangsan', 'lisi'];
let [s1, ...s2] = students;
console.log(s1);  // 'wangwu'
console.log(s2);  // ['zhangsan', 'lisi']

6. ES6的内置对象拓展

6.1 Array的拓展方法

拓展运算符（展开语法）
扩展运算符可以将数组或者对象转为用逗号分隔的参数序列

let ary = [1, 2, 3];
 ...ary  // 1, 2, 3
 console.log(...ary);    // 1 2 3,相当于下面的代码
 console.log(1,2,3);

可以用于合并数组

// 方法一
 let ary1 = [1, 2, 3];
 let ary2 = [3, 4, 5];
 let ary3 = [...ary1, ...ary2];
 // 方法二
 ary1.push(...ary2);

将类数组或可遍历对象转换为真正的数组

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</body>
<script>
let oDivs = document.getElementsByTagName('div');
oDivs = [...oDivs];
</script>

6.2 构造函数方法 Array.from()

作用：将伪数组或可遍历对象转换为真正的数组

//定义一个集合
let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
//转成数组
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

此方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组

let arrayLike = {
     "0": 1,
     "1": 2,
     "length": 2
 }
 let newAry = Array.from(arrayLike, item => item *2)//[2,4]

6.3 实例方法：find()

用于找出第一个符合条件的数组成员，如果没有找到返回undefined

let ary = [{
     id: 1,
     name: '张三'
 }, {
     id: 2,
     name: '李四'
 }];
 let target = ary.find((item, index) => item.id == 2);//找数组里面符合条件
的值，当数组中元素id等于2的查找出来，注意，只会匹配第一个

6.4 实例方法：findIndex()

用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1

let ary = [1, 5, 10, 15];
let index = ary.findIndex((value, index) => value > 9);
console.log(index); // 2

6.5 实例方法：includes()

判断某个数组是否包含给定的值，返回布尔值。

[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false

7. String 的扩展方法

7.1 模板字符串

ES6新增的创建字符串的方式，使用反引号定义

let name = `zhangsan`;

模板字符串中可以解析变量

let name = '张三';
let sayHello = `hello,my name is ${name}`; // hello, my name is zhangsan

在模板字符串中可以调用函数

const sayHello = function () {
    return '哈哈哈 追不到我吧 我就是这么强大';
 };
 let greet = `${sayHello()} 嘿嘿嘿`;
 console.log(greet); // 哈哈哈 追不到我吧 我就是这么强大 嘿嘿嘿

模板字符串中可以换行,方便我们看结构

let result = {
     name: 'zhangsan',
     age: 20,
     sex: '男'
 }
 let html = ` <div>
     <span>${result.name}</span>
     <span>${result.age}</span>
     <span>${result.sex}</span>
 </div> `;

7.2 实例方法：startsWith() 和 endsWith()

startsWith() ：表示参数字符串是否在原字符串的头部，返回布尔值
endsWith() ：表示参数字符串是否在原字符串的尾部，返回布尔值

let str = 'Hello world!';
str.startsWith('Hello') // true
str.endsWith('!')       // true

7.3 实例方法：repeat()

epeat方法表示将原字符串重复n次，返回一个新字符串

'x'.repeat(3)      // "xxx"
'hello'.repeat(2)  // "hellohello"

8. Set 数据结构

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的
值。
Set本身是一个构造函数，用来生成 Set 数据结构
创建

const s = new Set();

Set函数可以接受一个数组作为参数，用来初始化。

const set = new Set([1, 2, 3, 4, 4]);//{1, 2, 3, 4}

实例方法

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方法，用于对每个成员执行某种操作，没有返回值。

s.forEach(value => console.log(value))

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：uiautomation 提取微信文件如何提取微信文件

下一篇：android Switch 主题样式

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

es6 加载json

es6 加载json

javaScript 高级05

1. ES6

2. ES6新增关键字

2.1 let

2.2 const

3. 解构赋值

4. 箭头函数（重要）

5. 剩余参数

6. ES6的内置对象拓展

6.1 Array的拓展方法

6.2 构造函数方法 Array.from()

6.3 实例方法：find()

6.4 实例方法：findIndex()

6.5 实例方法：includes()

7. String 的扩展方法

7.1 模板字符串

7.2 实例方法：startsWith() 和 endsWith()

7.3 实例方法：repeat()

8. Set 数据结构

实例方法

51CTO博客