JavaScript --笔记
一、用处
JavaScript
- 前端
- 后端Node.js
- 移动端Cordova搭建android的apk和ios的ipa
- PC端Electron搭建windows、macos、linux的应用程序
- ioT物联网
二、变量
let
- 声明一次后可以更改值
- 不可重复声明
const
- 声明常量使用，一般用于声明对象常量
- 常量不可更改
- 对于数值、布尔或者字符串类常量不可改变
- 对于对象，允许修改或重新赋值对象的属性，但变量本身的引用地址不可更改
三、模板字面量
原
const book = {
name: 'aaa'
}
consolo.log('你正在阅读' + book.name + '.,\n这是新的一行')
简化
const book = {
name: 'aaa'
}
console.log(`你正在阅读${book.name}。
这是新的一行`)
四、使用类进行面向对象编程
- class & constructor
- extend支持继承
- 支持get & set 的属性存取器
class Book {
constructor (title, pages , name) {
this.title = title
this.pages = pages
this.name = name
}
printTitle () {
console.log(this.title)
}
}
-
模块导入导出（模块就是单个文件中声明的JS代码，因此可从其他文件导入函数、变量和类）
-
传统NodeJS -- require（CommonJS模块）
-
方法导入导出
//A.js 导出 const circleArea = (r) { return 3.14 * r * r } export {circleArea} //导入使用 import {circleArea} from 'A.js' import {circleArea as circleAreaB} from 'A.js' //可以导入时重命名该方法 import * as area from 'A.js' //把整个模块当做一个变量导入，使用按照类的属性、方法使用 -
类导出导入
//A.JS导出 export default class Book { constructor (title) { this.title = title } printTitle() { console.log(this.title) } } //导入使用 import Book from 'A.js'<补>原生html引用带有import的A.JS文件
//test.js export default function test(){ return 'testContent' } //B.js import test from '/test.js' console.log(test()) //html <script type = 'module' src = 'B.js'></script>
-
javaScript高级 --笔记
一、String
1、trim
作用：方法用于删除字符串的头尾空白符，空白符包括：空格、制表符 tab、换行符等其他空白符等
- 注意：
- 不会改变原始字符串
var str = " Runoob ";
alert(str.trim());
//Runoob
二、数组
1、indexOf
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";
let a = myArray.indexOf('hello')
//a 是hello值的索引值,
// 1
2、concat 合并数组
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var children = hege.concat(stale);
//children 是 两个数组的合并
//[Cecilie,Lone,Emil,Tobias,Linus]
3、join
<p id="demo">点击按钮将数组作为字符串输出。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x=document.getElementById("demo");
x.innerHTML=fruits.join();
}
// join 用于将数组内的元素转为字符串输出
// Banana,Orange,Apple,Mango
</script>
4、pop
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
fruits.pop();
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
//用于删除数组的最后一个元素
//[Banana,Orange,Apple]
5、push
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
fruits.push("Kiwi")
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
//用于向数组最后添加元素
//[Banana,Orange,Apple,Mango,Kiwi]
6、reverse
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
fruits.reverse();
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
//实现数组元素反向排序
//[Mango,Apple,Orange,Banana]
7、shift unshift
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
var delell = fruits.shift();
var x=document.getElementById("demo");
x.innerHTML= '删除后数组为：' + fruits;
document.getElementById("demo2").innerHTML= '删除的元素是：' + delell;
}
//用于删除数组的第一个元素
//删除后数组为：Orange,Apple,Mango;删除的元素是：Banana
//----------------------------------------------
function myFunction(){
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
//用于向数组开头加入元素
//[Lemon,Pineapple,Banana,Orange,Apple,Mango]
8、sort
function myFunction(){
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
//用于将数组内的元素按照字母顺序排序
//[Apple,Banana,Mango,Orange]
//---------------------------------------------------
function myFunction(){
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b}); //这里的a-b指的是从a到b，不是a减b，即从小到大
var x=document.getElementById("demo");
x.innerHTML=points;
}
//用于将数组内的元素按照升序排列
//[1,5,10,25,40,100]
9、slice
//情况一
var a = [1,2,3,4,5]; //定义数组
var b = a.splice(2); //从第三个元素开始执行删除
console.log(b); //b是[1,2]
//传递一个参数，则该方法仅执行删除操作，参数值指定删除元素的起始下标（包含该下标元素）
//情况2
var a = [1,2,3,4,5]; //定义数组
var b = a.splice(2,2); //从第三个元素开始执行删除，删除元素个数为2个
console.log(b); //b是[1,2,5]
// 传递两个参数，则第 2 个参数值表示要删除元素的个数
//情况3
var a = [1,2,3,4,5]; //定义数组
var b = a.splice(2,2,6,7);
console.log(a); //a是[1,2,6,7,5]
// 传递3个及以上，第三个及以后的参数作为需要插入的元素。
//情况4
var a = [1,2,3,4,5]; //定义数组
var b = a.splice(-2,-2,6,7); //第一、二个参数都为负值
console.log(a); //返回[1,2,3,6,7,4,5]
// 如果第 1 个参数为负值，则按绝对值从数组右侧开始向左侧定位。如果第 2 个参数为负值，则被视为 0
10、splice
//情况1
var a = [1,2,3,4,5]; //定义数组
var b = a.slice(2); //截取数组中第三个元素，以及后面所有元素
console.log(b); //返回[3,4,5]
//如果仅指定一个参数，则表示从该参数值指定的下标位置开始，截取到数组的尾部所有元素
//情况2
var a = [1,2,3,4,5]; //定义数组
var b = a.slice(-4,-2); //截取倒数第四个元素到倒数第二个元素前的元素
console.log(b); //返回[2,3]
//情况3
var a = [1,2,3,4,5]; //定义数组
var b = a.slice(2,4); //截取第三个元素到第五个元素前的所有元素
console.log(b); //返回[3,4,5]
//能够截取数组中指定区段的元素，并返回这个子数组。该方法包含两个参数，分别指定截取子数组的起始和结束位置的下标
11、map
作用：按照某种映射关系,把数组的每一个元素给修改了
- 注意：
- map()方法不会对空数组进行检测
- map()方法不会改变原始数组， 返回映射之后的新数组
var numbers = [4, 9, 16, 25];
function myFunction() {
x = document.getElementById("demo")
x.innerHTML = numbers.map(Math.sqrt);
}
myFunction()
//2,3,4,5
