【前端学习】JS入门（一）

已于 2022-05-23 20:02:07 修改
阅读量543 收藏 1
点赞数 6
文章标签： 前端 javascript html css 开发语言
于 2022-05-18 13:28:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/swpeiii_/article/details/124800271
版权

目录

一、JS基础

1、JS的组成

  • ECMAScript：JS基础语法
  • DOM：文档对象模型——对页面中元素进行操作（下拉菜单）
  • BOM：浏览器对象模型——对浏览器窗口进行操作（弹出框、控制跳转、获取分辨率）

2、JS的三种书写位置（与CSS相同）

  • 行内式：写在body里
  • 内嵌式：写在head的script标签里（每句结束要写“ ; ”）
  • 外链式：link在以“.js”为后缀名的文件当中
外链式：将如下代码写在head里
<script src="my.js">-中间必须空着-</script>

3、JS中推荐使用’单引号’


4、JS的注释

  1. 单行注释：ctrl + /
//	两个斜杠写开头单行注释
  1. 多行注释（块注释）：shift + alt + a
/*	两个斜杠星中间多行注释	*/

二、JS基本语法（省略了部分和C语言一致的内容）

1、输入输出语句

弹窗输入
prompt('请输入你的年龄：');

弹窗输出
alert('你都这么老了？');

控制台输出
console.log('程序员永远年轻！'); //.log是指日志

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

  • prompt（‘弹出输入框，用户输入’）;
  • alert（‘弹出警示框’）;
  • 【常用】console.log（‘控制台输出，给程序员测试用’）;

2、变量

  • 定义变量
var myname='弗朗基·德容';
  • 定义多个变量
var a='1',b='2',c='3'; // 用逗号变量名隔开
  • 变量输入输出案例
var myname=prompt('请输入你的姓名：');
alert('您就是大名鼎鼎的'+ myname +'？');

在这里插入图片描述
在这里插入图片描述

  • 变量不声明直接赋值也可以使用，此时变量作为全局变量
  • 变量的命名规范（与C语言类似）
var 2022year; //违规变量名；不能以数字开头
var while; //违规变量名；不能与关键字相同
var myLastName; //合法变量名；驼峰命名法，首字母小写，后面单词首字母大写

3、JS中同一变量的数据类型可以自由转换（JS为动态语言）

4、简单数据类型

在这里插入图片描述

  • 数字前加0为八进制；加0x为16进制

5、isNaN( x )函数

  • 判断非数字
  • 是数字则返回false；非数字则返回true

6、字符串string

  • 字符串类型可用引号嵌套：外双内单，外单内双
  • 字符串 + 任何类型 = 拼接后的字符串
  • 数值相加，字符相连
  • 通过字符串的length属性获取字符串的长度
用str.length获取字符串长度
var str1 = "德容别去曼联";
alert(str1.length); // 显示 6

7、布尔型boolean

  • true 为 1 ，false为 0

8、typeof

  • typeof 检测变量数据类型
var n = 18;
console.log(typeof n); // 显示 number

9、数据类型转换

  • 转换为字符串类型（最后一种方式也被称作“隐式转换”）
用toString（）转换
var num = 10;
var str = num.toString()
console.log(str);

强制转换
console.log(String(num));

隐式转换
console(num+'字符串');
  • 转换为数字型
parseInt()
var age =prompt('请输入您的年龄');
consolo.log(parseInt(age));  //数字型18
consolo.log(parseInt('6.666'));  //6取整
consolo.log(parseInt('100px'));  //100,去单位

parseFloat()
console.log(parseFloat('6.666'));  //6.666
consolo.log(parseFloat('100px'));  //100,去单位


Number(变量)
var str ='123';
console.log(Number(str));
console.log(Number('12'));  

隐式转换
console.log('12'-0);  // 12
console.log('123' - '120');  //3
console.log('123' * 1);  // 123
  • 转换为布尔型（否定的值会被转换为false：如 ’ ', 0, NaN , null , undefined；其余的值都会被被转换为true）
console.log(Boolean('')); //false
console.log(Boolean(0));  //false
console.log(Boolean(NaN)); //false
console.log(Boolean(null)); //false
console.log(Boolean(undefined)); //false
console.log(Boolean('德容')); //true
console.log(Boolean(18)); //true

10、运算符

  • 全等运算符===：判断两边的值和数据类型是否完全相同
