One of the important versions of Javascript - ES5 new features summary

1. Strict mode

Write "use strict" at the head of the JS file or the first sentence of the function

<script>
	"use strict"
	text = "严格模式"
	console.log(text) // 会报错,报错内容:text is not defined 不能使用未声明过的变量
	function ceshi(){
      
      
		"use strict"
		msg = "函数内部严格模式"
		console.log(msg)   //报错  报错内容:msg is not defined
	}
	ceshi()
</script>

1. It is forbidden to use undeclared variables and assign values
​​2. In function precompilation, this defaults to undefined and no longer points to window
3. It is forbidden to duplicate the name of object attributes and function parameters
4. It is forbidden to use octal numbers
5. It is forbidden to use with statement
6. Forcibly create a new scope for eval
7. Display an error for operations beyond the authority, and no longer do silent failure processing

Second, the method of adding an array

1、Array.isArray()

The isArray() method checks if the object is an array.

Array.isArray([1, 2, 3, 4, 5])  //true
Array.isArray("123456")  //false
Array.isArray(123456)  //false
Array.isArray({
    
     a: 1 })  //false
Array.isArray(true)  //false
Array.isArray(undefined)  //false
Array.isArray(null)  //false

2、Array.forEach()

The forEach() method calls a function for each array element to traverse the index array. The
parameter is a function, and the callback function has three parameters (the value of the current element of the original array, the current subscript, and the original array) and
has no return value

<script>
    var arr = ["a", "b", "c", "d", "e", "f"]
    arr.forEach(function (item, index, value) {
      
      
        console.log(item, index, value)
    })
</script>

insert image description here

3、Array.map()

map() reads each value in the original array, which can be modified, and then generates a new array. The return
parameter is a function, and the callback function has three parameters (the value of the current element of the original array, the current subscript, and the original array)
to return Value, need to return will return a new array

<script>
    var arr = ["a", "b", "c", "d", "e", "f"]
    let arrnew = arr.map(function (item, index, value) {
      
      
        console.log(item, index, value)
        return item += "!"
    })
    console.log(arrnew)
</script>

insert image description here

4、Array.filter()

filter() traverses the array elements, filters out qualified elements, and puts them into a new array. The parameter
is a function, and the callback function has three parameters (the value of the current element of the original array, the current subscript, and the original array)
with a return value. Need return will return a new array

<script>
    var arr = [1, 2, 3, 4, 5, 6, 7, 8]
    let arrnew = arr.filter(function (item, index, value) {
      
      
        console.log(item, index, value)
        return item > 5   //过滤出数组中大于5的每一项,组成一个新的数组
    })
    console.log(arrnew)
</script>

insert image description here

5、Array.reduce()

reduce() traverses the array, processes elements and stored values, and returns the stored value
parameter is a function and an initial value. The callback function has four parameters: stored value, element value, element subscript, array, and the callback function needs to return Value
can be used to return the sum of all numbers in the array; it can also be used to deduplicate the array (you can check the logic on Baidu yourself)

<script>
    var arr = [1, 2, 3, 4, 5, 6, 7, 8]
    let count = arr.reduce(function (accumulator, Value, Index, array) {
      
      
        console.log(accumulator, Value, Index, array)
        return accumulator + Value;  
    }, 0) // 把0当做初始值传入
    console.log(count)
</script>

insert image description here

6、Array.reduceRight()

The method of reduceRight() refers to reduce(). Unlike reduce, the calculation starts from right to left.

<script>
    var arr = [1, 2, 3, 4, 5, 6, 7, 8]
    let count = arr.reduceRight(function (accumulator, Value, Index, array) {
      
      
        console.log(accumulator, Value, Index, array)
        return accumulator + Value;  
    }, 0) //
    console.log(count)
</script>

insert image description here

7、Array.every()

every() checks whether each value of the array meets the requirements
. It has its own loop, and the callback function parameter is called once every loop
. The callback function has three parameters (the value of the current element of the original array, the current subscript, the original array )
returns true or false

<script>
    var arr = [1, 2, 3, 4, 5, 6, 7, 8]
    let count = arr.every(function (item, index, arr) {
      
      
        console.log(item, index, arr)
        return item >=2 //判断是否全部大于等于2
    }) 
    console.log(count)
</script>

insert image description here
Because the first item does not meet the conditions, it will not loop down

8、Array.some()

some() judges whether the elements of the check array meet the conditions (if there is a match, it will return true)
and return true or false

<script>
    var arr = [1, 2, 3, 4, 5, 6, 7, 8]
    let count = arr.every(function (item, index, arr) {
      
      
        console.log(item, index, arr)
        return item = 8 //判断数组中是否有一项等于8
    })
    console.log(count)
