前端入门一之ES6--递归、浅拷贝与深拷贝、正则表达式、es6、解构赋值、箭头函数、剩余参数、String、Set
前言
- JS是前端三件套之一，也是核心，本人将会更新JS基础、JS对象、DOM、BOM、ES6等知识点，这篇是ES6;
- 这篇文章是本人大一学习前端的笔记；
- 欢迎点赞 + 收藏 + 关注，本人将会持续更新。
文章目录
- 10、递归
- 10.1、阶层案例
- 10.2、根据id返回对于的数据对象
- 11、浅拷贝与深拷贝
- 11.1、浅拷贝
- 11.2、深拷贝
- 12、正则表达式
- 12.1、特点
- 12.2、创建正则表达式
- 12.2.1、通过调用RegExp对象的构造函数创建
- 12.2.2、通过字面量创建
- 12.3、测试正则表达式 text
- 12.3、正则表达式中的特殊字符
- 12.3.1、边界符
- 12.3.2、字符类
- [] 方括号
- [-] 范围
- [^] 取反
- 字符组合
- 12.3.3、量词符
- 12.3.4、用户名验证
- 12.4、括号总结
- 12.5、预定于类
- 12.5.1、表单验证
- 12.6、正则表达中的替换
- 12.6.1、replace 替换 （字符串操作）
- 12.6.2、正则表达式参数
- 13、es6
- 13.1、什么是ES6？
- 13.2、ES6新增的语法
- 13.2.1、let
- 经典面试题
- 13.2.2、const
- 13.2.3、let、var、const 的区别
- 13、解构赋值
- 13.1、数组解构
- 13.2、对象解构
- 14、箭头函数
- 15、剩余参数
- 15.1、剩余参数和解构配合使用
- 16、ES的内置对象扩展
- 16.1、Array的扩展方法
- 16.1.1、扩展运算符与运用
- 16.1.2、构造函数方法： Array.from();
- 16.1.3、实例方法：find():
- 16.1.4、实例化方法：findIndex():
- 16.1.5、实例化方法：inclues();
- 17、String的扩展方法
- 17.1、模板字符串
- 17.2、实例方法：tartsWith() 和 endsWith()
- 17.3、实例方法：repect()
- 18、Set数据结构
10、递归
简单理解：自己调用自己
注意：必须要加退出条件return
- 条件：
- 初始值，即结束值
- 地推公式
<body>
<script>
var num = 1;
function fn() {
console.log('6');
if(num==6) {
return;
}
num++;
fn();
}
fn();
</script>
</body>
10.1、阶层案例
<scrippt>
function fn(n) {
if(n ==0 || n == 1) {
return 1;
}
return n*fn(n-1);
}
</scrippt>
10.2、根据id返回对于的数据对象
<script>
var data = [{
id: 1,
name: '家电',
goods: [{
id: 11,
gname: '冰箱',
goods: [{
id: 111,
gname: '海尔'
}, {
id: 112,
gname: '美的'
}, ]
}, {
id: 12,
gname: '洗衣机'
}]
}, {
id: 2,
name: '服饰'
}];
//目的：输入id号，放回数据的对象
//1。遍历数组 DOM forEach
function getID(json,id) {
var o = {};
json.forEach(function(value)) {
if(vaulelid == id) {
o = item;
}else if(value.goods&&value.goods.length > 0) {
o = getID(value.goods,id);
}
}
return o;
}
</script>
11、浅拷贝与深拷贝
- 浅拷贝只是拷贝一层，对于对象级别的只是拷贝地址
- 深拷贝拷贝多层，每一级数据都会讨论
Object.assign(target,……)ES6新增方法可以浅拷贝
11.1、浅拷贝
<script>
var obj = {
id: 1,
name: 'andy',
msg: {
age: 18;
}
};
//拷贝
var o = {};
for(var k in obj) {
o[k] = obj[k];
}
console.log(o);
//浅拷贝语法糖
Object.assign(o,obj);
</script>
11.2、深拷贝
<script>
var obj = {
id: 1,
name: 'andy',
msg: {
age: 18;
},
color: ['pink','red']
};
var o = {};
//深拷贝： 封装函数
function deepCopy(newobj,oldobj) {
for(var k in oldobj) {
//深拷贝：要判断属性值是属于简单类型还是复杂数据类型
//1.获取属性值
var item = oldobj[i];
//2. 判断类型： instanceof
if(item instanceof Array) {
//复制思路：先创建后赋值
newobj[k] = [];
deepCopy(newobj[k],item);
}else if(item instanceof Object) {
newobj[k] = {};
deepCopy(newobj[k],item);
}else {
newobj[k] = item;
}
}
}
</script>
12、正则表达式
- 正则表达式为对象，在开发过程中用于匹配字符串组合
- 正则表通常被用来检索、替换那些符合某个模式（规则）的文本
12.1、特点
- 实际开发，一般直接赋值粘贴
- 但是要求会使用正则表达式并且根据自身情况修改正则表达式
12.2、创建正则表达式
- 通过 RegExp 创建
- 通过字面量
12.2.1、通过调用RegExp对象的构造函数创建
var 变量名 = new RegExp(/表达式/);
12.2.2、通过字面量创建
通过字面量创建
var 变量名 = /表达式/;
12.3、测试正则表达式 text
text()正则对象方法，用于检测字符串是否符合规则，返回值trueorfalse,
regrexObj.text(str);
regrexObj写的是正则表达式str测试文本
<script>
//1.
var regexp = new RegExc(/123/)；
//2.
var regexc2 = /123/;
console.log(regexc2.text(123));
console.log(regexc2.text('abc'));
</script>
12.3、正则表达式中的特殊字符
12.3.1、边界符
| 边界符 | 说明 |
|---|---|
| ^ | 表示匹配首行的文本（以谁开始） |
| $ | 以谁结束 |
注意：
如果^and$在一起，表示必须是精准匹配
var rg = /abc/; //正则表达式里不加引号，
// /abc/ 表示只要包含abc这个字符都是 true
console.log(rg.text('abcddd'));
var reg = /^abc/;
//以abc开头
var reg2 = /^abc$/;
//必须是 abc
12.3.2、字符类
- 字符类表示有一系列字符可供选择，只要匹配其中一个就可以了
- 在 [] 里选择的字符可供选择
[] 方括号
var rg = /[abc]/;
//只 要 包含a b c中任意一个都是 true
[-] 范围
var rg = /^[a-z]$/;
//三选一 只 有 是a / b / c 才返回 true
[^] 取反
var rg = /[^abc]/
//除了abc以外的一个字符
字符组合
<body>
<script>
// 字符组合
var reg1 = /^[a-zA-Z0-9_-]$/; // 26个英文字母(大写和小写都可以)任何一个字母返回 true
console.log(reg1.test('a'));
console.log(reg1.test('B'));
console.log(reg1.test(8));
console.log(reg1.test('_'));
console.log(reg1.test('!'));
console.log('----------------');
// 如果中括号里面有^ 表示取反的意思 千万和 我们边界符 ^ 别混淆
var reg2 = /^[^a-zA-Z0-9_-]$/;
console.log(reg2.test('a'));
console.log(reg2.test('B'));
console.log(reg2.test(8));
console.log(reg2.test('_'));
console.log(reg2.test('!'));
</script>
</body>
12.3.3、量词符
量词符：用来设定某一个模式出现的次数
| 量词 | 说明 |
|---|---|
| * | 重复零次或者多次 |
| + | 重复一次或者多次 |
| ? | 重复零次或者一次 |
| {n} | 重复n次 |
| {n,} | 重复n次或者多次 |
| {n,m} | 重复n到m次 |
var rg1 = /^a*$/;
var rg2 = /^a{3}$/;
12.3.4、用户名验证
<script>
var reg = /^[a-zA-Z0-9_-]{6,16}$/;
//页面元素操作： BOM DOM
var uname = document.querySelector('.uname');
var span = doucment.querySelector('span');
uname.onblur = function() {
if(reg.text(this.vaule)) {
span.className = '';
span.innerHTML= '';
} else {
span.className = '';
span.innerHTML= '';
}
}
</script>
12.4、括号总结
- 大括号 量词符 重复次数
- 中括号 字符集合 任选一
- 小括号 优先级
// 中括号
var reg = /^[abc]$/;
// a || b || c
// 大括号
var reg = /^abc{3}$/; // 它只是让c 重复3次 abccc
// 小括号
var reg = /^(abc){3}$/; //它是让 abc 重复3次
在线测试正则表达式：https://c.runoob.com/
12.5、预定于类
简单写法：
| 预定类 | 说明 |
|---|---|
| \d | 匹配0-9之间的任一数字，相当于[0-9] |
| \D | 匹配所有0-9以外的字符，相当于[ ^ 0-9] |
| \w | 匹配任意的字母、数字和下划线,相当于[A-Za-z0-9_ ] |
| \W | 除所有字母、数字、和下划线以外的字符，相当于[ ^A-Za-z0-9_ ] |
| \s | 匹配空格（包括换行符，制表符，空格符等），相当于[\t\t\n\v\f] |
| \S | 匹配非空格的字符，相当于[ ^ \t\r\n\v\f] |
12.5.1、表单验证
- 手机号码:
/^1[3|4|5|7|8][0-9]{9}$/ - QQ:
[1-9][0-9]{4,} - 昵称是中文:
^[\u4e00-\u9fa5]{2,8}$ - 座机号：
/^\d{3,4}-\d{7,8}$/
12.6、正则表达中的替换
12.6.1、replace 替换 （字符串操作）
// 替换 replace
var str = 'andy和red';
var newStr = str.replace('andy','baby');
//也可以用
var newStr = str.replace(/andy/,'baby');
12.6.2、正则表达式参数
var newStr = str.replace(/andy/g,'body');
g:全局匹配i忽略大小写gi全局匹配 + 忽略大小写
13、es6
13.1、什么是ES6？
- 一项脚本语言的标准
13.2、ES6新增的语法
13.2.1、let
1。let 声明的变量只存在块级作用域
if(true) {
let a = 10;
}
console.log(a); //error
//but
if(true) {
var num = 10;
}
console.log(num); // yes
注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域
如：
- var 是函数作用域
- 在函数中声明了var，整个函数内都是有效的，比如说在for循环内定义的一个var变量，实际上其在for循环以外也是可以访问的
2。不存在变量提升
// 不能先输出后赋值
console.log(a);
let a = 10;
3。暂时性死区
var temp = 123;
if(true) {
console.log(temp)
let temp = 20;
}
经典面试题
- var 是全局，let是块级
//1.
var arr = [];
for(var i = 0;i < 2;i++) {
arr[i] = function () {
console,log(i);
}
}
arr[0].(); //2
arr[1].(); //2
//2.
//都设置为 let 形
let arr = [];
for(let i = 0;i < 2;i++) {
arr[i] = function () {
console.log(i);
}
}
arr[0].();
arr[1].();
关键：
- 此题的关键点在于每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，函数执行时输出的是自己上一级（循环产生的块级作用域）作用域下的i值.
13.2.2、const
作用：声明常量（不能变化的量）。
- 具有块级作用域
- 声明常量的时候必须赋值
- 常量赋值后，值不能修改
13.2.3、let、var、const 的区别
| var | let | const |
|---|---|---|
| 函数级作用域 | 块级作用域 | 块级作用域 |
| 变量提升 | 不存在变量提升 | 不存在变量提升 |
| 值可更改 | 值可以更改 | 值不可更改 |
13、解构赋值
ES6中允许 数组和对象进行解构
13.1、数组解构
let [a,b,c] = [1,2,3];
//如果解构不成功，变量就成为undefined
13.2、对象解构
//1.
let person = {
name: 'zs',
age: 18
}
let {name,age} = person;
//2.
let {name: myName,age: myAge} = person;
14、箭头函数
() => {}
- 函数体中只有一句代码，且代码的执行结果就是返回值，可以返回大括号
- 如果形参只有一个，可以省略小括号
- 箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this
//1.
const sum = (num1,num2) => {
num1 + num2;
}
//2.
const fn = v => v;
//3.
function fn() {
console.log(this);
return () => {
console.log(this);
}
}
const obj = {
name: 'zs'
}
fn.call(obj);
const fun = fn.call(obj);
fun();
15、剩余参数
剩余参数语法允许我们将一个不定数量的参数表示为一个数组
function sum(first,...args) {
console.log(args);
}
15.1、剩余参数和解构配合使用
let obj = ['zs','ls','ww'];
let [s1,...s2] = obj;
16、ES的内置对象扩展
16.1、Array的扩展方法
16.1.1、扩展运算符与运用
- 扩展运算符可以将数组或者对象转化为用逗号分隔的参数序列
let ary = [1,2,3];
console,log(...ary); //1,2,3
2.扩展运算符可以运用于合并数组
//1.
let ary1 = [1,2,3];
let ary2 = [4,5,6];
let ary3 = [...ary1,...ary2];
//2.
ary1.push(...ary2);
3.将类数组或可遍历对象转化为真正的数组
let oDivs = document.getElementByTagName('div');
oDivs = [...oDivs];
16.1.2、构造函数方法： Array.from();
1.将类数组或者可遍历对象转化为真正的数组
let arrry = {
'0': 'a'
}
let array2 = Array.from(array);
2.方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。
let arrayLike = {
"0": 1,
"1": 2,
}
let newAry = Array.from(aryLike, item => item *2)
//(anyLike,() => {})
console.log(newAry)
16.1.3、实例方法：find():
用于找出第一个符合条件的数组成员，如果没有找到返回 undefined
let ary = [{
id: 1,
name: 'zs'
}, {
id: 2,
name: 'ls'
}]
let target = ary.find((item,index) => item.id==2);
//ary.find(函数)
16.1.4、实例化方法：findIndex():
用于找到第一个符合条件的数组成员位置，没有找到返回-1
let arr = [1,2,3];
let index = arr.findIndex(item => item > 15);
16.1.5、实例化方法：inclues();
表示某一个数组是否包含给的的值，返回布尔值
[1,2,3],includes(3);
17、String的扩展方法
17.1、模板字符串
ES6新增方法，使用 `（反引号） 定义号
let name = `zs`;
1.模板字符串可以解析变量
let name = 'zs';
let say = `hello world &{name}`; //注意 ``
2.模板字符串中可以换行
let result = {
name: 'zhangsan',
age: 20,
sex: '男'
}
let html = ` <div>
<span>${result.name}</span>
<span>${result.age}</span>
<span>${result.sex}</span>
</div> `;
3.在模板字符串中可以调用函数
let fn = `&{get()}`;
17.2、实例方法：tartsWith() 和 endsWith()
- startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值
- endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值
17.3、实例方法：repect()
repeat方法表示将字符串重复n次，返回一个新字符串
'x',repect(3);
18、Set数据结构
ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值
const a = new Set();
//注意
const set = new Set([1,2,3,4,5,5]); //重复的会自动去掉
实例方法：
add(value)：添加某个值，返回 Set 结构本身
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
has(value)：返回一个布尔值，表示该值是否为 Set 的成员
clear()：清除所有成员，没有返回值
遍历：
Set结构与数组一样，则用forEach，没有返回值
array.forEach(value = > console.log(value));