console.log(18 ==='18'); //false

  • 逻辑与&&：
    表达式a && 表达式b
    如果第一个表达式的值为真，则返回表达式b
    如果第一个表达式的值为假，则返回表达式a

  • 逻辑或||：
    表达式a || 表达式b
    如果第一个表达式的值为真，则返回表达式a
    如果第一个表达式的值为假，则返回表达式b

11、JS断点调试

  1. 在浏览器中按 F12选择源代码（sources）

  2. 找到需要调试的文件然后在目标行点一下设置断点
    在这里插入图片描述

  3. 刷新浏览器

  4. 通过watch（监视）可以看到变量值的变化【常用】

  5. 按 F11可以使程序单步执行（一步一步跑）


12、JS三种流程控制结构：顺序结构、分支结构、循环结构

  • 分支结构.switch语句：
switch(表达式){
  case value1:
  	 当表达式等于value1 则执行此处代码;
	 break; //如果没有break，则执行下一个case
	 
  case value2:
  	 当表达式等于value2 则执行此处代码;
     break;
     
  default:
     当表达式不等于任何一个value时执行此处代码;
}

13、JS数组

（1）数组一次可以存储多个值
  • JS中数组可以存储不同数据类型的数据
var arrStus =['德容',18,false,6.66];

（2）用 new 创建（定义）数组
  • 原理：利用new申请一块新的存储空间（未知大小）
创建一个空数组
var arr = new Array();

（3）数组的调用（同样与C语言类似）
var arrSta = ["巴萨","皇马","利物浦"];
alert(arrSta[1]); //下标从0开始，输出数组中的第2个元素

（4）使用“数组名.length”访问数组长度
var arrPla = ["德容","佩德里","加维"];
alert(arrPla.length);  // 结果输出3

（5）遍历数组
var arr = ["德容","佩德里","加维","巴萨","皇马","利物浦"]
for (var i = 0; i < arr.length; i++){
    alert(arr[i]);
}
  • 如果不遍历，直接输出时情况如下：
    在这里插入图片描述

（6）向空数组中添加元素
挑出数组中大于10的元素
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] >= 10) {
        newArr[newArr.length] = arr[i];
    } // 挑出大于10的元素排列进空的新数组
}
alert(newArr);

（7）删除指定数组元素
删除数组中的0
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
for(var i = 0; i <arr.length; i++){
    if(arr[i] != 0){
        newArr[newArr.length] = arr[i];
    } // 把除了0之外的元素排列进空的新数组
}
alert(newArr);

（8）冒泡排序
var arr = [5,4,3,2,1];
for (var i = 0; i < arr.length-1; i++){ //外层循环元素个数遍
    for (var j = 0; j <= arr.length - i - 1; j++){ //内层循环少一遍
        if(arr[j] > arr[j+1]){
            var temp = arr[j];
            arr[j] = arr[j+1];
            arr[j+1] = temp;
        }  // 比较当前和后一个元素，前比后大不满足条件则交换位置
    }
}
alert(arr);

三、函数（省略了部分和C语言一致的内容）

1、函数：封装了一段可以被反复调用执行的代码块


2、函数的使用

（1）声明函数
声明函数
function 函数名(){
     函数体
}

（2）调用函数

3、函数的封装

  • 函数的封装：把一个或多个功能通过函数的方式封装起来，对外只提供一个函数接口

4、函数的返回值return

将两个数字相加的函数
function add(num1，num2){
    return num1 + num2;
}
var numPlus = add(21,6) // 调用函数，传入两个实参，并通过 numPlus 接收函数返回值
alert(numPlus);

5、arguments

  • arguments 对象中存储传递的所有实参
  • 不确定传多少实参时将arguments配合数组使用
求任意多个数中的最大值
 function maxValue() {
    var max = arguments[0];
    
    for (var i = 0; i < arguments.length; i++) {
        if (max < arguments[i]) {
            max = arguments[i];
        }
    }
    return max;
}

console.log(maxValue(2, 4, 5, 9));
console.log(maxValue(12, 4, 9));

四、作用域

1、JS无块级作用域

if(true){
    int num = 666;
    alert(num);	// 输出666
}
alert(num);		// 不报错；输出666

2、全局变量和局部变量


五、预解析

1、自定义函数（命名函数）

function fn() {函数体} // 定义函数fn
fn(); // 调用函数fn
  • 这种方法：调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面

2、匿名函数

