ES5基础语法注意问题

最新推荐文章于 2024-07-28 20:27:10 发布

非洲小朋友(๑°3°๑)

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量101

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_64266012/article/details/128391498

版权

1.JS学习笔记

1.1输入输出

var s1 = prompt('数字:');//弹窗输入,系统默认输入的类型为字符类型；
alert();//弹窗输出；
console.log();//控制台输出，一般是程序员看的；
console.log('今年'+i+'岁了');//i是自定义的变量，输出i;口诀：引引加加

1.2字符串类型转换

1.2.1隐世类型转换

JavaScript是一门松散类型、动态类型的语言。所以不需要指定变量的数据类型；

转换规则：将当前数据类型转换成当前环境中应该使用的数据类型。

例如：

var h = prompt("行数:");   //h输入为string类型；
        var l = prompt('列数:');  //l输入为string类型；
        for (var i=1;i<=h;i++) { // i <= h中，i本应为number类型，为了比较，隐式转为了string类型。
            for (var j = 1; j <= l; j++) {  // j <= l，这里也一样
                str = str + '☆';
            }
            str = str + '\n'
        }
        console.log(str);

注意：

如果一个对象里面既有toString和valueOf的方法，则对该对象进行运算时优先取valueOf的值，没有就取toString的值，如若两个只有其中一个，则有那个就调用那个

({toString:function(){return "100";},valueOf:function(){return 10;}})+3//结果13

1.2.2显式类型转换

转化为字符串类型：

方式一：调用toString()方法
var number = 123;//整型
number = number.toString();//用变量保存转化结果
console.log(typeof number);//字符型
//null和undefined这两个类型的值是没有toString()方法的。

方式二：调用String()函数
// number类型和boolean类型
var number = 123;
number = String(number);
console.log(typeof number);//输出：string
console.log(number);输出：123（黑色代表string类型）
//它会将null 直接转换为“null”，将undefined直接转换为“undefined”。

推荐
方式三：拼接字符串
将一个任意的数据类型转换为String，只需要为任意的数据类型 + 一个""空串，即可将其转换为String类型。
var bool = false;
bool = bool + '';
console.log("bool type = " + typeof bool);//+是输出的东西，
//该语句输出为bool type = string 
console.log("bool = " + bool);//该语句输出为bool type = false

转化为number型：

//方式一：调用parseint()方法：整数型,不能转换布尔类型
//注意：从左往右扫描，直到扫描到不是数字的时候，把前面已经扫描到的能转换的，先转换，剩余的不要，例如，112cm->112
 var age = prompt(12);
 console.log(age);  //此时变量为字符型
console.log(typeof age);  //变量类型查询 
// console.log(parseInt(age));  //临时转换 
var ageInt = parseInt(age);  //转换为整型（永久） 
console.log(ageInt);    //打印数值 
console.log(typeof ageInt);   //验证变量类型
//如果涉及到运算，那么对结果取整数位（忽略四舍五入） 
//如果涉及到px等单位，则自动截断保留整数


//方式二：调用parsefloat()方法：浮点型
var tmp = '3.678';   //定义一个string类型变量
console.log(tmp);    
console.log(typeof tmp);  //变量类型查询
// console.log(parseFloat(age));  //临时转换
var tmpFloat = parseFloat(tmp);   //变量类型转换
console.log(typeof tmpFloat);   //变量类型查询

//其它在转换case
console.log(parseFloat('3.14'));  
console.log(parseFloat('120px'));    //回显：120
console.log(parseFloat('rem123px')); //回显：NaN  意为not a number

//方式三：Number()函数转换，
 var str  = '123';     //定义变量
console.log(str);   //打印变量
// console.log(Number(str));    //临时转换变量类型
var strNum = Number(str);     //转换变量类型
console.log(typeof strNum);   //变量类型查询
//注意：可以转换布尔值

//方式四：利用算数类型转换，隐式转换
 console.log('20' - 0);  
console.log(('123' - '120'));
console.log(('123' / '4'));
//运算结果均为“number”类型，+法不行。

1.3 函数

1.3.1 函数的注意点

