前端入门一之ES6--递归、浅拷贝与深拷贝、正则表达式、es6、解构赋值、箭头函数、剩余参数、String、Set

前言

JS是前端三件套之一，也是核心，本人将会更新JS基础、JS对象、DOM、BOM、ES6等知识点，这篇是ES6;
这篇文章是本人大一学习前端的笔记；
欢迎点赞 + 收藏 + 关注，本人将会持续更新。

文章目录

10、递归

简单理解：自己调用自己

注意：必须要加退出条件return

条件：
1. 初始值，即结束值
2. 地推公式

<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()正则对象方法，用于检测字符串是否符合规则，返回值trueor false,

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));