var fn = function(){函数体} // 定义函数fn
fn(); // 调用函数fn；调用必须写在函数代码后面
  • 这种方法：函数调用的代码必须写到函数体后面

七、对象

1、什么是对象？

  • 在 JS 中，对象是一组无序的相关属性和方法的集合；例如一组字符串、数值、数组或函数等
  • 对象由属性（特征；名词）和方法（行为；动词；对象中的函数）组成

2、创建对象

（1）用字面量创建对象
var star = {
    name : '德容', // 方法之间用“ , ”隔开
    age : 25,
    sex : '男',
    heartSpeak : function(){
        alert('我不想去曼联');
    } // 定义函数即对象方法，需为匿名函数；方法的命名为驼峰命名法
}

（2）用 new Object 创建对象
利用 new Object 创建对象
var obj = new Object(); // 创建一个空对象
obj.name = '德容'; // 每个属性和方法以分号结束
obj.age = 25;
obj.sex = '男';
obj.heartSpeak = function() {
    console.log('我不想去曼联');
}

调用对象
console.log(obj.name);
obj.heartSpeak();

（3）用构造函数创建对象
构造函数创建对象的语法格式
function 构造函数名() {
    this.属性 = 值;
    this.方法 = function() {函数体}
}

调用函数创建一个新对象
var dejong = new 构造函数名();
  • 构造函数名首字母大写
  • 构造函数不需要return
  • new 构造函数名 () ：实例化；调用函数创建一个对象
  • 属性和方法前加this

3、调用对象

  • 对象属性的调用：对象.属性名（“ . ”可意会为“ 的 ”）
  • 对象方法的调用：对象.方法名() （注意括号不能省略）
console.log(star.name) // 调用名字属性
star.heartSpeak() // 调用 heartSpeak 方法,注意，一定不要忘记带后面的括号

4、用 for … in 遍历对象

var obj = {
    name: '德容',
    age: 25,
    sex: '男',
    fn:function() { consol.log('我不去曼联！') } 
}

for(var k in obj){
    console.log(k) // 输出属性名
    console.log(obj.]) // 输出属性值
}
  • 语法中变量可自定义，通常为 k 或 key

在这里插入图片描述

5、Math对象的使用

  • Math对象不用 new 调用，直接使用即可
  • 具体常见的Math对象操作如下
Math.PI		 			// 圆周率
Math.floor() 	 		// 往小取整
Math.ceil()             // 往大取整
Math.round()            // 四舍五入取整 注意：-.5的结果往大取 
Math.abs()		 		// 取绝对值
Math.max()/Math.min()	// 求最大/最小值

6、【常用】随机数方法 random()的使用

