JS学习之路(五)字符串方法

字符串方法和属性
length 属性返回字符串的长度:
查找字符串中的字符串
①indexOf() 方法返回字符串中指定文本首次出现的索引(位置):
lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引:
如果未找到文本, indexOf() 和 lastIndexOf() 均返回 -1。
两种方法都接受作为检索起始位置的第二个参数。
例 var pos = str.indexOf(“China”, 18);

②search() 方法搜索特定值的字符串,并返回匹配的位置:
search() 方法无法设置第二个开始位置参数。
indexOf() 方法无法设置更强大的搜索值(正则表达式)。

提取部分字符串
slice(start, end)
substring(start, end)
substr(start, length)

①slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。
var str = “Apple, Banana, Mango”;
var res = str.slice(7,13);
res=Banana
如果某个参数为负,则从字符串的结尾开始计数。

②substring() 方法
substring() 类似于 slice()。
不同之处在于 substring() 无法接受负的索引。

③substr() 方法
substr() 类似于 slice()。
不同之处在于第二个参数规定被提取部分的长度。

替换字符串内容
①replace() 方法用另一个值替换在字符串中指定的值
str = “Please visit Microsoft!”;
var n = str.replace(“Microsoft”, “W3School”);
默认地,replace() 只替换首个匹配,且对大小写敏感:

转换为大写和小写
①toUpperCase() 把字符串转换为大写:
②toLowerCase() 把字符串转换为小写:

其他
①concat() 方法
concat() 连接两个或多个字符串:
var text1 = “Hello”;
var text2 = “World”;
text3 = text1.concat(” “,text2);

var text = “Hello” + ” ” + “World!”;
var text = “Hello”.concat(” “,”World!”);

②trim() 方法删除字符串两端的空白符:

提取字符串字符
charAt(position)
charCodeAt(position)
①charAt() 方法
charAt() 方法返回字符串中指定下标(位置)的字符串:

②charCodeAt() 方法
charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码:

把字符串转换为数组
可以通过 split() 将字符串转换为数组:
txt.split(“,”); // 用逗号分隔
txt.split(” “); // 用空格分隔
txt.split(“|”); // 用竖线分隔

js学习之路(四)数组方法

把数组转换为字符串
①toString() 把数组转换为数组值(逗号分隔)的字符串。

②join() 方法也可将所有数组元素结合为一个字符串。
它的行为类似 toString(),但是您还可以规定分隔符:
var fruits = [“Banana”, “Orange”,”Apple”, “Mango”];
document.getElementById(“demo”).innerHTML = fruits.join(” * “);
Banana * Orange * Apple * Mango

删除元素和添加新元素
pop() 方法从数组中删除最后一个元素,返回“被弹出”的值:
push() 方法(在数组结尾处)向数组添加一个新的元素,返回新数组的长度
shift() 方法会删除首个数组元素,并把所有其他元素“位移”到更低的索,返回被“位移出”的字符串
unshift() 方法(在开头)向数组添加新元素,并“反向位移”旧元素,返回新数组的长度
⑤length 属性提供了向数组追加新元素的简易方法:
var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
fruits[fruits.length] = “Kiwi”; // 向 fruits 追加 “Kiwi”

⑥既然 JavaScript 数组属于对象,其中的元素就可以使用 JavaScript delete 运算符来删除:
var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
delete fruits[0]; // 把 fruits 中的首个元素改为 undefined

拼接数组
splice() 方法可用于向数组添加新项:
var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
fruits.splice(2, 0, “Lemon”, “Kiwi”);
第一个参数(2)定义了应添加新元素的位置(拼接)。
第二个参数(0)定义应删除多少元素。
其余参数(“Lemon”,“Kiwi”)定义要添加的新元素。
splice() 方法返回一个包含已删除项的数组:

合并(连接)数组
concat() 方法通过合并(连接)现有数组来创建一个新数组:
var myGirls = [“Cecilie”, “Lone”];
var myBoys = [“Emil”, “Tobias”, “Linus”];
var myChildren = myGirls.concat(myBoys); // 连接 myGirls 和 myBoys
concat() 方法不会更改现有数组。它总是返回一个新数组。
concat() 方法可以使用任意数量的数组参数:

裁剪数组
slice() 方法用数组的某个片段切出新数组。
从数组元素 1 (”Orange”)开始切出一段数组:
var fruits = [“Banana”, “Orange”, “Lemon”, “Apple”, “Mango”];
var citrus = fruits.slice(1);
slice() 可接受两个参数,比如 (1, 3)。
该方法会从开始参数选取元素,直到结束参数(不包括)为止。