声明函数关键字：function ，默认返回undefined

函数传参中在写形参时，不需要写形参类型。

如若传参传的是对象，则形参的改变会改变实参的值

例如：求1,100之间的所有数的和。

  function jia(a, b) {
            var sum = 0;
            for (var i = a; i <= b; i++) {
                sum += i;
            }
            console.log(sum);
        }
        var j = 1,
            i = 100;
        jia(j, i);

注意：

1：实参个数大于形参个数，会按照形参个数；

2：实参个数小于形参个数，则多的形参定义为undefined，结果为NaN;

1.3.2 Arguments

使用伪数组存储所有传递到函数的实参，可以使用到不确定有几个实参的场景；

伪数组：

1：具有数组length的属性；

2：按照索引方式来存储；

3：没有真正的数组方法 pop()等；

注意：只能用在函数，且是内置对象

 <script>
    function add() {
      for (var i = 0; i < arguments.length; i++) {
        console.log(arguments[i] + " ");
      }
    }
    var a = add(1, 8, 6, 966, 'aef', 0);
  </script>

1.3.3 函数声明方式

1:
var 变量名 = function(形参){
    
};
变量名(实参);

2:
function 函数名(形参){
    ***
}

注意：没有函数名字，称为匿名函数；

1.3.4 作用域链

var num =10;
function fn()
{
    var num =50;
    function fun()
    {
        console.log(num);// 50
    }
}
//作用域链：内部函数访问外部函数的变量，采取的链式往上查找来决定取哪一个值。（就近原则）

1.3.5 预解析

变量提升：把所有的变量声明提升到当前作用域最前面，不提升赋值操作；

函数提升：把所有的函数声明提升到当前作用域最前面，不调用函数；变量提升：

 console.log(b);                    //undefined
      var b = 20;
      console.log(b);                  //20

      f1();
      function f1() {
        console.log(num);           //undefined
        var num = 200;
        console.log(num);           //200
        console.log("f1 function");// f1 function
      }

var b=200;分为了声明变量和赋值两个部分，即var b;b=200;JS只会把var b提前到当前作用域的顶端，所以代码变成了var b;console.log(b); b=20;所以会报错undefined。函数声明也会提前，但是函数表达式不行

1.4 对象

1.4.1 创建对象

1、用对象字面量创建

var 对象名 ={
    uname:'***',
    age:**,
    sex:'**',
    sayHi:function(){
        ******
    }
}

2、用new object创建

var 对象名=new object();
对象名.uname='**';
对象名.age=**;
对象名.sayHi=function(){
    ****
}

3、用构造函数创建

function 构造函数名(形参1，形参2...){
    this.属性=形参1;
    this.方法=function(形参1...){
        ********
    }
}
var 对象名 = new 构造函数名(实参1，实参2...);//调用

1.4.2 调用对象

1、对象名[‘属性名’] 注意有引号

2、对象名.属性名，对象名.方法名()

1.4.3 遍历对象

语法格式：for(变量 in 对象){}

for(var k in obj){
    console.log(k);//k 变量 输出 得到的是  属性名
    console.log(obj[k]);// 得到的是 属性值
}

注意：可以修改对象

可以通过instanceOf可以判断某对象是否为某构造函数的示例；

如：tom instanceof Person

Person:是构造函数，tom是对象

可以把构造函数里面的方法，可以放在原型函数上面prototype

如 Person.prototype.函数名=function(){

}

1.5 数组对象

1.5.1 函数创建数组

var arr1=new array();//创建了一个空数组
var arr1=new array(2);//创建了一个长度为2的空数组
var arr1=new array(2,3);//表示里面有两个元素为2,3   等价于[2,3]

1.5.2 检测是否为数组类型

方法一：instanceof
数组名+instanceof Array;//是就返回True,否则返回False

方法二：Array.isArray()
Array.isArray(数组名)；//是就返回True,否则返回False

1.5.3 修改数组函数

push(添加内容)：在数组最后添加一位或者多位元素，并返回数组新的长度；
unshift(添加内容)：在数组开头添加一位或者几位元素，并返回数组新的长度；
pop()：删除最后一个数组元素，并且返回该元素；
shift()：删除数组的第一个元素，并且返回该元素；