使用random随机数方法取得一段范围内的随机整数
function getRandom(min,max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

指定一个范围
console.log(getRandom(1,10));

随机点名
var arr = ['swp', '德容','佩德里','加维']；
console.log('就决定是你了：'+arr[getRandom(0,arr.length - 1)]);

在这里插入图片描述

7、日期对象 Date（）方法的使用

括号里没参数则返回当前系统时间
var now = new Date();
console.log(now);

括号里有参数，则按格式返回参数时间（数字型月份返回值+1）
var data1 = new Date(2002,11,22);
console.log(data1);  // 返回的是6月而不是5月

var data2 = new Date('2002-11-22 5:2:1'); // 日期后空格隔开，时：分：秒
console.log(data2);
  • 参数写法：（数字型）2019,10,1 ；（字符串型 ）’ 2019-10-1 8:8:8 ’

（1）日期格式化
var date = new Date();
console.log(date.getFullYear()); // 返回当前日期的年 2022
console.log(date.getMonth() + 1);  // 返回当前月份；记得月份 +1
console.log(date.getDate); // 返回当前几号
console.log(date.getDay());  // 周一-周六返回1-6；周日返回0

带0格式如 09:05:09
function getTimer() {
    var time = new Date();
    var h = time.getHours();
    h = h < 10 ? '0' + h : h;
    var m = time.getMinutes();
    m = m < 10 ? '0' + m : m;
    var s = time.getSeconds();
    s = s < 10 ? '0' + s : s;
    return h + ':' + m + ':' + s;
}
console.log(getTimer());

（2）获得日期总毫秒数（从1970年1月1日开始计算）
  • 1970年1月1日——K.Thompson于1969年用B语言在小型计算机上开发UNIX系统，随后改进出C语言——Unix时间戳被定义，从此计算机将1970年1月1日作为计算机“纪元时间”的开始*
var date = new Date(); // 实例化Date对象，取得当前日期
console.log(date.valueOf());  //输出当前时间距离1970.1.1总的毫秒数
console.log(date.getTime());

简单写法
var date1 = +new Date();  // +new Date()返回总毫秒数，
console.log(date1);

（3）倒计时
function countDown(time) {
    var nowTime = +new Date();
    var inputTime = +new Date(time);
    var times = (inputTime - nowTime) / 1000; // 剩余时间总秒数；1000ms=1s

    var d = parseInt(times / 60 / 60 / 24); // 天数
    d < 10 ? '0' + d : d;
    var h = parseInt(times / 60 / 60 % 24); // 小时
    h < 10 ? '0' + h : h;
    var m = parseInt(times / 60 % 60); // 分
    m < 10 ? '0' + m : m;
    var s = parseInt(times % 60); // 秒
    s < 10 ? '0' + s : s;
    return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown('2022-5-21 5:21:00'));
var date = new Date;
console.log(date); // 当前时间

在这里插入图片描述

8、数组对象

（1）创建数组对象
var newArr = [];

（2）检测是否为数组
var arr = [5, 21];
console.log(arr instanceof Array); // 返回true
console.log(Array.isArray(arr));   // 返回true

（3）删除和添加数组中的元素
var arr = [1, 2, 3];

push() 结尾加一个数组元素
arr.push(6, '结尾加一项');
console.log(arr);
console.log(arr.push(6, '结尾加一项')); // 注意：如此写法只会返回新数组的长度


unshift() 开头加一个数组元素
arr.unshift('开头加一项');
console.log(arr);

pop() 删除数组最后一个元素
arr.pop(); // 不加参数

pop() 删除数组第一个元素
arr.shift(); //不加参数

（4）排序数组
逆序数组
var arr = ['a','b','c'];
arr.reverse();
console.log(arr);

冒泡排序
var arr1 = [6,18,13,1];
arr1.sort();
console.log(arr1);

（5）查数组下标（索引号）
查找目标元素的下标并返回
var arr = ['red','green','blue','pink','blue'];
console.log(arr.indexOf('blue'));  // 从前往后找第一个；返回2
console.log(arr.lastIndexOf('blue')); // 从后往回找第一个；返回4；

（6）数组去重

9、字符串对象

（1）字符串不可变
var str = '德容留在巴萨'; // 尽管被重新赋值，存储该内容的存储空间依然被保留
str = '德容去曼联'; // 开辟新的存储空间存储

（2）indexOf返回字符位置（字符串对象同样适用）

（3）replace方法
  • replace( 被换的字符 , 要变成的字符串 )
 var str = '德容去曼联';
 console.log(str.replace('去', '不去'));

在这里插入图片描述

（4）split()方法（切分字符串）

（5）大小写转换 toUpperCase() || toLowerCase()

八、简单类型与复杂类型的存储原理

  • 简单类型（值类型）：存储时变量中存储值本身；如string 、number、boolean、undefined、null
  • 复杂类型（引用类型）：存储时变量中存储引用的地址；通过 new 关键字创建的对象，如 Object、Array、Date
  • 简单类型存放到栈里；复杂类型存放到堆里
  • 复杂型变量在栈空间里存放地址，而其对象实例存放在堆空间中

九、DOM

1、什么是DOM？

  • Document Object Model（文档对象模型）
  • HTML或XML的标准编程接口
  • 通过这些 DOM 接口可以改变网页的内容、结构和样式
  • 节点（node）：网页中的所有内容都是节点（标签，属性，文本，注释等）

2、获取元素

（1）如何获取元素
  • 通过 ID 获取
  • 通过标签名获取
  • 通过H5 新增的方法获取
  • 通过特殊元素获取

（2）通过ID获取
doucument.getElementByld('ID名')

<div id="time">2003-5-13</div>

<script> //采用行内式
    var timer = document.getElementById('time');
    console.log(timer); // 5. console.dir 打印我们的元素对象，更好的查看里面的属性和方法
</script>

在这里插入图片描述

（3）通过标签名获取
doucument.getElementsByTagName('标签名');

<ul>
    <li>德容会留在巴萨的1</li>
    <li>德容会留在巴萨的2</li>
    <li>德容会留在巴萨的3</li>
    <li>德容会留在巴萨的4</li>
    <li>德容会留在巴萨的5</li>
</ul>

<script>
	var lis = document.getElementsByTagName('li');
    console.log(lis[0]); // 以数组形式存储；以数组形式输出
    
    遍历输出
    for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
    }
