每天10个前端知识点：原生篇(4)

2017-01-11 本文已影响215人 WangChloe

个人博客已上线，欢迎前去访问评论！
无媛无故 - wangchloe的个人博客

以下内容若有问题烦请即时告知我予以修改，以免误导更多人。

1. 参数的数组arguments

参数中的数组，函数中可以不需要定义参数

<script>
    sum(12, 5, 6);

    function sum() {
        console.log(arguments[1]);  // 5
    }
</script>

2. 设置样式的三种方法

style.xxx
oDiv.style.width = '300px';
className
oDiv.className = 'active';
cssText
批量设置样式
oDiv.style.cssText = 'width: 300px; height: 300px';

3. 字符串的相关方法

str.charAt(i); 获取字符串中的第i+1个字符返回值：相应位置的字符

str[i]的兼容问题
获取字符串中的第i+1个
- str[i] 兼容：高级浏览器及IE8+
  IE7 -> undefined
- str.charAt(i) 全兼容
str.indexOf('w'); 查找w在字符串中的位置返回值：成功 -> w在字符串中的位置失败 -> -1
1. 从左往右找
2. 区分大小写
3. 找到第一个相同值即停止
4. 查找多个字符时，返回第一个字符的位置
str.lastIndexOf('w'); 查找w在字符串中的位置返回值：成功 -> w在字符串中的位置失败 -> -1

从右往左倒序查找，返回的索引值与indexOf()规则相同

str.search('w'); 与indexOf()规则相同

search 是强制正则匹配，而 indexOf 只是按字符串匹配的。

str.substring(开始位置, 结束位置); 截取字符串，包含开始位置，不包含结束位置

str.substring(开始位置); 截取字符串 从开始位置一直截取到最后

str.substr(开始位置, 截取字符串长度); 定长截取字符串
str.slice(开始位置, 结束位置); 截取字符串

slice和substring的区别
对于负数参数，slice()方法会用字符串的长度加上参数，subString()方法将其作为0处理

<script>
    var strObj = new String("hello world");
    alert(strObj.slice(-3));　　　　　　// 输出结果："rld"
    alert(strObj.subString(-3));　　　 // 输出结果："hello world"
    alert(strObj.slice(3,-4));　　　　 // 输出结果："lo w"
    alert(strObj.subString(3,-4))　　 // 输出结果："hel"  substring(0, 3)
</script>

str.match('w'); 在字符串中匹配w 常用于正则 返回值：成功 -> 匹配的w 失败 -> null
str.split('w'); 切割字符串 返回值类型：数组

字符串按w割开，去掉w后组成的数组
若没找到w则原样返回一个长度为1的数组
若为''(空字符串，无空格)则返回将str中每个字符逐个拆开的数组

str.toUpperCase(); str转大写
str.toLowerCase(); str转小写
str.replace('xxx', 'yyy'); 常用于正则 参数：被替换内容,替换内容

修改第一个被替换内容
替换不修改原字符串, 需重新声明
第二个参数可为一个方法
replace可以连用

<script>
    var str = 'xxa';
    str.replace('x','y');
    str2 = str.replace('a', 'b');
    str3 = str.replace('x', 'y').replace('a', 'b');
    alert(str);     // xxa
    alert(str.replace('x', 'y'));   // yxa
    alert(str2);    //xxb
    alert(str3);    //yxb
</script>

<script>
    var str = 'xxxy';
    var str2 = str.replace('xxx', function(s){
        alert(s);   // xxx  被替换字符 数据类型：string
        var str2 = '';
        for(var i = 0; i < s.length; i++) {
            str2 += '*';
        }
        return str2;    // 替换后的内容
    });

    alert(str2);    // ***y
</script>

str.charCodeAt(i); // 获取字符串中的第i+1个字符对应的ASCII编码

a-> 0x61 -> 97
b-> 0x62 -> 98
z -> 0x7A -> 122

4. 字符串比较

英文按照字典序(a~z)依次比较，z为最大；从两字符串的第一个字符开始，若相当再比较下一个字符
数字按照数字大小依次；从两字符串的第一个字符开始，若相当再比较下一个字符
汉字按照unicode大小比较

5. 字符串应用

判断浏览器的类型

window.navigator.userAgent
eg:

<script>
    if(window.navigator.userAgent.indexOf('Chrome') != -1) {
        console.log('Chrome');
    } else if(window.navigator.userAgent.indexOf('Firefox') != -1) {
        console.log('Firefox');
    } else if(window.navigator.userAgent.indexOf('MSIE7.0') != -1) {
        consolle.log('IE7');
    } else {
        console.log('others');
    }
