2018-07-02

作者: 无聊的凡人 | 来源:发表于2018-07-02 19:58 被阅读0次

1.数组

1.1 数组构造
- 1.直接创建的方式 --> var arr = [1,2,3];
- 2.构造函数方式 --> var b = new Array(); b[0] = 1; console.log(b);
- 数组为一个object对象 --> console.log(typeof b); // object
- 检测一个变量是否为数组的两种方法
  - 1.使用 instanceof 测试b是否为数组对象的一个实例
    - instanceof --> 返回boolean值
    - console.log(b instanceof Array); // true
  - 2.使用Array自带方法isArray()
    - 2.Array.isArray() --> 返回boolean值
    - console.log(Array.isArray(b));

// body
<body>
    <script>
        // 1.直接创建的方式
        var arr = [1,2,3];
        // 2.构造函数方式
        var b = new Array();
        b[0] = 1;
        console.log(b);

        // 数组是一个对象 Object
        console.log(typeof b);

        // 检测一个object是否为数组
        // 1.使用 instanceof 测试b是否为数组对象的一个实例
        // instanceof --> 返回boolean值
        console.log(b instanceof Array); // true

        // 2.Array.isArray() --> 返回boolean值
        console.log(Array.isArray(b));
    </script>
</body>

1.2 数组添加 --> 改变数组原来的内容
- 1.push() --> 在数组末尾进行添加
- 2.unshift --> 从数组起始进行添加

// body
<body>
    <script>
        // --> 改变数组原来的内容
        // push() --> 在数组末尾进行添加
        var arr = [1,2,3];
        arr.push(4);
        console.log(arr);

        // unshift --> 从数组起始进行添加
        arr.unshift(0);
        console.log(arr);
    </script>
</body>

1.3 concat数组合并 --> 没有改变数组的内容，而是产生一个新数组
- 参数可以是数字，也可以是数组，在原数组末尾进行添加

// body
<body>
    <script>
        // --> 没有改变数组的内容，而是产生一个新数组
        // 参数可以是数字，也可以是数组，在原数组末尾进行添加
        var arr = [1,2,3];
        var b = arr.concat(4);
        console.log(arr);
        console.log(b);
    </script>
</body>

1.4 数组克隆
- 1.使用for循环+push进行克隆，或者逆序for循环+unshift方法
- 2.使用concat进行克隆
  - 2.1 使用空数组进行数组添加
  - 2.2 使用要添加的数组直接concat()空参

// body
<body>
    <script>
        // 数组克隆
        var arr = [1,2,3];
        var b = [];

        // 1.使用for循环+push进行克隆，或者逆序for循环+unshift方法
        for (var i = 0;i < arr.length;i++){
            b.push(arr[i]);
        }
        console.log(b);

        // 2.使用concat进行克隆
        var c = [4,5,6];
        // var d = c.concat([7,8]); // [4,5,6,7,8]
        // console.log(d);
        // 可以使用一个空数组添加c数组，或者使用c.concat();不写参数
        var d = [].concat(c);
        console.log(d);
    </script>
</body>

1.5 数组删除
- 1.从末尾进行删除 --> pop()，会返回从数组中删掉的值，就是弹出
- 2.从头部进行删除 --> shift()，同样会返回从数组中删掉的值

// body
<body>
    <script>
        // 数组删除
        // 1.从末尾进行删除 --> pop()
        // 会返回从数组中删掉的值，就是弹出
        var arr = [1,2,3];
        var a = arr.pop();
        console.log(a);

        // 2.从头部进行删除 --> shift()
        // 同样会返回从数组中删掉的值
        var arr2 = [1,2,3];
        var a2 = arr.shift();
        console.log(a2);
    </script>
</body>

1.6 数组修改
- splice(index,number,item);
- index --> 下标
- number --> 修改多少个
- item --> 修改的项

