Home > Web Front-end > JS Tutorial > Study notes worth collecting in Java Script (summary sharing)

Study notes worth collecting in Java Script (summary sharing)

WBOY
Release: 2021-10-12 11:38:34
forward
2324 people have browsed it

Today I bring you some basic JavaScript learning notes that are worth collecting. They contain a lot of little knowledge, so hurry up and take a look!

Study notes worth collecting in Java Script (summary sharing)

What is JavaScript?

JavaScript is a scripting language that runs on the client


Basic input and output statements

Function Statement
Print output console.log()
Pop-up output box alert
Pop-up input box prompt
File writing document.write('')
  • Little theory:
    console.log can output any type of data , alert can only output String type data, and can only output the first data. If the alert output is an object, the toString() method will be automatically called.

Variable

Declaring variable var (name)

  • Some notes
    • When declaring multiple variables at one time, they must be separated by commas and must be wrapped in new lines. Multiple declared variables written on the same line will be invalid.

    • The direct output result of uninitialized variables is undfined

    • Naming convention for variables: alphanumeric underline dollar sign (not starting with a number)

    • In variable initialization, there is no difference between single quotes and double quotes


Data type

JavaScipt is a> dynamic/weakly typed language

##Num numberBooleanStr string typeUndefined unknown valueNull

The variable data type of js is determined based on the value on the right side of the equal sign only during the running process of the program. It is also called dynamic data type

Common statements:

IsNAN() //判断值是否为非数字
//转义符: \n换行 \t缩进 \b空格
str.length  //获取字符串长度
Copy after login

Little theory

  • undefined and numbers are added, the result is NaN

  • ##null 1 is equal to 1

  • The value taken from prompt is character type.

For addition of prompt value, there are the following addition cases:

//demo onevar a,
	b
	;a = parseInt(prompt('请输入第一个值'));
	b = parseInt(prompt('请输入第二个值'));
	var c = a + b;
	alert (c);
	//demo two
	var a = prompt('请输入第一个值');
	var b = prompt('请输入第二个值');
	var c = Number(a) + Number(b);
	alert (c);
Copy after login

String conversion(chrom color is black)

    Variable.toString()
  • String() forced conversion
  • Implicit conversion: splicing
  • String template splicingMy age is ${age} years old (Be careful not to drop the backticks)

Number type conversion (chrom color is blue)

    Parselnt() is converted to integer type
  • parseFloat() is converted to floating point type
  • Number () Forced conversion function
  • Implicit conversion: - * / Arithmetic operation implicit conversion

Boolean conversion(chrom color is blue)

  • Empty and negative will be converted to false: such as '', 0, NaN, null, undefined The rest are all true

Operator

==Default conversion of numeric type will convert character type into numeric type
===Congruent, requires the value and data type to be the same
Priority:

  • Brackets

  • Single eye (right combined right to left)

  • Arithmetic*/%

  • Displacement

  • Relationship

  • Equal

  • Logic&^| &&||

  • Assignment

  • Comma


Selection statement

    if has nothing to say
  • Switch Notes:
  • The value judgment of case is
    all Waiting for operationsJudgement

Array

    How to create an array
  • 1. Use new to create an array
var arr = new Array() //注意的是,new A必须大写
var arr = new Array(2); //表示数据长度2
var arr = new Array(2, 3); //表示里面有两个元素是2和3
Copy after login
2. Use literals to create arrays


var arr = [];
Copy after login
3. Get the length of the array


arr.length
Copy after login
You can also pass arr.length = (Number) Method to modify the array length


Note:

    The default value of redundant addresses/empty addresses/undefined array elements is undefined
  • Take C language as an example, By default, character arrays end with a \0, and out-of-bounds subscripts will cause program errors. The advantage of JS setting like this is that the array length can not be defined, or the address space can be given in advance.
    4. Implement array migration so that there is no need to define index/subscript variables
newArry[new.Arry.length] = arr[i++];
Copy after login
Commonly used built-in objects of arrays

1. Judge arrays

// var arr = [];
arr instanceof Array //Instanceof运算符判断是否为数组
Array.isArray(arr)  //isArray判断是否为数组
Copy after login
2. Add array elements


