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

2017-01-14

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

本次内容主要关于字符串、数组及Math的常用方法。

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

从左往右找
区分大小写
找到第一个相同值即停止
查找多个字符时，返回第一个字符的位置

str.lastIndexOf(‘w’); 查找w在字符串中的位置返回值：成功 -> w在字符串中的位置失败 -> -1

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

str.search(‘w’); 与indexOf()规则相同 常用于正则
str.substring(开始位置, 结束位置); 截取字符串，包含开始位置，不包含结束位置

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

str.substr(开始位置, 截取字符串长度); 定长截取字符串
str.slice(开始位置, 结束位置); 截取字符串
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(); 数组排序(按字典序和数字序列)

高级排序数值排序

从小到大
arr.sort(function(n1, n2){
return n1-n2;
});

从大到小
arr.sort(function(n1, n2){
return n2-n1;
});

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模拟方法
1) 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>

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