</script>

insert image description here

9、Array.indexOf()

indexOf() retrieves an element value in the array and returns its position: if
there is an element value in the array, it will return the subscript of the element value, if it does not exist, it will return -1
There are two parameters, the first parameter is required , fill in the element value; the second is optional, you can fill in the subscript
such as indexOf(1,5), start from the position of subscript 5 and search backward for 1

<script>
    var arr = [1, 2, 3, 4, 1, 5, 6, 7, 8]
    console.log(arr.indexOf(1))
    console.log(arr.indexOf(1,3))
    console.log(arr.indexOf(5))
    console.log(arr.indexOf(10))
</script>

insert image description here

10、Array.lastIndexOf()

Array.lastIndexOf() Like Array.indexOf(), but starts searching from the end of the array.
Returns the position of the last occurrence of the specified element in the array, or -1 if there is none. This method searches forward from the back of the array.
lastIndexoOf(item,index)
index: Specifies the position of the element to be searched, from which the reverse search starts. Defaults to the length of the array minus 1 (arr.length - 1). If it is a negative value, it means to look forward from the penultimate number

<script>
    var arr = [1, 2, 3, 4, 1, 5, 6, 7, 8]
    console.log(arr.lastIndexOf(1))
    console.log(arr.lastIndexOf(5))
    console.log(arr.lastIndexOf(10))
</script>

insert image description here

Three, the method of JSON

1、JSON.stringify()

A common use of JSON is to send data to a web server.
When sending data to the web server, the data must be a string.
Role: convert arrays and objects into JSON strings

<script>
    var obj = {
      
       "name": "LiMing", "age": 18, "city": "QingDao" };
    var JSstr = JSON.stringify(obj)
    console.log(obj)
    console.log(JSstr)
</script>

insert image description here
The result will be a string following JSON notation.

2、JSON.parse()

Convert a string to an object, a total of two parameters
The first parameter: required, a string The
second parameter: optional, is a function, the function passes two parameters
key is converted to the property name of the object
value is converted to the property of the object value

<script>
    var obj = {
      
       "name": "Bill", "age": 62, "city": "Seatle" };
    var JSstr = JSON.stringify(obj)

    let JSpar = JSON.parse(JSstr)
    console.log(JSpar)
    JSpar = JSON.parse(JSstr, function (key, value) {
      
      
        console.log(key, value)
        return value + "!"
    })
</script>

insert image description here

Fourth, the method of adding a string

String.trim()

The method will delete blank characters from both ends of a string, and will not remove the spaces in the middle.
The trim() method does not affect the original string itself
. What is returned is a new string, which needs to be defined to receive

<script>
    var str = "           abc     def       "
    var strnew =  str.trim()
    console.log(str)
    console.log(strnew) 
</script>

insert image description here

5. New method of object

1、Object.keys()

The method is used to get all the property names of the object itself,
and the effect is similar to that for...in
returns an array composed of property names

<script>
    var obj = {
      
       a: 1, b: 2, c: 3 }
    console.log(Object.keys(obj))  //['a', 'b', 'c']
</script>

2、Object.values()

The method is used to get all the property values ​​of the object itself
and returns an array composed of property values

<script>
    var obj = {
      
       a: 1, b: 2, c: 3 }
    console.log(Object.values(obj))  //[1, 2, 3]
</script>

3、Object.defineProperty()

It is used to define new attributes or modify original attributes.
There are three parameters: ①obj: required. Target object; ②prop: required. The name of the attribute needs to be defined or modified; ③descriptor: required. properties possessed by the target attribute

descriptor以{}书写
value:设置属性的值,默认为underfined
writable:值是否可以重写  默认为false
enumerable:属性是否可以被枚举 默认为false
configurable:属性是否可以被删除或是否可以再次修改  默认为false
<script>
    var obj = {
      
       name: 'XiaoMing', sex: '男' }
    Object.defineProperty(obj, "name", {
      
      
        configurable: false,  //设置之后,name属性就不能删除了
    })
    delete obj.name;
    console.log(obj); //{name: 'XiaoMing', sex: '男'}

    Object.defineProperty(obj, "age", {
      
      
        writable: false, //设置age只读,无法修改
        value: 18, //设置obj.name = 18
    })
    obj.age = 20;
    console.log(obj.age); //18

    Object.defineProperty(obj, "age", {
      
      
        enumerable: false  //设置不能被枚举,无法通过ojb.age获取打印
    })
    for (var i in obj) {
      
      
        console.log(i + "的值是" + obj[i]); //通过循环获取obj能枚举的属性,打印
    } 
</script>

insert image description here

Guess you like

Origin blog.csdn.net/hello_woman/article/details/129317033