// body
<body>
    <script>
        // splice(index,number,item);
        // index --> 下标
        // number --> 修改多少个
        // item --> 修改的项
        var arr = [1,2,3];
        arr.splice(1,1,"a");
        console.log(arr);
    </script>
</body>

1.7 数组查询和数组切片
- 数组查询
  - 1.通过下标查询数组的值
  - 2.通过值查询数组中对应的下标，只返回该值在数组中第一次出现的位置 --> indexOf()
- 数组切片
  - slice(startIndex,endIndex) --> 不包含endIndex
  - slice() 只传一个参数 --> 则从startIndex截取到数组最后，包括最后一个元素。

<body>
    <script>
        var arr = [1,2,3,4,4];
        // 1.通过下标查询数组的值
        console.log(arr[0]); // 1

        // 2.通过值查询数组中对应的下标，只返回该值在数组中第一次出现的位置 --> indexOf()
        var a = arr.indexOf(4);
        console.log(a); // 3

        // slice(startIndex,endIndex) --> 不包含endIndex
        var b = arr.slice(2,4); // [3,4]
        console.log(b);

        // slice() 只传一个参数 --> 则从startIndex截取到数组最后，包括最后一个元素。
        // 也可以用slice() 来进行克隆
        var c = arr.slice(2);
        console.log(c); // [3,4,4]
    </script>
</body>

1.8 Array的splice方法 --> 拼接
- 1.利用splice进行数组指定位置添加
  - number传0，添加的item占据index的位置
- 2.利用splice进行数组删除
  - 删除时，不写item值，只传2个参数，从下标为index的地方开始删number个元素

// body
<body>
    <script>
        // splice(index,number,item)

        // 1.利用splice进行数组指定位置添加
        // number传0，添加的item占据index的位置
        var arr = [1,2,3,4];
        arr.splice(2,0,"hello");
        console.log(arr);

        // 2.利用splice进行数组删除
        // 删除时，不写item值，只传2个参数，从下标为index的地方开始删number个元素
        var  arr2 = [1,2,3,4,5];
        arr2.splice(1,2);
        console.log(arr2)

    </script>
</body>

1.9 join，将数组拼接为字符串
- join() --> 将数组拼接为字符串，参数为分隔符，默认为","

// body
<body>
    <script>
        // join() --> 将数组拼接为字符串，参数为分隔符，默认为","
        var arr = ["hello","world","good"];
        var b = arr.join();
        console.log(b); // hello,world,good
        console.log(typeof b); // string
        var c = arr.join("-");
        console.log(c); // hello-world-good
    </script>
</body>

1.10 数组排序
- arr.sort(function(a,b){return a-b}); --> 将数组正序排序
- 如果想要逆序排序，则方法体 return b-a

// body
<body>
    <script>
        var arr = [22,1,32,12,15];
        var b = arr.sort();
        console.log(b); // 只排一部分，不要直接这么写

        var arr2= [22,1,32,12,15];
        var c = arr2.sort(function (a, b2) {
             return a-b2; // 逆序使用b2-a
        });
        console.log(c);
    </script>
</body>

1.11 数组求和
- 使用reduce(function(){})方法
- 根据方法体的不同，也可以用来计算阶层和等

// body
<body>
    <script>
        var arr = [1,2,3,4,5];
        var sum = arr.reduce(function (a,b) {
            return a+b; // 如果想要求阶层积，则使用 a*b
        });
        console.log(sum);
    </script>
</body>

1.12 数组反转
- arr.reverse() --> 将数组倒序排列

// body
<body>
    <script>
        var arr = [1,2,3,4,5];
        var b = arr.reverse();
        console.log(b);
    </script>
</body>

1.13 二维数组
- 二维数组，即数组中嵌套数组

// body
<body>
    <script>
        // 二维数组
        var arr = [[1,2],[3,4],"hello"];
        console.log(arr[0]); // [1,2];
        console.log(arr[0][0]); // 1
    </script>
</body>

2.string-在js中string为基本类型