splice()：在任意位置给数组添加、删除、替换任意个元素，并返回包含了被删除元素的数组。

Array.splice(start,delete，(替换的数值))；
// start是从哪一个元素开始，delete是要删除几个元素，后面是把替换从数值插进该位置

reverse()：翻转数组元素；
sort()：把元素转化为字符串按照ASCII码排序，并返回排序后的数组，参考下面代码示例

 let a = new Array(1, 3, 69, 100);
        a.sort(function(a, b) {
            return a - b; //a-b为升序，b-a为降序，如若不加function则按位排序，如1,12,13,2这种
        });
        console.log(a);

indexOf(“元素”)：获取该元素的索引，如若有相同的元素，则只返回第一个元素的索引号，如若没有该元素，则返回-1；
lastindexOf(“元素”)：获取该元素的索引，如若有相同的元素，则只返回最后一个元素的索引号，如若没有该元素，则返回-1；
toString()：将数组转换为字符串；
concat(参数)：合并数组，并返回新数组，参数可以是字符串、数组；
slice(start[,end]):抽取数组中的一段元素组合成一个新数组，原数组不变,包前不包后；
join(‘分隔符’)：连接所以元素组成字符串，参考示例

var arr1=['green','blue','pink'];
console.log(arr1.join());//green,blue,pink,默认分隔符为",";
console.log(arr1.join('-'));//green-blue-pink

1.5.4 迭代方法

forEach(function):为数组中每个元素执行一次回调函数，原数组不变;循环数组
filter(function)：将所有在过滤函数中返回TRUE的数组元素放进一个新数组并返回原数组不变;

function isBigEnough(value) {
  return value >= 10;
}

const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

map(function)：创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。创建数组

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

every(function)：如果数组中的每个元素都满足测试函数，则返回TRUE，否则返回false；
some(function)：如果数组至少有一个元素满足测试函数，则返回TRUE，否则返回false；
reduce(function) ：对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。数组合一
```
let sum = [0, 1, 2, 3].reduce(function (previousValue, currentValue) {
  return previousValue + currentValue
}, 0)
// sum is 6
```

1.5.4 遍历数组

语法格式：for(变量 of 数组){}

for(var k of obj){
    console.log(k);//k 输出元素值
}

注意：只能查看，不能修改数组的值

1.6 字符串对象

注意：所有操作方法都不会改变字符串本身，所以操作完之后，都会返回一个新的字符串；

1.6.1 基本包装类型

JavaScript将String、Number、Boolean三种包装成了复杂数据类型，使其具有属性和方法；

1.6.2 字符串不可变

字符串的值不会变，即使你重新给它赋值，它只是在内存重新开辟了一个空间，来存放那个新赋的值；

1.6.3 根据字符返回位置

indexOf(“元素”)：获取该元素的索引，如若有相同的元素，则只返回第一个元素的索引号，如若没有该元素，则返回-1；

lastindexOf(“元素”)：获取该元素的索引，如若有相同的元素，则只返回最后一个元素的索引号，如若没有该元素，则返回-1；

var str='春阿双方事故，春';
console.log(str.indexof('春'));//从左往右，返回第一个春的索引 0；
console.log(str.indexof('春',1));//从左往右，从索引号是 1的位置开始查找；

1.6.4 根据位置返回字符

charAt(索引号)：返回该索引号的元素；

charCodeAt(索引号)：回该索引号的元素的ASCII码；用来读取用户输入的值索引号

字符串名[索引号]：H5新增的方法，注意兼容性

var str='andy';
console.log(str.charAt(1));//n
console.log(str.charCodeAt(0));//a的ASCII码值为97，则返回97
console.log(str[0]);//a

1.6.5 字符串操作方法

