JavaScript总结（第一章）

最新推荐文章于 2024-06-13 02:48:16 发布

美发历险记

最新推荐文章于 2024-06-13 02:48:16 发布

阅读量160

点赞数 1

分类专栏：前端 js 文章标签： javascript html html5

本文链接：https://blog.csdn.net/weixin_45643536/article/details/120446833

版权

前端同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

JavaScript总结day1

这一套总结笔记主要针对学过其他高级语言的同学，因为其中我省略了一些与高级相同的语法功能等！如果那些也细讲的话，js主要的功能就得很靠后才涉及了，我这系列文章主要针对js的功能做总结。

JS的组成

ECMAScript ： JavaScript语法

DOM ：页面文档对象模型

BOM ：浏览器对象模型

JS书写位置

内嵌式：跟内嵌样式一样，在head标签内部书写script标签（其实script标签可以在html文件的然后地方书写，一般在head标签内）。

行内式：直接写在HTML元素内部。

外部引入：外部引入js文件，在script标签中的src属性中引入文件位置。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内嵌式js书写  -->
    <script>
        //alert('内嵌式1');
    </script>

    <!-- 外部引入js文件  -->
    <script src="js文件地址"></script>

</head>
<body>
    
    <!-- 行内式的js 直接写到元素的内部 -->  
    <input type="button" value="按一下" onclick="alert('行内式')"/>

</body>
</html>

注释

// : 单行注释快捷键：ctrl + /

/* */ ：多行注释快捷键：默认：shift + alt + / 建议修改为：shift + ctrl + /

输入输出语句

alert（“警告语句”）；：浏览器弹出警示框

console.log(“打印信息”)；：浏览器控制台打印输出信息

prompt(“提示信息”); ：浏览器弹出提示框，带有输入框，可以给变量赋值。

数据类型

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

简单数据类型

Number ：数字型，包含整型值和浮点值默认值： 0

Boolean ：布尔值类型，如 true ，false ，等价于 1 、0 默认值：false

String ：字符串类型。默认值： “”

Undefined ： var a; 声明了变量a但没赋值，此时 a = undefined 默认：undefined

Null ：空值。

Infinity ：无穷大

-Infinity ：无穷小

NaN ：非数字值

isNaN() ：判断是否为数字，是则返回false ，否则返回true

String.length() : 得出字符串的长度。

字符串与任何类型相加都是拼接为字符串

+号总结口诀：数值相加，字符相连

typeof : 检测这个是什么类型

例：

 alert(typeof 13);

其他类型转字符型

方法：

.toString()

String()

与字符串相加

例：

//方法一：
alert(num.toString());
//方法二：
alert(String(num));
//方法三：
alert(""+num);

其他类型装换为数字型

方法:

parselnt() : 将字符串转换为整数数值型

parseFloat() ：将String类型转换为浮点数数值型

Number() ：将String类型转换为数值型

算术运算隐式转换

例：

//方法一：
parselnt('28');   //有小数默认去掉取整。数值后面有单位可以自动去掉
//方法二：
parseFloat('28.00');  //也可以去单位
//方法三：
Number('28')
//方法四：
'28'-0  // - * / 都可以转换为数值型

其他类型转换为布尔值

Boolean();

“” 、 0 、NaN 、 null 、undefined 这些都会转换为false

其他则都转换为true

特殊比较运算符

=== ：全等，要求值和数据类型都一致

!== : 不全等

特殊逻辑比较

用数值逻辑比较可以直接输出数值而非布尔值

例：

console.log(123 && 456) // 456
console.log( 0 && 456)  // 0
console.log(0 && 1+2 && 456) // 0

数组

js数组不分数据类型，都可以存。

创建方式:

//创建一个新的空数组
var 数组名 = new Array();

//利用数组字面量创建数组
var arr = [];

//数组长度
var l = arr.length;

函数

封装了一段可以被重复的代码，相当于java中的方法。

声明方法1：

function 函数名 (参数) {

函数体

}

声明方法2 ：