2.1 基本类型的方法，不会改变原来的值，不同于引用类型
2.2 获取字符串长度
- str.length 方法，空格也占用长度
2.3 字符串合并
- str.concat(str1) --> 将两个字符串合并，参数str1在str末尾拼接
2.4 字符串查询
- charAt(index) --> 输出对应下标的字符
- indexOf(str); --> 返回str在字符串中第一次出现的下标位置的下标，如果不存在于字符串中，则返回-1
2.5 字符串截取
- slice()，方法参考数组中的slice()方法
- substr(startIndex,len) --> 截取的起始位置，截取的长度
- substring(startIndex,endIndex) --> 和slice()一样

// body
<body>
    <script>
        // 基本类型的方法，不会改变原来的值，不同于引用类型

        var str = "hello world";
        // 1.获取字符串长度
        var len = str.length;
        console.log(len); // 11 空格也算字符串

        // 2.字符串合并
        // concat(str1) --> 将两个字符串合并，参数str1在str末尾拼接
        var add = str.concat(" add");
        console.log(add); // hello world add

        // 3.字符串查询
        // charAt(index) --> 输出对应下标的字符
        var char = str.charAt(0);
        console.log(char); // h

        // indexOf(str); --> 返回str在字符串中第一次出现的下标位置的下标，如果不存在于字符串中，则返回-1
        var index = str.indexOf("world");
        console.log(index); // 6

        // 4.字符串截取
        // slice()
        var a = "hello world";
        var b = a.slice(1,4);
        console.log(b); // ell

        // substr(startIndex,len) --> 截取的起始位置，截取的长度
        var subStr = a.substr(1,4);
        console.log(subStr); // ello

        // substring(startIndex,endIndex) --> 和slice()一样
        var subString = a.substring(1,4); // ell
        console.log(subString);
    </script>
</body>

2.6 split()字符串分割
- split() --> 将字符串按分割符分割成数组
- 不写参数则为一个长度为1的数组，其中元素为str

// body
<body>
    <script>
        // split() --> 将字符串按分割符分割成数组
        // 不写参数则为一个长度为1的数组，其中元素为str
        var str = "hello world";
        var arr = str.split(" ");
        console.log(arr);
        // 如果使用空字符串为分割符，则所有的字符都会被分开
        var arr1 = str.split("");
        console.log(arr1);
    </script>
</body>

2.7 字符串的方法
- search(value) --> 返回搜索字符的下标，没有搜索到则返回-1
- match(value) --> 将匹配的内容返回一个数组，没有匹配的则返回一个null
- replace(value,newValue) --> 将字符串中第一个value替换为newValue，如果要替换所有的value，则要使用正则

// body
<body>
    <script>
        // search(value) --> 返回搜索字符的下标，没有搜索到则返回-1
        var a = "hello hello world";
        var b = a.search("h");
        console.log(b); // 0

        // match(value) --> 将匹配的内容返回一个数组，没有匹配的则返回一个null
        var c = a.match("l");
        console.log(c); // ["l", index: 2, input: "hello world"]

        // replace(value,newValue) --> 将字符串中第一个value替换为newValue
        // 如果要替换所有的value，则要使用正则
        var d = a.replace("hello","good");
        console.log(d); // good world
    </script>
</body>

3.正则表达式

3.1 正则表达式，又称规则表达式，规则字符串中字符出现规则的表达式
- 1.语法： /pattern/attributes
- 2.attributes 为g时，代表全局搜索
3.2 备选字符集[abc] --> 特点，必须且只能多选一
- [a-z] [A-Z] [0-9] 连续的备选字符，表示范围
3.3 预定义字符集
- 定义：针对常用的备选字符集提供的简化符号
- \d --> [0-9]
- \w --> [0-9a-zA-Z_]
- \s --> 空格，tab，即匹配空白
- . --> 除换行符外所有字符