concat(str1,str2…)：拼接字符串，类似于“+”的作用
substr(start,length)：从start位置开始，取length个数的元素
substring():提取字符串中两个指定的索引号之间的字符，包前不包后
slice():提取字符串片段，在新的字符串中返回被提取的部分，包前不包后
replace(‘被替换的字符’，‘替换为的字符’)：替换元素，从左往右只会替换第一个字符
split(‘分隔符’)：将指定的分隔符字符串将一个String对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置，不填分隔符，则返回整个字符串，分隔符为"",则返回每一个字符为数组元素
search():检索与正则表达式相匹配的值
trim():移除字符串首尾空白

var str1 = "red",str2 = "blue",str3='red,pink,blue';
      console.log(str1.concat(str2)); //结果redblue
      console.log(str2.substr(1, 3)); //结果lue,l的索引是1，取3个元素
      console.log(str1.replace("r", "o")); //结果为oed，如若有多个r，则只调换第一个
      console.log(str3.split(',')); //结果是[red,pink,blue],如若str3里面用“+”分割，则split里面分隔符为“+”

1.7 简单数据类型与复杂数据类型

简单数据类型 null 返回的是一个空的对象，以后生成对象没有想好放啥，就可以用 null；

简单数据类型：string、number、boolean、null;

复杂类型(引用类型)：在存储变量时，只存储地址，例如通过new创建的对象，如object、array、date等；

栈：存储简单类型的值，和复杂类型变量的地址并且指向堆里面的数据；

堆：存储复杂类型的值；

简单类型传参不会改变实参的值；

复杂类型传参会改变实参的值；（传参传的是地址，相当于C语言的指针）

//简单类型传参：
function fn(a){
    a++;
    console.log(a);//11
}
var x=10;
fn(x);
console.log(x);//10

//复杂类型传参：
function Person(name){
        this.name=name;
      }
      function f1(x){
        console.log(x.name);//刘德华
        x.name="张学友";
        console.log(x.name);//张学友
      }
      var p=new Person('刘德华');
      console.log(p.name);//刘德华
      f1(p);
      console.log(p.name);//张学友

1.8 三大系列

1.8.1 offset系列

offsetTop: 元素相对带有定位父元素上方的偏移。
offsetLeft：元素相对带有定位父元素左边框的偏移。
offsetWidth：返回自身包括padding 、边框、内容区的宽度，包含padding + border + width 。
offsetHeight：返回自身包括padding、边框、内容区的高度，包含padding + border + height。
offsetParent：返回元素带有定位的父级元素，如果都没有定位则返回body。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .father {
            /* position: relative; */
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 150px;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background-color: purple;
            margin-left: 45px;
        }
        
        .w {
            height: 200px;
            background-color: skyblue;
            margin: 0 auto 200px;
            padding: 10px;
            border: 15px solid red;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <div class="w"></div>
    <script>
        // offset 系列
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        // 1.可以得到元素的偏移 位置 返回的不带单位的数值  
        console.log(father.offsetTop);
        console.log(father.offsetLeft);
       
        console.log(son.offsetLeft);
        var w = document.querySelector('.w');
        // 2.可以得到元素的大小 宽度和高度 是包含padding + border + width 
        console.log(w.offsetWidth);
        console.log(w.offsetHeight);
        // 3. 返回带有定位的父亲 
        console.log(son.offsetParent); // 返回带有定位的父亲 否则返回的是body
    </script>
</body>

</html>

offset与style区别：

1：offset可以得到任意样式表中的样式值，style只能得到行内样式的样式值。

2：前者获取的数值没有单位，后者有。

3：offset.offsetWidth ，包含padding + border + width ；style.width不包含padding和border的值。

4：前者获取的属性是只读属性，不能赋值，后者是可读写属性，可以赋值和获取。

获取元素位置用offset，给元素更改值用style

1.8.2 client系列

clientTop:返回元素上边框的大小。
clientLeft:返回元素左边框的大小。
clientWidth:返回自身包括padding、内容区的宽度，不含边框，返回值不带单位。
clientHeight:返回自身包括padding、内容区的高度，不含边框，返回值不带单位。

 <div></div>
    <script>
        // client 宽度 和我们offsetWidth 最大的区别就是 不包含边框
        var div = document.querySelector('div');
        console.log(div.clientWidth);
    </script>