初识javascript
2019-03-04 本文已影响0人
Mtllll
js字符串
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
*
* 在解析器的底层，保存字符串时，实际上是以字符数组的形式保存的
* 所以字符串的操作方法和数组都是非常相似的
*
*/
var str = "Hello neusoft";
//console.log(str.length);
//console.log(str[6]);
/*
* length可以用来获取一个字符串的长度
*/
/*
* charAt()
* - 可以根据索引来获取指定位置的字符
*
* charCodeAt()
* - 可以根据索引来获取指定位置的字符的字符编码
*
* String.fromCharCode()
* - 可以根据字符编码来获取字符
*/
str = "中AaHello neusoft";
var result = str.charAt(0);
result = str.charCodeAt(0);
result = String.fromCharCode(20013);
//console.log(result);
/*
* concat()
* - 可以用来连接两个或多个字符串
* - 作用+ 一样
*/
str = "hello";
var str2 = "world";
result = str.concat(str2,"你好","天气好","吃的好");
/*
* indexOf()
* - 检索指定字符串在当前字符串中的位置
* - 参数：
* 第一个参数，要查询的字符串
* 第二个参数，查找开始的位置
*
* - 返回值：
* 默认会返回字符串第一次出现的位置的索引
* 如果没有找到该内容，则返回-1
*
* lastIndexOf()
* - 检索指定字符串在当前字符串中的位置
* - 该方法和indexOf()一样，不同的是indexOf()是从前往后找
* 而lastIndexOf()是从后往前找
*/
str = "Helo neusoft";
//result = str.indexOf("a");
//result = str.indexOf("l",3);
result = str.lastIndexOf("l",5);
/*
* slice()
* - 可以用来截取一个字符中的内容
* - 参数：
* 第一个参数，截取开始位置的索引（包括开始位置）
* 第二个参数，截取结束位置的索引（不包括结束位置）
* - 可以接收一个负值作为参数，如果是负值，则从后往前数
* - 也可以省略第二个参数，如果省略则一直截取到最后
*/
str = "Hello neusoft";
result = str.slice(0,5);
result = str.slice(5);
/*
* substring()
* - 用来截取字符串的
* - 参数：
* 第一个参数，截取开始位置的索引（包括开始位置）
* 第二个参数，截取结束位置的索引（不包括结束位置）
* - 该方法不接收负值，如果传递了一个负值，则默认会设置为0
* - 该方法中如果第二个参数小于第一个，则会调整参数的位置
*
*/
str = "Hello neusoft";
result = str.substring(6,0);
/*
* substr()
* - 用来截取字符串
* - 参数：
* 第一个参数，截取开始位置的索引
* - 可以是负值，如果是负值从后往前数
* 第二个参数，截取的个数
*/
str = "Hello neusoft";
result = str.substr(-3,2);
//console.log(result);
/*
* split()
* - 可以将一个字符串拆分为一个数组
* - 它需要一个字符串作为参数，将会根据该字符串对字符串进行拆分
* 并且将拆分的后的值保存到一个数组中返回
*/
str = "孙悟空@猪八戒@沙和尚@唐僧";
result = str.split("@");
//console.log(Array.isArray(result));
//console.log(result);
/*
* toLowerCase()
* - 将一个字符串转换为小写
* toUpperCase()
* - 将一个字符串转换为大写
*/
str = "abcdefg";
result = str.toUpperCase();
str = "ABCDEFG";
result = str.toLowerCase();
console.log(result);
var myStr = "I,love,you,Do,you,love,me";
var replacedStr = myStr.replace("love","hate");//"I,hate,you,Do,you,love,me";
//replace默认只替换第一次查找到的，想要全局替换，需要置上正则全局标识，如
var myStr = "I,love,you,Do,you,love,me";
var replacedStr = myStr.replace(/love/g,"hate");//"I,hate,you,Do,you,hate,me"
</script>
</head>
<body>
</body>
</html>
数组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 数组（Array）
* - 数组也是一个对象，功能和普通对象（Object）的功能类似的
* - 数组中也可以保存不同的元素，不同的是普通对象是通过一个字符串作为属性名来操作属性的，
* 而数组是通过索引来操作元素的。
* - 索引（index）
* - 索引就是从0开始的整数
* - 数组比普通对象的存储效率要高，在开发中我们经常使用数组来存储一些数据
*/
//创建一个数组对象
var arr = new Array();
//使用typeof检查一个数组对象时会返回object
//console.log(typeof arr);
/*
* 向数组中添加元素
* - 语法：
* 数组[索引] = 值;
*/
arr[0] = 10;
arr[1] = 20;
arr[2] = 30;
arr[3] = 40;
arr[4] = 30;
/*
* 读取数组中的元素
* - 语法：
* 数组[索引]
*/
//如果读取一个数组中没有的元素，会返回undefined
//console.log(arr[4]);
//获取数组的长度
/*
* length
* - length属性可以获取或设置数组的长度
* - 对于连续的数组通过length属性获取到的就是数组中元素的个数
*/
//console.log(arr.length);//获取数组的长度
//修改数组的length属性
//如果将长度修改为小于之前的长度的值，则多余的部分会被删除
arr.length = 5;
//如果将长度修改为大于之前的长度的值，则会数组中会创建出空的元素
//arr.length = 10;
//向数组的最后添加一个元素
//语法：数组[数组.length] = 值;
arr[arr.length] = 55;
arr[arr.length] = 75;
arr[arr.length] = 85;
console.log(arr);
</script>
</head>
<body>
</body>
</html>
数组字面量表达方式（推荐）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 数组的字面量
*/
//var arr = new Arry();
var arr = [] ;
/*
* 使用字面量，可以在创建数组的同时，向数组中添加元素
* 语法：
* var 数组 = [元素1,元素2...元素N];
*/
arr = [1,2,3,4,5,6,7];
//console.log(arr[6]);
arr = new Array(1,2,3,4,5,6,7);
arr = [10];//创建一个数组并向数组中添加一个元素
arr = new Array(10);//创建一个长度为10的数组
//console.log(arr.length);
/*
* 在数组中可以保存任意类型的元素
*/
arr = [1,"hello",true,null,undefined,{name:"孙悟空"},function(){}];
//console.log(arr[5].name);
//console.log(arr[6]);
//数组中也可以保存数组，如果数组中保存的依然是数组，则我们称这个数组为二维数组
arr = [
[1,2,3],
[4,5,6],
[5,6,7]
];
console.log(arr[0][1]);
</script>
</head>
<body>
</body>
</html>
数组的常用方法push(),pop(),unshift(),shift()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 创建一个数组
*/
var arr = ["孙悟空","猪八戒","沙和尚"];
/*
* push()
* - 该方法可以用来向数组的末尾添加新的元素,并返回数组的新的长度
*/
//console.log(arr);
var result = arr.push("唐僧","白骨精","蜘蛛精");
//console.log(arr);
//console.log("result = "+result);
/*
* pop()
* - 用来删除并返回数组的最后一个元素
* - 元素删除以后，会自动修正数组的长度
*/
result = arr.pop();
result = arr.pop();
//console.log(arr);
//console.log("result = "+result);
/*
* unshift()
* - 向数组的最前边添加元素，并返回新的长度
*/
result = arr.unshift("牛魔王","铁扇公主");
console.log(arr);
//console.log("result = "+result);
/*
* shift()
* - 删除数组最前边的元素，并返回被删除的元素
* - 删除完元素以后，会自动调整数组的长度
*/
result = arr.shift();
result = arr.shift();
console.log(arr);
console.log("result = "+result);
console.log(arr.length);
</script>
</head>
<body>
</body>
</html>
遍历数组方式二
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var arr = ["孙悟空","猪八戒","沙和尚","唐僧"];
/*
* 也可以使用forEach()来遍历数组
* forEach()中需要一个函数作为参数
* - 像这种由我们定义而不由我们调用的函数，我们称为回调函数
* - forEach()中的回调函数，由浏览器调用，
* 数组中有几个元素函数就会被调用几次，
* 每次遍历到一个元素都会调用一次函数，浏览器会通过实参的形式来将遍历到内容传递进函数
* - 浏览器在调用回调函数传递了三个实参：
* 第一个参数：正在遍历的元素
* 第二个参数：正在遍历的元素的索引
* 第三个参数：正在遍历的数组对象
*
* - forEach()方法不支持IE8及以下的浏览器，所以如果需要兼容IE8则不要使用
*
*/
arr.forEach(function(value , index , obj){
console.log("value = "+value + " index = "+index+" obj = "+obj);
});
</script>
</head>
<body>
</body>
</html>
数组方法：slice（），splice（）
这些元素将会被插入到开始位置之前的位置
* - 它会将被删除的元素作为返回值返回
*
*/
arr = ["孙悟空","猪八戒","沙和尚","唐僧"];
//result = arr.splice(0,1);
//牛魔王替换 索引为0的元素
//result = arr.splice(0,1,"牛魔王");
//arr.splice(2,1,"牛魔王","红孩儿","二郎神");
arr.splice(2,0,"牛魔王","红孩儿","二郎神");
console.log(arr);
</script>
</head>
<body>
</body>
</html>
练习 去除调用数组中重复的数字
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//创建一个数组
var arr = [1,2,3,1,1,1,4,2,3,5];
//去除调用数组中重复的数字
//获取数组中的数字
for(var i=0 ; i<arr.length ; i++){
//console.log(arr[i]);
//再次遍历数组
for(var j=i+1 ; j<arr.length ; j++){
//console.log("----->" + arr[j]);
//比较两个数字是否相等
if(arr[i] == arr[j]){
//进入判断，证明两个数字重复，则删除arr[j]
arr.splice(j,1);
//需要在此位置在比较一次
j--;
}
}
}
console.log(arr);
</script>
</head>
<body>
</body>
</html>
###数组的其他方法
```js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var arr = ["孙悟空","猪八戒"];
var arr2 = ["白骨精","蜘蛛精"];
var arr3 = ["太上老君","如来佛祖"];
/*
* concat()
* - 可以用来连接两个或多个数组
* - 不会影响原数组，而是将新的数组的返回
* - 可以将多个数组作为concat参数传递，也可以传递单个的元素
*/
var result = arr.concat(arr2 , arr3 , "唐僧");
//console.log(result);
/*
* join()
* - 可以将数组中的所有的元素连接为一个字符串
* - 该方法可以接收一个字符串作为参数，这个字符串将会将会作为连接符来连接元素
* 如果不传，默认使用,
*/
arr = ["孙悟空","猪八戒","沙和尚"];
result = arr.join("@-@");
//console.log(result);
/*
* reverse()
* - 该方法可以用来反转数组
* - 前边的去后边，后边的去前边
* - 它会影响到原数组，直接在原数组上反转
*/
//arr.reverse();
//console.log(arr);
/*
* sort()
* - 可以用来对数组中的元素进行排序
* - sort()会影响到原数组
* - 默认它会按照元素的Unicode编码进行排序
* - 如果希望使用sort对一个数字型的数组进行排序可能会得到不可预期的结果
* 因为它同样也会按照数字的Unicode编码进行排序
* - 我们也可以自己来指定排序的规则
*
*/
var arr4 = ["a","c","b","e","d","f"];
arr4.sort();
//arr4 = [2,3,10,5,4,6];
/*
* 如果需要自定义排序规则，需要将一个函数作为参数传递给sort()方法
* 函数的结构：function(a , b){}
*
* 浏览器会多次以数组中的元素作为实参来调用该函数，
* a和b具体是谁不确定，但是a一定是在b前边
* 浏览器将会根据函数的返回值，来决定两个元素是否交互位置
* 如果返回一个大于0的值，则两个元素互相交换位置
* 如果返回一个等于0的值，则证明两个元素相等，位置不变
* 如果返回一个小于0的值，两个元素的位置也不变
*
*/
arr4 = [10,4,3,5,2];
arr4.sort(function(a,b){
/*//升序 小 ---> 大
if(a > b){
//交换位置
return 1;
}else if(a == b){
return 0;
}else{
return -1;
}*/
//降序 大 ---> 小
/*if(a > b){
//交换位置
return -1;
}else if(a == b){
return 0;
}else{
return 1;
}*/
//如果希望升序排列，则 返回 a-b
//return a - b;
//如果希望降序排列，则 返回 b-a
return b - a;
});
console.log(arr4);
</script>
</head>
<body>
</body>
</html>