var fn = function (参数) {

函数体

}

直接用函数名或方法名调用执行。

函数参数解析：

参数无需声明类型。直接声明参数名

1.如果实参的个数和形参的个数一致则对应接收，正常输出结果

2.如果实参的个数多余形参的个数，多余的参数会被忽略掉，只接收对应的参数。

3.如果实参的个数小于形参的个数，没对应接收的形参会被认为是没赋值变量，默认值是undefined。

例：

function getSum ( num1 , num2 ) {
函数体;
}

getSum( 1 , 2 ); // 正常调用
getSum( 1 , 2 ， 3 ); // 参数溢出，实参3并没传过去
getSum( 1  ); // 缺少参数，num2会被认为是没赋值的变量，值为undefined

break ：结果当前循环体

continue ：跳出本次循环，继续执行下次循环

return ：跳出本次循环，还可以返回结果给调用者。也能结束本个方法体

函数体内置对象：

arguments ：其中存储了调用者传过来的参数。展示形式是一个伪数组，可以进行遍历

伪数组特点：

1.具有length属性

2.按索引方式储存数据

3.不具有数组的push，pop等方法

使用例子：

function sinfi () {
// 查看参数个数
var s = arguments.length;
alert("传来了"+s+"个参数");
// 遍历参数
for(var i = 0; i < arguments.length; i++){
console.log("第"+(i+1)+"个参数："+arguments[i]);
}
}

sinfi(28,86,34,38,22)

变量作用域

在函数内没声明直接赋值的变量属于全局变量

没有块级作用域，if（）、for（）的大括号内的声明变量属于全局变量。只有函数内的声明变量才是局部变量。

1、全局变量只有浏览器关闭的时候才会销毁，比较占内存

2、局部变量，当程序执行完毕就销毁，节约内存资源

预解析

js引擎运行js分为两步：预解析代码执行

1、预解析 js引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面

2、代码执行按照代码书写的顺序从上往下执行

var声明和函数声明会被预编译先存进内存，只存了变量名，并没赋值。

// 代码一：
fun();
var fun = function() {
 	console.log(22);
}
// 运行会报错
// 相当于运行了一下代码
var fun；
fun();
fun = function() {
    console.log(22);
}

// 代码二：
console.log(num);  // 结果 ： undefined ，输出了没赋值的变量
var num = 10;

// 相当于运行了以下代码
var num；
console.log(num);
num = 10;

预解析分为变量预解析（变量提升）和函数预解析（函数提升）

1、变量提升就是把所有的变量声明提升到当前的作用域最前面不提升赋值操作

2、函数提升就是把所有的函数声明提升到当前作用域的最前面不调用函数

练习：

var num = 10；
fun();
function fun() {

console.log(num);  // 结果 ： undefined
var num = 20;

}

//预编译后代码如下
var num；
function fun（）{
    
    var num;
    console.log(num);
    num = 20;
    
}

num = 10；
fun();

对象

创建对象的方法1：

// 利用对象字面量创建对象 {} : 花括号内是对象体
var obj = {

    uname ： '张三丰'，
    age ： 18，
    sex ：'男' ,
    sayHi : function() {
        函数体
    }
   
}

// 调用： 直接用  方法.属性名或函数  调用
obj.sayHi();

1、对象的属性和属性值以键值对形式声明赋值。键属性名：值属性值

2、多个属性或者方法中间用逗号隔开

3、方法冒号后面跟的是一个匿名函数

创建对象方法2：

// 利用 new Object 创建对象
var obj = new Object(); // 创建一个空对象

//直接用 对象名.要创建的属性或函数名 就等于声明并赋值
obj.uname = '张三丰'；
obj.age = 18;
obj.sex = '男'；
obj.sayHi = function() {
    // 函数体
    console.log('hi~');
    
}

// 调用方法跟以上的一样

创建对象方法3：

 // 构造函数创建对象
function Star() {
    this.name = uname;
    this.age = age;
    this.sex = sex;
    this.sing = function(sang){
        console.log(sang);
    }
}