</script>

在这里插入图片描述

（4）通过父元素标签获取子元素
<ol id="ol">
    <li>德容会留在巴萨的1</li>
    <li>德容会留在巴萨的2</li>
    <li>德容会留在巴萨的3</li>
    <li>德容会留在巴萨的4</li>
    <li>德容会留在巴萨的5</li>
</ol>

<script>
    var ol = document.getElementById('ol'); // 同样按照数组形式存储
    console.log(ol[0].getElementsByTagName('li')); // 必须指明单个父元素
</script>

在这里插入图片描述

（5）通过类名返回元素对象合集
document.getElementsByClassName('类名');

（6）通过指定选择器返回第一个元素对象
document.querySelector('选择器');
var firstBox = document.querySelector('.box');

（7）通过指定选择器返回选择器下的所有元素对象
document.querySelectorAll('选择器');

（8）获取body元素
document.body;

（9）获取html元素
document.documentElement;

3、事件基础

（1）事件是什么
  • 触发——>响应机制
  • 可以被 JS 侦测到的行为

（2）事件的三要素
  1. 事件源（操作目标 / 谁触发响应）
  2. 事件类型（什么事件）
  3. 事件处理程序（对应的操作）

（3）执行事件的三个步骤
  1. 获取事件源
  2. 注册事件（绑定事件）
  3. 添加事件处理程序（采用函数赋值形式）

（4）鼠标事件

在这里插入图片描述

（5）简单实操（学习处理事件的代码格式）
<div class="box">点击方框</div>
    
<script>
    var div = document.querySelector('div');
    div.onclick = function() {
       console.log('点我！');
    }
</script>

在这里插入图片描述

4、操作元素

  • DOM 操作可以改变网页内容、结构和样式
  • DOM 操作可以改变元素里面的内容 、属性

（1）改变元素内容
element.innerText = ' 变成我 '; // 去除html标签，同时空格和换行也会去掉
element.innerHTML = ' 变成我 ';

    <button>显示时间</button>
    <div class="box"></div>
    
    <script>
        var but = document.querySelector('button');
        var box = document.querySelector('.box');

        but.onclick = function() {
            box.innerText=Date();
            but.innerText='隐藏时间';
        }
    </script>

在这里插入图片描述
在这里插入图片描述

（2）改变元素属性
换图片操作
img.src = 'xxx';
img.title = 'xxx';

在这里插入图片描述

在这里插入图片描述

改变表单属性的操作
input.value = "xxx";
input.type = "xxx";
input.checked = "xxx";
input.selected = true / false;
input.disabled = true / false; // 禁用按钮；不能再被点击

（3）改变样式属性
element.style.属性名 = ' xxx ';

改变背景颜色、宽度
div.style.backgroundColor = 'pink'; // 属性名用驼峰命名法
div.style.width = '250px';

改变类名
css
.a{
    height: 100px;
    width: 100px;
    background-color: pink;
}
.change{
    height: 100px;
    width: 100px;
    background-color: orange;
}

<body>
    <div class="a"></div>
    
    <script>
        var box = document.querySelector('.a');

        box.onclick = function() {
            this.className='change'; // this.指向当前事件函数的调用者
        } 
    </script>
</body>

在这里插入图片描述
在这里插入图片描述

（4）排他操作
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    
    <script>
        var btns = document.getElementsByTagName('button'); // 以伪数组形式存储
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
             
             	// 把所有的按钮背景颜色去掉（干掉所有人）
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                
                // 让当前的元素背景颜色为pink（留下我自己）
                this.style.backgroundColor = 'pink';
            }
        }
    </script>
</body>

5、下拉菜单制作

html+js部分
<body>

<nav id="nav">
    <ul class="n">
        <li>
            <a href="#">巴萨</a>
           <ul>
               <li><a href="">德容</a></li>
               <li><a href="">佩德里</a></li>
               <li><a href="">加维</a></li>
           </ul>
        </li>
        
        <li>
           <a href="#">皇马</a>
           <ul>
               <li><a href="">莫德里奇</a></li>
               <li><a href="">卡塞米罗</a></li>
               <li><a href="">克罗斯</a></li>
           </ul>
        </li>
        
        <li>
           <a href="#">曼城</a>
           <ul>
               <li><a href="">罗德里</a></li>
               <li><a href="">德布劳内</a></li>
               <li><a href="">B席尔瓦</a></li>
           </ul>
        </li>
    </ul>
