JavaScript基础

最新推荐文章于 2022-11-02 12:49:00 发布
最新推荐文章于 2022-11-02 12:49:00 发布
阅读量380 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42594761/article/details/107966229
版权

JavaScript的作用

1.表单动态校验
2.网页特效
3.服务端开发
4.桌面程序
5.控制硬件
6.游戏开发

HTML,CSS和JavaScript的区别

  • HTML决定网页内容
  • CSS决定网页模样
  • JS决定业务逻辑

JS的组成

在这里插入图片描述

js的三种书写位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    2.内嵌式的js-->
    <script>
        alert('dididi')
    </script>
<!--    3.外部js-->
    <script src="my.js"></script>

</head>
<body>
<!--1.行内式js 直接js代码写到内部-->
<input type="button" value="didi" onclick="alert('baba')">
</body>
</html>

js的注释

  • //单行
  • /**/多行

js的输入输出语句

1.alert 2.console 3.document.write()
在这里插入图片描述

 <script>
        //<!--   这是一个输入框-->
       prompt('请输入你的年龄')
       //aler 弹出警示框
       alert('计算的而结果是')
       // console 控制台输出
       console('程序员看的')
    </script>

变量

定义：变量是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改。
使用：1.声明 2.赋值 3.初始化

<script>
        //声明一个变量
        var age;
        // 赋值
        age=10;
        //输出
        console.log(age);
        //第二种方法，推荐
        //变量的初始化
        var myname='didi';
        console.log(myname);
    </script>

更新变量

 //更新变量
       var myname ='dididi';
       console.log(myname);
       var myname ='baba';
       console.log(myname);

声明多个变量

//声明多个变量
        var age=18,
            adress='gz',
            gz=2000;

声明变量的赋值情况

 //声明变量不赋值
        var sex;
        console.log(sex);//undefined
        //不声明不赋值
        console.log(tel);//报错
        /不声明直接赋值
        qq=110;
        console.log(qq)//110

变量的命名规范

  • 由字母(A-Za-z)、数字(0-9)、下划(_)、美元符号($)组成，如:usrAge,num01，_name
  • 严格区分大小写。varapp;和var App;是两个变量
  • 不能以数字开头。18age是错误的
  • 不能是关键字、保留字。例如: var、for、while
  • 变量名必须有意义。MMD BBD nl-age
  • 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName

数据类型

js的变量数据类型是在运行时，根据等号右边的值来判定数据类型的

这是一个数字型
var age = 10;
var areYouok =是的';W这是一个字符串

js是动态语言变量的数据类型是可以变化的

var x = 18; //×是数字型
x= "pink"; //×字符串型

数据类型的分类

  • 简单数据类型
    在这里插入图片描述

一.Number型

var num=10;//数字型
        var num2=12.1//数字型
        //1.八进制 0~7  数字前面加0，代表八进制
        var num3= 010;
        console.log(num3);//010 八进制
        //十六进制
        var num4=0x9;
        console.log(num4);