arr.push() //在数组最后添加一个或多个数组元素
arr.unshift() //在数组最前面添加一个或多个数组元素
Copy after login
Practical: push can assign a value to a new empty array, and both push and unshift have a return value, which is the length of the new array


3. Delete array elements

arr.pop()  //删除数组中最后一个元素
arr.shift()  //删除数组中第一个元素
Copy after login
There is a return value, which is the value of the deleted element


4. Flip/reverse the array

arr.reverse()
Copy after login
5. Array sorting


arr.sort() //对个位数进行冒泡排序
Copy after login
Theory: Why is it said that bubble sorting is performed on single digits? Because sort compares arrays and converts the arrays into strings first, so 77 will come before 8, but if there is a comparison function ( compareFunction), you can arrange as required


arr.sort solution

arr.sort(function(a,b)) {
	return a - b;
	//return b - a
Copy after login
a - b is ascending order, b - a is descending order Sort


6. Search the array

arr.indexOf('word');
Copy after login

From front to back Search and return the index number of the first element of the array that meets the condition. If not found, return - 1

arr.lastIndexOf('word');
Copy after login

From back to front Search and return the index number of the first element in the array that meets the condition. If not found, return -1

7. Convert to string

arr.toString() //数组转换成字符串
arr.join() //将数组转换成字符串,且括号内可以写分隔符,表示用什么符号格式进行分隔 arr.join('&')
Copy after login

Arguments Pseudo array can only be used in functions

The data is also stored according to the subscript method, and the length does not need to be defined. Implement formal parameter reception


Function

  • Declaration function:

  • Function function name () { }

  • var variable name = Function () { } Function expression (anonymous function)

  • Pre-parsing:

    is to bring all the vars and functions in JS to the front of the current scope

  • Variable pre-parsing

    All variable declarations in advance (without mentioning assignment operations)

  • Function pre-parsing

    All function declarations in advance (without calling functions)
    → So Pay extra attention to preparsing of function expressions and declared functions

理论:

  • 如果形参多于实参,按前取;如果有实参没有被传值,默认是undefined
  • Return返回一个值,但是如果return[ ] 且有多个表达式以逗号隔开,那返回值会是整个[]的 所有 运算结果
  • !!如果函数没有返回值,那么返回的是undefined !!
  • 在函数内部直接赋值的变量属于全局变量
  • 函数的形参是局部变量
  • 块级作用域: {} (es6新增,其他版本在括号里面定
    义的变量也能在外面调用
  • 作用域链:多个函数嵌套的时候会形成作用域链,子函数能访问父函数的块作用域

对象

  • 什么是对象?
    对象是一组无序的相关属性和方法的集合(字符串,数值,数组,函数)
    在其他语言中,类似 >结构体 >字典

创建自定义对象和对象属性、对象方法:

  1. 字面量创建
var obj = {
	name:'姓名',
	age : 999,
	//*方法*冒号后跟一个*匿名函数*
	printf:function() {
		console.log('hello world');
	}
	}
Copy after login

记忆方法↓:

  • 直接给对象名、属性冒号跟值+语句结束逗号
  • 方法用冒号
  • 取值:对象名.属性名 or 对象名[‘属性名’]
  • 调用对象方法: 对象名.方法名();
  1. new object
var obj = new Object();
obj.name = '李昂';
obj.age = 999;
obj.printf:function(){
	console.log('hello world');
	}
Copy after login

记忆方法↓:

  • var对象名 = new Object (); 不加分号
  • 对象名.属性 = 取值 + 分号
  • 方法用冒号
  • 取值:对象名.属性名 or 对象名[‘属性名’]
  • 调用对象方法: 对象名.方法名();

3.构造函数

function Obj (Uname, Uage) {
this.name = Uname;
this.age = Uage;
this.printf = function(infoms){
	console.log(infoms);
	}
	}
Copy after login

记忆方法↓:

  • 类似函数声明,但是构造函数函数名首字母必须大写,this.属性
  • 方法用等号
  • 构造函数必须得有变量传值,构造函数的方法也必须有变量传值
  • 调用构造函数 var 变量 = new 构造函数名(传递的值)
var myobj = new Obj('李昂', '999');//可以理解为创建了一个变量指定了构造函数
console.log(myobj.name);
console.log(myobj['age']);
obj.printf('hello world');
Copy after login

new的执行过程

  • new构造函数会在内存中创建一个空的对象

  • this就会指向刚才创建的对象

  • 接着依次执行属性、方法,并返回

新循环遍历

For (变量 in 对象){
}
这里的变量是属性值做遍历
属性的的输出:consolo.log(对象[变量]);
程序员在for in 的变量喜欢写Key或者i

一些可用内置对象:

Math.PI //求圆周率
Math.max()//返回最大数值(如果无值返回负无穷大)
Math.abc ()//取绝对值
Math.floor()//向下取整
Math.ceil()//向上取整
Math.round()//四舍五入(五特殊 往大了取)
Copy after login
  • 随机数
Math.random() ;
Copy after login
  • 返回一个随机浮点数【0,1)括号里不跟参数
    ↓ 扩展:得到自定义最大值和最小值中间的随机函数
Function getRandomInt(min, max) {
	min = Math.ceil(min); //规范值语句 可省
	max = Math.floor(max); //规范值语句 可省
	return = Math.floor(Math.random() * (max - min + 1) + min);
Copy after login
  • new Date()调用日期对象 不跟参数返回系统时间
  • (‘2021-10-10 8:00:00’)字符串输出

  • (2021, 10, 10)数字输出 月份从0开始11结束 故而要在月份的基础上+1

  • 变量.getDay()获取当前星期,星期日从0开始 到星期六6结束 获取到的值是一个数字
    ↓规范获取当前时间 demo
var date1 = new Date;
var year = date1.getFunllYear();
var month = date1.getMonth();
var dates = date1.getDate();
var day = date1.getDay();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
alert('今天的日期是:' + year + '年' + (month+1) + '月' + dates + '日' + arr[day]);
Copy after login

==值得注意的是,必须使用变量调用Date这个构造函数

基本包装类型:

  • 就是把简单数据类型包装成复杂数据类型,这样基本数据类型就有了属性和方法,那么一般来说在浏览器里面JS引擎会自动帮我们把简单数据类型包装成复杂数据类型
var str = 'lion';
 console.log(str.length);
 //JS如何给我们的数据包装
 var temp = new String('lion');//定义一个临时构造函数包含初始化的字符串
 str = temp; //把构造函数赋给值类型
 temp = null; //最后舍弃临时变量
Copy after login
  • 一些可用的字符串内置对象
  1. 查找字符串
str.indexOf('要查找的字符串',[起始位置]);
//demo:
var str = '我的名字是什么,名字不重要';
console.log(str.indexOf('名字', 3));
Copy after login
  1. 查找指定字符
str.charAt(0); //返回指定下标的字符
str.charCodeAt(0); //返回指定下标的ASCII码
Copy after login
  1. 拼接字符串
str.concat('word') //拼接字符串(开发中隐性拼接居多)
Copy after login
  1. 查找某一连续字符
str.substr('抓起始位置', '抓几个字符'); //查找某一连续字符
Copy after login
  1. 替换字符
str.replace('被替换的字符', '替换为字符') //如果字符串中有重复的字符,只会替换第一个
Copy after login
  1. 字符串转换成数组
split('分隔符') //把字符串转换为数组(被转换字符串中必须要写分隔符,而且要与split的分隔符统一!)
Copy after login

一些传参和类型的–
理论深入:

  • 简单类型又被称为基本类型或者值类型 因为存储是值本身
  • 系统自动分配释放存放函数的值,局部变量的值,被称为栈
  • 复杂类型又叫引用类型 因为存储的是地址 调用的时候需要专门引用
  • 现在栈里面存放16进制地址码,然后指向堆里面的数据(对象实例),被称为堆复杂类型传参,如果不是传值,传的指针,也就是传地址
  • 特殊: Null返回的是一个空的对象(因为程序的设计缺陷)
  • 可以定义变量为Null,稍后再给值

更多编程相关知识,请访问:编程入门!!

The above is the detailed content of Study notes worth collecting in Java Script (summary sharing). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template