</nav>

 <script>
     var n=document.querySelector('.n')
     var lis = n.children;
     
     for(var i=0;i<lis.length;i++){
         lis[i].onmouseover=function(){
            this.children[1].style.display='block';
         }
         
         lis[i].onmouseout=function(){
            this.children[1].style.display='none';
         }
     }
 </script>
</body>

css部分
*{
    margin: 0;   
    padding:0;
}
    
    #nav{/*设置父盒子高度、宽度、背景颜色；使盒子水平居中*/
    background: #eee;
    width: 600px;
    height: 40px;
    margin: 0 auto;
    }
    
    #nav ul{/*去掉ul的li前面的圆点*/
    list-style: none;
    }
    
    #nav ul li{/*每一个li左浮动形成横排，高度占满父容器形成文字垂直居中，文字水平居中*/
    float: left;
    line-height: 40px;
    text-align: center;   
    position: relative;/*给子ul元素定位用的*/
    }
    
    #nav ul li a{/*去下划线,变块继承父容器高度，撑开宽度*/ 
    text-decoration: none; 
    color:#000;   
    width: 100px;
    padding:0 20px;
    display: block;   
    }
    
    #nav ul li a:hover{
    color: #fff; 
    background-color: #666;
    }
    
    #nav ul li ul {
    position: absolute;/*子ul相对于父li定位*/
    left: 0;
    top:40px;
    display: none;
    }
    
    #nav ul li ul li{
    float: none;
    background-color:#eee;
    }

在这里插入图片描述
在这里插入图片描述


七、参考链接

参考1：JavaScript基础大总结(一)

参考2：JavaScript基础之函数与作用域(二)

参考3：JavaScript基础之对象与内置对象(三)

参考4：JavaScript进阶之DOM技术(四)

参考5：【重要】JS手册