数组排序
①sort() 方法以字母顺序对数组进行排序:
②reverse() 方法反转数组中的元素。
您可以使用它以降序对数组进行排序:
③sort() 方法在对数值排序时会产生不正确的结果。
我们通过一个比值函数来修正此问题
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a – b});
④以随机顺序排序数组
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 – Math.random()});
⑤查找最高(或最低)的数组值
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a – b});
⑥可以使用 Math.max.apply 来查找数组中的最高值
var points = [40, 100, 1, 5, 25, 10];
document.getElementById(“demo”).innerHTML = myArrayMax(points);
function myArrayMax(arr) {
return Math.max.apply(null, arr);
}

数组迭代方法
①Array.forEach()
forEach() 方法为每个数组元素调用一次函数(回调函数)。
var txt = “”;
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt = txt + value + “
“;
}
②Array.map()
map() 方法通过对每个数组元素执行函数来创建新数组。
map() 方法不会对没有值的数组元素执行函数。
map() 方法不会更改原始数组。
将每个数组值乘以2
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
return value * 2;
}
③Array.filter()
filter() 方法创建一个包含通过测试的数组元素的新数组。
用值大于 18 的元素创建一个新数组
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
④Array.reduce()
每个数组元素上运行函数,以生成(减少它)单个值

五Array.every()
every() 方法检查所有数组值是否通过测试。
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value) {
return value > 18;
}
false
Array.some()
some() 方法检查某些数组值是否通过了测试。
var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
true

⑦Array.indexOf()
indexOf() 方法在数组中搜索元素值并返回其位置。
array.indexOf(item, start)
array.lastIndexOf(item, start)
var fruits = [“Apple”, “Orange”, “Apple”, “Mango”];
var a = fruits.indexOf(“Apple”);

⑧Array.find()
find() 方法返回通过测试函数的第一个数组元素的值。
这个例子查找(返回)大于 18 的第一个元素的值:
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
function myFunction(value, index, array) {
return value > 18;
}

Array.findIndex()
findIndex() 方法返回通过测试函数的第一个数组元素的索引。
这个例子查找大于 18 的第一个元素的索引:
var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return value > 18;
}

JS学习之路(三) 数学方法

①Math.round()
Math.round(x) 的返回值是 x 四舍五入为最接近的整数:
Math.round(6.8); // 返回 7
Math.round(2.3); // 返回 2

②Math.pow()
Math.pow(x, y) 的返回值是 x 的 y 次幂:
Math.pow(8, 2); // 返回 64

③Math.sqrt()
Math.sqrt(x) 返回 x 的平方根:
Math.sqrt(64); // 返回 8

④Math.abs()
Math.abs(x) 返回 x 的绝对(正)值:
Math.abs(-4.7); // 返回 4.7

⑤Math.ceil()
Math.ceil(x) 的返回值是 x 上舍入最接近的整数:
Math.ceil(6.4); // 返回 7

⑥Math.floor()
Math.floor(x) 的返回值是 x 下舍入最接近的整数:
Math.floor(2.7); // 返回 2

⑦Math.sin() Math.cos()
Math.sin(x) 返回角 x(以弧度计)的正弦(介于 -1 与 1 之间的值)。
如果您希望使用角度替代弧度,则需要将角度转换为弧度:
Angle in radians = Angle in degrees x PI / 180.
Math.sin(90 * Math.PI / 180); // 返回 1(90 度的正弦)

⑧Math.min() 和 Math.max()
Math.min() 和 Math.max() 可用于查找参数列表中的最低或最高值
Math.min(0, 450, 35, 10, -8, -300, -78); // 返回 -300

⑨Math.random()
Math.random() 返回介于 0(包括) 与 1(不包括) 之间的随机数:
返回指定范围的随机数(m-n之间)的公式:
Math.random()(n-m)+m; 或者 Math.random()(n+1-m)+m

随机生成a~z之间的字符
(char)(‘a’+Math.random()*(‘z’-‘a’+1));

JS学习之路(二)数字方法

Number 方法和属性
①toString() 方法
toString() 以字符串返回数值。
②toExponential() 方法
toExponential() 返回字符串值,它包含已被四舍五入并使用指数计数法的数字。
var x = 9.656;
x.toExponential(2); // 返回 9.66e+0
x.toExponential(4); // 返回 9.6560e+0
x.toExponential(6); // 返回 9.656000e+0
③toFixed() 方法
toFixed() 返回字符串值,它包含了指定位数小数的数字:
④toPrecision() 方法
toPrecision() 返回字符串值,它包含了指定长度的数字:
var x = 9.656;
x.toPrecision(); // 返回 9.656
x.toPrecision(2); // 返回 9.7
x.toPrecision(4); // 返回 9.656
x.toPrecision(6); // 返回 9.65600
⑤valueOf() 方法
valueOf() 以数值返回数值:

把变量转换为数值
这三种 JavaScript 方法可用于将变量转换为数字:
Number() 方法
parseInt() 方法
parseFloat() 方法
这些方法并非数字方法,而是全局 JavaScript 方法。
JavaScript 全局方法可用于所有 JavaScript 数据类型。

JS学习之路(一)

①常量与变量 变量:let person = “Bill Gates”, carName = “porsche”, price = 15000;
驼峰法:首字母小写后面单词首字母大写如myAge
常量:const 全局不变的值,必须有初始值
②数据类型 简单数据类型:数值(浮点数计算会丢失精度)、字符串值,布尔值,未定义值,空值(typeof 变量 ) 复杂数据类型(引用类型)
数据类型转化(1)转化为string:变量.toString(进制可不传) null和undefined不能调用toString方法,要用字符串拼接:变量+””;(2)字符串转数字:纯数字转为数值,纯空格或0转为0,含非数字空格转为NaN()布尔转数字true=1,false=0 parseInt(要转换的参数,进制默认10进制)从开头找数字,遇到非数字停止 parseFloat()和parseInt类似,只有一个参数,能检测到第一个小数点(3)转布尔 Boolean()
③运算符 加法运算符(+)对数字相加: 乘法运算符(*)对数字相乘:其他类似
相加两个数字,将返回和,但对一个数字和一个字符串相加将返回一个字符串:除法(余数)运算符由百分号(%)表示 var iResult = 26%5 等于 1

类是抽象的,泛指的
对象是类的某一特指的
// 1.创建类class
创建一个明星类
class Star{
constructor(uname, age) {
this . uname = uname ;
this.age = age;
}
//类中的方法
sing() {
console.1og(”我唱歌);
}
}

// 2.利用类创建对象
new
var ldh = new Star( ‘刘德华’,18);
var zxy = new Star(‘张学友’, 20);
ldh.sing();

继承
class Son extends Father {
}
即可继承父类的公共属性和方法

CSS学习之路(完)

过渡效果①有发生改变的属性
②告诉系统那个属性需要改变 transition-property:属性1,属性2,…
③告诉系统过渡效果持续时长 transition-duration:时间1,时间2,…
过渡其他属性 transition-delay: ;延迟多少秒之后再执行 transition-timing-function:(匀速,先快后慢,先慢后快等) ;
连写:transition:property duration timing-function delay

transform:向元素应用 2D 或 3D 转换。
transform-origin:允许你改变被转换元素的位置。
transform-style:规定被嵌套元素如何在 3D 空间中显示
perspective:规定 3D 元素的透视效果。(近大远小)
perspective-origin:规定 3D 元素的底部位置。
backface-visibility:定义元素在不面对屏幕时是否可见。

动画模块 复杂的还需要看下专题

CSS学习之路(六)

absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative:生成相对定位的元素,相对于其正常位置进行定位。
因此,”left:20″ 会向元素的 LEFT 位置添加 20 像素。
static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
定位流层级比正常流(static)高,遵循子绝父相原则,可用z-index规定层级

过渡效果①有发生改变的属性
②告诉系统那个属性需要改变 transition-property:属性1,属性2,…
③告诉系统过渡效果持续时长 transition-duration:时间1,时间2,…
过渡其他属性 transition-delay: ;延迟多少秒之后再执行 transition-timing-function:(匀速,先快后慢,先慢后快等) ;
连写:transition:property duration timing-function delay

CSS学习之路(五)

浮动属性:float(left,right)float属性全是inline-block级元素(贴靠现象)。撑不起div,和标准流不在同一层。位置继承父元素。字围现象:当设置一个元素浮动时,父元素的内容文字不会在浮动元素空间显示,而是从浮动元素后显示。常用做图片加文字排版等。
浮动清除 clear:(none,left,right,both)无,清除该元素左浮动,清除该元素右浮动,该块(行)全部清除。清除方法1:父元素设置高度(不常用) 清除方法2:设置claer:both属性(不常用,会导致margin失效)清除方法3:内墙法(父元素最后一个子元素后设置一个div)和外墙法(父元素后设置一个div)清除方法4:伪元素选择器 标签::before(after) 设置一个内墙 清除浮动5:父元素添加属性overflow:none(最常用)