isNaN(）这个方法用来判断非数字―并且返回一个值如果是数字返回的是 false 如果不是数字返
回的是true
console.log(isNaN(12)); false
console.log(isNaN( "pink老师; true

二.String型

1.字符串引号嵌套
JS可以用单引号嵌套双引号，或者用双引号嵌套单引号(外双内单，外单内双)
var strMsg ='我是"高帅富"程序猿';/可以用' '包含""
var strMsg2="我是'高帅富'程序猿":，也可以用""包含' '
//常见错误
var badQuotes = 'what on earth?":1/报错，不能单双引号搭配

在这里插入图片描述
3.字符串长度

//检测字符串长度 length
var str='my name is andy';
console.lo(str.length);//15

4.字符串拼接 +

console.log('didi'+'dada');//dididada
console.log('pink'+18);//'pink老师18'
var age=18;
console.log('didi'+age+'岁');

三.boolean,undefined,null型

布尔型Boolean
布尔类型有两个值:true和false，其中true表示真(对〕，而false表示假（错).
布尔型和数字型相加的时候，true的值为1 ,false的值为0.
console.log(true + 1）；// 2
console.log(false + 1); // 1
//如果一个变量声明未赋值就是undefined 未定义数据类型
var str;
console.log(str);
var variable = undefined;
console.log(variable + "pink");// undefinedpink
console.log(variable + 1);// NaN      undefined和数字相加最后的结果是 NaN
 //null空值
var space = null;
console.log(space  "pink"); l nullpink
console.log(space + 1);1/1

四。typeof检测数据类型

var num=10;
console.log(typeof num); //number

数据类型的转换

在这里插入图片描述

<script>
      //把数字转为字符型 变量.toString
      var num=10;
      var str=num.toString();
      console.log(str);
      //利用String()
      console.log(String(num));
      //利用+拼接字符串的方法实现转换效果 隐式转换
      console.log(num+'');//10字符型
    </script>

2.转换为数字型
在这里插入图片描述

<script>
        //1.paseInt(变量） 可以把字符型转换为数字型 ，得到是整数
      var age=promt('请输入年龄');
      console.log(parseInt(age));
      console.log(parseInt('3.14'));//3
      console.log(parseInt('3.94'));//3
      console.log(parseInt('120px'));//120
      console.log(parseInt('rem120px'));//NaN
        //2.parseFloat(变量） 可以把字符型转换为数字型 ，得到是小数 浮点数
      console.log(parseFloat('3.14'));//3.14
        console.log(parseFloat('120px'));//120
        console.log(parseFloat('rem120px'));//NaN
        //3.利用Number(变量）
        var str='123';
        console.log(Number(str));//123
        console.log(Number('12'))//12
        //4.利用算数运算- * /隐式转换
        console.log('12'-0);//12
        console.log('123'-'120');//3
        console.log('123'*1);//123

    </script>

3.转换为布尔型
在这里插入图片描述

<script>
console.log(Boolean( ");// false
console.log(Boolean(0));//false
console.log(Boolean(NaN));//false
console.log(Boolean(nul1));// false
console.log(Boolean(undefined));// false
console.log("------------------------------");
console.log(Boolean( "123"));//ture
console.log(Boolean('你好吗'));//ture
console.log(Boolean("我很好"));//ture
</script>

运算符

  1. 算数运算符

在这里插入图片描述

<script>
console.log(1 + 1);// 2
console.log(1 - 1);// e
console.log(1 * 1);// 1
console.log(1 / 1);// 1
// 1．%取余―（取模）
console.log(4 % 2);//0
console.log(5 % 3);//2
console.log(3 % 5); //3
// 2．浮点数算数运算里面会有问题
console.log(0.1 +0.2);// 0.3000008e00e0e08e4
console.log(0.07 *100);// 7.0008088080a2021
// 3．我们不能直接拿着浮点数来进行相比较是否相等
var num = 0.1 + 0.2;
console.log(num == 0.3);// false
//表达式是由数字、运算符、变量等组成的式子我们称为表达式1 +1
console.log(1 +1);// 2就是返回值
//在我们程序里面2=1+1
把我们的右边表达式计算完毕把返回值给左边
var num = 1 +1;
</script>

2.自增自减运算符

// 前置递增运算符++写在变量的前面
var age = 10;
++age; //类似于age = age + 1
console.log(age);
// 3．先加1后返回值
var p = 10;
console.log(++p +10);//21

//后置自增运算符
<script>
var num = 10;
num++; // num = num +1  ++num;
console.log(num);
// 1．前置自增和后置自增如果单独使用效果是一样的
// 2．后置自增口诀:先返回原值后自加1
var age = 10;
console.log(age++ +10);
console.log(age);//20
</script>

3.比较运算符
在这里插入图片描述
4.逻辑运算fu
在这里插入图片描述

<script>
//1．逻辑与&&and 两侧都为true结果才是true只要有一侧为false结果就为false
console.log(3 >5 &8 3 >2);// false
console.log(3 < 5 && 3 >2);// true
//2．逻辑或 or两侧都为false结果才是假 false只要有一侧为true结果就是true
console.log(3 >5 ll3 >2);// true
console.log(3 >5 ll3 <2)；// false
//3．逻辑非not!
console.log(!true);// false
//4.逻辑中断
//逻辑与短路运算如果表达式1结果为真则返回表达式2︰如果表达式1为假那么返回表达式1
console.log(123 &&456);// 456
console.log(0 && 456);//0
console.log(0 8& 1 +2 88 456 * 56789);//0
console.log('' && 1 +2 && 456 *56789);//''
//如果有空的或者否定的为假其余是真的 0'' null undefined NaN
/script>

在这里插入图片描述
5.赋值运算符
在这里插入图片描述

var age = 10;
age += 5;//相当于age = age + 5;
age -= 5;1/相当于age = age - 5;
age *= 10; 1/相当于age = ags,* 10;

6.运算符优先级
在这里插入图片描述

流程控制

1.if语句

//2．执行思路―如果if 里面的条件表达式结果为真true则执行大括号里面的执行语句
//如果if 条件表达式结果为假则不执行大括号里面的语句则执行if 语句后面的代码
if (3<5){
lalert('沙漠骆驼');
}

2.if else语句

// 1．语法结构if如果else否则
//l if(条件表达式）{
//    //执行语句1
// }else {
//   //执行语句2
// }
/// 2．执行思路如果表达式结果为真那么执行语句1否则执行语句2
// 3．代码验证
var age = prompt('请输入您的年龄:);
if (age >= 18）{
algrt('我想带你去网吧偷耳机');
}else {
alert('滚，回家做作业去');
}
// 5.if里面的语句1和else里面的语句2 最终只能有一个语句执行

3.if else if

//使用多分支if else if语句来分别判断输出不同的值
var score = prompt('请您输入分数:");
if (score >= 90){
alert('宝贝，你是我的骄傲');
}else if (score >= 80) {
alert('宝贝，你已经很出色了');
}else if (score >= 70){
alert('你要继续加油喽');
}else if (score >= 60){
alert('孩子，你很危险');
else {
alert('熊孩子，我不想和你说话，我只想用鞭子和你说话');
}

4.三元表达式
在这里插入图片描述
5.switch

switch(2){
case 1:
console.log('这是1');
break;
case 2:
console.log('这是2');
break;
case 3:
console.log('这是3');
break;
default:
console.log('没有匹配结果');
}

循环

在这里插入图片描述
1.for循环

for (var i = 1; i <= 10o;i++) {
console.log('你好吗');
}
//1.求1-100之间所有数的平均值―需要一个sum和的变量还需要一个平均值 average变量
var sum = o;
var average = o;
for (var i = 1; i <= 100; i++){
sum = sum + i;
}
average = sum / 100;
console.log(average);
//2．求1-100之间所有偶数和奇数的和，我们需要一个偶数的和变量even还需要一个奇数odd
var even = o;
var odd = 0;...
for (var i = 1; i <= 100; i++) {
if (i% 2 = 0){
even = even +i;
}else {
odd = odd + i;}}
console.log('1~100之间所有的偶数和是’+ even);
console.log('1~100之间所有的奇数和是’+odd);
//3．求1-100之间所有能被3整除的数字的和
var result = o;
for (var i = 1; i <= 100; i++) {
if( i % 3 == 0) {
result = result + i;
}
}

2.while循环

var num = 1;
while (num <= 100){
console.log('好啊有');
num++:I
}

3.do while 循环

var i = 1;
do {
console.log( " how are you?");
i++;
while (i <= 100)

continue 和break

在这里插入图片描述

// 1．求1~100之间，除了能被7整除之外的整数和
var sum = o;
for (var i = 1; i <= 100; i++){
if (i % 7 ==0) {
continue;
sum += i;

break

// break 退出整个循环
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break;}
console.log('我正在吃第’+i +'个包子');

数组

//1.数组(Array):就是一组数据的集合存储在单个变量下的优雅方式
// 2．利用new创建数组
var arr = new Array();//创建了一个空的数组
 //3．利用数组字面量创建数组门
var arr = [];//创建了一个空的数组
var arr1 = [1，2，"pink老师',true];
// 4．我们数组里面的数据一定用逗号分陪
// 5．数组里面的数据比如1,2，我们称为数组元素
//6．获取数组元素﹐格式 数组名[索引号] 索引号从0开始
console.log(arr1);
console.log(arr1[2];//pink老师
console.log(arr1[3];// true
var arr2 =[’迪丽热巴"，"古丽扎娜"，"佟丽丫丫'];
console.log(arr2[0];
console.log(arr2[1]);
console.log(arr2[2];
console.log(arr2[3]);1/因为没有这个数组元素所以输出的结果是undefined
/script>
//数组的遍历
var arr=['red','grean','blue'];
    for (var i=0;i<3；i++）{
    console.log(arr[i]);
    }
//或者
console.log(arr.length);
        for (var i = 0; i < arr.length; i++) {
            console.log(arr[i]);
        }
//数组新增元素
var arr=['red','grean','blue'];
arr1[3]='pink';
console.log(arr);

冒泡排序

var arr=[5,4,3,2,1];
for (var i = 0; i < arr.length-1; i++) {
            for (var j = 0; j < arr.length-1-i; j++) {
                if(arr[j]<arr[j+1]){
                    var temp=arr[j];
                    arr[j]=arr[j+1];
                    arr[j+1]=temp;
                }
            }
        }

函数

//3．函数就是封装了一段可以被重复执行调用的代码块目的:就是让大量代码重复使用
function getsum(numi,num2){
var sum = 0;
for (var i=num1; i <= num2;i++) {
 sum += i;
)
console.log(sum);
}
getSum(1,100);
getSum(10,0);

1.函数的使用

函数使用分为两步:声明函数和调用函数
 //．声明函数
function sayHi(）{
console.log( 'hi');
}
// (1）function声明函数的关键字全部小写
// (2）函数是做某件事情，函数名一般是动词sayHi
//(3）函数不调用自己不执行
// 2．调用函数
//函数名(;
sayHi(）;
//调用函数的时候千万不要忘记加小括号

2.函数的参数

//2．我们可以利用函数的参数实现函数重复不同的代码
// function函数名(形参1,形参2...){//在声明函数的小括号里面是形参（形式上的参数
//}
//函数名(实参1,实参2...);//在函数调用的小括号里面是实参（实际的参数)
// 3．形参和实参的执行过程
function cook(aru){//形参是接受实参的 aru = '酸辣土豆丝’形参类似于一个变量
console.log(aru);
}
cook("酸辣土豆丝");
cook("大时子");
 4。函数的参数可以有，也可以没有个数不限

3.函数的返回值

//2。函数的返回值格式
 function函数名（）{
return需要返回的结果;
}
//函数名(;
l/(1）我们函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名(）通过return实现的
1/(2）只要函数遇到return 就把后面的结果返回给函数的调用者旳函数名()= return后面的结果
 3．代码验证.
function getResult(）{
return 666;
}
getResult();//getResult() =666
console.log(getResult());
//
function cook(aru){
return aru;
}
console.log(cook('ddada'));
//return的注意事项
// 1.return 终止函数
function getsum(num1,num2){
return num1 +num2; // return后面的代码不会被执行
alert("我是不会被执行的哦!")//这句不会执行
console.log(getsum(1，2));
// 2. return只能返回一个值
function fn(num1，num2) {
return num1,num2;//返回的结果是最后一个值
}
console.log(fn(1，2));//2
//3.我们求任意两个数的加减乘数结果
function getResult(num1,num2){
return[num1 + num2，num1 - num2，num1 * num2，num1/ num2];
var re = getResult(1，2);//返回的是一个数组
console.log(re);
//4．我们的函数如果有return则返回的是return后面的值，如果函数么有return则返回undefined
function fun1( ){
return 666;
}
console.log(fun1());//返回666
function fun2(){
}
console.log(fun2());//函数返回的结果是undefined

4.函数的调用

//函数是可以相互调用的
function fn1(){
console.log(11);
fn2();//在fn1函数里面调用了 fn2函数
}
fn1();
function fn2(){
console.log(22);
}
//执行结果为先执行fn1()，再执行fn2()  1122

在这里插入图片描述

在这里插入图片描述
5.函数的声明方式

//函数的2中声明方式
// 1，利用函数关键字自定义函数(命名函数)
function fn(){
}
fn();
// 2．函数表达式(匿名函数)|
// var变量名= function() {};
var fun = function(aru) {
console.log("我是函数表达式');
console.log(aru);
}
fun("pink老师");
//(1) fun是变量名不是函数名
//(2）函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值而函数表达式里面存的是函数
// (3）函数表达式也可以进行传递参数

arguments的使用

当我们不确定有多少个参数传递的时候，可以用arguments来获取。在JavaScript中, arguments实际上
它是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中存储了传递的
所有实参。
arguments展示形式是一个伪鼓组，因此可以进行遍历。伪数组具有以下特点∶
1…具有length属性
2.按索引方式储存数据
3.不具有数组的push , pop等方法

// arguments的使用― 只有函数才有arguments对象而且是每个函数都内置好了这个arguments
function fn(){
//console.log(arguments);//里面存储了所有传递过来的实参 arguments = [1,2,3]
//console.log(arguments.length);
 //console.log(arguments[2]);
//我们可以按照数组的方式遍历arguments
for (var i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
}
fn(1，2，3);
fn(1，2，3，4，5);
arguments是伪数组并不是真正意义上的数组
//1．具有数组的length属性
///2．按照索引的方式进行存储的
//3．它没有真正数组的一些方法 pop(push()等等

JavaScript的作用域

// 1.JavaScript作用域:就是代码名字（变量）在莱个范围内起作用和效果 目的是为了提高程序的可靠性更
//重要的是减少命名冲突
//2．js的作用域（es6）之前:全局作用域局部作用域
//3，全局作用域:整个script标签或者是一个单独的js文件
var num = 10;
console.log(num);//10
//4．局部作用域（函数作用域）在函数内部就是局部作用域这个代码的名字只在函数内部起效果和作用
function fn(){
//局部作用域
var num = 28;
console.log(num);//28
)
fn();

2.变量的作用域

//变量的作用域:根据作用域的不同我们变量分为全局变量和局部变量
// 1．全局变量:在全局作用域下的变量在全局下都可以使用
//注意如果在函数内部没有声明直接赋值的变量也属于全局变量
var num = 10; //num就是一个全局变量
console.log(num);
function fn(){
console.log(num);
}
fn();
console.log(aru);//这里会报错，因为aru是函数fun的形参，形参也是一个局部变量
//2．局部变量―在局部作用域下的变量―后者在函数内部的变量就是局部变量
//函数的形参也可当是局部变量
function fun(aru){
var num1 = 10; // num1就是局部变量只能在函数内部使用
num2 = 28;//num2是没声明直接赋值的，所以是全局变量
}
fun();
 console.log(num1);//会报错，局部变量不能在外部调用
console.log(num2);//不会报错
//3．从执行效率来看全局变量和局部变量
(1）全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
(2）局部变量当我们程序执行完毕就会销毁，比较节约内存资澜
//js中在es5前没有块级作用域﹐js的作用域:全局作用域﹐局部作用域﹑现阶段我们js没有块级作用域
//我们js 也是在es6 的时候新增的块级作用域
//块级作用域{} if{} for{}
//java
// if(xx）{
//int num =18;
//}
//外面的是不能调用num的
if(3<5）{
var num = 10;
}
console.log(num);//10

3.作用域链

//作用域链:内部函数访问外部函数的变量，采取的是链式查找的方式来决定取那个值这种结构我们称为作
//用域链就近原则
var num = 10;
function fn(){//外部函数
   var num = 28;
   function fun(){//内部函数
     console.log(num);//28
)
  fun();
}
fn();

JavaScript的预解析

1．我们js引擎运行js分为两步: 预解析―代码执行
(1)．预解析js引擎会把js里面所有的 var还有 function 提升到当前作用域的最前面
(2)．代码执行―按照代码书写的顺序从上往下执行
2，预解析分为变量预解析（变量提升）和函数预解析（函数提升）
(1）变量提升就是把所有的变量声明提升到当前的作用域最前面︰不提升赋值操作
(2）函数提升就是把所有的函数声明提升到当前作用域的最前面旳不调用函数

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
结果为undefined 20

//相当于以下代码
 var num;
function fn() {
var num;
console.log(num);
num = 20;
console.log(num);
num =10;
fn();

在这里插入图片描述

在这里插入图片描述

JavaScript对象

1.对象创建的三种方式

1.利用对象字面量创建对象{
//var obj ={} ;//创建了一个空的对象
var obj = {
uname:‘张三疯"，
age: 18,
sex:‘男”，
sayHi: function( i
console.log( " hi~');
)
}
//(1）里面的属性或者方法我们采取键值对的形式键属性名:值属性值
// (2）多个属性或者方法中间用逗号隔开的
 //(3）方法冒号后面跟的是一个匿名函数
 2．使用对象
//(1)．调用对象的属性我们采取 对象名.属性名．我们理解为的
console.log(obj.uname);
//(2)．调用属性还有一种方法 对象名[·属性名"]
console.log(obj[ "age"];
//(3）调用对象的方法 sayHi 对象名.方法名(）千万别忘记添加小括号
obj.sayHi();
2.利用new object 创建对象
var obj = new object();//创建了一个空的对象
obj.uname =‘张三疯";
obj.age = 18;
obj.sex =‘男";
obj.sayHi = function() {
console.log("hi~");
}
(1）我们是利用等号=赋值的方法添加对象的属性和方法
 (2）每个属性和方法之间用分号结束
console.log(obj.uname);
console.log(obj["sex"]);
obj.sayHi();
3.利用构造函数创建对象
//我们需要创建四大天王的对象︰相同的属性:名字年龄性别相同的方法:唱歌
//构造函数的语法格式
function 构造函数名(){
this.属性=值;
this.方法= function(){}
}
//new构造函数名;
function star(uname,age,sex){
this.name = uname;
this.age = age;
this.sex = sex;
}
var ldh = new Star("刘德华'，18，‘男');// 调用函数返回的是一个对象
var zxy = new star("张学友"，19，"男");
console.log(zxy.name);
console.log(zxy.age);
1，构造函数名字首字母要大写
2．我们构造函数不需要return就可以返回结果
3．我们调用构造函数必须使用new
4．我们只要new star(调用函数就创建一个对象ldho
5．我们的属性和方法前面必须添加this

在这里插入图片描述
2.遍历对象

//遍历对象
var obj= {
name: "pink老师”，
age: 18,
sex:‘男"，
fn: function() {}
}
for in 遍历我们的对象
 for(变量in 对象）{
}
for (var k in obj){
console.log(k);//k 变量 输出 得到的是 属性名
console.log(obj[k]);//obj[k] 得到是 _属性值

内置对象

1.Math对象
在这里插入图片描述

//Math数学对象不是一个构造函数，所以我们不需要new来调用而是直接使用里面的属性和方法即可
console.log(Math.P);11一个属性圆周率
console.log(Math.max(1,99,3));/ 99
console.log(Math.max(-1，-1e);-1
console.log(Math.max(1,o9, "pink老师;// NaN
console.log(Math.max0;r -Infinity

random
在这里插入图片描述
2.日期对象
在这里插入图片描述

//格式化日期 年月日
var date = new Date();
console.log(date.getFullYear());//返回当前日期的年2019
console.log(date.getMonth()+1);//月份返回的月份小1个月―记得月份+1呦
console.log(date.getDate());//返回的是几号
console.log(date.getDay());// 3  周一返回的是1周六返回的是6但是周日返回的是0
//我们写一个2819年 5月1日星期三
var year = date.getFullYear();
var month = date.getMonth( )+1;
var dates = date.getDate();
var arr =['星期日’，‘星期一'，'星期二'，‘星期三'，'星期四'，·星期五'，'星期六'];
var day = date.getDay();
console.log('今天是:'+year +'年’ +month + '月’+dates +'日'+ arr[day]);

在这里插入图片描述
在这里插入图片描述
3.数组对象

//创建数组的两种方式
//1．利用数组字面量
var arr = [1，2，3];
console.log(arr[0];
//2．利用new Array（）
 var arr1 = new Array();//创建了一个空的数组
 var arr1 = new Array(2);//这个2表示数组的长度为②里面有2个空的数组元素
var arr1 = new Array(2， 3);//等价于[2,3]这样写表示里面有2个数组元素是2和3
console.log(arr1);
添加删除元素
 1. push(）在我们数组的末尾添加一个或者多个数组元素push推
var arr = [1，2，3];
arr.push(4，"pink");
console.log(arr.push(4,"pink"));
console.log(arr);
 （1)push 是可以给数组追加新的元素
 (2)push()参数直接写数组元素就可以了
 (3)push完毕之后，返回的结果是新数组的长度
 (4）原数组也会发生变化
 2. unshift在我们数组的开头添加一个或者多个数组元素
console.log(arr.unshift("red", "purple"));
console.log(arr);
 (1)unshift是可以给数组前面追加新的元素
(2)unshift(参数直接写数组元素就可以了
 (3) unshift完毕之后，返回的结果是新数组的长度
(4)原数组也会发生变化
 3. pop(）它可以删除数组的最后一个元素
console.log(arr.pop());
console.log(arr);
(1） pop是可以删除数组的最后一个元素记住一次只能删除一个元素
(2) pop(）没有参数
(3）pop完毕之后，返回的结果是删除的那个元素
 (4）原数组也会发生变化
4. shift()它可以删除数组的第一个元素
console.log(arr.shift());
console.log(arr);
(1）shift是可以删除数组的第一个元素记住一次只能除一个元素
(2) shift()没有参数
 (3) shift完毕之后，返回的结果是删除的那个元素
 (4）原数组也会发生变化

数组的排序

数组排序
 1．翻转数组
var arr = [ "pink", "red", "blue"];
arr.reverse(;
console.log(arr);
2．数组排序（冒泡排序）
var arr1 = [13，4，77，1，7];
arr1.sort(function(a,b){
return a - b;//升序的顺序排列
return b - a; //降序的顺序排列
}）;
console.log(arr1);

数组的索引
在这里插入图片描述

1.返回数组元素素引号方法indexof(数组元素)
作用就是返回该数组元素的索引号从前面开始查找
它只返回第一个满足条件的索引号
它如果在该数组里面找不到元素，则返回的是-1
 var arr= [ "red", "green","blue", "pink", "blue"];
var arr = [ "red", 'green', "pink"];
console.log(arr.indexof("blue");
2.返回数组元素索引号方法 lastIndexOf(数组元素)作用就是返回该数组元素的索引号从后面开始查找
var arr = [ "red', "green", "blle", "pink", "blue"];
console.log(arr.lastIndexof('blue'));//4

数组转换为字符串
在这里插入图片描述

数组转换为字符串
1. tostring(）将我们的数组转换为字符串
var arr =[1，2，3];
console.log(arr.tostring());// 1,2,3
2. join(分隔符）
var arr1 = ["green', "blue', "pink"];
console.log(arr1.join());// green,blue,pink
console.log(arr1.join("-'));//  green-blue-pink
console.log(arr1.join('&')); //green&blue&pink

在这里插入图片描述

根据位置返回字符
1.charAt(index）根据位置返回字符
var str = "andy";
console.log(str.charAt(3));
//遍历所有的字符
for (var i =e; i < str.length; i++) {
console.log(str.charAt(i));}
2. charCodeAt(index)返回相应索引号的字符ASCII值目的:判断用户按下了那个键
console.log(str.charCodeAt(e); // 97
3. str[index] H5 新增的
console.log(str[e];///a

在这里插入图片描述

字符串操作方法
// 1. concat("穿符串1”,'字符串2"....)
var str = "andy";
console.log(str.concat( "red"));
//2. substr(截取的起始位置"，"截取几个字符");
var str1 =‘改革春风吹满地';
console.log(str1.substr(2，2));//第一个2是索引号的2从第几个开始  第二个2是取几个字符
//3.．替换字符replace('被替换的字符’，'替换为的字符)它只会替换第一个字符
var str = "andyandy';
console.log(str.replace('a", "b');
有一个字符串"abcoefoxyozzopp’要求把里面所有的○替换为*
var str1 = "abcoefoxyozzopp";
while (str1.indexof("o')!== -1){
str1 = str1.replace("o",'*');
}
console.log(str1);
//4．字符转换为数组split("分隔符")
前面我们学过join 把数组转换为字符串
var str2 = "red,pink,blue";
console.log(str2.split(","));
var str3 = "red&pink&blue";
console.log(str3.split("&');

在这里插入图片描述

在这里插入图片描述

puber~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript基础
08-09
javascript基础，适合零基础或初学者简单简洁 ，易于理解
控制台输出console.log()的用法
qq_zxt的博客
04-15 2万+
用console.log代替alert和document.write，工作会变得轻松。用console.log在控制台展开对象查看具体信息，可以直接看到对象信息，而不会显示[object Object]令我们一头雾水。 console里面具体有哪些方法： 此时可以看到上图有log,info,error,warn,debug方法: 1.console.log用于输出普通信息 2.co
前端Javascript第二天知识点：运算符
m0_46597922的博客
04-21 398
1. 运算符 运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。 JavaScript中常用的运算符有： 算数运算符 递增和递减运算符 比较运算符 逻辑运算符  赋值运算符 2. 算数运算符 2.1 算术运算符概述 概念：算术运算使用的符号，用于执行两个变量或值的算术运算。 2.2 浮点数的精度问题 浮点数值的最高精度是 17 位小数，但在进行算术计...
思考下面 console.log 语句打印内容
qq_27852041的博客
02-21 384
思考下面 console.log 语句打印内容 var flag = new Boolean(false); if(flag) { console.log('true'); }else{ console.log('false'); } // 答案: true 有趣的代码就在 代码秀
javascript百炼成仙 第一章 掌握JavaScript基础01 初入宗门
热门推荐
java小白翻身
10-06 17万+
乐阳村，处于脚本大陆东部的边缘地带，民风淳朴，村名日出而作，日落而息。这一日清晨，所有村民来到村庄的门口，正在为一个十五六岁的少年送别。只见那少年虽然身体瘦弱，可是目中绽放出异彩，身躯虽不壮实，倒也挺拔。 “叶小凡，你是我们全村人的骄傲，百年来唯一一个具备修行JavaScript甲等资质的孩子！马上会有千鹤派的大人来接你，今后你一定要认真修行，给我们全村的人争光！” 他叫叶小凡，几天前通过了修行资质的检验，符合修行JavaScript的资质。 “千鹤派！”叶小凡眼前一亮，语气中伴随着激动，两眼放光。千鹤派，
JavaScript基础大总结
Augenstern_QXL的博客
07-31 13万+
✍初始JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 ????浏览器执行JS简介 浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读
JavaScript基础（详细总结）
程序员阿龙的博客
08-18 1万+
JavaScript基础入门详细总结
JavaScript基础语法
m0_67683346的博客
11-02 5621
javascript中的一些基础语法
JavaScript 基础概念
weixin_52682120的博客
04-20 3060
1 JavaScript 概念 1.1 什么是JavaScript（简称“JS”）？ 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。 【脚本语言、基于对象、动态交互、跨平台性】 1.2 语言组成 ①ECMAScript，描述了该语言的语法和基本对象。 ②文档对象模型（DOM），描述处理网页内容的方法和接口。 ③浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。 1. 3 JavaScript的标准是? JavaScript已经被Netscape公司提交给ECMA制定为标准，称之为E
javascript百炼成仙 第一章 掌握JavaScript基础 1.2直接量
java小白翻身
10-06 7万+
叶小凡的住处被安排在青山院西北角的一个房间里，虽不宽敞，倒也干净。叶小凡两眼露出振奋的眼神，随便吃了点乡亲们准备的干粮后，就立刻开始打坐修行。编程之修，重在积累，而非资质。资质虽然一样重要，可是后天的努力一样必不可少。这些道理，叶小凡还未上山之前，就已经熟知！因此，即便是资质平凡，只要肯下苦功，一样可以修得正果！叶小凡虽然甲等资质，可依然不骄不躁，开始从“JavaScript基础修炼要诀”第一页开始看起。 修炼要诀第一章，直接量。 编程世界，所谓直接量，就是明面上可以见到的数据值。常见的直接量有数字，小数，
JavaScript基础入门
dangfulin的博客
08-21 5442
一，什么是JavaScript 1，与Java无关！与Java无关！与Java无关！ JavaScript是一种为网站添加互动以及自定义行为的客户端脚本语言， 通常只能通过Web浏览器去完成操作， 而无法像普通意义上的程序那样独立运行。 JavaScript是一种轻量级、解释型的 Web 开发语言，该语言系统不是很庞杂，简单易学。由于所有现代浏览器都己嵌入了JavaScript引擎、JavaScript 源代码可以在浏览器中直接被解释执行，用户不用担心支持问题。 JavaScript的引入，符合”渐进增
JavaScript 基础
02-16
主要为个人学习笔记 超详细
物联网工程_基于RFID的食堂食品安全监测系统设计.docx
07-20
物联网工程_基于RFID的食堂食品安全监测系统设计
VisualSVN-VS2022
最新发布
07-20
VisualSVN-VS2022-8.0.5.vsix SVNVS插件，使用VS自带更新速度太慢，可下载后直接安装即可
基于PSO优化的BP神经网络训练与测试matlab仿真，包括程序，注释，参考文献，操作步骤
07-20
1.版本：matlab2022A。 2.包含：程序，中文注释，参考文献，仿真操作步骤（使用windows media player播放）。 3.领域：PSO优化的BP神经网络 4.仿真效果：仿真效果可以参考博客同名文章《基于PSO优化的BP神经网络训练与测试matlab仿真》 5.内容：基于PSO优化的BP神经网络训练与测试matlab仿真。粒子群优化（Particle Swarm Optimization, PSO）结合BP（Backpropagation）神经网络是一种常见的优化方法，用于提升神经网络的学习能力和泛化能力。PSO不仅帮助BP神经网络找到了一个较好的初始解，从而可能加快了训练过程并提高了最终模型的质量，而且还能探索到更广泛的解空间，有助于避免局部最优解。 6.注意事项：注意MATLAB左侧当前文件夹路径，必须是程序所在文件夹位置，具体可以参考视频录。
超详细讲C++cout语句
07-20
超详细讲C++cout语句，专门为C++初学者录制。
java基于ssm+jsp网络安全宣传网站系统源码 带毕业论文
07-20
【资源说明】 1、开发环境：ssm框架；内含Mysql数据库；JSP技术 2、该资源包括项目的全部源码，下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。
java基于ssm+jsp奶茶店管理系统源码 带毕业论文
07-20
【资源说明】 1、开发环境：ssm框架；内含Mysql数据库；JSP技术 2、该资源包括项目的全部源码，下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。
javaScript基础
07-04
以下是一些JavaScript的基础概念： 1. **变量**：在JavaScript中，不需要预先声明就可以使用变量。可以直接赋值给变量名。例如： ```javascript let name = "John Doe"; ``` 2. **数据类型**：主要有字符串...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值