swpeiii_
关注
  • 6
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一个数组可以存储不同类型的数据_详解Java数组结构
weixin_33427833的博客
01-21 9960
文章导读【前面介绍的数据类型都是基本数据类型，例如整型、字符型、浮点型等数据，属于简单的数据类型。但要解决现实问题仅有简单数据类型是不够的，难以反映出现实数据的特点，因此需要提供一类结构化数据以满足数据处理要求。本篇文章主要讲述数组结构，内容包括一维数组和二维数组，以及数组的具体应用】本文内容分为五个小节，第一小节讲述最简单的数据结构线性表，以及线性表与数组的关系；第二小节讲述数组的存储结构；第三...
JavaScript入门学习指南
qq_42560575的博客
04-15 2064
适合初学者入门自学
学JavaScript需要什么基础
2301_77769537的博客
05-06 360
不同的算法可以适用于不同类型的问题，例如搜索和排序。初学者需要了解各种算法和数据结构的特点和用法，这将帮助他们更好地理解编程的基础知识，并为日后的编程工作打下坚实的基础。此外，对于想要深入学习JavaScript的人来说，了解JavaScript的数据类型、DOM操作、事件处理、Ajax、正则表达式等也是相当重要的。在调试程序时，需要注意的是，要对每个错误进行仔细地分析和排查，以了解错误发生的原因，并找到解决方法。此外，了解编程语言的历史和发展也是很重要的，这可以帮助您更好地理解编程语言的特点和优劣。
JS数组 一起组团（什么是数组）一个数组变量可以存放多个数据
weixin_30492601的博客
06-12 786
一起组团（什么是数组） 我们知道变量用来存储数据，一个变量只能存储一个内容。假设你想存储10个人的姓名或者存储20个人的数学成绩，就需要10个或20个变量来存储，如果需要存储更多数据，那就会变的更麻烦。我们用数组解决问题，一个数组变量可以存放多个数据。好比一个团，团里有很多人，如下我们使用数组存储5个学生成绩。 数组是一个值的集合，每个值都有一个索引号，...
数据结构-数组（JS中数组总结）
qq_44045519的博客
07-24 305
数据结构-数组 存储结构 物理结构：一种线性表数据结构，它用一组连续的内存空间来存储一组具有相同类型的数据(js特性:数组可以存储不同类型) 优势 高效的查询 通过索引实现随机存取 弊端 低效的插入与删除： 数组执行插入或删除操作时，往往需要进行频繁的元素移动，开销过大 JavaScript中的数组 1.定义数组 // 1. 普通方式 const arr1 = new Array(); // 2. 指定长度 const arr2 = new Array(5); // 3. 指定内容 const ar
前端JavaScript入门学习资源
02-24
前端JavaScript入门学习资源
前端javascript入门学习思维导入
06-21
适合前端小白学习的思维导图，可以根据思维导图种的内容，自定义适合自己的学习路线
前端js学习基础语法第一天
12-23
新人入行可用，前端js入门
Ajax入门学习教程（一）
12-10
AJAX（Asynchronous JavaScript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。 AJAX还有一个最大的特点就是，当...
前端Vue入门简介介绍
04-22
Vue是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任
新手学JavaScript都要学什么？
weixin_33739627的博客
06-06 253
要从事网页开发。不知从何下手？ 会JavaScript语言可是不知道该怎样进阶。 最好的方法就是不断地做网页、写代码。不断地看别人的代码，研究别人的代码！ 用代码实践JS的每一个技巧点：多听多看多问多写！ 学习要系统，也能够找一本超有用的XXX代码段，细致研磨！ 每天记录自己的学习成果，别动不动就以为自己会了。以下概念回答一遍。 函数设计、原型扩展、模块管理、兼容优化、闭包、A...
基于数组（对象）：可以保存多个不同类型的数据
weixin_42284896的博客
07-21 4287
package cn.itsource.arryslist; import java.util.Arrays; /** * 基于数组，适用于查改。 * 增删插效率低下 * 1. 请设计一个类ArrayListDemo，可以装多个不同类型的数据,初始长度是10个 * 底层是基于数组，因为是可以装不同数据类型的数据，所以是Object数组 * int/byte/short /boolean.... * Object[] value = new Object[10];
关于js写在head部分的问题
qq_41100045的博客
07-19 2556
当我们将js写在head部分时，我们要知道，html页面的加载顺序是从上到下的，如果我们写的js代码需要在文档加载完成后才能够去执行（一般都是要到文档加载完才执行的），那么我们放到&lt;head&gt;内可能导致无法获取对象的情况 为了避免类似情况的发生，可以使用以下方式: （1）.将脚本代码放在网页的底端，运行脚本代码的时候，可以确保要操作的对象已经加载完成。 （2）.通过window....
前端需要学什么？
lin123_00的博客
06-27 1067
前端学什么？ 第一阶段：HTML+CSS+JS基础 （1） HTML+CSS: HTML进阶、 CSS进阶、DIV+CSS布局、HTML+CSS整站开发、 （2） JavaScript基础： Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。 （3） JS基本特效： 常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。 打造全网web前端全栈资料库（总目录）看完学的更
JS：JS是如何存储不同类型的变量的？
weixin_48475463的博客
01-19 312
一、数据类型之间存储的区别（重点） 既然我们区分了基本数据类型和复杂数据类型 那么他们之间就一定会存在一些区别 他们最大的区别就是在存储上的区别 我们的存储空间分成两种 栈 和 堆 栈： 主要存储基本数据类型的内容 堆： 主要存储复杂数据类型的内容 二、基本数据类型在内存中的存储情况 直接在 栈空间 内有存储一个数据 三、复杂数据类型在内存中的存储情况 在堆里面开辟一个存储空间 把数据存储到存储空间内 ...
【前端】数组的常用处理函数
最新发布
lcukyNwa的博客
04-22 409
item------->每个元素值 (必)index----->索引（可选）arr-------- >当前数组（可选）推荐vscode的一款插件来写以下的demo，该插件可以直接在js文件中显示结果，搜 Quokka.js用这个插件去新建一个js文件，直接就运行在node上了forEach不会返回一个新的数组，里面改值会影响原数组，其他方法不影响原数组map可以返回新数组 用于映射，如每个元素都加倍或执行其他转换操作every返回一布尔值，需数组中全部满足。
您是一个前端小白，怎么入门前端
06-11
作为一个前端小白，入门前端需要掌握一些基础知识和技能，下面是一些入门前端的建议： 1. HTML和CSS基础：HTML用来定义网页结构，CSS用来定义网页样式。掌握HTML和CSS基础是前端开发的基础。 2. JavaScript基础：...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值