</script>

判断上传文件格式

eg:

<script>
    var index = str.lastIndexOf('.');
    var type = str.substring(index+1);  //返回文件类型名
</script>

6. 定义数组

var arr = [1, 2, 3];
var arr = new Array(1, 2, 3);

Array()只传一个参数时表示定义一个新数组的长度
new Array(10); 定义一个长度为10的数组

7. 数组的相关方法

arr.push('w'); 往数组最后面添加一项 返回值：新数组长度
arr.unshift('w'); 往数组最前面添加一项 返回值：新数组长度
arr.pop(); 删除数组最后一项返回值：删除的那项
arr.shift(); 删除数组最前一项返回值：删除的那项
arr.join('w'); 数组各项用w连接成一个字符串 返回值类型：字符串
arr.concat(arr2, arr3, ...); 数组arr与arr2、arr3...连接
arr.reverse(); 数组翻转
arr.sort(); 数组排序(按字典序和数字序列)

高级排序数值排序

从小到大

<script> 
arr.sort(function(n1, n2){
    return n1-n2;  // 可理解为：当n1-n2为正值即n1>n2时，需调换顺序，则为大的向后挪，小的向前挪 -> 升序
});
</script>

从大到小

<script> 
arr.sort(function(n1, n2){
    return n2-n1;   // 可理解为：当n2-n1为正值即n2>n1时，需调换顺序，则为大的向前挪，小的向后挪 -> 降序
});
</script>

arr.splice(开始位置, 删除个数, 元素1, 元素2);

<script>
    var arr1=[1,2,3,4];
   arr1.splice(1, 0, 'a', 'b'); //添加：在1后添加'a','b'   返回值：返回空数组

   var arr2=[1,2,3,4];
   arr2.splice(1, 2); //删除：删除2、3    返回值：返回删除的各项

   var arr3=[1,2,3,4];
   arr3.splice(1, 1, 8, 88, 888) //修改：先删除再添加 把2改为8,88,888   返回值：返回删除的各项
</script>

splice模拟方法

arr.push(c); -> arr.splice(arr.length, 0, c);
2）arr.unshift(c); -> arr.splice(0, 0, c);
3）arr.pop(); -> arr.splice(arr.length-1, 1);
4）arr.shift(); -> arr.splice(0, 1);

8. json(object类型)

json格式：{name:value,name2:value2, ...}
json标准格式：{"name":value, "name2":value2, ...}

所有键名需双引号,键值非数字时需加引号

键值对没有json.length

json的name是唯一的

获取json值: json.name 或者 json['name']
添加/修改: json.aaa = 'bbb'; 或者 json['aaa'] = 'bbb';
删除: delete json.c; 或者 delete json['c'];
判断json内某个属性是否存在

<script>
    var json = {a: 1, b: 2};
    alert('c' in json); // false 属性c不存在
</script>

json和数组的区别

length

数组：有length
json：没有length

循环遍历方法

数组：for(var i=0;i<arr.length;i++){alert(arr[i])}; for循环
json：for(var name in json){alert(json[name])}; for in循环

访问元素下标类型

数组：arr[1] 数字
json：json['a'] 字符串

顺序

数组：有序，根据下标访问
json：无序，根据键名访问

9. Math方法

Math.random() 0-1随机数（不包含1）
Math.abs(num) 绝对值
Math.max(num1, num2, ...) 最大数
Math.min(num1, num2, ...) 最小数
Math.floor(num) 向下取整 12.4 -> 12 12.6 -> 12
Math.ceil(num) 向上取整 12.5 -> 13 12.1 -> 13
Math.pow(n, m) n的m次方 Math.pow(2, 3)=8;
Math.sqrt(num) num开平方 Math.sqrt(9)=3;
Math.round(num) 四舍五入 12.1 -> 12 12.6 -> 13

num.toFixed(保留小数个数); 保留几位小数(自动四舍五入)

10. try-catch捕获异常

<script>
    try {
        // code
    } catch(ex) {   // exception
        console.log(ex.message);    // 查看错误信息

        // 错误的提示信息
        // 补救的代码
    }
</script>

更多内容可以订阅本人微信公众号，一起开启前端小白进阶的世界！

公众号是坚持日更的，不发文的时候推送一些我觉得好用的前端网站或者看到的一些问题的解决方案，也更便于大家交流，就酱。

微信公众号：无媛无故