// 创建两个不一样的对象
var ldh = new Star('刘德华',18,'男');
ldh.sing('冰雨');   // 调用并传值
var zxy = new Star('张学友',19,'男');

//调用的方法一样
//1.构造函数名字首字母要大写
//2.我们构造函数不需要return 就可以返回结果

遍历对象属性内容

示例：

// 创建一个对象
var obj =  {
    name : 'uname',
    age : 18,
    sex : '男',
    sing : function(sang){
        console.log(sang);
    }
}

// 遍历对象属性与方法

for(var k in obj){
    console.log(k);  // k 输出的是所有的 属性名与方法名
    console.log(obj[k])  // 输出 对象中的键值 属性名与值 函数名与函数体
}

// 结果
uname 
uname 
age 
18 
sex 
男 
sing 
function sing(sang)

浏览器弹窗

alert()、confirm()、prompt()的区别和联系：

警告框alert()

alert是警告框，只有一个按钮“确定”无返回值，警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。语法：alert(“文本”)

确认框confirm()

confirm是确认框，两个按钮，确定或者取消，返回true或false。确认框用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。语法：confirm(“文本”)

提示框prompt()

prompt是提示框，返回输入的消息，或者其默认值提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。语法：prompt(“文本”,“默认值”)

内置对像

javaScript中的对象分为三种：自定义对象、内置对象、浏览器对象。

内置对象： js语言自带的一些对象，方便开发者开发。

javaScript提供了多个内置对象：Math、Date、Array、String等

所有内置对象可以到文档中查找使用方法

文档： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

getRandom（a,b）:从a，b间随机生成一个整数

Array ：

instanceof 运算符它可以用来检测是否为数组

Array.isArray(参数) 用来检测是否为数组

例

// 检测数组方法1：
var arr = [1,2,3];
if(arr instanceof  Array)
    
// 检测数组方法2：
    console.log(Array.isArray(arr));  // 返回 true 或 false

数组添加删除元素

push(参数1…) : 末尾添加一个或多个返回值：新的长度

pop() : 删除数组最后一个元素，把数组长度减1 返回值：删除的元素

unshift(参数1…) : 向数组的开头添加一个或多个元素返回值：新的数组长度

shift() : 删除数组的第一个元素，数组长度减1 返回值：删除的元素

数组.reverse() ：翻转数组

数组.shrt()：数组排序：

// 只能排10以内的数，如果是11则根据第一个数来排
var arr1 = [13,4,77,1,7];
arr1.sort();
// 改进、让他可以排序所有数
arr.sort(function(a,b){
    //return a - b;  升序排序
    return b - a;   //降序排序
});

indexOf(“元素”) ：查找元素在数组中的位置没有这个元素就返回-1 找到元素就返回索引号

数组去重：

function unique (arr) {
	var newArr = [];
    for(var i = 0; i < arr.length; i++){
        if(newArr.indexOf(arr[i]) === -1 ){
            //如果新数组没有这个元素就添加进来
            newArr.push(arr[i]);
        }
    }
return newArr;
}

var demo = [1,5,4,3,1,4,6];
console.log(unique(demo));

数组转化字符串

数组.toString() :将数组转换为字符串，每个元素以，号相隔

数组.join(“自定义隔开符”) : 将数组转换为字符串，默认以，号隔开，可以自定义。

美发历险记

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript总结（第一章）

JavaScript总结day1这一套总结笔记主要针对学过其他高级语言的同学，因为其中我省略了一些与高级相同的语法功能等！如果那些也细讲的话，js主要的功能就得很靠后才涉及了，我这系列文章主要针对js的功能做总结。JS的组成ECMAScript ： JavaScript语法DOM ：页面文档对象模型BOM ：浏览器对象模型JS书写位置内嵌式：跟内嵌样式一样，在head标签内部书写script标签（其实script标签可以在html文件的然后地方书写，一般在head标签内）。行内式：
复制链接

扫一扫