js的基础

最新推荐文章于 2024-04-21 21:52:08 发布

jan_ping

最新推荐文章于 2024-04-21 21:52:08 发布

阅读量387

点赞数

文章标签： javascript node.js java

本文链接：https://blog.csdn.net/jan_ping/article/details/120723737

版权

一、数组

概念 : 数组是一组数据的集合，可以存储任意类型的数据

1.1 数组的创建

1. 通过对象的方式创建 new

// 1. 通过对象的方式
 new var arr = new Array()

2. 字面量创建 [] 是字面量的含义

var arr1 = ['张三',true,21]

注意:数组中值和值之间使用英文逗号(,)隔开

1.2 数组单个元素的访问

通过数组元素的键名 ( 下标 ) ，来获取数组的中的某一个值

语法：数组名[ 键名 ]

// 访问arr1数组中的 张三
 console.log(arr1[0])

修改数组的元素值

数组名 [ 键名 ] = 修改后的值

// 将张三修改为李四
 arr1[0] = '李四' 
console.log(arr1);

1.3 数组的遍历

挨个访问数组中的每一个元素

// 数组的遍历 
for(var i=0;i<arr1.length;i++){ 
console.log(arr1[i]); 
}

1.4 数组练习

1. 求和

var arr = [12,15,18,21,4]

二、数组的分类

按照维数可分为一维数组、二维数组、三维数组 ....

二维数组创建

<script> 
var stuInfo = [
          ['武尚博','男',18], 
          ['刘佳璇','女',18] 
        ] 
</script>

二维数组元素访问

语法： 数组名称 [ 外层数组下标 ][ 内层数组下标 ]

<script> 
// 只获取 刘佳璇 
stuInfo[1][0] 
</script>

二维数组遍历

<script>
 // 遍历的外层数组 
for(var i=0;i<stuInfo.length;i++){
 // console.log(stuInfo[i]); 
// 遍历内层数组 
for(var j=0;j<stuInfo[i].length;j++ ){ 
document.write(stuInfo[i][j]); 
   }
// 表示内层数组遍历结束,输出换行
 document.write('<br>') 
    } 
</script>

三、对象

万物皆对象

类是具有相同或相似属性和功能 ( 方法 ) 的这些事物，统称为一类

php 中的对象：实例化 (new)

javascript 中的对象： 自定义对象、内置对象、浏览器对象

3.1 字面量创建对象

对象里边只有属性和方法，属性和方法是以键值对的形式存在，键和值之间用冒号 : 隔开

对象 (object) 中的字面量指的是花括号 {}

var 对象的名称 = {

// 属性可以理解为变量名

属性名 : 属性值 ,

// 方法可以理解为函数

方法名 :function(){}

}

var person = { 
gongHao:'HS001',
 name:'王平',
 money:1500, 
skill:function(){ 
console.log('working ....'); 
     } 
 }

对象属性的调用

语法： 对象名. 属性名

<script> 
// 在浏览器上边输出: 王平的工号是HS001,工资是1500 
   document.write(person.name+'的工号是'+person.gongHao+',工资是'+person.money) 
</script>

对象属性值的修改

语法： 对象名 . 属性名 = 要修改的值

<script> 
// 将name属性的值修改为 刘美 
person.name='刘美'
 </script>

对象中方法的调用

语法： 对象 . 方法名称 ()

<script>
 // 方法调用
 person.skill() 
</script>

3.2 利用new Object创建对象

语法： new Object()

<script> 
var andy = new Object();
 andy.name = 'pink'; 
andy.age = 18;
 andy.sex = '男'; 
andy.sayHi = function(){ 
alert('大家好啊~');
 }
 </script>

3.3 利用构造函数创建对象

构造函数 : 是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符

一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

<script> 
function Person(name, age, sex) { 
this.name = name; // this.name 这里的name是对象的属性名称，等号后边的name 是要赋 的值 this.age = age; 
this.sex = sex; 
this.sayHi = function() {
 alert('我的名字叫：' + this.name + '，年龄：' + this.age + '，性别：' + this.sex); 
}
}
var bigbai = new Person('大白', 100, '男');
var smallbai = new Person('小白', 21, '男'); 
console.log(bigbai.name); 
</script>