// body
<body>
    <script>
        // 正则表达式，又称规则表达式，规则字符串中字符出现规则的表达式
        // 1.语法： /pattern/attributes
        // attributes 为g时，代表全局搜索

        var a = "hello world";
        var RE = /l/g;
        var b = a.replace(RE,"*");
        console.log(b); // he**o wor*d

        // 2.备选字符集[abc] --> 特点，必须且只能多选一
        var a2 = "上海，上天，上去，上海都";
        var RE2 = /上[海天]/g;
        var b2 = a2.replace(RE2,"**");
        console.log(b2); // **，**，上去，**都

        var a3 = "1234322dd";
        var RE3 = /[0-9]/g;
        var b3 = a3.replace(RE3,"*");
        console.log(b3); // *******dd

        // [a-z] [A-Z] [0-9] 连续的备选字符，表示范围
        var a4 = "hello world";
        var RE4 = /[a-z]/g;
        var b4 = a4.replace(RE4,"*");
        console.log(b4); // ***** *****

        // 3.预定义字符集
        // 定义：针对常用的备选字符集提供的简化符号
        // \d --> [0-9]
        var a5 = "hello 123123";
        var RE5 = /\d/g;
        console.log(a5.replace(RE5,"*")); // hello ******

        // \w --> [0-9a-zA-Z_]
        var a6 = "Hello_World@123";
        var RE6 = /\w/g;
        console.log(a6.replace(RE6,"*")); // ***********@***

        // \s --> 空格，tab，即匹配空白
        // . --> 除换行符外所有字符
    </script>
</body>

3.4 量词 --> 规定字符出现的次数
- {m}，规定字符最少出现m次
- regEXp.test(str) --> 正则表达式匹配字符串，返回boolean值
- {a,b} --> 代表出现的次数在a-b这个范围，最少a次，最多b次
- - --> 出现一次或多次
- ? --> 出现0次或一次
- - --> 出现0次或多次
- ^ --> 以什么开头
- $ --> 以什么结尾
- 固定搭配：^正则表达式$ -->表示从开头到结尾的完整匹配
- 排除 [^abc] --> 除了abc

// body
<body>
    <input type="text" id="txt" />
    <button id="btn">确定</button>

    <input type="text" id="phoneNum" />
    <button id="btn2">确定</button>

    <script>
        // 4.量词 --> 规定字符出现的次数
        // regEXp.test(str) --> 正则表达式匹配字符串，返回boolean值
        var RE = /^\d{6}$/; // 这里如果是全局搜索g 则会一次true 一次false 暂时不知道原因
        var txt = document.getElementById("txt");
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            var value = txt.value;
            var result = RE.test(value);
            console.log(value+":"+result);
        };

        // {a,b} --> 代表出现的次数在a-b这个范围，最少a次，最多b次

        // + --> 出现一次或多次
        // ? --> 出现0次或一次
        // * --> 出现0次或多次
        var a2 = "hello 2323";
        var RE2 = /\d+/g;
        console.log(RE2.test(a2));

        // 电话号码匹配正则
        // ^ --> 以什么开头
        // $ --> 以什么结尾
        var phoneRE = /^1[3-9]\d{9}$/;
        var phoneNum = "17671266824";
        console.log("是否为手机号码："+phoneRE.test(phoneNum));
        var phone = document.getElementById("phoneNum");
        var btn2 = document.getElementById("btn2");
        btn2.onclick = function (ev) {
            var value = phone.value;
            var result = phoneRE.test(value);
            console.log(value+"："+result);
        };

        // 指定匹配位置 ^ $
        // 固定搭配：^正则表达式$ -->表示从开头到结尾的完整匹配
        // 指定位置 ^开始的值，$结束的位置
        var str = "    hello";
        var RE3 = /^\s+/; // 将开始位置的空格清空
        console.log(str.replace(RE3,""));

        // 排除 [^abc] --> 除了abc
        var str4 = "abc232";
        var RE4 = /[^abc]/g;
        console.log(str4.replace(RE4,"*"));

        // 电话号码匹配正则2
        // 以 +08 或者 0086开头，可有可无 (\+08|0086)?
        // 可以有多个空格，或者没有 \s*
        // 第一位为1，第二位3-9，后面9位为数字
        var RE5 = /^(\+08|0086)?\s*1[3-9]\d{9}$/;
    </script>