3.4 随堂作业

1. 创建一个电脑对象，该对象要有颜色、重量、品牌、型号，可以看电影、听音乐、打游戏和敲代

码。

2. 创建一个按钮对象，该对象中需要包含宽，高，背景颜色和点击行为。

3. 创建一个车的对象，该对象要有重量、颜色、牌子，可以载人、拉货和耕田。

四、内置对象

4.1 Math对象

Math.PI // 圆周率
 Math.floor() // 向下取整
 Math.ceil() // 向上取整
 Math.round() // 四舍五入版 就近取整 注意 -3.5 结果是 -3 
Math.abs() // 绝对值 
Math.max() // 求最大值 
Math.min() // 最小值
 Math.random（） // 随机数

随堂练习 : 输出 1-10 范围内的随机数

<script>
 Math.ceil(Math.random()*10) 
</script>

4.2 Date对象

Date 对象和 Math 对象不同， Date 对象需要通过 new 关键字进行创建

语法： var 对象名称 = new Date()

方法名	作用	备注
getFullYear()	获取当前年份	4位数年份
getMonth()	获取当前月份	0-11表示1-12月
getDate()	获取当前日期
getDay()	获取星期几	周日0至周六6
getHours()	获取当前小时
getMinutes()	获取当前分钟
getSeconds()	获取当前秒钟
getTime()	获取时间戳	自1970年1月1日起至今的毫秒数

4.3 数组对象

var arr = []

数组名 . 方法 ()

数组对象方法

方法名	作用	说明
isArray()	判断对象是否为数组
push()	数组末尾添加一个或多个元素，修改原数组	返回新数组长度
pop()	删除数组最后一个元素，无参数，修改原数组	返回删除的元素值
shift()	删除数组的第一个元素，无参数，修改原数组	返回删除后数组的长度
unshift()	向数组开头添加一个或更多元素，修改原数组	返回新数组长度
indexOf()	数组中查找给定元素的第一个索引	存在返回索引号，不存在返回 -1
lastIndexOf()	数组中查找给定元素的最后一个索引	存在返回索引号，不存在返回 -1
toString()	把数组转成字符串，逗号分隔每一项	返回一个字符串
join(' 分隔符 ')	用于把数组中的所有元素转换为一个字符串	返回一个字符串
concat()	连接两个或多个数组不影响原数组	返回一个新的数组
slice()	数组截取 slice(begin,end)	返回被截取的新数组
splice	数组删除 splice( 第几个开始 , 要删除个数 )	返回被删除项目的新数组，影响原数组

slice() 和 splice() 目的基本相同，建议同学们重点看下 splice()

案例：筛选数组 **

有一个包含工资的数组 [1 500, 1200, 2000, 2100, 1800] 要求把数组中工资超过 2000 的删除，剩余的放到新数组里面

<script> 
var arr = [1500, 1200, 2000, 2100, 1800]; 
var newArr = []; 
for (var i = 0; i < arr.length; i++) { 
if (arr[i] < 2000) { 
newArr.push(arr[i]); 
   }
 }
console.log(newArr); 
</script>

练习： 数组去重 ( 重要重要重要重要重要 )

核心方法： indexOf()

4.4 字符串对象

方法名称	作用	备注
indexOf(' 要查找的字符 ', 开始位置 )	查找某字符在原字符串中首次出现的位置	返回指定内容的位置索引, 如果找不到返回-1
lastIndexOf	查找最后一次出现的位置	找到返回位置索引，找不到返回 -1
concat(str1,str2,str3,...)	连接两个或多个字符串，等同于 +	返回拼接后的字符串
substr(start,length)	字符串截取 , 从 start 位置开始 ,length 取的个数	返回截取后字符串
slice(start,end)	从 start 位置开始，截取到 end 位置， end 取不到	返回截取的字符串
substring(start,end)	从 start 位置开始，截取到 end 位置， end 取不到, 基本和 slice 相同 , 但不接受负值
replace()
split()
toUpperCase()	转为大写	返回转后的字符串
toLowerCase()	转为小写	返回转后的字符串