</body>

3.5 字符串方法使用正则
- 字符串中，支持正则的方法，search()，match()，replace()，split()
- 正则自带的方法 test()
- str.match(regExp) 返回匹配到的，组成一个数组
- replace 将正则匹配的，替换为指定字符串
- split 按符合正则匹配的分割字符串，返回数组

// body
<body>
    <textarea name="" id="txt" cols="30" rows="10"></textarea>
    <button id="btn">过滤</button>

    <script>
        // 字符串中，支持正则的方法，search()，match()，replace()，split()
        // 正则自带的方法 test()

        // str.match(regExp) 返回匹配到的，组成一个数组
        var str = "hello 13213 121";
        var RE = /\d+/g; // 这里不用全局g，则后面的121不会被取到
        var arr = str.match(RE);
        console.log(arr);

        // replace 将正则匹配的，替换为指定字符串
        var RE2 = /天猫|淘宝/g;
        var txt = document.getElementById("txt");
        var btn = document.getElementById("btn");
        btn.onclick = function (ev) {
            var value = txt.value;
            txt.value = value.replace(RE2,"**");
        };

        // split 按符合正则匹配的分割字符串，返回数组
        var str3 = "hello world";
        var RE3 = /l/;
        console.log(str3.split(RE3));
    </script>
</body>

3.6 标签过滤

// body
<body>
    <textarea name="" id="txt" cols="30" rows="10"></textarea>
    <button id="btn">过滤</button>
    <script>
        var RE = /<[^<>]*>/g;
        var txt = document.getElementById("txt");
        var btn = document.getElementById("btn");
        btn.onclick = function (ev) {
            var value = txt.value;
            txt.value = value.replace(RE,"");
        }
    </script>
</body>

3.7 邮箱验证

// body
<body>
    <input type="text" id="txt">
    <p id="content"></p>
    <button id="btn">验证</button>

    <script>
        // 邮箱的规则，一串数字，字母或者下划线@一串数字英文.一串英文
        var RE = /^\w+@[a-z0-9]+\.[a-z]+/;
        var txt = document.getElementById("txt");
        var content = document.getElementById("content");
        var btn = document.getElementById("btn");
        btn.onclick = function (ev) {
            var value = txt.value;
            var result = RE.test(value);
            console.log(result);
            if (result){
                content.innerHTML = "邮箱正确："+value;
                content.style.color = "green";
            }
            else{
                content.innerHTML = "邮箱格式不合法："+value;
                content.style.color = "red";
            }

        }
    </script>
</body>

2018-07-02

1.数组

1.1 数组构造

1.2 数组添加 --> 改变数组原来的内容

1.3 concat数组合并 --> 没有改变数组的内容，而是产生一个新数组

1.4 数组克隆

1.5 数组删除

1.6 数组修改

1.7 数组查询和数组切片

1.8 Array的splice方法 --> 拼接

1.9 join，将数组拼接为字符串

1.10 数组排序

1.11 数组求和

1.12 数组反转

1.13 二维数组

2.string-在js中string为基本类型

2.1 基本类型的方法，不会改变原来的值，不同于引用类型

2.2 获取字符串长度

2.3 字符串合并

2.4 字符串查询

2.5 字符串截取

2.6 split()字符串分割

2.7 字符串的方法

3.正则表达式

3.1 正则表达式，又称规则表达式，规则字符串中字符出现规则的表达式

3.2 备选字符集[abc] --> 特点，必须且只能多选一

3.3 预定义字符集

3.4 量词 --> 规定字符出现的次数

3.5 字符串方法使用正则

3.6 标签过滤

3.7 邮箱验证

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读